three.js:如何将多个着色器传递应用于场景的单个对象？

Question

我正在尝试渲染太阳系.我想将一些奇特的着色器(发光,高斯等)应用到太阳上.这就是我到目前为止所做的事情:

• 为系统和sun创建单独的场景
• 将系统渲染为纹理
• 渲染太阳并应用一些着色器通道
• 在渲染/合成着色器中将太阳的渲染与先前生成的纹理相结合

我正在使用EffectComposer来自three.js示例.这就是我的设置:

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

然后我的render方法只调用两个EffectComposers的render方法:

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

问题是我可以看到场景而不是太阳.如果我只是渲染sunComposer和设置renderToScreen = true我可以看到太阳.它只是不能组合使用.

关于如何实现这种效果的任何提示？我的设置是正确的还是可以用一个单独实现EffectComposer？