Babylon.js - Simplification demo source

Back to demo

main.ts

import { runDemo } from "../shared/demoRunner";
import { createSimplificationScene } from "./scene";

runDemo({ createScene: createSimplificationScene });

scene.ts

import type { Engine } from "@babylonjs/core/Engines/engine";
import { Scene } from "@babylonjs/core/scene";
import { ArcRotateCamera } from "@babylonjs/core/Cameras/arcRotateCamera";
import { HemisphericLight } from "@babylonjs/core/Lights/hemisphericLight";
import { Vector3 } from "@babylonjs/core/Maths/math.vector";
import { ImportMeshAsync } from "@babylonjs/core/Loading/sceneLoader";
import { SimplificationType } from "@babylonjs/core/Meshes/meshSimplification";
import type { Mesh } from "@babylonjs/core/Meshes/mesh";
import "@babylonjs/core/Loading/Plugins/babylonFileLoader";
import "@babylonjs/core/Meshes/meshSimplificationSceneComponent";

export function createSimplificationScene(engine: Engine, canvas: HTMLCanvasElement): Scene {
    const scene = new Scene(engine);
    const camera = new ArcRotateCamera("ArcRotateCamera", 1, 0.8, 100, Vector3.Zero(), scene);
    camera.setTarget(Vector3.Zero());
    camera.attachControl(canvas, false);
    const light = new HemisphericLight("light1", new Vector3(0, 1, 0), scene);
    light.intensity = 0.5;

    scene.registerBeforeRender(function () {
        camera.alpha += 0.005;
    });

    ImportMeshAsync("/Scenes/Dude/Dude.babylon", scene).then((result) => {
        const mainMesh = (result.meshes[1] || result.meshes[0]) as Mesh;
        camera.setTarget(mainMesh.getBoundingInfo().boundingBox.center);

        // Progressive mesh simplification: builds decimated LOD levels shown at distance.
        mainMesh.simplify(
            [
                { quality: 0.8, distance: 30, optimizeMesh: true },
                { quality: 0.5, distance: 60, optimizeMesh: true },
                { quality: 0.3, distance: 100, optimizeMesh: true },
            ],
            true,
            SimplificationType.QUADRATIC
        );
    });

    return scene;
}