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

Question

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

1. 将场景几何体渲染为纹理S，跳过折射网格并将其替换为 Alpha mask
2. 如果纹理位于 Alpha mask 内，则通过扰动采样纹理 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

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.

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

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

glBlendFuncSeparate 为颜色的 RGB 和 Alpha 部分设置单独的混合。在本例中，它将源 alpha 直接写入目标。

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