three.js:如何将多个着色器过程应用于场景的单个对象?
我正在尝试渲染太阳系。我只想对太阳应用一些奇特的着色器(辉光、高斯等)。这就是我目前正在做的:three.js:如何将多个着色器过程应用于场景的单个对象?,three.js,Three.js,我正在尝试渲染太阳系。我只想对太阳应用一些奇特的着色器(辉光、高斯等)。这就是我目前正在做的: 为系统和太阳创建单独的场景 将系统渲染为纹理 渲染太阳并应用一些着色器过程 将太阳渲染与先前在混合/合成着色器中生成的纹理相结合 我正在使用three.js示例中的EffectComposer。这是我的设置的样子: 让renderTargetParameters={ minFilter:THREE.LinearFilter, 磁过滤器:三线过滤器, 格式:3.RGBAFormat, 模具缓冲区:f
- 为系统和太阳创建单独的场景
- 将系统渲染为纹理
- 渲染太阳并应用一些着色器过程
- 将太阳渲染与先前在混合/合成着色器中生成的纹理相结合
EffectComposer
。这是我的设置的样子:
让renderTargetParameters={
minFilter:THREE.LinearFilter,
磁过滤器:三线过滤器,
格式:3.RGBAFormat,
模具缓冲区:false
};
让sunRenderTarget=new THREE.WebGLRenderTarget(宽度、高度、renderTargetParameters);
//渲染过程太阳几何体
让renderSun=newrenderpass(this.sunScene,this.camera);
//为太阳创建作曲家
this.composerSun=新的EffectComposer(this.renderer,sunRenderTarget);
//加上太阳经过
this.composer.sun.addPass(renderSun);
//在此处添加更多特定于日光的渲染过程
//渲染过程场景几何体
让renderScene=newrenderpass(this.scene,this.camera);
设复合阴影={
制服:{
tDiffuse:{type:“t”,值:0},
sun:{type:“t”,值:1},
颜色:{type:“v3”,值:new THREE.Vector3(1.0,1.0,0.0)}
},
vertexShader:sunVertex(),
fragmentShader:sunFragment()
};
composeShader.uniforms[“sun”].value=this.composeSun.renderTarget1;
//两个场景组合的着色器过程
让composePass=新着色器类(composeShader);
composePass.needsSwap=true;
composePass.renderToScreen=true;
让Composer EnderTarget=new THREE.WebGLRenderTarget(宽度、高度、renderTargetParameters);
//为两个场景的最终构图创建作曲家
this.composer=新的EffectComposer(this.renderer,composer-EnderTarget);
//添加最终渲染过程
this.composer.addPass(renderScene);
this.composer.addPass(composePass);
然后,我的渲染方法只调用两个EffectComposer的渲染方法:
let delta = this.clock.getDelta();
this.composerSun.render(delta);
this.composer.render(delta);
问题是我能看到场景,但看不到太阳。如果我只渲染sunComposer
并设置renderToScreen=true
我就能看到太阳。它只是不能在组合中工作
关于如何达到这种效果,有什么建议吗?我的设置正确吗?或者这也可以通过单个
EffectComposer
实现吗?为什么不在同一个composer中通过addPass添加多个过程?