WebGL GL 错误:GL_INVALID_OPERATION:glDrawElements:尝试访问属性 1 中超出范围的顶点 [英] WebGL GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 1

问题描述

我正在尝试使用一些自定义着色器修复一些基于 THREE.js rev 49 的代码中的一个预先存在的错误.

I'm attempting to fix a pre-existing bug in some code that is based on THREE.js rev 49 with some custom shaders.

我是一个完全的 WebGL 新手，所以我无法对其他答案做出太多正面或反面，因为他们似乎假设的知识比我多得多.我会非常感激甚至任何关于寻找什么的提示！:) 代码的最终结果是绘制一个半透明的框线框，并用半透明的纹理绘制面.

I'm a total WebGL newb, so I haven't been able to make much heads or tails of other answers since they seemed to assume a lot more knowledge than I had. I would be super appreciative of even any hints as to what to look for! :) The end result of the code is to draw a translucent box wireframe and paint the faces with translucent textures.

具体的错误是:

[.WebGLRenderingContext]GL 错误:GL_INVALID_OPERATION:glDrawElements:尝试访问属性 1 中超出范围的顶点

我将问题追溯到 THREE.WebGLRenderer.renderBuffer 中的特定 _gl.drawElements( _gl.TRIANGLES, geometryGroup.__webglFaceCount, _gl.UNSIGNED_SHORT, 0 );.

I traced the issue to a particular _gl.drawElements( _gl.TRIANGLES, geometryGroup.__webglFaceCount, _gl.UNSIGNED_SHORT, 0 ); in THREE.WebGLRenderer.renderBuffer.

这是调用代码的片段:

scene.overrideMaterial = depthMaterial; // shaders below
var ctx = renderer.getContext(); // renderer is a THREE.WebGLRenderer
ctx.disable(ctx.BLEND);
// renderTarget is a THREE.WebGLRenderTarget, _camera, scene is obvious
renderer.render(scene, _camera, renderTarget, true); // error occurs here

以下是相关的着色器:

    uniforms: {},

    vertexShader: [
        "varying vec3 vNormal;",

        "void main() {",

            "vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",
            "vNormal = normalMatrix * normal;",

            "gl_Position = projectionMatrix * mvPosition;",

        "}"
    ].join("\n"),

    fragmentShader: [
        "vec4 pack_depth( const in highp float depth ) {",

            "const highp vec4 bit_shift = vec4( 256.0, 256.0*256.0, 256.0*256.0*256.0, 256.0*256.0*256.0*256.0 );",
            "vec4 res = depth * bit_shift;",
            "res.x = min(res.x + 1.0, 255.0);",
            "res = fract(floor(res) / 256.0);",
            "return res;",

        "}",

        "void main() {",
            "gl_FragData[0] = pack_depth( gl_FragCoord.z );",
        "}"
    ].join("\n")

感谢您的帮助！

推荐答案

在 WebGL 中，您可以设置充满数据的缓冲区，通常是顶点位置、法线、颜色、纹理坐标.然后你让 WebGL 用这些缓冲区绘制一些东西.您可以使用 gl.drawArrays 或 gl.drawElements 询问.gl.drawElements 使用另一个充满索引的缓冲区来决定使用哪些顶点.

In WebGL you set up buffers full of data, usually vertex positions, normals, colors, texture coordinates. You then ask WebGL to draw something with those buffers. You can ask with gl.drawArrays or with gl.drawElements. gl.drawElements uses another buffer full of indices to decide which vertices to use.

您得到的错误意味着您要求 WebGL 绘制或访问比您设置的缓冲区更多的元素.换句话说，如果您仅提供 3 个顶点的数据，但在调用 gl.drawArrays 时要求它绘制 4 个顶点，则会出现该错误.同样，如果您只提供 3 个顶点的数据，然后设置访问任何大于 2 的顶点的索引，您将收到该错误.您有 3 个顶点编号为 #0、#1 和 #2，因此如果您的任何索引大于 2，您就要求 WebGL 访问超出您提供的 3 个顶点范围的内容.

The error you got means you asked WebGL to draw or access more elements than the buffers you setup. In other words, if you provide only 3 vertices worth of data but you ask it to draw 4 vertices when you call gl.drawArrays you'll get that error. Similarly if you only provide 3 vertices worth of data but then setup indices that access any vertex greater than 2 you'll get that error. You've got 3 vertices numbered #0, #1, and #2 so if any of your indices are greater than 2 you're asking WebGL to access something out of range of the 3 vertices you provided.

因此，请检查您的数据.您的指数是否超出范围?您的缓冲区之一是否比其他缓冲区短?等等.

So, check your data. Are you indices out of range? Is one of your buffers shorter than the others? etc..

这篇关于WebGL GL 错误:GL_INVALID_OPERATION:glDrawElements:尝试访问属性 1 中超出范围的顶点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！