WebGL GL 错误：GL_INVALID_OPERATION：glDrawElements：尝试访问属性 1 中超出范围的顶点答案

【问题标题】：WebGL GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 1WebGL GL 错误：GL_INVALID_OPERATION：glDrawElements：尝试访问属性 1 中超出范围的顶点
【发布时间】：2014-02-07 15:19:36
【问题描述】：

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

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

具体错误是：

[.WebGLRenderingContext]GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 1

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

这是调用代码的sn-p：

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")

感谢您的帮助！

【问题讨论】：

标签： three.js webgl

【解决方案1】：

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

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

所以，请检查您的数据。您的索引是否超出范围？您的缓冲区之一是否比其他缓冲区短？等等。

【讨论】：

【解决方案2】：

我添加这个是为了彻底 - 我使用的是导入的 OBJ 模型，并且在通过 THREE.ShaderLib["normalmap"] 创建着色器时遇到此错误

修复只是在网格的几何对象上调用 computeTangents()：

model.geometry.computeTangents();

将答案存档here

【讨论】：

我创建了一个球体：var geometry = new THREE.SphereGeometry(10,128,128);并在尝试应用法线/位移着色器时出现此错误。你的建议对我有帮助！
作为记录，computeTangents 方法已被移除。