WebGL 中的失真/水
我对 WebGL 和 OpenGL 还比较陌生，但最近几天我大部分时间都在为它编写一个小游戏。然而，当我想要实现热浪或任何类型的扭曲之类的东西时，我陷入了困境。
现在，我可以使用片段着色器制作纹理波纹，但我觉得在扭曲对象背后的内容时我错过了一些东西。有没有什么方法可以获取已经在片段着色器中渲染的像素的颜色？
我尝试过渲染到纹理，然后让对象的纹理成为该纹理，但是如果您选择将场景渲染到纹理，则似乎也无法将其渲染到屏幕上。除此之外，如果您想渲染到纹理，该纹理必须是 2 的幂（许多屏幕分辨率不太适合）
任何帮助将不胜感激。
I'm relatively new to WebGL, and OpenGL too for that matter, but in recent days I've filled up most my time writing a little game for it. However, when I wanted to implement something like heat waves, or any sort of distortion, I was left stuck.
Now, I can make a texture ripple using the fragment shader, but I feel like I'm missing something when it comes to distorting the content behind an object. Is there any way to grab the color of a pixel that's already been rendered within the fragment shader?
I've tried rendering to a texture and then having the texture of the object be that, but it appears if you choose to render your scene to a texture, you cannot render it to the screen also. And beyond that, if you want to render to a texture, that texture must be a power of two (which many screen resolutions do not quite fit into)
Any help would be appreciated.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您必须渲染纹理并将该纹理绘制到屏幕上，同时扭曲它。此外，OpenGL ES 2.0（WebGL 使用的图形 API）中不要求帧缓冲区对象的大小必须是 2 的幂。但非二次幂纹理不能具有 mipmap 或纹理包裹。
You're going to have to render to a texture and draw that texture onto the screen while distorting it. Also, there's no requirement that framebuffer objects must be of a power-of-two size in OpenGL ES 2.0 (which is the graphics API WebGL uses). But non-power-of-two textures can't have mipmapping or texture-wrapping.
我相信您可以直接修改单个画布像素。可能是对小区域产生波纹的好方法，但可能不是 GPU 加速的。
I believe you can modify individual canvas pixels directly. Might be a good way to ripple a small area, but might not be gpu-accelerated.