Disabled hit detection WebGL Renderer problem #16405
Description
Describe the bug
When enabling a layer containing polygons and any WebGL layer containing points, a WebGL error occurs:
[.WebGL-0x77b403e75b00] GL_INVALID_OPERATION: Error: 0x00000502, in ....\third_party\angle\src\libANGLE\renderer\d3d\VertexDataManager.cpp, rx::VertexDataManager::reserveSpaceForAttrib:523. Internal error: 0x00000502: Vertex buffer is not big enough for the draw call.
The issue also arises when enabling a polygon layer 'Aerodrome hubs' styled as 'tma' along with any other polygon layer.
To Reproduce
Steps to reproduce the behavior:
- Create an OpenLayers map with WebGL layers and multiple geometries.
export class WebGLLayer extends Layer {
constructor(options) {
super(options);
}
createRenderer() {
const style = getLayerStyle(this.get('layerType'));
this.set('style', style);
return new WebGLVectorLayerRenderer(this, {
className: this.getClassName(),
style,
disableHitDetection: true
});
}
}
- Add a polygon layer with the following style:
fir: {
'fill-color': 'rgba(0,175,0,0.3)',
'stroke-color': ['match', ['get', 'highlighted'], 1,
'rgba(255, 0, 0, 1)',
'rgba(0,175,0,0.6)'
],
'stroke-width': 2,
}
- Add point layers styled as:
landingpad: {
'circle-radius': [
'interpolate',
['linear'],
['zoom'],
4, 4,
15, 15,
],
'circle-fill-color': ['match', ['get', 'highlighted'], 1,
'rgba(255,255,0,1)',
'rgba(94,220,31,0.7)'
],
'circle-opacity': 0.9,
},
pod: {
'shape-points': 3,
'shape-radius': [
'interpolate',
['linear'],
['zoom'],
4, 4,
15, 15,
],
'shape-fill-color': ['match', ['get', 'highlighted'], 1,
'rgba(255,255,0,1)',
'rgba(255,255,255,1)'
],
'shape-stroke-color': 'rgba(0,0,0,1)',
'shape-stroke-width': 1,
'shape-rotate-with-view': false,
},
aerodrome: {
'circle-fill-color': ['match', ['get', 'highlighted'], 1,
'rgba(255,255,0,1)',
'rgba(255, 0, 0, 0.7)'
],
'circle-radius': [
'interpolate',
['linear'],
['zoom'],
4, 4,
15, 15,
],
'circle-opacity': 0.9,
}
- Alternatively, use multiple polygon layers styled like this:
tma: {
'fill-color': 'rgba(255,255,0,0.3)',
'stroke-color': ['match', ['get', 'highlighted'], 1,
'rgba(255, 0, 0, 1)',
'rgba(0,0,136,1)'
],
'stroke-width': 2,
},
ra: {
'fill-color': 'rgba(208,247,228,0.3)',
'stroke-color': ['match', ['get', 'highlighted'], 1,
'rgba(255, 0, 0, 1)',
'rgba(1,1,1,1)'
],
'stroke-width': 2,
}
Observe the WebGL error in the console during rendering (video shows webgl working process with disabled hitDetection).
bandicam.2024-11-25.14-38-11-404.mp4
Expected behavior
The map should render all layers and geometries without errors, regardless of the combination of polygon and point layers (video shows webgl working process with enabled hitDetection).
bandicam.2024-11-25.14-41-29-054.mp4
Environment
OpenLayers Version: 10.2.1
Browser: Chrome 131.0.6778.86
OS: Windows 11
Additional
Preliminary observations suggest that disabling hitDetection for WebGL layers significantly improves the smoothness of map panning and interactions. However, this configuration appears to contribute to the occurrence of the described WebGL error when multiple geometry types are rendered simultaneously.