General confusion about rendering vectors with WebGL using openlayers version 3.14

[rwlnd]

Hello, I've been working with openlayers3 for the past weeks now as I was hired at a company that is on the verge of switching from openlayers2 to openlayers3, because of performance limitations that seem to occur when rendering 50.000 vector features, mostly Points and Lines and a few Polygons. The panning and zooming gets very sluggish.

I'm currently contributing to a POC to see if the issues can be resolved by making the upgrade to openlayers3.

One of the possible points of improvements that I am currently investigating is to also use WebGL as a rendered, to speed up the rendering process. For now, I'm researching what the current implementation is for openlayers but seem to come across many confusing and contradicting sources of information on the web.

The main issue is that I cannot tell for sure that rendering lines and points is not supported by openlayers3. My advice would initially be to not use the WebGL for now and use the canvas rendering, because we need to draw Points, Lines and Polygons. Also, wee need interactivity when hovering these features. However, every google marathon seems to end up at the following article : http://www.camptocamp.com/en/actualite/openlayers-3-towards-drawing-lines-and-polygons-with-webgl/. Which makes it kinda hard to explain that it is not possible to render lines and polygons using WebGl.

One of the things I found very confusing about the openlayers documentation in general is that there are a lot of examples still out there that are using older versions of openlayers (in this particular case, v3.4) that are no longer relevant in newer (currently 3.14.2) versions because they made use of experimental features that haven't made it to later versions.

To come to a conclusion,

• Can someone please clarify the current position and capabilities of WebGL in openlayers 3.14.
• Is it possible to render lines and polygons without losing the interactive capabilities?
• If it's not possible, is there a roadmap for further WebGL integration? Or will this never be implemented because of performance/WebGL limitations?

Thank you very much for your time reading this. Would really appreciate it if someone could clarify all this and will be happy to help to take away some of the confusion that exists on the web myself.

Greetings,
stvn

[probins]

see discussion in #3476

[ahocevar]

Can someone please clarify the current position and capabilities of WebGL in openlayers 3.14.

The webgl renderer supports rendering points. No lines and polygons.

Is it possible to render lines and polygons without losing the interactive capabilities?

The standard canvas renderer gives you support for rendering lines and polygons with full interactivity. If you want to render 50000+ features, you should consider using ol.layer.Image with an ol.source.ImageVector instead of an ol.layer.Vector with an ol.source.Vector. That way, vectors are not re-rendered with every frame during zooming and panning. And you still have full interactivity.

[rwlnd]

hi @ahocevar , thank you for your quick and helpful reply. I came across an example that used ol.layer.Image with ol.source.ImageVector as a workaround to use WebGL rendering but it came with a big warning that you lose all interactivity like applying a different style to a feature on hover.

This was the code:

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'
    })
],
[…]

I gave this example a try but ended up with an empty map and didn't experiment further.
Is this the solution you are suggesting and has the loss of interactivity been solved in current versions?
Could you please point me to a working example for openlayers 3.14 to achieve your suggestion?
Thanks a lot.

[ahocevar]

See http://openlayers.org/en/v3.14.2/examples/image-vector-layer.html, with full interactivity on hover.

[rwlnd]

@ahocevar , not wanting to drift off too far from the initial WebGL issue but on that example I seem to be unable to render any point on my local solution. I found that it is best to run sample projects on a test server, so I am doing that. I tried pointing to a local file (../data.js) or pointing to an external (http://...) file but I just can't seem to render anything. Also, the api documentation seems to lack property information on the ol.source.Vector page.

Also, is it supported to just add an empty source and add the features manually later on using

var formatter = new ol.format.GeoJSON();
var features =formatter.readFeatures(someInMemoryData);
vectorLayer.getSource().addFeatures(features);

?

Thanks

[ahocevar]

What property information are you missing in the ol.source.Vector documentation? Your snippet for adding vector features later will work if your GeoJSON data is in the view projection. Otherwise you'll have to do

var features = formatter.readFeatures(someInMemoryData,
    {featureProjection: map.getView().getProjection()});