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

Question

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

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

1. 创建固定基地基地
2. 绑定FBO
3. 创建纹理（要渲染到）
4. 创建深度缓冲区并将其绑定为 RBO
5. 将纹理和 RBO 添加到 FBO

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

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

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

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

Answer 1

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

WebGL 不支持任何形式的 FBO 上的 MSAA（无论是 RBO 还是 RTT）。

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

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