All content in this course uses:

3.1 - Comfort and Accessibility

In this lesson, you will learn how to reduce the risk of simulator sickness and increase the inclusivity or your app, allowing it to be enjoyed by as many people as possible. By the end of this lesson, your app will be more comfortable and accessible. 

When the scene loads, it can be a little jarring to just appear in a new world. It is generally good to fade into new environments. 

1.  Make a new Screen Space canvas to fade in from:


2.  Make the canvas render directly in front of the camera:

object, in the Canvas component, set the 

properties to a large number (e.g. 100) to make sure the canvas covers your whole field of view.


4.  Make the canvas appear directly in front of the Main Camera and in front of all other objects:

The black canvas should now completely cover the field of view when you run the program. 

Create a simple black canvas for fading

Now that you have the black canvas set up, you need to fade from it on scene load.

1.  Allow the canvas and all of its elements to fade:

 object, add a Canvas Group component and a Fade Canvas component.


2.  Make an event that detects when the scene has loaded:

In the Hierarchy, add an empty object and rename it “Scene Loader”. It will hold your scene loading events.


4.  Hide the black image in scene view by default: 

The scene should now appear to fade in from black when the scene loads. You can test this using the reset scene UI screen you made. 

Fade in on scene load

Another opportunity to improve player comfort through fading is during teleporting. Typically, there is a short fade to reduce the illusion of movement (“vection”) when teleporting and improve comfort.

1.  Add fading functionality to your Teleportation Area (rug):

prefab, remove the default Teleportation Area component and replace it with the custom Teleport Area With Fade component.

At the bottom of the new component, assign the same 

 properties to match the original component.


2.  Add fading functionality to your Teleportation Anchor (mats):

 on one of your mats in order to apply changes to all mats at once.

Remove the default Teleportation Anchor component and replace it with the custom Teleport Anchor With Fade component.

Edit the new component’s properties to match the original component.

: make sure that you have applied the changes to all mat prefabs or prefab variants. 

Your teleportation anchors and teleportation area should now quickly fade to black when you teleport.

Teleporting with fade

In order to add some settings, you will add a new panel that can be accessed from the main menu panel. 

Delete the default Text so that it has no text on it.

Resize and reposition the button so it fits nicely on in the bottom-right corner of the menu.

Rename the copied object “Settings Background” 

Temporarily deactivate the welcome panel so you can only see the settings screen for easier editing.


3.  Add placeholder content to the settings screen:

Replace the contents of the panel with three placeholder text objects (“Setting 1” / Setting 2” / “Setting 3”)

 object next to each setting, deleting the default text that is generated by the toggle. 

You may want to parent each text object to group them together.

: Use TextMeshPro Text for the labels instead of the default Text label that comes with the toggle.


4.  Replace the settings gear icon with an “X” icon:

In the Gear icon’s Image component, change the 


5.  Allow the user to go back and forth between these menus:

set the settings screen as active and the welcome screen as inactive.

 event, set the settings screen as inactive and the welcome screen as active.


6.  Make the reset menu hide the settings menu when it appears:

event, add a new action that disables the settings screen.

You should now be able to access the Settings menu from a gear icon in the main menu, which has 3 placeholder toggle settings. You should also be able to return to the welcome panel from the settings by pressing a Close button. 

Add a settings panel

One of the easiest ways to increase accessibility is allowing for more ways to navigate the environment. You will allow the user to enable or disable snap turning.

Edit the first setting text to say “Snap Turning”. 

 property is enabled, since Snap Turning is enabled by default.


2.  Link the toggle to the Snap Turn component:

Assign the XR Rig to the Object slot, since it contains the Snap Turn provider component.

: Make sure to select the “enabled” property that is a dynamic bool (boolean) - this means that it will be affected dynamically by the state of the toggle.

You should now have a functional check box that enables and disables snap turning. 

Add a snap turning setting

Another setting that can drastically increase accessibility is the ability to grab objects at a distance using rays. 

1.  Set up how your setting should appear by default:

In the Toggle component, enable or disable the 

Change the text of the Toggle to “Distance Grab”.


