大家好，很高興又見面了，我是"高級前端進階"，由我帶著大家一起關注前端前沿、深入前端底層技術，大家一起進步，也歡迎大家關注、點讚、收藏、轉發！

今天給大家帶來的主題是 Babylon.js v6.0的發布，話不多說，直接開始！

1.什麼是 Babylon.js

Babylon.js 是一個由微軟開源的 javascript 框架，用於網絡開發 3D 應用程式、視頻遊戲，是一個實時 3D 引擎，其通過 HTML5 在 Web 瀏覽器中顯示 3D 圖形。BabylonJS 的官方網站是 www.babylonjs.com。

使用 Babylon.js 框架對用戶來說很容易，包含創建和管理 3D 對象、特效和聲音等所需的所有工具。

Babylon.js 是最流行的 3D 遊戲引擎之一，被開發人員廣泛使用，其典型客戶包括：Mozilla、Siemens AG、Siemens A/S、NEC Corporation等等。作為一個 3D 庫，它提供一系列的內置函數。這些功能可幫助開發者以高效準確的方式實現常見的 3D 功能。Babylon.js 是使用基於 WebGL 和 javascript 的 TypeScript 語言開發的。

目前 Babylon.js 已經在Github開源，有超過20k的star、3.1k的fork、超過3.7k的項目依賴量，代碼貢獻者500+，是一個值得長期關注的開源項目。

2.Babylon.js 6.0新功能

Babylon.js 的使命是構建世界上最強大、最美觀、最簡單和最開放的 Web 渲染引擎之一。隨著Babylon.js 6.0 的發布，新版本帶來了一系列性能改進、渲染增強和激動人心的新功能。

2.1 Babylon.js 的新 Havok WASM 插件

Havok 團隊通過一個特殊的新 WASM 插件與對 Babylon.js Physics API 的全面檢修合作，將最先進的一些功能引入 Babylon.js。

將 Babylon.js 物理提升到一個全新的水平，憑藉優秀的新物理功能和高達 20 倍的性能提升，現在是深入了解 Babylon.js 物理的最佳時機。

物理引擎：是可以插入 Babylon.js 的第三方外部程序，它們模擬對象之間的「現實生活」交互，這些對象可以是網格、來自實體粒子系統的實體粒子或某些相機。物理引擎的一個功能是為場景添加重力。

Babylon.js 有 3 個物理引擎的插件：

Cannon.js ：一個完全用 JavaScript 編寫的出色的物理引擎。
Oimo.js -：輕量級 Oimo 物理引擎的 JS 埠。
Ammo.js ：子彈物理引擎的 JS 埠。

要啟用物理引擎，需要手動調用場景的 enablePhysics 函數：

var scene = new BABYLON.Scene(engine);
var gravityVector = new BABYLON.Vector3(0, -9.81, 0);
var physicsPlugin = new BABYLON.HavokPlugin();
scene.enablePhysics(gravityVector, physicsPlugin);
// 兩個參數都是可選的

2.2 性能優先模式

能力和性能是 Babylon.js 的核心，而 6.0 版通過所有新的性能優先模式提升了性能，渲染速度和性能提高了 50 倍。

這些新模式讓開發人員可以通過在向後兼容模式、中間模式或激進模式之間進行選擇來控制體驗性能。在這 3 種不同模式之間進行選擇可提供不同級別的功能和靈活性。

2.3 流體渲染

使用 Babylon.js 6.0 可以渲染流體，這會在瀏覽器中以 60fps 的速度解鎖一些真正令人嘆為觀止的圖像！

2.4 改進的屏幕空間反射

可以使用多種方法實現渲染反射，每種方法都有自己的優點和缺點。主要有兩種方法：

鏡面紋理的使用：優點是在平面上呈現完美的反射，缺點是僅限於一個反射方向，複雜度根據場景的幾何形狀增加。
SSR後處理的使用：優點實時使所有方向的所有反射成為可能，複雜性僅取決於屏幕解析度（與所有後處理一樣），缺點是限於相機所見。

一些遊戲中也使用光線追蹤來渲染反射。但是，它在網絡技術中尚不可用。

下面是啟用和未啟用 SSR 渲染管線的渲染對比：

下面代碼創建一個 BABYLON.SSRRenderingPipeline 實例：

const ssr = new BABYLON.SSRRenderingPipeline(
    "ssr", // The name of the pipeline
    scene, // The scene to which the pipeline belongs
    [scene.activeCamera], // The list of cameras to attach the pipeline to
    false, // Whether or not to use the geometry buffer renderer (default: false, use the pre-pass renderer)
    BABYLON.Constants.TEXTURETYPE_UNSIGNED_BYTE // The texture type used by the SSR effect (default: TEXTURETYPE_UNSIGNED_BYTE)
);

新版本的 Babylon.js 還帶來了一個完全更新的屏幕空間反射模型，使您能夠以儘可能高的性能水平在整個場景中渲染令人驚嘆的反射！

2.5 紋理貼花

強大的渲染功能集的標誌之一是靈活性。

Babylon.js 6.0 通過添加新的紋理貼花功能擴展了處理材質的靈活性。紋理貼花允許開發者通過網格的 UV 空間投射貼花以覆蓋在材質的紋理上。這在不犧牲性能的情況下為真正身臨其境的網絡體驗解鎖了一些有趣的新交互可能性！

有一個名為 MeshUVSpaceRenderer 的新類，可用於創建和更新貼圖。主要方法是 renderTexture，同時允許向紋理添加貼花：

const decalMap = new BABYLON.MeshUVSpaceRenderer(mesh, scene);
const texture = new BABYLON.Texture("bullet.png", scene);
const decalSize = new BABYLON.Vector3(1, 1, 1);
// find the position and the normal of the mesh where you want to add the decal
...
decalMap.renderTexture(texture, position, normal, decalSize) ;

2.6 新的 GLTF 擴展支持

在 Web 上啟用最漂亮的渲染是一項不斷發展的努力。在 Babylon.js 6.0 中，繼續尋求通過令人興奮的新 glTF 擴展來支持渲染方面的絕對最新進展。

在這個最新版本中，Babylon.js 完全支持 KHR_materials_iridescence 和 KHR_animation_pointer glTF 擴展。

2.7 節點材質光線行進

Babylon.js 中最常用的功能之一是節點材質，這種高級材質類型使開發者無需編寫一行代碼即可創建極其複雜的交互式著色器！

var createScene = async function () {
    var scene = new BABYLON.Scene(engine);
    scene.environmentTexture = BABYLON.CubeTexture.CreateFromPrefilteredData("textures/environment.env", scene);
    var camera = new BABYLON.ArcRotateCamera("camera", -Math.PI/2, Math.PI/3, 10, BABYLON.Vector3.Zero(), scene);
    camera.wheelPrecision = 30;
    camera.maxZ = 20;
    camera.setTarget(BABYLON.Vector3.Zero());
    camera.attachControl(canvas, true);
    const usePBR = true;
    var light = new BABYLON.SpotLight("spotLight", new BABYLON.Vector3(-3, 3, -3), new BABYLON.Vector3(3, -3, 3), Math.PI / 3, 2, scene);

    light.intensity = usePBR ? 400 : 1;

    light.shadowMaxZ = 10;
    var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2, segments: 32}, scene);

    sphere.position.y = 0.5;
    sphere.position.z = -0.8;

    var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 6, height: 6}, scene);
    ground.position.y = -0.15;
    const groundmat = usePBR ? new BABYLON.PBRMaterial("groundmat", scene) : new BABYLON.StandardMaterial("groundmat", scene);
    groundmat.metallic = 0;
    groundmat.roughness = 1;
    groundmat.albedoColor = new BABYLON.Color3(141/255, 118/255, 94/255).toLinearSpace();
    groundmat.diffuseColor = new BABYLON.Color3(141/255, 118/255, 94/255);

    ground.material = groundmat;

    const mat = await BABYLON.NodeMaterial.ParseFromSnippetAsync(usePBR ? "#GD8DSL#15" : "#GD8DSL#16", scene);
    const matShadow = await BABYLON.NodeMaterial.ParseFromSnippetAsync("#47Y40D#6", scene);

    sphere.material = mat;
    sphere.material.shadowDepthWrapper = new BABYLON.ShadowDepthWrapper(matShadow, scene, { standalone: true, doNotInjectCode: true });
    sphere.receiveShadows = true;
    var shadowGenerator = new BABYLON.ShadowGenerator(2048, light);

    shadowGenerator.bias = 0.004;
    shadowGenerator.usePercentageCloserFiltering = true;
    shadowGenerator.getShadowMap().renderList.push(sphere, ground);
    ground.receiveShadows = true;

    return scene;
};

Babylon.js 6.0 在引擎下做了很多管道，以使其比以往更強大。通過這項工作，開發人員現在可以將更高級的 3D 圖形技術構建到節點材質著色器中，包括 Ray Marching 。

2.8 新的三平面和雙平面節點

Babylon.js 6.0 在節點材料中添加了兩個令人興奮的新節點。新的三平面投影節點允許開發者將紋理投影到 3D 對象上，而不管網格 UV。它使用三個獨立的 2D 紋理投影，每個軸一個，並將它們混合在一起以創建無接縫的材質。

除了三平面節點，還添加了一個雙平面節點。它以類似的方式工作，使用兩個 2D 紋理而不是三個，節省 GPU 計算並最終導致無縫紋理對性能的影響較小。

2.9 圖形用戶界面編輯器 V1

Babylon.js 5.0 引入了 GUI Editor Beta，讓開發者可以更簡單地為 Babylon 場景創建複雜的 GUI 設計。在 Babylon.js 6.0 中，GUI 編輯器隨著版本 1 的發布正式結束 Beta 測試！

此版本基於 Beta 版構建，具有大量穩定性改進和錯誤修復，最重要的是引入了與 Babylon.js playground 的更緊密連接。在 GUI 編輯器中進行更改，看到它在連結場景中立即更新。

