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

Question

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

1. 将场景几何渲染为纹理S ，跳过折射网格并将其替换为Alpha蒙版
2. 如果纹理S在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将像颜色一样原样写入。