openglshader实现虚拟场景_用shader实现流动的水面(webgl)

这段时间一直在看如何用shader绘制一个流动的水面，直接用贴图(高度图、法向贴图)实现的方法，这里就不讨论了。

搜了一大波博客资料，感觉存在如下一些问题：

1⃣️大多数资料都是基于opengl实现(或者是unity里的shader)，过多关注点在渲染上面而不是水波的mesh实现上，让人没有看下去的欲望

2⃣️有的就直接是照搬别人的博客，公式大段大段地搬，却没有自己的一丝见解，太过敷衍

3⃣️代码不加注释，对前来学习者不太友好

4⃣️针对webgl的实现，网上的资料太少(虽然已经有了opengl的实现)

所以在查阅了资料之后，决定写一个webgl版本的实现(three.js + shader)

nvidia官方提供的水波实现方程(其实网上大多数博客里的方程式应该都是源于此处)：传送门。

对应的，知乎有一篇文章，基本上就是上面网站的中文版，但是作者加入了一点自己思考后的想法，个人觉得很好，推荐一下：GPU Gems 基于物理模型的水面模拟。

-------------------------------------------------------------------华丽的分割线-------------------------------------------------------------------------

一、PlaneGeometry + ShaderMaterial + 正弦波方程式

//1.PlaneGeometry

this.seaMaterial = newTHREE.ShaderMaterial({

uniforms: {