In the previous example, we stated that OpenLayers 3 cannot render lines and polygons with the WebGL renderer. However, there is a workaround, which we will use in this example, called ch07_webgl_vector.

Let's add the country boundaries layer with a little twist to our map:

var map = new ol.Map({
    […]
        new ol.layer.Image({
            source: new ol.source.ImageVector({
                source: new ol.source.Vector({
                    format: new ol.format.GeoJSON({
                        defaultDataProjection: 'EPSG:4326'
                    }),
                    url: '../../res/world_countries.geojson',
                    attributions: [
                        new ol.Attribution({
                            html: 'World Countries © Natural Earth'
                        })
                    ]
                })
            }),
            name: 'World Countries'
        })
    ],
[…]

As you can see, we converted our vector layer to an image layer. The ol.source.ImageVector class takes a legal vector source as input and renders it as a set of images. The class creates internal canvas elements for the provided or default resolutions, draws the underlying vector data on them, and exports their content as images. From there, the vector layer can be used and rendered as a regular image layer. This way, the WebGL renderer can easily handle the underlying shapes without knowing how to render lines and polygons:

With this little trick, you can use any shape with the WebGL renderer. However, there are two things you should note. First, converting a vector layer to an image layer does not increase the application's performance noticeably when used with big datasets. Furthermore, the line and polygon-based features, like the draw interaction, will still not work with WebGL. If you need to use them, you have to reinvent the wheel and implement them in such a way that they are forced to use an image vector source.