2.  Make sure all of your grabbable objects can be accessed on the same layer:

In each object’s XR Grab Interactable component, make sure the 


3.  Give your rays the ability to change to a different set of layers:

Add a Set Interaction Layer component to both objects.

layer, which would allow them to grab objects.


4.  Make the “Distance Grab” toggle trigger these target layers:

two times to add two new actions (one for each hand).

Assign the RightHand Ray to one object slot and the Lefthand Ray to the other object slot.

 option in the upper section of the list in order to tie the function to the value of the toggle.

You should now have a toggle that enables and disables the ability to grab objects with rays from a distance.

Add a distance grab setting

Recap


If you want to further develop your skills, explore new concepts, and improve your project, check out some of the optional extension activities below. 

Each one is tagged as [Easy], [Medium], [Difficult], or [Expert] and will also include a [Requires Programming] tag if some coding is required. 

Add audio narration that plays at the start of your scene, reading the text on the main menu:

Use the OnSceneLoad script to trigger this

2.  Add a closed captions setting [Medium]

Add closed captions to improve audio accessibility: 

For ambient sound like the fireplace, add closed captions to indicate what the sound is at the sound’s location.

Bonus - have the closed caption “billboard” towards the player, so that it’s always facing towards the player and is therefore always readable (use the “LookAtPlayer script from the Course Library or write your own script). 

Bonus - for your TV, use a video with words in it and add closed captions that go along with the words of the video (the Unity-shape-the-world video provided has voiceover) [Requires programming]. 

3.  Add a continuous movement setting [Medium] 

Add a setting to toggle on and off continuous movement:

Use the same technique you did to toggle snap turning.

You will need to add a Continuous Move Provider component and a Continuous Turn Provider component to the XR Rig. 

Bonus - You could have a single toggle or drop-down that alternates between (a) continuous movement and turning vs (b) snap turning and teleporting. 

Extension Activities

Beginner VR Design

Aaron Sharp

3.1.ext - Voiceover.mp4

3.1.ext - Continuous movement.mp4

3.1.ext - Closed captions.mp4

3_1_2_v2.mp4

3_1_5_v2.mp4

3_1_recap_v1.mp4

3_1_3_v2.mp4

3_1_1_v2.mp4

3_1_4_v2.mp4

3_1_6_v2.mp4

This lesson is part of the Create with VR course. 

By the end of this lesson you will be able to:

Explain the importance of limiting a user’s field of view in order to reduce the risk of simulator sickness, especially as it relates to locomotion.

Recognize opportunities for improving accessibility in an app in order to make it more inclusive, including motor, audio, visual, and cognitive accessibility. 

Modify a project in order to make it more comfortable or accessible in order to allow it to be enjoyed by as many people as possible.

VR Developer Pathway Facilitator Kit.zip

VR Developer Pathway Facilitator Kit (Google Drive)

Unity Educator Hub

The VR Developer Pathway Facilitator Kit includes everything you need to successfully bring this Pathway into your learning context including a syllabus, complete lesson plans, standards alignment, teacher preparation guide, and more.  

Games

Film

Automotive

Skill-L2-SysDes.VRd-1: Evaluate a proposed VR experience in order to suggest ways it could be improved

o-L2-SysDes.VRd-1.1: Describe the advantages and disadvantages of VR experiences, when compared with traditional screen-based experiences.

o-L2-SysDes.VRd-1.2: Describe the design considerations specific to VR experiences, when compared with traditional screen-based experiences.

o-L2-SysDes.VRd-1.3: Explain the importance of optimization and performance for VR experiences.

o-L2-SysDes.VRd-1.4: Explain comfort and accessibility considerations specific to VR experiences.

Evaluate a proposed VR experience in order to suggest ways it could be improved. 

3 - VR Optimization and Lighting

VR Ergonomics & Optimization

Unit 4: VR Optimization and Lighting

Ergonomics and Optimization

In the Hierarchy, Create > UI > Canvas and rename it “Fade_Canvas”.

In the Canvas object, in the Canvas component, set the Render Mode to Screen Space - Camera.

