texture - three.js group



three.js: How to apply multiple shader passes to a single object of a scene? (0)

I am trying to render a solar system. I want to apply some fancy shaders (glow, gauss, etc) to the sun only. This is what I am doing so far:

  • Create a separate scene for the system and sun
  • Render the system to a texture
  • Render the sun and apply some shader passes
  • Combine the rendering of the sun with the previously generated texture in a blending/composing shader

I am using the EffectComposer from the three.js examples. This is what my setup looks like:

let renderTargetParameters = {
    minFilter: THREE.LinearFilter,
    magFilter: THREE.LinearFilter,
    format: THREE.RGBAFormat,
    stencilBuffer: false
};
let sunRenderTarget = new THREE.WebGLRenderTarget(width, height, renderTargetParameters);

// render pass sun geometry
let renderSun = new RenderPass(this.sunScene, this.camera);

// create the composer for the sun
this.composerSun = new EffectComposer(this.renderer, sunRenderTarget);

// add the sun passes
this.composerSun.addPass(renderSun);
// add more sun specific render passes here

// render pass scene geometry
let renderScene = new RenderPass(this.scene, this.camera);

let composeShader = {
    uniforms: {
        tDiffuse: {type: "t", value: 0},
        sun: {type: "t", value: 1},
        color: {type: "v3", value: new THREE.Vector3(1.0, 1.0, 0.0)}
    },
    vertexShader: sunVertex(),
    fragmentShader: sunFragment()
};
composeShader.uniforms["sun"].value = this.composerSun.renderTarget1;

// shader pass for the combination of the two scenes
let composePass = new ShaderPass(composeShader);
composePass.needsSwap = true;
composePass.renderToScreen = true;

let composeRenderTarget = new THREE.WebGLRenderTarget(width, height, renderTargetParameters);

// create composer for the final composition of the two scenes
this.composer = new EffectComposer(this.renderer, composeRenderTarget);

// add the final render passes
this.composer.addPass(renderScene);
this.composer.addPass(composePass);

My render method then simply calls the render methods of the two EffectComposers:

let delta = this.clock.getDelta();
this.composerSun.render(delta);
this.composer.render(delta);

The problem is that I can see the scene but not the sun. If I just render the sunComposer and set renderToScreen = true I can see the sun. It just doesn't work in combination.

Any tips on how I could achieve this effect? Is my setup right or can this also be achieved with a single EffectComposer?