WebGL呈现纹理 - 我如何将数据写入Alpha通道？

为了说明这一点，我试图复制本文中描述的水渲染算法http://http.developer.nvidia.com/GPUGems2/gpugems2_chapter19.html。部分算法需要将alpha蒙板渲染到帧缓冲区中，以便稍后用于从最初渲染的场景进行纹理采样。总之，算法看起来像这样：WebGL呈现纹理 - 我如何将数据写入Alpha通道？

渲染场景几何图形到纹理小号，跳过折射网格和与α-取代它掩盖
通过与扰动IF采样纹理小号渲染折射目这是阿尔法遮掩内，否则只是直接的样本组织小号

不幸的是，我还在学习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/

来源

2012-02-19 Scott R

显然可以发现，试图做到这一点在片段着色器将无法正常工作：，因为它只会混合先前渲染的几何体，并且alpha值仍将为1.0。

这取决于你。只要使用适当的混合模式：

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

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

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

来源

2012-02-19 16:08:05

我使用Three.js，并调用'renderer.context.blendFuncSeparate（gl.ONE，gl.ZERO，gl.ONE，gl.ZERO）''不会使屏幕片段着色器呈现所需的蓝色。 GL规范还说，你必须启用GL_BLEND，当我把它放入时也不会改变任何内容。我在那里错过了什么？ – 2012-02-19 16:50:40

WebGL呈现纹理 - 我如何将数据写入Alpha通道？

回答

相关问题