Set the Render Camera property to your Main Camera.

Right-click your Fade_Canvas object and create a UI > Image.

Set the X Scale and Y Scale properties to a large number (e.g. 100) to make sure the canvas covers your whole field of view.

In the Canvas component, set the Plane Distance to 0.1.

Canvas component shown with Render Mode set to Screen Space - Camera, Render Camera set to Main Camera, Plane Distance set to 0.1, and Order in Layer set to 1.

On the Fade_Canvas object, add a Canvas Group component and a Fade Canvas component.

Add an On Scene Load component to the Scene Loader object. 

On the Scene Loader object, in the On Load event, click the + to add a new function.

Select the FadeCanvas > StartFadeOut () function.

Set the Canvas Group component’s Alpha value to 0.

In the Hierarchy, the Scene Loader object is selected. In the Inspector, in the On Scene Load component, in the On Load event, the Canvas_Fade object is assigned with the function FadeCanvas.StartFadeOut.

On your Rug prefab, remove the default Teleportation Area component and replace it with the custom Teleport Area With Fade component.

At the bottom of the new component, assign the same Interaction Layer Mask,  Custom Reticle and Match Orientation properties to match the original component.

Enter Prefab Mode on one of your mats in order to apply changes to all mats at once.

Note: make sure that you have applied the changes to all mat prefabs or prefab variants. 

In the Hierarchy, The Mat object is selected. In the Inspector, the Teleport Anchor with Fade component is highlighted.

In the Hierarchy, right-click Welcome Background object and select UI > Button - TextMeshPro to add a button. 

Set the Source Image property to the gear icon 

In the Hierarchy, duplicate the Welcome Background object. 

Add a Toggle object next to each setting, deleting the default text that is generated by the toggle. 

Note: Use TextMeshPro Text for the labels instead of the default Text label that comes with the toggle.

In the Gear icon’s Image component, change the Source Image property from Icon_Gear to Icon_Close.

In the Settings button’s On Click event, set the settings screen as active and the welcome screen as inactive.

In the Close button’s On Click event, set the settings screen as inactive and the welcome screen as active.

In the XR Rig’s On Button Press event, add a new action that disables the settings screen.

In Scene view, the X button in the top-right corner of the user interface panel is selected. In the Inspector, the OnClick event is highlighted. In the On Click event, the Settings_Background object is being set to InActive and the Welcome_Background object is being set to Active.

In Scene view, the Cog settings button in the top-right corner of the user interface panel is selected. In the Inspector, the OnClick event is highlighted. In the OnClick event, the Welcome_Background object is being set to InActive and the Settings_Background object is being set to Active.

In the Toggle component, make sure the Is On property is enabled, since Snap Turning is enabled by default.

In the Toggle component, for the On Value Changed  event, click the + to add a new action.

Select the Action Based Snap Turn Provider > enabled (Dynamic Bool) function .

Note: Make sure to select the “enabled” property that is a dynamic bool (boolean) - this means that it will be affected dynamically by the state of the toggle.

In the Toggle component, in the On Value Changed event, the XR Rig is assigned to the GameObject property with the function, ActionBasedSnapTurnProvider.enabled.

In the Toggle component, enable or disable the Is On property.

In each object’s XR Grab Interactable component, make sure the Interaction Layer Mask property includes the Default layer.

In the Hierarchy, select both the LeftHand Ray and RightHand Ray objects.

Set the Target Layer property to include the Default layer and the Raycasts layer, which would allow them to grab objects.

In the Toggle component, in the On Value Changed event, click the + two times to add two new actions (one for each hand).

For both actions, select the SetInteractionLayer > ToggleTargetLayer (Dynamic bool) function.

Note: You must select the Dynamic bool option in the upper section of the list in order to tie the function to the value of the toggle.

In the Set Interaction Layer component, for the Target Layer drop-down property, the Default and Raycasts layers are enabled.

In the Toggle component, in the On Value Changed event, the LeftHand Ray and RightHand Ray are assigned to the GameObject property with the function, SetInteractionLayer.ToggleTargetLayer.

Unity Version 2022.3