“ GL_INVALID_OPERATION：缓冲区大小不足”在可变数量的渲染调用之后

编程问答 2022-08-11

问题描述

我正在使用MapboxGL将geojson作为多边形渲染到地图上。页面可以正确加载和渲染，但是当我四处移动地图时，经过一定数量的渲染调用（通常在30-100之间），多边形消失了，我会收到此错误。

GL_INVALID_OPERATION：缓冲区大小不足。 （Chrome）

WebGL警告：drawElementsInstanced：索引缓冲区太小。 （FF）

我已经设法将其缩小到一个问题

gl.drawElements(gl.TRIANGLES,tResult.triangleIndices.length,gl.UNSIGNED_SHORT,0);

使用Spector.js扩展名，我发现drawElements方法中的第二个参数（计数）会随每次调用而变化（登录时tResult.triangleIndices.length不会不发生变化）。这可能是一个红色鲱鱼，因为它可用于30-100个渲染。

我已经尝试将数据类型的各种组合用于bufferData（）和drawElements（）中的缓冲区类型，但是没有运气。

我尝试使用较低的多边形网格。

我尝试过在每次渲染过程中调用各种gl.clear方法。

这可能无关紧要，但它是一个vue-cli应用程序，因此它正在从npm加载库。

以下是相关代码：

初始化：

                    [...setting up shaders and stuff]
                    // link the two shaders into a WebGL program
                    this.program = gl.createProgram();
                    gl.attachShader(this.program,vertexShader);
                    gl.attachShader(this.program,fragmentShader);
                    gl.linkProgram(this.program);

                    this.aPos = gl.getAttribLocation(this.program,'a_pos');
                    gl.clearColor(1.0,1.0,1.0);  // Clear to black,fully opaque

                    // create and initialize a WebGLBuffer to store vertex and color data
                    this.buffer = gl.createBuffer();
                    gl.bindBuffer(gl.ARRAY_BUFFER,this.buffer);
                    gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(tResult.triangleLocations),gl.STATIC_DRAW);

                    this.verticesIndexBuffer = gl.createBuffer();
                    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,this.verticesIndexBuffer);
                    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,new Uint16Array(tResult.triangleIndices),gl.STATIC_DRAW); 
                    gl.clear(gl.COLOR_BUFFER_BIT);
                    gl.enable(gl.CULL_FACE);
                    gl.cullFace(gl.BACK);

渲染：

render: function (gl,matrix) {

                    gl.useProgram(this.program);
                    gl.uniformMatrix4fv(
                        gl.getUniformLocation(this.program,'u_matrix'),false,matrix
                    );

                    gl.bindBuffer(gl.ARRAY_BUFFER,this.buffer);
                    gl.enableVertexAttribArray(this.aPos);
                    gl.vertexAttribPointer(this.aPos,2,gl.FLOAT,0);
                    gl.drawElements(gl.TRIANGLES,0);
                    
                }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

3djavascriptmapbox-gl-jswebgl2