Question

First i am a beginner in glsl and Three.js :).

Here are my vertex and fragment shader (very simple) of shader1:

 void main() {

    gl_Position = projectionMatrix * modelViewMatrix * vec4( position,1.0);             
}       

void main() {
gl_FragColor = vec4(1.0,0.0,0.0,1.0);
}

In my init() function there is:

var geometry = new THREE.CubeGeometry(2, 2, 2);
var material = new THREE.MeshLambertMaterial({color: 0xffaaff});
cube = new THREE.Mesh(geometry, material);
scene.add(cube);

var effect1 = new THREE.ShaderPass(THREE.ShaderExtras[ "shader1" ]);
effect1.renderToScreen=true;
composer = new THREE.EffectComposer( renderer);
composer.addPass(renderScene);
composer.addPass(effect1);

In my function render() :

Renderer.clear() ;
composer.render();

But at the end all my screen is red not only my cube. What’s wrong ?

Thank you.

Answer 1

I don’t know Three.js, but the way you’re installing your shader looks like it’s being used as a full-screen post-processing effect, not applied to your geometry — and since you unconditionally make output pixels red, the entire screen is red. You need to use some other operation to tell Three.js that you want your shader to be used for rendering your cube (or all geometry in the scene).