Finishing touches
Now that all the basic elements are in place, you can add some features to the scene to make it more user-friendly.
First of all, change the color of the left and right controller object to easily tell them apart. To do this, click on the whole_model_group1
object, then on Material > Surface Inputs. Change the Base Map to a different color for each controller. In the Demo Project, you can see that the left controller is blue, and the right controller is red.
Now you can improve the looks of teleportation and raycasting. In the XR Ray Interactor properties, under Raycast Configuration, change the Line Type to Projectile Curve. You can also change the ray color: in the template, the Invalid Color Gradient is set to transparent. This makes the ray invisible, until it is pointed at a valid target.
A teleportation reticle can also be added to the ray. To prototype this, create a new cylinder, rename it Teleport Reticle, remove the collider, scale it down to 0.5 and lower the Y axis to create a disk shape. Create a new material called Reticle Base, set the shader to URP/unlit, set the surface type to transparent, choose a color, and decrease the alpha value to about 70. Drag the new material onto the Teleport Reticle object and assign the Reticle to the Reticle property of the Line Visual component. You can see a transparent reticle at the end of our ray which appears when hovering over an eligible object and provides some additional feedback to the player on their teleport location.
To make this element more interesting, you can use a ShaderGraph instead of a solid color.
Right click in the Project folder and select Create > Shader Graph > URP > Unlit Shader Graph.Graph, Open
- open
Addtheteleportationnewreticleshader Addinanimationsthe shader editor. In the Graph Inspector, change the Surface Type tocontrollerTransparent and the Render Face to Both. Now let's create two colors in the left-hand panel for the shader effect. Switch the Graph Inspector to the Node Settings window to view the properties for each color. Make the TopColor fully transparent, and the BottomColor your preferred shade. To create a gradient based onbuttonthepressheight Addofmaterialthe model, right click in the open space and select Create Node then search for Position. Update the Space value tofloorObject.