CODEWITHSUNDEEP
javascriptthree.jsglslshader
Ramy Al Zuhouri
Ramy Al Zuhouri

Reputation: 21996

Passing an attribute variable : black screen

I am trying to pass an attribute variable with three.js to the vertex shader, then the vertex shader should pass it to the fragment shader through a varying variable.

Vertex shader: 

attribute vec4 color;
varying vec4 outColor;

void main() 
{
    outColor= color;
    gl_Position= projectionMatrix * modelViewMatrix * vec4(position,1.0);
}

Fragment shader: 

varying vec4 outColor;

void main() {
    gl_FragColor = outColor;
}

This way let's say that I have a cube with 8 vertices: if there is a different color for each vertex, then the cube should be drawn by interpolating the color of each vertex, and in the middle of a face it should have a mixed color. This is the javascript code snippet where I initialize the attributes: 

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

For now this should draw a completely green cube. The problem is that the instruction in the vertex shader outColor=color; messes up everything: I just see a black screen. If I replace this instruction with outColor=vec4(0.0,1.0,0.0,1.0);, I see a correctly drawn green cube on the screen.

Here is the full source code.

Upvotes: 0

Views: 211

Answers (1)

ebbs
ebbs

Reputation: 435

Try passing attributes instead of {} to the THREE.ShaderMaterial constructor.

Upvotes: 1

Related Questions