babylon.js生成水体，以及水面的反射效果

水是生活中非常常见的玩意,在游戏中常用于一些限定的场景中，例如吃鸡中的海岛外面就是水，因为外面用不到所以就不建模了，用水来代替加上一个隐形的墙就可以限制住玩家的位置从而造成一些不必要的bug

1. 深蓝的海洋：

   在辽阔的深蓝海洋中，无垠的水域延伸至天际线。海面波涛汹涌，涌动的浪花在阳光下闪耀着银白色的光芒。远处的海平线与天空相交，仿佛消失在了无尽的远方，给人以无限遐想的空间感。海洋深处，神秘的海底世界隐藏着无数奇异的生物，五光十色的珊瑚和游动的鱼群在蔚蓝色的海水中构成了一幅美不胜收的画卷。

2. 平静的湖面：

   相比之下，湖面则呈现出一种宁静与安宁。湖水宛如一面镜子，倒映着周围的山峦和树木。微风拂过时，湖面泛起粼粼的涟漪，仿佛在低声诉说着某种秘密。静谧的湖畔可能会有各种野生动物在安静地觅食或者欢快地嬉戏，给人一种与自然亲近的感觉。

这两者的不同之处在于，海洋常常给人以辽阔、浩渺、壮阔的感觉，而湖面则更寄予了人们对宁静、安宁、恬淡生活的向往。无论是在深蓝的海洋还是平静的湖面，人们都能感受到大自然的神秘和壮美，这也让水成为了自然界中一种令人陶醉的元素。

那在Babylon.js中怎么生成水面效果呢，其实它在材质系统里面给我们提供了WaterMaterial用来模拟步不同场景下的水体通过调节不同的参数来实现，除了参数调节还需要一组bumpTexture贴图，这个很重要的，不信你不加试一下？^^

这里用了一个技巧，就是用了两个平面，因为水体是透明的，可以在第一层放沙滩，当然也可以根据需要换贴图，第二个平面才是水体

直接上代码吧

// 创建水面
const initWater = (scene: Scene, mesh1: Mesh) => {
    var waterMesh = MeshBuilder.CreateGround("waterMesh", {
        width: 1024,
        height: 1024,
        subdivisions: 32
    });
    waterMesh.position.y -= 10

    var ground = MeshBuilder.CreateGround("gournd", {
        width: 1024,
        height: 1024,
        subdivisions: 32
    });
    ground.position.y -= 10
    var water = new WaterMaterial("water", scene, new Vector2(1024, 1024));
    var groundTexture = new Texture("textures/sand.jpg", scene);
    groundTexture.vScale = groundTexture.uScale = 4.0;

    var groundMaterial = new StandardMaterial("groundMaterial", scene);
    groundMaterial.diffuseTexture = groundTexture;
    ground.material = groundMaterial
    water.backFaceCulling = true;
    water.bumpTexture = new Texture("textures/waterbump.png", scene);
    water.windForce = -5;
    water.waveHeight = 0.5;
    water.bumpHeight = 0.1;
    water.waveLength = 0.1;
    water.colorBlendFactor = 0;
    water.addToRenderList(mesh1);
    water.addToRenderList(ground);
    waterMesh.material = water;
}

效果图如下，因为是静态图片看不到水波纹，实际上是有的