three.jsバッファーは既にインターリーブされています

Question

サーバー上に頂点と法線が1つの配列にインターリーブされたジオメトリが作成されています。デバッグが容易なので色を試しました。私が見つけることができる唯一の例はwebgl_buffergeometry_instancing_interleaved_dynamic.htmlです。

ここでは例に基づいて試したことがあります。その例が、それはまたInstancedBufferGeometryを使用していますので、少し異なっているが、これはその例の私の理解に基づいています。私は、この行をコメントアウトした場合

 <script id="cratevertexShader" type="x-shader/x-vertex"> 
     attribute  highp  vec3 inVertex; 
     attribute  highp  vec3 inColor; 
     varying  mediump vec4 Color;      

     void main() 
     { 
      float df; 
      float opac; 

      gl_Position = projectionMatrix * modelViewMatrix * vec4(inVertex, 1.0); 
      Color = vec4(inColor, 1.0); 
     } 
    </script> 

    <script id="cratefragmentShader" type="x-shader/x-fragment"> 
     varying mediump vec4 Color; 
     void main() 
     { 
      gl_FragColor = Color; 
      gl_FragColor.w = Color.w; 
     } 
    </script> 

：ここ

  function exp_crate() { 
      var geometry = new THREE.BufferGeometry(); 

      // per mesh data x,y,z,r,g,b for 6-element stride 
      var vertexBuffer = new THREE.InterleavedBuffer(new Float32Array([ 
       // Front 
       -1000, 1000, 1000, 0, 0, 1, 
       1000, 1000, 1000, 0, 1, 0, 
       -1000, -1000, 1000, 1, 0, 1, 
       1000, -1000, 1000, 0, 1, 1, 
       // Back 
       1000, 1000, -1000, 0, 0, 1, 
       -1000, 1000, -1000, 0, 0, 1, 
       1000, -1000, -1000, 0, 0, 1, 
       -1000, -1000, -1000, 0, 0, 1, 
       // Left 
       -1000, 1000, -1000, 0, 0, 1, 
       -1000, 1000, 1000, 0, 0, 1, 
       -1000, -1000, -1000, 0, 0, 1, 
       -1000, -1000, 1000, 0, 0, 1, 
       // Right 
       1000, 1000, 1000, 0, 0, 1, 
       1000, 1000, -1000, 0, 0, 1, 
       1000, -1000, 1000, 0, 0, 1, 
       1000, -1000, -1000, 0, 0, 1, 
       // Top 
       -1000, 1000, 1000, 0, 0, 1, 
       1000, 1000, 1000, 0, 0, 1, 
       -1000, 1000, -1000, 0, 0, 1, 
       1000, 1000, -1000, 0, 0, 1, 
       // Bottom 
       1000, -1000, 1000, 0, 0, 1, 
       -1000, -1000, 1000, 0, 0, 1, 
       1000, -1000, -1000, 0, 0, 1, 
       -1000, -1000, -1000, 0, 0, 1, 
      ]), 6); 

      // Use vertexBuffer, starting at offset 0, 3 items in position attribute 
      var positions = new THREE.InterleavedBufferAttribute(vertexBuffer, 3, 0); 
      geometry.addAttribute('inVertex', positions); 
      // Use vertexBuffer, starting at offset 4, 3 items in color attribute 
      var colors = new THREE.InterleavedBufferAttribute(vertexBuffer, 3, 4); 
      geometry.addAttribute('inColor', colors); 

      var indices = new Uint16Array([ 
       0, 1, 2, 
       2, 1, 3, 
       4, 5, 6, 
       6, 5, 7, 
       8, 9, 10, 
       10, 9, 11, 
       12, 13, 14, 
       14, 13, 15, 
       16, 17, 18, 
       18, 17, 19, 
       20, 21, 22, 
       22, 21, 23 
      ]); 

      geometry.setIndex(new THREE.BufferAttribute(indices, 1)); 


      docvShader = document.getElementById('cratevertexShader').textContent; 
      docfShader = document.getElementById('cratefragmentShader').textContent; 

      var material = new THREE.ShaderMaterial({ 
       uniforms: [], 
       vertexShader: docvShader, 
       fragmentShader: docfShader 
      }); 
      material.side= THREE.DoubleSide; 
      var mesh = new THREE.Mesh(geometry, material); 
      scene.add(mesh); 
     } 

はシェーダです

 geometry.addAttribute('inColor', colors); 

黒いキューブがあります。私はその行を残す場合、私は次のGLエラーを取得します：

GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 1 

何も表示されません。誰も提案を提供できますか？

Answer 1

2番目の属性のオフセットが正しくありません。

// Use vertexBuffer, starting at offset 0, 3 items in position attribute 
var positions = new THREE.InterleavedBufferAttribute(vertexBuffer, 3, 0); 
geometry.addAttribute('inVertex', positions); 

// Use vertexBuffer, starting at offset 3, 3 items in color attribute 
var colors = new THREE.InterleavedBufferAttribute(vertexBuffer, 3, 3); 
geometry.addAttribute('inColor', colors); 

three.js r.85