webgl - WebGL 中的失真/水

Question

我对 WebGL 和 OpenGL 还比较陌生，但最近几天我已经把大部分时间都花在了为它编写一个小游戏上。但是，当我想实现像热浪或任何形式的失真之类的东西时，我就陷入了困境。

现在，我可以使用片段着色器制作纹理波纹，但在扭曲对象背后的内容时，我觉得我错过了一些东西。有没有办法获取已经在片段着色器中渲染的像素的颜色？

我已经尝试渲染到纹理，然后让对象的纹理成为那样，但是如果您选择将场景渲染到纹理，您也无法将其渲染到屏幕上。除此之外，如果要渲染到纹理，则该纹理必须是 2 的幂（许多屏幕分辨率不太适合）

任何帮助，将不胜感激。

Answer 1

您将不得不渲染到纹理并将该纹理绘制到屏幕上，同时扭曲它。此外，在 OpenGL ES 2.0（这是 WebGL 使用的图形 API）中，不要求帧缓冲区对象的大小必须是 2 的幂。但是非二次幂纹理不能有 mipmapping 或纹理包装。

Answer 2

我相信您可以直接修改单个画布像素。可能是让小区域产生波纹的好方法，但可能不是 gpu 加速的。