最近发现几个比较好的水波模拟教程，放上github链接，下载之后打开index.html就能看到示例和教程

代码较短，适合webgl初学者

正面正弦波叠加

https://github.com/filbs111/water-sim

123行

vColor = vec3(1.5*surfNorm.x + 1.5); //try simple side lighting

144行

gl_FragColor=vec4(vColor*vec3(0.5,0.5,vPos.z*5.0+0.25),1.0);

法向贴图Gerstner

https://github.com/johnhollen/Procedural-Ocean

Three.js实现Gerstner，无贴图

https://github.com/ZacharyPuls/WaveSimulation

Three.js水面点击，很漂亮，主要函数在intergrate里面

https://github.com/KarRei/waterwave

刻墓碑石头

http://www.pheelicks.com/2013/12/webgl-tombstone-part-1/

integrate = function(dt) {
  var d2x, d2z, i, iNextX, iNextZ, iPrevX, iPrevZ, j, k, l, m, v, x, z;
  v = geometry.vertices;
  for (z = 1; z < NH; z++) { 
    for (x = 1; x < NW; x++) { 
      i = idx(x, z); // idx函数将x和z转换为索引数组中的值
      
      iPrevX = idx(x - 1, z);
      iNextX = idx(x + 1, z);
      iPrevZ = idx(x, z - 1);
      iNextZ = idx(x, z + 1);
      // 这里使用有限差分法求解我们的二阶微分方程
      d2x = (v[iNextX].y - 2 * v[i].y + v[iPrevX].y) / DELTA_X2; 
      d2z = (v[iNextZ].y - 2 * v[i].y + v[iPrevZ].y) / DELTA_Z2;
      v[i].ay = C2 * (d2x + d2z); //每个顶点的加速度；
      v[i].ay += -DAMPING * v[i].uy; // 加速度=旧acc-阻尼*速度
      v[i].uy += dt * v[i].ay; // 新速度=旧速度+时间步长*加速度，欧拉
      v[i].newY = v[i].y + dt * v[i].uy; // 计算新的y位置； 身高=旧身高+时间步长*速度，欧拉
    }
  }
  for (z = 1; z < NH; z++) { 
    for (x = 1; x < NW; x++) { 
      i = idx(x, z);
      v[i].y = v[i].newY; // 用每个顶点的新高度覆盖
    }
  }
  geometry.verticesNeedUpdate = true;
  geometry.computeFaceNormals();
  geometry.computeVertexNormals();
  return geometry.normalsNeedUpdate = true;
};

经过我的测试，Chrome浏览器打不开,FireFox浏览器却能打开，不知道为什么

用不了github可以用我的网盘

链接: https://pan.baidu.com/s/1ykhPW1q1p8GJr25Gj__prQ 提取码: e8xp