在 WebGL 中渲染时混合前一帧
使用常规的 2D 画布，在绘制其他图形时，可以通过用背景颜色的透明版本填充整个画布来获得一些很酷的效果。比如：
ctx.fillStyle = "rgba(0,0,0,0.1)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
如何使用 WebGL 获得类似的重影/混合效果？
我尝试将 glClearColor 设置为透明值，但这不起作用。也许可以用 BlendFunc 来完成？如果是这样，我将向 BlendFunc 传递什么参数？
Using a regular 2d canvas it is possible to get some cool effects by filling the entire canvas with a transparent version of the background color while drawing other graphics. Something like:
ctx.fillStyle = "rgba(0,0,0,0.1)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
How would one get a similar ghosting/blending effect using WebGL?
I tried setting glClearColor with a transparent value, but this didn't work. Perhaps it can be done with blendFunc? If so, what arguments would I pass to blendFunc?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您正在寻找的是渲染纹理并将其显示在全屏四边形的屏幕上。
请参阅 learningwebgl 第 16 课 和 OpenGL 常见问题解答第 9.090 节（注意正交视图）。目标纹理可能与您的视口一样大，但是您必须遵循 NPOT 纹理的规则。
为了获得真正好看的效果，您可能需要两个自定义帧缓冲区。详细解释可以参见GPU Gems第21章（在线）。
What you are looking for is rendering to texture and displaying it on the screen on a full-screen quad.
Look at Lesson 16 at learningwebgl and at Section 9.090 of OpenGL FAQ (note the orthogonal view). Target texture may be as big as your viewport, but then you have to follow the rules for NPOT textures.
To achieve really good looking effects you would probably need two custom framebuffers. Detailed explanation may be found in Chapter 21 of GPU Gems (online).
具有透明值的 glClearColor 对我来说也不起作用。但是，在启用混合的情况下，重复绘制覆盖整个输出区域的透明矩形在某些情况下会带来您想要的效果。我用过
gl.blendFunc(gl.SRC_ALPHA_SATURATE，gl.ONE_MINUS_SRC_ALPHA)。请查看 http://db.tt/6QpXqzx 获取简单示例。该代码可在“查看页面源代码”中找到。
代码的结构与learningwebgl 站点上的教程相同。
glClearColor with a transparent value did not work for me too. But repeatedly drawing a transparent rectangle covering the entire output area with blending enabled brought out the effect you were looking for in some cases. I used
gl.blendFunc(gl.SRC_ALPHA_SATURATE, gl.ONE_MINUS_SRC_ALPHA). Please look at http://db.tt/6QpXqzx for a simple example. The code is available on 'View Page Source'.
The code is structured as in the tutorials at the learningwebgl site.