在WebGL中渲染时混合前一帧

时间:2011-04-30 04:49:58

标签: opengl-es canvas webgl

使用常规的2d画布,可以通过在绘制其他图形的同时用透明版本的背景颜色填充整个画布来获得一些很酷的效果。类似的东西:

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

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

我尝试使用透明值设置glClearColor,但这不起作用。也许可以用blendFunc完成?如果是这样,我会将什么参数传递给blendFunc?

2 个答案:

答案 0 :(得分:2)

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

查看Lesson 16 at learningwebglSection 9.090 of OpenGL FAQ(请注意正交视图)。目标纹理可能与您的视口一样大,但您必须follow the rules for NPOT textures

要获得非常好看的效果,您可能需要两个自定义帧缓冲区。详细说明可在Chapter 21 of GPU Gems(在线)中找到。

答案 1 :(得分:1)

带有透明值的glClearColor对我也不起作用。但是,在启用混合的情况下反复绘制覆盖整个输出区域的透明矩形会带来您在某些情况下所寻找的效果。我用了 gl.blendFunc(gl.SRC_ALPHA_SATURATE,gl.ONE_MINUS_SRC_ALPHA)。请查看http://db.tt/6QpXqzx以获取一个简单示例。代码可在“查看页面源”中找到。 代码的结构与learningwebgl站点的教程相同。