Tallinn University XR tour

You can play this from this link. The shader needs long time to compile at first start.

Plan the experience

The app is to make a campus tour of Tallinn University. The player can teleport in the school campus.

Choose a framework

The app uses Babylon.js as the framework.

Set up the environment

Modal Scanner	Luma 3D capture
Panorama Camera	Google Camera
Modal Editor	MeshLab
Editor	Visual Studio Code
Local Web Server	vite

Create the 3D assets

Use Luma 3D capture to scan the campus, and use MeshLab to cut unwanted spots.

Use Google Camera to take a panorama photo of the campus.

Code the experience

Scene.tsx

 const scene = new Scene(engine);

    const camera = new ArcRotateCamera(...);
    const light = new HemisphericLight(...);

    const assetManager = new AssetsManager(scene);
    loadSky(scene, assetManager);
    loadPointCloud(assetManager);

    const ground = MeshBuilder.CreatePlane(...)

    const target1 = MeshBuilder.CreateText(
        "Astra",
        "ASTRA",
        …
    )!;

    const target2 = MeshBuilder.CreateText(
        "Silva",
        "SILVA",
        …
    )!;

    const experience = await scene.createDefaultXRExperienceAsync({
        uiOptions: {
            sessionMode: "immersive-vr",
        },
        optionalFeatures: true,
        floorMeshes: [ground],
    });
    experience.teleportation.addFloorMesh(ground);

    assetManager.load();

Test and debug

Desktop Testing tool: IWER

Bugs: The movement is too slow, the player’s start point is inside of the mesh

On device testing: Meta Quest 3

Bugs: The loading is slow, movement is slow but acceptable.