在 WebGL 中渲染时混合前一帧答案

【问题标题】：Blending previous frame when rendering in WebGL在 WebGL 中渲染时混合前一帧
【发布时间】：2011-04-30 04:49:58
【问题描述】：

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

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

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

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

【问题讨论】：

标签： opengl-es canvas webgl

【解决方案1】：

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

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

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

【讨论】：

谢谢！我会检查这些东西。 :)

【解决方案2】：

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

【讨论】：