和之前 Svelte 下的 three.js 开发：基础框架 一样仍然使用 Svelte 作为项目脚手架，从而获得现代化的构建工具。

Svelte 项目初始化

大体步骤和 three.js 一样：

1
2
3
4
5
6
7
8
npx degit sveltejs/template my-svelte-babylon
cd my-svelte-project

# 使用 typescript
node scripts/setupTypeScript.js

yarn
yarn dev

Babylon.js 安装

1
yarn add babylonjs

Babylon.js 内置了 TypeScript 类型定义，不需要 引入类似 @types/babylonjs 的依赖。

babylonjs 只是 Babylon.js 的核心，还有一些额外的模块，可以根据需要另外引入：

  • babylonjs-materials：Babylon 支持的高级材质
  • babylonjs-loaders：加载器 (OBJ, STL, glTF)
  • babylonjs-post-process：后期处理
  • babylonjs-procedural-textures：官方支持的程序化纹理（procedural textures）
  • babylonjs-serializers：Scene / mesh 序列化器
  • babylonjs-gui：GUI 模块
  • babylonjs-viewer：独立的查看器

App.svelte

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<script lang="ts">
    import * as BABYLON from "babylonjs";
    import {onMount} from "svelte";

    let canvasElem;
    let engine;

    const createScene = (engine, canvasElem) => {
        const scene = new BABYLON.Scene(engine);

        const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 3, new BABYLON.Vector3(0, 0, 0));
        camera.attachControl(canvasElem, true);

        const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0));

        const box = BABYLON.MeshBuilder.CreateBox("box", {});

        return scene;
    }

    async function createEngine(domElem) {
        return BABYLON.EngineFactory.CreateAsync(domElem)
    }

    function onResize() {
        engine.resize()
    }

    onMount(async () => {
        engine = await createEngine(canvasElem);

        let scene = createScene(engine, canvasElem);

        engine.runRenderLoop(() => scene.render());
    })

</script>

<svelte:window on:resize={onResize} />

<main>
    <canvas bind:this={canvasElem}></canvas>
</main>

<style>
    canvas {
        width: 100%;
        hegiht: 100%;
        touch-action: none;
    }
</style>

Babaylon.js 可以理解为一个游戏引擎，Engine 就是引擎，负责处理渲染、游戏循环、音频等。目前 WebGPU 已经开始慢慢被接受，所以使用 EngineFactory 可以自动选择底层渲染机制。WebGPU 的初始化是异步的，因此这里需要使用 async。

1
2
3
async function createEngine(domElem) {
    return BABYLON.EngineFactory.CreateAsync(domElem)
}

目前 Babylon.js 中的 WebGPU 并不是能直接替换传统 WebGL 的，因此有一些功能是有冲突或者不支持的。Babylon.js 可以直接指定需要的渲染机制：

1
2
const engine = new BABYLON.WebGPUEngine(canvas);
await engine.initAsync();

也可以使用 WebGL：

1
const engine = new BABYLON.Engine(canvas);

Babylon.js 从 3.0 开始，就支持 WebGL 1.0 和 WebGL 2.0 上下文渲染。默认情况下，会首先尝试 WebGL 2.0 上下文。如果浏览器不支持，会尝试使用 WebGL 1.0。

小结

Babylon.js 是完整的 JavaScript 框架，更倾向于进行游戏开发和碰撞检测，而 Three.js 则更专注于 GPU 增强和动画。