Question

我有一个简单的程序，我试图将一个固定值数组（本质上是一个查找表）传递给着色器。调用代码如下所示：

    var displacement = [];

    for ( var y=0; y<46; y++ ) {
        for ( var x=0; x<46; x++ ) {
            var sVal = Math.sin((((x/5.0)*40.0)/360.0)*Math.PI*2.0);
            var index = x + 46 * y;
            displacement[index] =  sVal;
        }
    }

    planeGeometry.addAttribute( 'displacement', new THREE.BufferAttribute( displacement, 1 ) );

    var shaderMaterial = new THREE.ShaderMaterial({
        uniforms:       uniforms,   // pass the "uniforms" vars
        //attributes:     attributes,   // and the attributes
        side:THREE.DoubleSide,      // want the texture on both sides of the wave
        vertexShader:   vs,         // pointers to the shaders
        fragmentShader: fs
    });

着色器看起来像这样：

<script id="vertexShader" type="x-shader/x-fragment">
        varying vec2        vUv;
        attribute float     displacement;
        uniform float       amplitude;
        void main() {
            vUv = uv;
            vec3 newPosition = position + normal * vec3(displacement * amplitude);
            gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
        }
    </script>

在r72之前，我将数组作为着色器材质的构造函数中的属性传递，但现在它必须作为bufferGeometry属性传递。旧的方式有效，但现在我得到了

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

我已经尝试了很多方法来做到这一点，但它们都不起作用。有谁知道这样做的正确方法？

Answer 1

您需要为位移数组使用类型数组，而不是JS数组。

var displacement = new Float32Array( size );

three.js r.75

在three.js中将数组传递给着色器的正确方法

1 个答案: