Babylon JS Day 17

Today I learned about teleportation in WebXR with Babylon JS. I used the default experience helper to add WebXR to my scene, so teleportation is available by default. The only thing I needed to provide is an array of meshes that the user can teleport on. In this case I created two group planes and passed them to the floorMeshes option. There are also a couple of methods to add and remove floor meshes to the teleportation system.

    var groundMat = new BABYLON.StandardMaterial(scene);
    groundMat.diffuseColor = new BABYLON.Color3.FromHexString("#9ba8b8");

    var ground1 = BABYLON.Mesh.CreateGround("ground1", 20, 20, 2, scene);
    ground1.material = groundMat;
    var ground2 = BABYLON.Mesh.CreateGround("ground2", 20, 20, 2, scene);
    ground2.position = new BABYLON.Vector3(0, 0, 25);
    ground2.material = groundMat;


    // WebXRDefaultExperience
    const xrDefault = await scene.createDefaultXRExperienceAsync({
      floorMeshes: [ground1, ground2]
    });

There are two kinds of teleportation.

• Direct teleportation will draw a straight line and can be used when the target mesh is in sight
• Indirect teleportation will draw a parabolic path and is useful when the target mesh is not in sight. The most common use case for this is when teleporting to platform that is above the player position. This type of teleportation can be deactivated if needed. It also has a few properties that can be customized.

The “landing zone” is a set of meshes the make up the object that indicates where the user will teleport. This is something that I want to customize, as the default appearance and size of this don’t appeal to me. By default, this landing zone object is about ten times larger than I think it should be… The documentation has some information on how to customize the appearance and behavior of the landing zone.

One of the core features that Babylon JS includes with the teleporter is the ability to turn or change directions during a teleportation action. I’m not a fan of this and I try to turn it off whenever a game lets me do so. Lucky for me, they include a property that I can toggle off to remove this behavior.

 xrDefault.teleportation.rotationEnabled = false;

For the most part, I really like the teleportation features that Babylon JS includes. They packed a ton of options and customization into this feature. I need to spend some time customizing the landing zone, but aside from that I’ll use most of the default options.