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

Question

作为序言，我试图复制本文http://http.developer.nvidia.com/GPUGems2/gpugems2_chapter19.html 中描述的水渲染算法。该算法的一部分需要将 alpha 蒙版渲染到帧缓冲区中，以便稍后用于原始渲染场景的纹理采样。简而言之，算法是这样的：

1. 将场景几何体渲染为纹理S，跳过折射网格并将其替换为 alpha 蒙版
2. 如果纹理在 Alpha 蒙版内，则通过扰动采样纹理 S 渲染折射网格，否则直接采样纹理 S

不幸的是，我仍在学习 WebGL，而且还不太了解如何处理这个问题。此外，那篇文章使用了 HLSL，而且转换对我来说很重要。显然，尝试在片段着色器中执行此操作是行不通的：

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

因为它只会与之前渲染的几何体混合，而 alpha 值仍为 1.0。

以下是我所拥有的简要介绍：

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

完整的代码可以在http://scottrabin.github.com/Terrain/找到

Answer 1

显然，尝试在片段着色器中执行此操作是行不通的： 因为它只会与之前渲染的几何图形混合，并且 alpha 值仍然是 1.0。

这取决于你。只需使用正确的混合模式：

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

glBlendFuncSeparate 为颜色的 RGB 和 Alpha 部分设置单独的混合。在这种情况下，它将源 alpha 直接写入目标。

请注意，如果您要绘制不透明的东西，则不需要混合模式。输出 alpha 将按原样写入，就像颜色一样。