作为序言,我正在尝试复制本文 http://http.developer.nvidia.com/GPUGems2/gpugems2_chapter19.html 中描述的水渲染算法。 。该算法的一部分需要将 alpha 蒙版渲染到帧缓冲区中,以便稍后用于从原始渲染场景中进行纹理采样。简而言之,该算法如下所示:
- 将场景几何体渲染为纹理S,跳过折射网格并将其替换为 Alpha mask
- 如果纹理位于 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/ 找到
最佳答案
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 将按原样写入,就像颜色一样。
关于javascript - WebGL 渲染到纹理 - 如何将数据写入 Alpha channel ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9350692/