使用 WebGL 或 OpenGL ES 2，我如何在屏幕上渲染 RBO 的内容？答案

【问题标题】：Using WebGL or OpenGL ES 2, how do I render the contents of an RBO onscreen?使用 WebGL 或 OpenGL ES 2，我如何在屏幕上渲染 RBO 的内容？
【发布时间】：2012-01-29 13:42:00
【问题描述】：

使用 WebGL（受限于 OpenGL ES 2 API），我成功地渲染到纹理，然后在屏幕上显示该纹理。因为它是纹理，所以没有抗锯齿。如果我渲染到 RBO，然后在屏幕上显示，我将能够利用 AA。

我的渲染目标设置如下所示：

创建 FBO
绑定FBO
创建纹理（要渲染到）
创建深度缓冲区并将其绑定为 RBO
将纹理和 RBO 附加到 FBO

我的渲染更新循环如下所示：

将场景渲染到上面步骤 #2 中创建的 FBO
使用上面第 3 步中创建的纹理渲染屏幕对齐的四边形

使用桌面 OpenGL，我会调用 glBlitFramebuffer() 而不是绘制屏幕对齐的四边形。

如何使用抗锯齿渲染我的场景？我需要用 RBO 替换纹理吗？如果是这样，我应该使用什么调用来绑定 RBO 以绘制屏幕对齐的四边形？

【问题讨论】：

为什么不能使用AA？在第一次渲染时，只需附加一个抗锯齿着色器，您就应该完成了......您还可以将场景渲染超级采样到一个大纹理，然后对其进行子采样
由于驱动程序问题，许多机器上禁用了普通 AA。它可能会随着时间的推移自行解决，但在那之前，没有办法以编程方式强制它。
但他/她可以使用程序化反别名...以 SMAA (iryoku.com/smaa) 为例...这需要一点努力，但结果很好跨度>
绝对可以通过实现其中一种可用方法在后期应用 AA，但这并不能帮助我理解使用 OpenGL ES 2 在屏幕上渲染 RBO 内容的正确方法是什么.

标签： opengl-es-2.0 webgl

【解决方案1】：

除非您执行回读并重新上传到纹理以进行 blit，否则您无法在 WebGL 中将 RBO 的内容 blit 到屏幕，这相当慢。

WebGL 不支持任何形式的 FBO 上的 MSAA（既不作为 RBO，也不作为 RTT）。

您可以通过多种方式实现自己的抗锯齿。

以 2:2 大小渲染并按比例缩小（带有 webgl 的谷歌地图会这样做）
以 1:1 大小渲染，对颜色和深度运行 sobel 或 laplace 边缘检测，并使用边缘强度作为权重运行双边高斯模糊（我在一些演示中使用了这种技术，效果很好， http://codeflow.org/entries/2011/apr/11/advanced-webgl-part-1/)
使用 GPU Pro 2 中的形态抗锯齿配方（我还没有尝试过）

【讨论】：

感谢您的确认！在我的工作取得进展的同时，我一直在关注你的工作。