javascript - 在 RawShaderMaterial 中使用属性对象时出现问题

Question

我很难使用 Threejs 的 RawShaderMaterial 类创建自己的 Material 。我目前有:

var geometry = new THREE.RingGeometry(/* params */);
//geometry.vertices.length = 441;
var vertexFooAttribs = [/* 441 instances of THREE.Vector3() */];
var material = new THREE.RawShaderMaterial({
    uniforms: THREE.UniformsUtils.merge([
        THREE.UniformsLib["lights"]
    ]),
    attributes: {
        foo: {type: "v3", value: vertexFooAttribs}
    },
    vertexShader: document.getElementById("vshader").text,
    fragmentShader: document.getElementById("fshader").text,
    side: THREE.BackSide,
    lights: true,
    vertexColors: THREE.VertexColors
});

其中vshader是:

<script id="vshader" type="shader">
uniform mat4 modelMatrix;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
uniform mat4 viewMatrix;
uniform mat3 normalMatrix;
uniform vec3 cameraPosition;
uniform vec3 pointLightPosition;
uniform vec3 color;

attribute vec3 position;
attribute vec3 normal;
attribute vec3 foo;

varying vec3 vColor;

void main() {
    //stuff happens here, which involves 'foo' attribute...
    vColor = resultOfComputation;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
</script>

而fshader很简单:

<script id="fshader" type="shader">
precision highp float;

varying vec3 vColor;

void main(void) {
    gl_FragColor = vec4(vColor, 1.0);
}
</script>

但是当我运行它时，它输出(幸运的是，256次，允许的最大值)以下错误:

[.WebGLRenderingContext]GL ERROR :GL_INVALID_OPERATION : glDrawElements:
attempt to access out of range vertices in attribute 2

我假设属性 2(如果从 0 开始计数)正是我的 foo 属性。
我认为我正确地遵循了 Three.js 的文档，但我无法查明错误的根源。另外，我很抱歉目前无法提供 jsfiddle。只是想，既然我是一个 Three.js/WebGL 菜鸟，也许有人一眼就能发现这个问题。干杯。

Answer 1

我没有使用RawShaderMaterial，只使用ShaderMaterial。我首先要确保您不想使用 ShaderMaterial。从下面的示例来看，RawShaderMaterial 似乎更适合特殊的缓冲几何体情况，并且需要您做额外的工作，例如在几何体中设置位置属性。我猜 ShaderMaterial 通常是让您使用自定义着色器的更快方法。

请参阅使用 ShaderMaterial 的自定义属性的示例，它看起来与您的代码很接近。 https://github.com/mrdoob/three.js/blob/master/examples/webgl_custom_attributes.html

请参阅此处的 RawShaderMaterial 示例，注意创建了位置属性。 https://github.com/mrdoob/three.js/blob/master/examples/webgl_buffergeometry_rawshader.html