Issue using attributes object in RawShaderMaterial

Question

I am having a hard time creating my own material using threejs' RawShaderMaterial class. I currently have:

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

Where vshader is:

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

And fshader is simply:

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

varying vec3 vColor;

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

But when I run it, it outputs (256 times, the maximum allowed, fortunately) the following error:

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

I am assuming attribute 2, if counting starts at 0, is precisely my foo attribute.
I think I followed three.js' documentation correctly but I can't pinpoint the origin of my error. Also, I apologize for not being able to provide a jsfiddle as of now. Just thought that since I'm such a Three.js/WebGL noob maybe someone would find the issue at a glance. Cheers.

Answer 1

I have not used RawShaderMaterial, only ShaderMaterial. I would first make sure that you don't want to use ShaderMaterial instead. From the example below, it looks like RawShaderMaterial is more for special buffered geometry cases and requires you to do extra work, like setup position attributes in the geometry. I am guessing that ShaderMaterial is generally a quicker way to get you going with a custom shader.

See this example using a custom attribute with ShaderMaterial, which looks close to your code. https://github.com/mrdoob/three.js/blob/master/examples/webgl_custom_attributes.html

And see the RawShaderMaterial example here, noting that position attributes are created. https://github.com/mrdoob/three.js/blob/master/examples/webgl_buffergeometry_rawshader.html