Question

我使用Three.js将世界呈现给WebGLRenderTarget。我的世界并没有完整的整个屏幕，因此具有透明的背景。目的是提供alpha通道识别图像效果。

我将世界呈现给WebGLRenderTarget缓冲区
我尝试通过从缓冲区读取并写入真实屏幕来对其进行后期处理

我的后期处理功能取决于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值读取为将GLGL着色器中的2D图像后处理用作WebGLRenderTarget作为纹理的问题？

Answer 1

这是一个实现我认为你想要实现的目标的小提琴。

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

在读取渲染图像以进行后处理时，AlphaGL通道在WebGLRenderTarget中全部为1.0

1 个答案: