javascript - EffectComposer 和 alpha channel 与 three.js

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 channel 设置为某个值，但在我的 shader1 中，我没有找到相同的 alpha channel 值，似乎 alpha channel 被破坏了。怎么了？

谢谢

Answer 1

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

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

varying float vAlpha;
varying vec3 vColor;

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