带有效果器的透明着色器通道答案

【问题标题】：Transparent shader pass with effect composer带有效果器的透明着色器通道
【发布时间】：2016-11-30 19:40:32
【问题描述】：

我正在尝试渲染一个场景，然后在其上渲染一个半透明的后处理效果。我想让它与效果作曲家一起使用，以便以后可以轻松使用更多通道。

我的基本结构是这样的：

composer = new Three.EffectComposer renderer
composer.addPass renderPass
composer.addPass transparentPass
composer.addPass copyPass

copyPass 的 renderToScreen = true，transparentPass 是我的自定义片段着色器，每个像素的 alpha 设置为 0.5，并使用 ShaderPass 加载。

我已经尝试过 shaderMaterial 的混合、depthTest 和透明。还尝试了渲染器的 alpha 和 premultipliedAlpha 选项，autoClear off。

我要么从 renderPass 获取场景，要么从我选择的任何 renderer.clearColor 上获取 transparentPass。不是两者的复合。我需要设置什么才能完成这项工作？谢谢。

编辑：

即使所有像素都在 Alpha 通道设置为 0.5 的情况下渲染，它也显示全白色（而不是下方的旋转立方体）。我应该将它与着色器中的 tDiffuse 渲染目标混合还是有办法使 shaderPass 透明？

【问题讨论】：

想要的效果有点类似于这个演示中的假散景clicktorelease.com/tmp/wagner
现在我设法通过这样做来处理着色器本身：gl_FragColor = vec4(color * alpha + texel.rgb * (1.0 - alpha), 1.0);我想知道这是否可以通过 shaderPass 的某些属性来实现。

标签： three.js

【解决方案1】：

这是一个很晚的回复，但也许它会对某人有所帮助。

在构造函数ShaderPass创建内部ShaderMaterial，我们应该设置这个材质的透明度为true：

copyPass.material.transparent = true

【讨论】：