My goal is to pass an attribute variable with three.js to the vertex shader, which then should transfer it to the fragment shader using a varying variable.
Here's the Vertex Shader:
attribute vec4 color;
varying vec4 outColor;
void main()
{
outColor= color;
gl_Position= projectionMatrix * modelViewMatrix * vec4(position,1.0);
}
And the Fragment Shader:
varying vec4 outColor;
void main() {
gl_FragColor = outColor;
}
If there are different colors assigned to each of the 8 vertices of a cube, as it is interpolated between those colors on the faces, creating a blended effect. The initialization of attributes in JavaScript looks like this:
var colors= [];
for(var i=0; i<geometry.vertices.length; i++) {
colors.push(new THREE.Vector4(0.0,1.0,0.0,1.0));
}
var attributes = {
color: {type:"v4", value: colors}
};
var material= new THREE.ShaderMaterial({
uniforms: uniforms,
attributes: {},
vertexShader: document.getElementById("vertexShader").textContent,
fragmentShader: document.getElementById("fragmentShader").textContent
});
The current setup should render a green cube, however, there seems to be an issue with the instruction outColor=color; in the vertex shader causing the screen to display black instead. When changed to outColor=vec4(0.0,1.0,0.0,1.0);, the cube renders correctly in green.
To view the complete source code, click here.