Unity VR : Teleportation

So far we’ve learned how to setup VR and grab things with different interactors. Now it’s time to learn how we can move around in our environment!

The two main methods of moving in VR worlds are continuous move and teleportation. Since I easily get motion sick, I’m going to start us on teleportation!

As always, the Github project to follow along can be found here.

In this tutorial, we’ll learn how to setup teleportation, how to use teleport areas and anchors, how to make teleporting rays, how to make our teleportation look better, and how to use the thumbstick to activate our teleportation.

1 : Reviewing The Scene

Opening up the scene, we’re greeted with everything from our previous project. We have a ball on the table, direct interactors on our controllers and two ray interactors. I’ve also added a few prefabs and scripts that we’ll use a little later.

2 : Setting Up Teleportation

In order to teleport, we need to start by adding a locomotion system. Do the following.

Right click on XR Origin -> XR -> Locomotion System (Action Based).
Locate the Snap Turn Provider on the Locomotion System and check the box for Right Hand Snap Turn Action.
Click the empty Reference slot and locate the XRI RightHand/Turn
Double check the Transform of the Locomotion System and make sure it is set to 0.

In terms of being able to teleport, we’re pretty close at this point! Next we need to populate the Scene with areas to teleport to.

3 : Making Teleport Rays

Teleportation rays are pretty simple. Right click on the Camera Offset found on the XR Origin and go to XR -> Ray Interactor. Name it Left Teleport Ray. Duplicate it and call the Duplicated ray Right Teleport Ray.

You’ll notice that it has an empty XR Controller without any Input Actions mapped to it. To fix this, click on the LeftHand Controller, right click on the XR Controller component and copy the component. Navigate back to the Left Ray Interactor, right click on the XR Controller and choose Paste Component Values.

Repeat the steps above to make a Right Ray Interactor.

Select the Left Teleport Ray and navigate to the XR Ray Interactor. We’re going to add a new Layer. Click the drop down on Interaction Layer Mask and choose Add New Layer. Type in “Teleport” in one of the blank lines.

Select the Left Teleport Ray and navigate back the to XR Ray Interactor. Click the drop down for the Interaction Layer Mask and choose “Nothing” to deselect everything. Click the same drop down and choose Teleport.

Now the Ray will only interact with other objects that are on the Interaction Layer Mask called Teleport.

Select the Right Teleport Ray and repeat the step above to make it only interact with the Teleport layer.

4 : Teleportation Areas and Anchors

There are two main types of teleportation provided for us.

Teleportation Area – This will be an entire area that can be teleported to and around.
Teleportation Anchor – This is a singular spot in which the user can teleport to.

Adding a teleportation area or anchor is easy. To demonstrate each, do the following.

Right click in the Scene and go to XR -> Teleportation Area
Give it a Position of (0, .002, 0) and Scale (.5, .5, .5)
Change Interaction Layer to Teleport (Add a Interaction Layer called Teleport if not there)
Change Layer to Teleport (Add a Layer called Teleport if not there)
(Optional)In Project folder go to Materials -> WorldMats and drag the TeleportationArea material onto the Teleportation Area in the Scene so it looks better.
Right click in the Scene and go to XR -> Teleportation Anchor
Give it a Position of (3, .002, 0) Rotation (0, -90, 0) Scale (0.1, 0.1, 0.1)
Change Interaction Layer to Teleport (Add a Interaction Layer called Teleport if not there)
Change Layer to Teleport (Add a Layer called Teleport if not there)
(Optional) In Project folder go to Materials -> WorldMats and drag the TeleportationAnchor material onto the Teleportation Anchor in the Scene so it looks better.

Going over some of the Teleport Area attributes.

Interaction Manager – Handles interactions between the interactable object and interactors.
Interaction Layer Mask – Determines what we can interact with based on what masks it is associated with.
Custom Reticle – Creates a custom reticle at the end of the ray if it is valid.
Match Orientation – Provides multiple ways to orient the player being teleported.
- World Space Up – Stay oriented according to world space up vector.
- Target Up – Orient based on the Interactable objects Transform’s up vector
- Target Up and Forward – Orient based on the Interactable objects Transform’s up vector and forward rotation.
- None – Maintain same orientation before and after teleportation.
Teleport Trigger – Choose how the teleport is triggered.
Teleportation Provider – This will be auto-populated when we start the Scene with our Locomotion System on the XR Origin.

I would go over the Teleportation Anchor attributes as well, but as you can see, the only main difference is that it has a Teleport Anchor Transform that it uses to teleport the player to.

For testing purposes, we should change the Match Orientation on the Teleportation Anchor to Targeted Up and Forward. That way when we teleport on the Teleport Anchor, we’ll be facing towards the table.

We’ll also want to make sure the Teleportation Area and Anchor are using the Interaction Layer Mask called Teleport. Like with the Teleport Rays, just select the Teleportation Area/Anchor and change its Interaction Layer Mask to only be associated with Teleport.

5 : Making Our Teleportation Look Better

We have a working teleport system now, but to be honest, it looks really bad. Let’s fix that!

Let’s start by making the Ray for our teleport system look better. Select the Left Teleport Ray and do the following.

XR Ray Interactor component
- Disable the Enable Interaction with UI GameObject attribute
- Disable the Force Grab attribute
- Disable the Anchor Control attribute
- Change Line Type (Under Raycast Configuration) to Projectile Curve
- Change Velocity to 5

XR Interactor Line Visual
- Line Width set to 0.01
- Go to Prefabs -> 6 Teleportation and drag the TeleportReticle into the empty Reticle slot

Now when we start up the Scene, our teleporter should look way better!

6 : Fixing Always Active Teleport

I have yet to play a game where the teleportation is always one. Usually it is activated using a button on the controller or by pushing the thumbstick forward. After trying out both options, I find the thumbstick method to be the best way to implement teleport activation.

While looking for solutions, I found a great one provided by another educator named Justin P. Barnett who can be found here. I’ve updated some of his code and will proceed to talk about it here.

You can find the Script under Assets -> Scripts -> 6 Teleportation. It will be called Teleportation Manager.

Opening up the Script, you’ll see that ever line has been detailed and explained with comments in order to avoid redundancy here… Also to save my sanity from making a bunch of screenshots.

Select the Left Teleport Ray and do the following.

Add the TeleportationController Script to the Left Teleport Ray
Change Target Controller to Left Hand
For Input Action add the XRI Default Input Actions
For Ray Interactor add the Left Teleport Ray
For Teleportation Provider add the Locomotion System

7 : Conclusion!

There we have it! Now when we start up the scene we have a good looking teleport that uses the thumbstick to activate.

There are numerous things we can do from here to customize and improve the teleport/ray, but this is a great start.

On to the next topic!!!