2.10 FIGMA 到 BABYLON.JS 社區擴展

製作開源軟體最令人興奮點之一是難以置信的貢獻者社區，幫助改進和擴展 Babylon.js，使其更強大，而且對每個人都有益！

在 Babylon.js 6.0 中，James Simonson 添加了全新社區擴展，它允許開發者將 Figma GUI 設計直接導出到 Babylon.js 場景中！

2.11 輔助功能屏幕閱讀器支持

在 Babylon.js 6.0 中，核心 Babylon.js 場景樹現在對屏幕閱讀器可見。

let egg = BABYLON.MeshBuilder.CreateSphere("Egg", { diameterX: 0.62, diameterY: 0.8, diameterZ: 0.6 }, scene);
egg.accessibilityTag = {
  // 使用 IAccessibilityTag 向節點或控制項添加描述。
  description: "An easter egg",
};

這意味著開發者最喜歡的輔助功能屏幕閱讀器現在可以講述場景元素和文本來向用戶描述場景。從而使開發人員更容易創建 Babylon.js 場景，讓每個人都更容易訪問，尤其是網絡上的視障人士。

2.12 重組文檔

對於像 Babylon 這樣功能豐富且先進的平台，幫助人們學習如何使用它至關重要。在過去一年中，密切聽取了社區的意見，以使用 Babylon.js 6.0 重組 Babylon.js 文檔的組織。

這個新組織以兩種核心學習路徑更容易訪問的方式重組相同的重要信息：那些想要首先了解 Babylon.js 及其功能集的人，以及那些想要首先了解如何將 Babylon.js 集成到他們現有的網絡應用程式。

雖然有許多不同類型的學習目標，但這兩條路徑代表了大多數新的 Babylon.js 學習者，這種新的文檔結構將更好地為開發者在 Babylon.js 的精彩世界中開始學習之旅做好準備

3.使用Babylon.js

BabylonJS 及其模塊在 npm 上發布，具有完整的類型支持。要安裝，請使用：

import * as BABYLON from 'babylonjs';

或者通過如下命令單獨引入相應類：

import { Scene, Engine } from 'babylonjs';

如果使用 TypeScript，請不要忘記將「babylonjs」添加到 tsconfig.json 中的「types」：

    ...
    "types": [
        "babylonjs",
        "anotherAwesomeDependency"
    ],
    ...

要添加模塊，請安裝相應的包，可以在 npm 上的 babylonjs 用戶中找到額外包的列表及其安裝說明。一切就緒後就可以使用BabylonJS了：

//獲取畫布 DOM 元素
var canvas = document.getElementById('renderCanvas');
// 加載 3D 引擎
var engine = new BABYLON.Engine(canvas, true, {preserveDrawingBuffer: true, stencil: true});
// 創建並返回場景的 CreateScene 函數
var createScene = function(){
    // 創建一個基本的 BJS 場景對象
    var scene = new BABYLON.Scene(engine);
    // 創建一個 FreeCamera，並將其位置設置為 {x: 0, y: 5, z: -10}
    var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5, -10), scene);
    // 將相機對準場景原點
    camera.setTarget(BABYLON.Vector3.Zero());
    // 將相機連接到畫布
    camera.attachControl(canvas, false);
    // 創建一個基本光，瞄準 0, 1, 0 - 意思是，到天空
    var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 1, 0), scene);
    // 使用 SphereBuilder 創建一個內置的「球體」形狀
    var sphere = BABYLON.MeshBuilder.CreateSphere('sphere1', {segments: 16, diameter: 2, sideOrientation: BABYLON.Mesh.FRONTSIDE}, scene);
    // 將球體向上移動其高度的 1/2
    sphere.position.y = 1;
    // 創建一個內置的「地面」形狀；
    var ground = BABYLON.MeshBuilder.CreateGround("ground1", { width: 6, height: 6, subdivisions: 2, updatable: false }, scene);
    // 返回創建的場景
    return scene;
}
// 調用 createScene 函數
var scene = createScene();
// run the render loop
engine.runRenderLoop(function(){
    scene.render();
});
// 畫布/窗口調整大小事件處理程序
window.addEventListener('resize', function(){
    engine.resize();
});

4.本文總結

本文主要大家介紹新一代 Web 渲染引擎 Babylon.js v6.0 發布。因為篇幅有限，文章並沒有過多展開，如果有興趣，文末的參考資料提供了優秀文檔以供學習。最後，歡迎大家點讚、評論、轉發、收藏！

參考資料

https://www.babylonjs.com/

https://www.tutorialspoint.com/babylonjs/babylonjs_introduction.htm

https://github.com/BabylonJS/Babylon.js

https://en.wikipedia.org/wiki/Babylon.js

https://doc.babylonjs.com/features/featuresDeepDive/physics/usingPhysicsEngine

https://www.oschina.net/news/238026/babylon-js-6-0-released

https://6sense.com/tech/game-development/babylonjs-market-share

新一代 Web 渲染引擎 Babylon.js v6.0 發布！