Question

I am using Three.js to render the world to a WebGLRenderTarget. My world does not full the whole screen and thus, has transparent background. The purpose is to provide alpha-channel aware image effects.

1. I render the world to a WebGLRenderTarget buffer

2. I try to post-process this by reading from the buffer and writing to the real screen

My post-processing function depends on the alpha channel. However, looks like that somehow Three.JS post-processing shader fails to read the alpha channel correctly – it is all 1.0 no matter what values I try to put in to WebGLRenderTarget.

The simple way to demostrate the problem.

I create a render target:

        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);
        }

I clear the buffer setting alpha to 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]);

And then I use this buffer as a read buffer and render to the screen in my post-processing fragment shader function (ThreeJS post-processing examples):

            "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);",
            "}"

Other color values are read correctly. If I use vec4(sample.r, sample.g, sample.b, 1.0) it directly copies as expected.

• Is there a problem of clearing the alpha channel for WebGLRenderTarget?

• Is there a problem of reading alpha values as having WebGLRenderTarget as texture for 2D image post-processing in GLSL shader?

Answer 1

Here is a fiddle that implements what I believe you are trying to achieve.

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