Question

这是我的代码：

renderTargetParametersRGBA = { 
minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter,
 format: THREE.RGBAFormat,stencilBuffer: true 
 };
colorTarget = new THREE.WebGLRenderTarget(
 SCALE * SCREEN_WIDTH, SCALE * SCREEN_HEIGHT, renderTargetParametersRGBA
 );
composer = new THREE.EffectComposer( 
renderer,colorTarget 
);
var renderScene = new THREE.RenderPass(scene,camera);
var effect2 = new THREE.ShaderPass(THREE.ShaderExtras[ "shader1" ]);
composer.addPass(renderScene);
composer.addPass(effect2);

在renderScene中，我将场景的alpha通道设置为某个值，但在我的shader1中，我找不到alpha通道的相同值，似乎alpha通道被破坏。出了什么问题？

谢谢

Answer 1

Three.js EffectComposer图层（纹理）中没有真正的“透明度”。默认情况下，透明像素简单地呈现为黑色（0,0,0）或背景颜色，因此当您在着色器中组合像素值时，请使用数学计算这些“透明”值，使它们产生颜色如果它是透明的，你会期望的组合。

如果将值作为统一或属性传递（取决于您的目标），还有一种方法可以直接控制着色器中的Alpha。对我来说，我传入一个单独的alpha值属性数组，然后用它们来控制着色器本身的alphas。

varying float vAlpha;
varying vec3 vColor;

void main() {
gl_FragColor = vec4( vColor, vAlpha );
...

具有three.js的EffectComposer和alpha通道

1 个答案: