js江湖怪谈系列之踏浪而行

人在江湖，就得依了这江湖的规矩，本大侠行侠仗义，不善言辞，人狠话不多，俗话说无干货不起早，今日便直接奉上尘封多年的上古秘籍。

《Babylon.js》

一、简介

Babylon.js是微软开源的一款Web3D渲染引擎，同时还是一款非常优秀的游戏引擎，相对于threejs来说，Babylon.js相对更高级，同样的场景开发，Babylon.js的效率是threejs的好几倍。

此外它不仅仅可以在浏览器端运行，还可以编译为多个平台版本，一次编写实现，多平台共享运行。

Babylon Native，它可以用原有的Babylon.js代码在任意平台构建一个原生应用，充分释放本机设备的性能优势。已经支持DirectX on Windows、 Metal on iOS/MacOS、 OpenGL on Android等平台。

二、官方网站

​​https://www.babylonjs.com/​​​(PC端访问)

​

三、小试牛刀

以下是我较短时间开发出来的一个小场景，主要构成为天空、大海、和企业方块，三维场景渲染帧率始终保持60fps，可见其性能强大。

测试代码沙盒方式体验地址：​​https://playground.cnbabylon.com/#5QF2FF#6​​​(PC端访问)

​

四、实现源码

参考代码中WaterMaterial材质的使用，几行代码即可实现海面巨浪的效果，可以了解到Babylon.js 引擎强大之处，使用threejs 实现此功能是非常复杂的，需要写大量的着色器程序，除水材质之外，其还内置了火焰、熔岩、毛皮、地面、地形、渐变、天空。网格、单元格底纹、混合纹理等材质，使用非常方便，开箱即用。

var createScene = function (engine) {
    //创建场景
    var scene = new BABYLON.Scene(engine);

    // 创建相机
    var camera = new BABYLON.ArcRotateCamera("Camera", 3 * Math.PI / 2, Math.PI / 2.5, 50, BABYLON.Vector3.Zero(), scene);
    camera.attachControl(canvas, true);
    
    // 创建一个光源
    var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);

    // 设置天空盒子
    var skybox = BABYLON.Mesh.CreateBox("skyBox", 5000.0, scene);
    var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
    skyboxMaterial.backFaceCulling = false;
    skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("https://minio.cnbabylon.com/public/Assets/skybox/TropicalSunnyDay", scene);
    skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
    skyboxMaterial.disableLighting = true;
    skybox.material = skyboxMaterial;

    // 设置海浪的材质
    var waterMaterial = new BABYLON.WaterMaterial("waterMaterial", scene, new BABYLON.Vector2(512, 512));
    waterMaterial.bumpTexture = new BABYLON.Texture("https://minio.cnbabylon.com/public/Assets/waterbump.png", scene);
    waterMaterial.windForce = 15;//风速,表示施加在水面上的风力
    waterMaterial.waveHeight = 0.9;//浪高
    waterMaterial.bumpHeight = 0.1;//颠簸高度
    waterMaterial.waveLength = 0.1;//浪长度
    waterMaterial.waveSpeed = 10.0;//流速
    waterMaterial.waterColor = new BABYLON.Color3(0, 0, 1);//海水的颜色
    waterMaterial.colorBlendFactor = -0.01;//混色量,决定水色如何与反射和折射世界混合的因素
    waterMaterial.windDirection = new BABYLON.Vector2(1, 1); //风向 
    
    //海底地面纹理
    var groundTexture = new BABYLON.Texture("https://minio.cnbabylon.com/public/Assets/sand.jpg", scene);
    groundTexture.vScale = groundTexture.uScale = 100.0;
    //海底地面材质
    var groundMaterial = new BABYLON.StandardMaterial("groundMaterial", scene);
    groundMaterial.diffuseTexture = groundTexture;
    //创建海底地面
    var ground = BABYLON.Mesh.CreateGround("ground", 512, 512, 32, scene, false);
    ground.position.y = -2;
    ground.material = groundMaterial;

    //创建海水地形
    var waterMesh = BABYLON.Mesh.CreateGround("waterMesh", 512, 512, 32, scene, false);
    waterMesh.material = waterMaterial;

    //初始化盒子材质
    var boxMaterial = new BABYLON.StandardMaterial("boxMaterial", scene);
    boxMaterial.diffuseTexture = new BABYLON.Texture("data:image/jpeg;base64,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", scene);
    //创建盒子
    var box = BABYLON.Mesh.CreateBox("box", 8, scene);
    box.position.y = 20;
    box.material = boxMaterial;

    //要反射和折射世界，您只需将所需的网格添加到渲染列表中
    waterMaterial.addToRenderList(ground);
    waterMaterial.addToRenderList(skybox);
    waterMaterial.addToRenderList(box);

    //渲染前获取海浪的高度，并设置盒子y的位置
    let i = 0;
    scene.registerBeforeRender(function() {
        let time = waterMaterial._lastTime / 100000;
        let x = box.position.x;
        let z = box.position.z;
        box.position.y = 8+Math.abs((Math.sin(((x / 0.05) + time * waterMaterial.waveSpeed)) * waterMaterial.waveHeight * waterMaterial.windDirection.x * 5.0) + (Math.cos(((z / 0.05) +  time * waterMaterial.waveSpeed)) * waterMaterial.waveHeight * waterMaterial.windDirection.y * 5.0));
    });

    return scene;
};