Question

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

将场景几何体渲染为纹理 S ，跳过折射网格并将其替换为alpha蒙版
通过采样纹理 S 来渲染折射网格，如果它在alpha蒙版内，则采用扰动，否则直接采样纹理 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将按原样写入，就像颜色一样。

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

1 个答案: