WebGL - 两次渲染

Question

我有一个关于 webGL 的使用问题。

最近，我不得不根据给定的几何图形实时渲染 post 处理过的图像。

我的想法是：

1. 顶点着色器将几何体投影到屏幕上
2. 第一个片段着色器用于在屏幕外渲染此几何体
3. 第二个片段着色器post-处理屏幕外图像，并将结果显示在canvas。

我是如何实现的：

我为离屏渲染编写了第一组两个着色器。我可以使用帧缓冲区将几何体绘制到纹理中。

对于第二部分，我创建了第二个 glsl 程序。 在这里，顶点着色器用于投影一个覆盖整个屏幕的矩形。 片段着色器使用 sample2D 从屏幕外纹理中挑选合适的像素，并完成所有 post 处理工作。

这对我来说听起来很奇怪，有两个想法：

1. 为了成为 'renderable'，屏幕外纹理必须以 2 的幂大小创建，因此可以比 canvas 本身大得多。
2. 使用第二个顶点着色器似乎是多余的。可不可以跳过这一步，直接进入第二个fragment shader，将offscreen texture绘制到canvas?

所以，最大的问题是：实现这一目标的正确方法是什么？ 我做对了什么，做错了什么？

谢谢你的建议:)

Answer 1

In order to be 'renderable', the offscreen texture has to be created with a size power of two, and thus can be significantly larger than the canvas itself.

不，它不需要，它只需要当你需要 mip 映射过滤时，使用 LINEAR 或 NEAREST 过滤器创建和渲染到 NPOT（非二次方）纹理是完全没问题的。请注意，NPOT 纹理仅支持 CLAMP_TO_EDGE 环绕。

Using a second vertex shader seems redundant. Is it possible to skip this step, and directly go to the second fragment shader, to draw the offscreen texture to the canvas?

不幸的是，您可以通过简单地将一个顶点着色器附加到两个程序来为两个渲染过程使用一个相同的顶点着色器。然而，这将需要您的顶点着色器逻辑应用于两个几何体，这是不太可能的+您无论如何都在切换程序，所以这里没有任何收获。