大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！

高级前端进阶

今天给大家带来的主题是 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 发布！

1.什么是 Babylon.js

2.Babylon.js 6.0新功能

2.1 Babylon.js 的新 Havok WASM 插件

2.2 性能优先模式

2.3 流体渲染

2.4 改进的屏幕空间反射

2.5 纹理贴花

2.6 新的 GLTF 扩展支持

2.7 节点材质光线行进

2.8 新的三平面和双平面节点

2.9 图形用户界面编辑器 V1

2.10 FIGMA 到 BABYLON.JS 社区扩展

2.11 辅助功能屏幕阅读器支持

2.12 重组文档

3.使用Babylon.js

4.本文总结

参考资料

继续阅读

WebGL:BabylonJS、Threejs、LayaboxJS、SceneJS、ThingJS比较

浏览器原理 23 # 分层和合成机制：为什么CSS动画比JavaScript高效？

《了解渲染引擎》渲染引擎

Orillusion引擎正式开源！AIGC时代下的WebGPU轻量级3D渲染引擎！

还在继续押宝 Three.js？Babylon.js 也很强！

3D渲染引擎

常见浏览器内核及其JavaScript引擎一览表1、GoogleChrome【内核】：Blink。Blink内核是由Go

DXGI FOMAT中的SNORM和 UNORM格式

什么是 haslayout ？第一部分：什么是hasLayout?第二部分：哪些元素将默认有一个布局？第三部分：为什么不将所有元素默认有一个布局？第四部分：如何激发 haslayout？第五部分：如何巧妙的使用 haslayout？

【渲染引擎】cairo介绍

小程序技术分享| 小程序集成 pixi 渲染引擎

【前端】浅谈浏览器内核：渲染引擎、JS引擎

23 Babylonjs入门进阶使用凹凸纹理，透明度纹理和平铺凹凸纹理半透明纹理平铺

计算机生成图像（Computer-GeneratedImagery，简称CGI）技术是现代电影制作中最为重要的视觉效果之

【译】你真的了解 CSS 径向渐变吗？

10个用Babylon.js开发WebGL/WebGPU应用必备的工具