ThreeJS的EffectComposer会影响我的透明背景？

Number of views 52
threejs webfrontend

由于业务需要，我们得实现一个透明背景的ThreeJS Canvas。并通过下面的方式创建：

r = new THREE.WebGLRenderer alpha: true

当我调用render（）时，它能正确输出渲染结果。不过当我添加后处理与EffectComposer之后背景却变黑了,后处理效果是正确的：

cmp = new THREE.EffectComposer r
cmp.addPass new THREE.RenderPass scene, camera

effect = new THREE.FilmPass 0.9, 2, 2048, true
effect.renderToScreen = true
cmp.addPass effect
cmp.render 3

应该怎么解决这个问题？

龙勿飞4
2 Answers

在使用 THREE.EffectComposer 时，如果想要保持透明背景，需要确保每个步骤都正确处理 alpha 通道。以下是一些可能的解决方案：

  1. 确保渲染器设置为透明：你已经正确设置了 alpha: true，这一步是正确的。

  2. 确保 FilmPass 和其他后处理效果支持透明背景：有些效果可能不会自动处理 alpha 通道，你需要手动确保它们支持透明背景。

  3. 设置 composer 的输出格式：你可以尝试显式地设置 composer 的输出格式以支持透明背景。

以下是修改后的代码示例：

// 创建带有透明背景的渲染器
var renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setClearColor(0x000000, 0); // 设置清空颜色为黑色，透明度为0

// 创建 EffectComposer
var composer = new THREE.EffectComposer(renderer);

// 添加基本渲染通道
var renderPass = new THREE.RenderPass(scene, camera);
composer.addPass(renderPass);

// 添加 FilmPass 并设置支持透明背景
var filmPass = new THREE.FilmPass(0.9, 2, 2048, true);
filmPass.renderToScreen = true;
composer.addPass(filmPass);

// 渲染
function animate() {
    requestAnimationFrame(animate);
    // 更新场景、相机等
    // ...
    composer.render();
}
animate();

关键点解释：

  1. renderer.setClearColor(0x000000, 0)：这确保了渲染器在清空画布时不会填充任何颜色，从而保持透明背景。

  2. FilmPass 设置：确保 FilmPass 的 renderToScreen 属性设置为 true，这样最终效果会直接显示在屏幕上。

  3. composer.render()：在动画循环中调用 composer.render() 来渲染整个后处理链。

通过以上步骤，你应该能够保持透明背景并应用后处理效果。如果问题仍然存在，请检查是否有其他部分的代码影响了透明度。

龙勿飞4

看AI的回答有点凭感觉了，WebGLRenderer除了设置alpha之外还得设置下format为RGBAFormat，
不然默认的RGBFormat所呈现的结果就是会被丢弃alpha分量。

var width = window.innerWidth || 1;
var height = window.innerHeight || 1;
var parameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat, stencilBuffer: false };

var renderTarget = new THREE.WebGLRenderTarget( width, height, parameters );

cmp = new THREE.EffectComposer(r, renderTarget);
端一碗9