Three.js 后處理：如何保持多通道的深度紋理？

Question

我正在使用需要多個后處理通道的 three.js 渲染場景。 這些步驟中的大多數都需要深度緩沖區。 我的計划是首先渲染所有可見對象以獲得顏色和深度，然后使用 2 個交替讀取和寫入幀緩沖區的幀緩沖區渲染所有后處理通道。 通行證只是示例：

1. 渲染對象 -> FB0
2. DistortionPass，以 FB0 作為輸入 -> FB1
3. GodrayPass，以 FB1 作為輸入 -> FB0
4. SSAOPass，以 FB0 作為輸入 -> 屏幕

GodrayPass 需要讀取第一個渲染通道的深度，因此我需要綁定深度紋理，它不應該是綁定到 FB0 的紋理，否則會導致反饋循環，因為該着色器正在寫入 FB0。

我認為在渲染對象后將深度復制到單獨的紋理中是有意義的，因此我可以在需要時綁定此紋理，而無需擔心反饋循環。

然而，

• copyTexImage2D 似乎不支持從深度緩沖區復制。
• 在第一次傳遞到 RGBA8 紋理之后使用着色器將深度緩沖區打包將需要每次傳遞都再次“解包”浮動
• 使用 output 深度到顏色緩沖區的着色器再次渲染所有對象？ 將需要再次包裝或精度損失。

這里的最佳做法是什么？ 我在正確的道路上嗎？

我可以使用 WebGL 2.0 (OpenGL ES 3.0)，但想避免使用不受歡迎的擴展。

Answer 1

Three.js 不稱它們為 FB，而是稱它們為RenderTarget 。 對於 webgl，它們是WebGLRenderTarget

https://threejs.org/docs/#api/en/renderers/WebGLRenderTarget

此示例顯示使用渲染目標設置深度紋理

target = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight );
target.texture.format = THREE.RGBFormat;
target.texture.minFilter = THREE.NearestFilter;
target.texture.magFilter = THREE.NearestFilter;
target.texture.generateMipmaps = false;
target.stencilBuffer = false;
target.depthBuffer = true;
target.depthTexture = new THREE.DepthTexture();
target.depthTexture.format = THREE.DepthFormat;
target.depthTexture.type = THREE.UnsignedShortType;

這篇文章展示了渲染目標。 本文展示了使用EffectComposer和Pass three.js 對象對渲染目標進行渲染以進行后期處理。

所以，只需制作 3 個渲染目標

RT0 = color + depth
RT1 = color
RT2 = color

然后設置Pass對象，使得

Render Objects -> RT0(color+depth)
DistortionPass, taking RT0(color) as input -> RT1(color)
GodrayPass, taking RT1(color) + RT0(depth) as input -> RT2(color)
SSAOPass, taking RT2(color as input -> screen