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

WebGL render to texture - how do I write data to the alpha channel?

本文关键字：数据 通道 alpha 纹理 WebGL      更新时间：2023-09-26

在此之前，我尝试复制本文中描述的水渲染算法http://http.developer.nvidia.com/GPUGems2/gpugems2_chapter19.html.该算法的一部分要求将alpha遮罩渲染到帧缓冲区中，以便稍后用于从最初渲染的场景进行纹理采样。简而言之，算法看起来是这样的：

  1. 将场景几何体渲染到纹理S中，跳过折射网格并将其替换为alpha遮罩
  2. 通过对纹理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/

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

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

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

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

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

相关文章：