WebGL - 两次渲染渲染

Question

我有关于webGL的使用问题。

最近，我不得不实时渲染来自给定几何体的后处理图像。

我的意思是：

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

我是如何实现的：

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

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

这对我来说听起来很奇怪，因为两个人认为：

1. 为了'渲染'，必须使用2的大小功率创建屏幕外纹理，因此可以比画布本身大得多。
2. 使用第二个顶点着色器似乎是多余的。是否可以跳过此步骤，直接转到第二个片段着色器，将屏幕外纹理绘制到画布上？

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

感谢您的建议：）

Answer 1

  

为了'可渲染'，必须创建屏幕外纹理   尺寸功率为2，因此可以显着大于   画布本身。

不，它只需要mip映射过滤时，使用LINEAR或NEAREST过滤器创建和渲染到NPOT（非幂2）纹理是完全正常的。请注意，NPOT纹理仅支持CLAMP_TO_EDGE包装。

  

使用第二个顶点着色器似乎是多余的。是否可以跳过   这一步，直接转到第二个片段着色器，进行绘制   屏幕外的纹理？

不幸的是，你可以通过简单地将它附加到两个程序来为两个渲染过程使用同一个顶点着色器。然而，这需要你的顶点着色器逻辑应用于两种几何形状，这是不太可能+你正在切换程序，所以这里没有任何好处。