WebGL渲染到纹理-如何将数据写入Alpha通道？

Question

To preface this, I'm trying to replicate the water rendering algorithm describe in this article http://http.developer.nvidia.com/GPUGems2/gpugems2_chapter19.html . Part of this algorithm requires rendering an alpha mask into a framebuffer in order to use later for a texture sampling from the originally rendered scene. In short, the algorithm looks like this:

1. Render scene geometry into a texture S , skipping refractive meshes and replacing it with an alpha mask
2. Render refractive meshes by sampling texture S with perturbation IF it's inside the alpha mask, otherwise just directly sample texture S

Unfortunately, I'm still learning WebGL and don't really know enough to know how to approach this. Additionally, that article uses HLSL, and the conversion is nontrivial for me. Obviously, attempting to do this in the fragment shader won't work:

void main( void ) {
    gl_FragColor = vec4( 0.0 );
}

because it will just blend with the previously rendered geometry and the alpha value will still be 1.0.

Here is a brief synopsis of what I have:

function animate(){
    ... snip ...
    renderer.render( scene, camera, rtTexture, true );

    renderer.render( screenScene, screenCamera );
}

// water fragment shader
void main( void ){
    // black out the alpha channel
    gl_FragColor = vec4(0.0);
}

// screen fragment shader 
varying vec2 vUv;
uniform sampler2D screenTex;

void main( void ) {
    gl_FragColor = texture2D( screenTex, vUv );

    // just trying to see what the alpha mask would look like
    if( gl_FragColor.a < 0.1 ){
        gl_FragColor.b = 1.0;
    }
}

The entire code can be found at http://scottrabin.github.com/Terrain/

Answer 1

Obviously, attempting to do this in the fragment shader won't work: because it will just blend with the previously rendered geometry and the alpha value will still be 1.0.

That's up to you. Just use the proper blend modes:

glBlendFuncSeparate(..., ..., GL_ONE, GL_ZERO);

glBlendFuncSeparate sets up separate blending for the RGB and Alpha portions of the color. In this case, it writes the source alpha directly to the destination.

Note that if you're drawing something opaque, you don't need blend modes. The output alpha will be written as is, just like the color.