Question

我有一个Three.js场景，其中包含具有immediateRenderCallback方法的对象。我还创建了一个自定义着色器，我正在尝试使用MeshShaderMaterial（myShader）。

着色器材质在基本Three.js对象上没有警告的情况下工作。常规材质在我的自定义immediateRenderCallback对象上正常工作。

当我在自定义的immediateRenderCallback对象上使用它时，着色器材质会抛出警告。这些是警告：

    WebGL: INVALID_VALUE: enableVertexAttribArray: index out of range
    WebGL: INVALID_VALUE: vertexAttribPointer: index out of range

现在，尽管有这些警告，一切似乎都运转正常。对象出现，着色器正常工作，但我不明白为什么会出现这些警告以及是否可以安全地忽略它们。

这是我的immediateRenderCallback函数：

THREE.Segment.prototype.immediateRenderCallback = function ( program, _gl, _frustum )
{
    if ( ! this.__webglPositionNormalBuffer ) this.__webglPositionNormalBuffer = _gl.createBuffer();
    if ( ! this.__webglStripBuffer ) this.__webglStripBuffer = _gl.createBuffer();

    _gl.bindBuffer( _gl.ARRAY_BUFFER, this.__webglPositionNormalBuffer );
    _gl.bufferData( _gl.ARRAY_BUFFER, this.interleavedData, _gl.STATIC_DRAW );
    _gl.enableVertexAttribArray( program.attributes.position );
    _gl.enableVertexAttribArray( program.attributes.normal );
    _gl.vertexAttribPointer( program.attributes.position, 3, _gl.FLOAT, false, 24, 0 );
    _gl.vertexAttribPointer( program.attributes.normal, 3, _gl.FLOAT, false, 24, 12 );

    _gl.bindBuffer( _gl.ELEMENT_ARRAY_BUFFER, this.__webglStripBuffer );
    _gl.bufferData( _gl.ELEMENT_ARRAY_BUFFER, this.stripData, _gl.STATIC_DRAW );

    for(var i=0; i<this.stripOffsets.length; i+=2)
    {
        var size = this.stripOffsets[i+1];
        var offset = this.stripOffsets[i]*2;
        _gl.drawElements( _gl.TRIANGLE_STRIP, size, _gl.UNSIGNED_SHORT, offset);
    }
}

这是我的着色器：

'depthPacked': {
    uniforms: {},

    vertexShader: [
        "void main() {",
            "vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",
            "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, 0.0 );",
            "float power = floor(log2(depth));",
            "float mantissa = (power + 127.0) / 256.0;",
            "vec4 res = (depth/exp2(power)) * bit_shift;",
            "res = fract(floor(res) / 256.0);",
            "res.w = mantissa;",
            "return res;",
        "}",
        "void main() {",
            "gl_FragData[0] = pack_depth( gl_FragCoord.z );",
        "}"
    ].join("\n")
}

谢谢！

Answer 1

我从这里的相关问题中找到了这个：WebGL: glsl attributes issue, getProgramParameter returns wrong number of attributes

我的自定义immediateRenderCallback会为属性position和normal分配值，这些属性是Three.js中的默认属性。然而，因为我的顶点着色器没有使用normal属性，GLSL编译器优化了normal属性声明，导致immediateRenderCallback抱怨，因为没有{{1它的属性将数据分配给！

因为我在同一个几何体上使用两个不同的着色器（两次通过）而另一个（phong）着色器需要正常信息，所以在深度着色器中我只是将normal属性值指定为变化的顶点着色器，以防止它被优化。

使用MeshShaderMaterial的Three.js immediateRenderCallback抛出＆＃34;索引超出范围＆＃34;警告

1 个答案: