作为序言,我试图复制本文http://http.developer.nvidia.com/GPUGems2/gpugems2_chapter19.html中描述的水渲染算法。该算法的一部分需要将 alpha 蒙版渲染到帧缓冲区中,以便稍后用于原始渲染场景的纹理采样。简而言之,算法如下所示:
- 将场景几何体渲染到纹理S中,跳过折射网格并将其替换为 alpha 蒙版
- 如果纹理 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;
}
}