Unity VR : XR Ray Interactor

/ Tutorial, Unity, VR / By

Unity VR : XR Ray Interactor

We just finished up learning about the XR Direct Interactor here, but now it’s time to learn about it’s brother! The XR Ray Interactor. In this guide we’ll learn how to build an XR Ray Interactor, what attributes it has, how to grab objects from far away and how to create UI for VR and interact with it using our Ray Interactors.

To follow along, make sure to download the Github project found here and go to the corresponding scene!

1 : Scene Review

Booting into the Part 5 XR Ray Interactor Scene, you’ll be greeted with our table with a Ball that is a Grab Interactable. If we navigate to our controllers, we see that they have a new Script called Hand Complete, which is just our finished Hand script from the previous video.

2 : XR Ray Interactor Setup

To create a XR Ray Interactor, click on the Camera Offset found under XR Origin. Right click on the Camera Offset and add a Ray Interactor;  XR -> RayInteractor(Action Based).

Name it Left Ray Interactor and click on it. You’ll notice that it has an empty XR Controller without any 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. 

Once complete, we should be able to start up the scene and have Ray Interactors.

With it, you’ll be able to interact with objects from far away and grab them.

3 : XR Ray Interactor Attributes

Lets blast through some attributes of the Ray Interactor so we can better understand it.

  • Interaction Manager – This manager is in charge of all interactions between the interactable object and the XR Ray Interactor. If there is one in the scene, the XR Ray Interactor will automatically assign itself to it. You can have multiple Interaction Managers if you wanted to customize certain interactions, but I haven’t found a good use case for this yet.
  • Interaction Layer Mask –  If you want to have only certain objects be interactable, you would use this layer mask to set that up. The default setting is to allow all interactable objects
  • Enable Interaction with UI GameObjects – This will toggle whether we can interact with UI components.
  • Force Grab –  Toggles whether we can grab interactable objects from far away and pull them to us. When we turn this off, you can still grab objects from far away, but they will not snap to your hand position.
  • Anchor Control –  This will give you the ability to pull objects towards you or away from you using the thumbstick. Below it are a bunch of attributes that allow you to tweak this ability.
  • Attach Transform –  This is the Transform that an interactable object will attach to. If you don’t set one, it’ll use the XR Ray Interactor’s transform by default.
  • Ray Origin Transform –  This allows you to set the Origin of where you want your Ray to originate from.
  • Raycast Configuration –  There are three different types of lines we can use with the Raycast Configuration. The straight line is set by default and is great for UI and Object interaction. We also have a Projectile Curve which could be useful for showing possible trajectory of a launched object. Finally, we have the Bezier curve which is great for teleportation. 
  • Selection Configuration –  Much like Direct Interactors, this also has similar attributes that we can use for selection. By default it is by current state. It can also be based off state change, toggle (when the select button is pressed), and stick toggle (it is activated when the select button is pressed and deselected when the select button is depressed a second time).
  • Sound, Haptic, and Interactor Events –  These events can be used to provide feedback for the player. Interactor Events are things like Hover Enter/Exit and Select Enter/Exit. The Audio and Haptic events will allow you to determine how much vibration to send to a controller or play a sound when something is selected.
We also should touch on the XR Interactor Line Visual component.
  • Line Width – Sets the width of the line used for the Ray.
  • Width Curve –  Sets the width of the line from start to finish.
  • Valid Color Gradient – Sets the color of our ray when we hover over something that is a valid interactable.
  • Invalid Color Gradient –  Sets the color of our ray when we hover over something that is an invalid interactable.
  • Override Line Length –  Determine if you should set line length using the Line Visual script (true) or to have it be determined by the interactor (false). 
  • Stop Line At First Raycast Hit –  Set to true, it will stop the line from extending past the first object it hits. It will continue past the object if set to false.
  • Reticle – This will display a custom reticle at the end of our line when we hover over a valid object.

4 : Grabbing Objects From Far Away

If we start up the scene, you should be able to have the line hover over the ball and grab it. However, there are some things we may want to change with our Interactions. 

Lets start with disabling the ability to move objects with the thumbstick. To turn it off, go to the XR Ray Interactor script and uncheck Anchor Control. Now when we grab an object, It will just attach to our hands without being able to move it with the thumb sticks. 

Make sure to do this for both Ray Interactors.

Now we should hide the ray and only have it appear when we’re hovering over a item we can grab. To do this, locate the XR Interactor Line Visual script and click on the Invalid Color Gradient.

Next, click the tiny white arrow at the top left of the Gradient Editor. Reduce the Alpha to 0. Do the same for the white arrow on the top right.

Starting up the scene now, you’ll see that the red lines are gone, but a white line appears when we point towards an object.

Make sure to do this on both Interactors!

Last, we need to hide our hands when we select an object. To do this, find the XR Ray Interactor again and click the drop down for Interactor Events. Click the plus sign for Select Entered. Click and drag the corresponding Hand Controller into the empty slot. Click the drop down and go to HandComplete -> HideHandOnSelect. Repeat this step, but instead do it for Select Exited.

Repeat all steps above for the Ray Interactor that you did not do this on.

Now we can’t move the object with our thumbstick, our ray doesn’t appear until we hover over an object, and our hands will hide when we select an object!

Depending what functionality you want in your rays, you can mix an match any of these settings to suite your needs, but hopefully this gave you an idea what is possible.

5 : Creating a VR UI Canvas

Ray Interactors have become the primary way to interact with UI for many games in the VR space. To get started, we’re going to need a UI to interact with in the first place.

Right click in the scene XR -> UI Canvas. This will add a Canvas and EventSystem to our Scene that is already configured for XR development. 

Now we need to position it in the world space so we can interact with it. Enter the following for the Canvas

  • Set position to (0, 1.6, 2)
  • Width: 1000 Height: 750
  • Scale down the Canvas to (.002, .002, .002).

This will reduce our Canvas to a good world space size and place it behind the table.

Lets add some quick components to the canvas just to make sure things are working when we start using the Ray Interactor on it. 

Double clicking the Canvas and switching the view to 2D mode will make it easier to work on the Canvas.

Next, we’re going to add some UI elements to our Canvas. Right click on the Canvas object in the scene and going to UI. From here you can choose any UI item you want to try out. I used 3 buttons and a Slider, but feel free to test out multiple UI elements.

If we start up the Scene now, we should be able to interact with the UI when we point at it!

6 : Preventing Interactions with our XR Ray Interactor

There may come a time when we need to only allow the Ray Interactor have interactions with certain things. To demonstrate how we can separate interactions, lets make the Left Ray interact with only the UI and the Right Ray only interact with grabbable objects.

Starting with the Left Ray Interactor, navigate to the Raycast Mask and choose nothing to remove all interactions. Click it again and just choose UI.

This will make it so our ray only appears when it is interacting with the UI.

Navigate to the Right Ray Interactor and find it’s Interaction Layer Mask component within the XR Ray Interactor Script. Again, choose nothing, but on the second click, only choose the Interactable layer. Locate it’s Raycast Mask attribute and uncheck the UI.

Now when we start up the scene, only the Left Ray can interact with the UI and the Right hand is the only one that can interact with the Objects.

All Done!

Rays can do more things like teleport, but we’ll have to cover that one next time! Cheers and hope this helped.