Question

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

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

我正在使用three.js示例中的EffectComposer。这就是我的设置：

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

我的渲染方法然后只调用两个EffectComposers的渲染方法：

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

问题在于我可以看到场景而不是太阳。如果我只渲染sunComposer并设置renderToScreen = true，我就能看到太阳。它只是不能合并。

有关如何实现此效果的任何提示？我的设置是正确的还是可以通过单个EffectComposer来实现？

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

0 个答案: