WebGL 中的失真/水

Question

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

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

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

任何帮助将不胜感激。

Answer 1

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

Answer 2

我相信你可以modify individual canvas pixels directly。可能是影响小区域的好方法，但可能不是 gpu 加速的。