1

我正在使用 Three.js 将世界渲染到 WebGLRenderTarget。我的世界没有填满整个屏幕，因此具有透明背景。目的是提供 alpha 通道感知图像效果。

  1. 我将世界渲染到 WebGLRenderTarget 缓冲区

  2. 我尝试通过从缓冲区读取并写入真实屏幕来对此进行后处理

我的后处理功能取决于 alpha 通道。但是，看起来 Three.JS 后处理着色器无法正确读取 alpha 通道 - 无论我尝试将什么值放入 WebGLRenderTarget，它都是 1.0。

演示问题的简单方法。

我创建了一个渲染目标：

        var rtParameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat};

        for(var i=0; i<this.bufferCount; i++) {
            this.buffers[i] = new THREE.WebGLRenderTarget(this.width, this.height, rtParameters);
        }

我将缓冲区设置 alpha 清除为 0.3::

        function clear(buf) {
            // For debugging purposes we set clear color alpha
            renderer.setClearColor(new THREE.Color(0xff00ff), 0.3);
            renderer.clearTarget(buf, true, true, true);
        }

        // Clean up both buffers for the start
        clear(buffers[0]);

然后我将此缓冲区用作读取缓冲区并在我的后处理片段着色器函数中渲染到屏幕（ThreeJS 后处理示例）：

            "void main() {",

                    // texture is the buffer I rendered before
                    "vec4 sample = texture2D( texture, vUv);",

                    // Everything goes to white (1.0) when trying to visualize the
                    // alpha channel of previously rendered WebGLTarget.
                    // It should get value 0.3 - slight gray
                    "gl_FragColor = vec4(sample.a, sample.a, sample.a, 1.0);",
            "}"

其他颜色值被正确读取。如果我vec4(sample.r, sample.g, sample.b, 1.0)按预期直接使用它。

  • 清除 WebGLRenderTarget 的 alpha 通道是否有问题？

  • 将 alpha 值读取为将 WebGLRenderTarget 作为 GLSL 着色器中 2D 图像后处理的纹理是否存在问题？

4

1 回答 1

1

这是一个实现我相信你正在努力实现的小提琴。

http://jsfiddle.net/6vK6W/3/

于 2012-07-01T16:12:03.673 回答