在WebGL中渲染时混合前一帧

Question

使用常规二维画布时，可以通过在绘制其他图形的同时在整个画布上填充透明版的背景色来获得一些很酷的效果。例如：

ctx.fillStyle = "rgba(0,0,0,0.1)"; 
ctx.fillRect(0, 0, canvas.width, canvas.height); 

如何使用WebGL获得类似的重影/混合效果？

我试着用透明值设置glClearColor，但是这没有奏效。也许可以用blendFunc来完成？如果是这样，我会传递给blendFunc什么参数？

Answer 1

您正在寻找的是渲染到纹理并在全屏幕四边形上将其显示在屏幕上。

看看Lesson 16 at learningwebgl和Section 9.090 of OpenGL FAQ（注意正交视图）。目标纹理可能与您的视口一样大，但您必须follow the rules for NPOT textures。

要达到真正好看的效果，您可能需要两个自定义帧缓冲区。详细解释请参见Chapter 21 of GPU Gems（在线）。

Answer 2

具有透明值的glClearColor对我也不适用。但重复绘制覆盖整个输出区域的透明矩形并启用了混合后，在某些情况下可以找到您正在寻找的效果。我用 gl.blendFunc（gl.SRC_ALPHA_SATURATE，gl.ONE_MINUS_SRC_ALPHA）。一个简单的例子请看http://db.tt/6QpXqzx。该代码可在“查看页面源”中找到。代码的结构与tutorialwebgl站点上的教程相同。