three.js 地形纹理混合

地形生成通常使用高度图， 而高度图的生成可以使用绘图工具，或者通过分形算法生成，例如square-diamond,  fbm方法。
这里采用简单求平均值+随机波动的方法。




对于一个2^n+1  *  2^n+1 的网格， 中心点的高度是四角点的平均值加随机偏移， 边上中点的高度值是边两端点的平均值加随机偏移。
接着将偏移的幅度缩小， 计算四个较小方块的顶点的高度值。
这样随机生成了高度。


接着构造地形， 地形分割成2^n * 2^n 块， 这样顶点就有 2^n+1  *  2^n+1 个 
    var geo = new THREE.PlaneGeometry(3, 3, WIDTH-1, HEIGHT-1);


上面生成了每个顶点的高度， 需要将高度值传入shader中， 可以直接修改geo中的所有顶点的z值，来修改高度。


我们可以根据地形的高度来混合纹理，例如比较高的位置为石块， 而低洼处为草地, 这个纹理的混合。
c2 = mix(c0, c1, (height-minHeight)/(maxHeight-minHeight))
c0是第一张纹理获取的颜色， c1是第二张纹理获取的颜色， 而minHeight maxHeight 是整个地形高度的方位， height是当前高度。
c2 就是混合后的颜色。
shader如下，两张纹理， 顶点在平面坐标中的位置， 
纹理坐标采用顶点的x, y 坐标的小数部分。
    uniform sampler2D texture_