Question

我在服务器上创建了几何图形，其中顶点和法线在一个数组中交错。我也试过颜色，因为它更容易调试。我能找到的唯一例子是webgl_buffergeometry_instancing_interleaved_dynamic.html。

以下是我根据示例尝试的内容。这个例子有点不同，因为它也使用了InstancedBufferGeometry，但这是基于我对这个例子的理解：

            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);
        }

以下是着色器：

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

如果我注释掉这一行：

        geometry.addAttribute('inColor', colors);

我看到一个黑色的立方体。如果我离开该行，我会收到以下GL错误：

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

根本没有显示任何内容。有人可以提出建议吗？

Answer 1

第二个属性的偏移量不正确。

// 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

three.js缓冲区已经交错

1 个答案: