Проблема с использованием объекта атрибутов в RawShaderMaterial

Question

Мне трудно создавать свой собственный материал, используя ThreeJs RawShaderMaterial учебный класс. В настоящее время у меня есть:

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