EffectComposer和具有三个.js的alpha通道

EffectComposer and alpha channel with three.js

本文关键字：js 三个 alpha 通道 EffectComposer      更新时间：2023-10-28

这是我的代码：

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通道已被破坏。怎么了？

感谢

Three.js EffectComposer层（即纹理）中并没有真正的"透明度"。默认情况下，透明像素只是渲染为黑色（0,0,0）或背景色，因此当您在着色器中组合像素值时，请计算这些"透明"值，使其产生透明时所需的颜色组合。

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

varying float vAlpha;
varying vec3 vColor;
void main() {
gl_FragColor = vec4( vColor, vAlpha );
...
相关文章：