I am struggling to generate my own content with threejs' RawShaderMaterial class.
Here is what I have so far:
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
});
The code for vshader is as follows:
<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() {
//operations involving 'foo' attribute...
vColor = resultOfComputation;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
</script>
And the code for fshader is simply:
<script id="fshader" type="shader">
precision highp float;
varying vec3 vColor;
void main(void) {
gl_FragColor = vec4(vColor, 1.0);
}
</script>
However, when I execute it, I get the following error message (256 times, fortunately at the limit):
[.WebGLRenderingContext]GL ERROR :GL_INVALID_OPERATION : glDrawElements:
attempt to access out of range vertices in attribute 2
I believe that if we start counting from 0, "attribute 2" refers to my foo attribute specifically.
I tried following the documentation provided by three.js but cannot identify where I might be going wrong. Unfortunately, I cannot share a jsfiddle at this moment. I hoped that perhaps someone familiar with Three.js/WebGL could quickly spot the issue. Thank you.