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將像顏色一樣原樣寫入。