Add hit detection support to WebGL vector layer

[gberaudo]

Add hit detection to the WebGL vector layer renderer.
This is similar to the points layer:

• when hit detection is enabled (the default), compute a color for each feature and add it to the vertex buffer;
• render the frame twice: for the main framebuffer and for the hit detection buffer;
• use the hit detection buffer to implement the forEachFeatureAtCoordinate method.

[github-actions]

📦 Preview the website for this branch here: https://deploy-preview-15120--ol-site.netlify.app/.

[jahow]

Also for firefox another workaround could be:

--- a/src/ol/render/webgl/VectorStyleRenderer.js
+++ b/src/ol/render/webgl/VectorStyleRenderer.js
@@ -504,6 +504,9 @@ class VectorStyleRenderer {
     frameState,
     preRenderCallback
   ) {
+    if (indicesBuffer.getArray().length === 0) {
+      return;
+    }
     this.helper_.useProgram(program, frameState);
     this.helper_.bindBuffer(verticesBuffer);
     this.helper_.bindBuffer(indicesBuffer);

Here we're simply skipping rendering if no primitives are found in the buffer. This way we don't add complexity to the ShaderBuilder API.

[gberaudo]

Also for firefox another workaround could be:

--- a/src/ol/render/webgl/VectorStyleRenderer.js
+++ b/src/ol/render/webgl/VectorStyleRenderer.js
@@ -504,6 +504,9 @@ class VectorStyleRenderer {
     frameState,
     preRenderCallback
   ) {
+    if (indicesBuffer.getArray().length === 0) {
+      return;
+    }
     this.helper_.useProgram(program, frameState);
     this.helper_.bindBuffer(verticesBuffer);
     this.helper_.bindBuffer(indicesBuffer);

Here we're simply skipping rendering if no primitives are found in the buffer. This way we don't add complexity to the ShaderBuilder API.

Thanks, this looks like the proper thing to do.
I commited it and updated the tests (it was actually missing a few features in order to render correctly).

[jahow]

This looks perfect now, thanks a lot!!

[guldbran]

Excellent news, this is a crucial feature for our project @gberaudo 🙌🏻. Looking forward to 8.2 now @tschaub - keep up the good work!

[tschaub]

@gberaudo - sorry to be the bearer of bad news, but I'm not seeing any feature info displayed on this example https://deploy-preview-15120--ol-site.netlify.app/en/latest/examples/webgl-vector-layer.html on Chrome 116 or Safari 16.4 on a Mac (macOS 13, M1 chip). Has anybody else seen it working on a Mac?

[ahocevar]

Unfortunately I'm getting the same results as @tschaub .

[jahow]

Could reproduce as well on iOS systems only, no errors in the console. The hit detection render target looks completely empty. I suspect this line to make things behave inconsistently:

openlayers/src/ol/render/webgl/renderinstructions.js

Line 24 in 5075214

renderInstructions[currentIndex + shift++] = value[0] || value;

Here the value equals typically [0, 0, 0, 0.12345] for a hit color with a low id, so value[0] is falsy. This line then assigns the whole value to a slot in the Float32Array, which results in a NaN value. The fact that it works on certain systems is actually surprising. @gberaudo I hope that helps!