WebGL GL ERROR：GL_INVALID_OPERATION：glDrawElements：属性1の範囲外の頂点にアクセスしようとしています

Question

THREE.js rev 49に基づいたいくつかのカスタムシェイダーに基づくコードで、既存のバグを修正しようとしています。

私はTotal WebGL newbですので、他の回答の頭や尻尾を作ることができませんでした。私は何を探すべきかについてのどんなヒントでも非常に感謝しています！ :)コードの最終結果は、半透明のボックスワイヤフレームを描き、半透明のテクスチャで面をペイントすることです。

特定のエラーは、次のとおりです。

[.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);に問題をトレースします。ここで

は、呼び出し元のコードの抜粋である：あなたの助けのための

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

ありがとう：ここ

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 

は、関連するシェーダです！

Answer 1

WebGLでは、データ、通常は頂点位置、法線、色、テクスチャ座標でいっぱいのバッファを設定します。 WebGLにそれらのバッファで何かを描画するように依頼します。 gl.drawArraysまたはgl.drawElementsで聞くことができます。 は、どの頂点を使用するかを決定するために、インデックスで満たされた別のバッファを使用します。

エラーが発生した場合、WebGLに設定したバッファよりも多くの要素を描画またはアクセスするように指示されました。言い換えると、3つの頂点だけのデータを提供しても、gl.drawArraysを呼び出すと4つの頂点を描画するように頼むと、そのエラーが発生します。同様に、3つの頂点分のデータしか提供しないが、2より大きい頂点にアクセスする設定インデックスを作成すると、そのエラーが発生します。 ＃0、＃1、＃2の3つの頂点があるので、インデックスが2より大きい場合は、WebGLに指定した3つの頂点の範囲外のものにアクセスするように求めています。

したがって、データを確認してください。範囲外の指標ですか？あなたのバッファの1つは他のバッファより短くなっていますか？など。

Answer 2

私は徹底のためにこれを追加している - 私は[「法線マップ」]

修正が簡単に呼んでいたcomputeTangentsをインポートOBJモデルを使用していたとTHREE.ShaderLib経由シェーダを作成し、このエラーを得ていました（）メッシュのジオメトリオブジェクト上の：

model.geometry.computeTangents（）;

はhere