smallarrows.GIF

156 syllabus   site index   3D artists   past student work   DMA

Unity SteamVR Setup, Build from Scratch

Prebuilt SteamVR Project with Post Processing
Download this 2020 scene, move the folder to your Desktop or working area.
This file is already setup with SteamVR and some other tools.
https://classes.dma.ucla.edu/Winter22/156/projects/template.zip

star
Prebuilt SteamVR Project with Universal Rendering Pipeline & Post Processing
Download this 2020 scene, move the folder to your Desktop or working area.
This file is already setup with SteamVR and some other tools.
https://classes.dma.ucla.edu/Winter22/156/projects/URPtemplate.zip

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

Later install OpenVR XR Plugin to run a VR Headset
This plugin interferes with WebGL publish.

Select File->Build Settings...

     Select PC, Mac & Linux Standalone
    
Select Switch Platform

Download:
OpenVR
Click Latest button to download:   com.valvesoftware.unity.openvr-1.1.4.tgz tarball file
XR Plug-in called OpenVR Loader or OpenVR XR Plugin.
(There is a copy in the main project folder of this template.)

Window->Package Manager
Under the +, upper left
     Select Add package from tarball...
     Locate the com.valvesoftware.unity.openvr-1.1.4.tgz tarball file in your downloads folder
Change to Packages: In Project
     OpenVR XR Plugin was installed

If VR is not running:
Make sure Edit->Project Settings
    XR Plug-in Management
         Initialize XR on Startup is selected
          OpenVR Loader is selected

Fix Bindings, if it is a problem
Delete the Assets/SteamVR_Input folder in your project.
     Answer yes to generate actions, Save and generate, close window   (This will create a folder in Assets called SteamVR_Input)


Make sure the Player
is at 0,0,0

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

Build Your Own Project from Scratch

Import SteamVR plugin

Download and import SteamVR github
2.7.3
   Scroll down the page to select com.valvesoftware.unity.openvr-1.1.4 (1).tgz


Steam VR is a package that controls the VR Camera and Controllers for Valve Vive headsets.
This package also installs an XR Plug-in called OpenVR Loader or OpenVR XR Plugin.

Use Assets->Import Package->Custom Package
Locate the SteamVR 2.7.3 unitypackage download

You may want to deselect a few option to make the file size smaller:
     Deselect Longbow, and collapse the arrow
     Deselect Samples
    Select Samples Scripts
     Import

(You can always install these later, you may want to try the Interactions_Example file from Samples.)


Plugins always import into the Assets folder of your project. You can always copy or delete the SteamVR folders between projects.



Add a Player Camera
Locate
Assets\SteamVR\Interaction System\Core\Prefabs\Player
Drag the Player into the Hierarchy tab

Unity_steam_primitives1



SteamVR Camera Settings
Simulation Camera:
Open the arrow next to Player in the Hierarchy unity_down_arrow_hierarchy
     Open NoSteamVRFallbackObjects
          Select FallbackObjects
               Change Position in Y to 0



Game tab
Grab and drop the Game tab place it below the Scene tab to create a split view.



Delete the Main Camera to be out of the way
Select the Main Camera from the Hierarchy tab
Delete
it



::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Add a Collider to your SteamVR simulator Camera
Here are some tools to augment the Steam plugin written for you by Alex Rickett, UCLA Game lab
This tool is written to augment the Unity Steam simulator, this adds collisions to the Player camera. The camera will stop at any object such as a wall with a collider.

Download this file
HelperCollider_v3.unitypackage
On a PC right mouse Extract All...
BUG On a Mac the file might automatically unzip, if not use Stuffit to unzip. You know there is a problem if you do not see one file called
HelperCollider_v3.unitypackage.  It should look like this: helpercollider_mac
You can set Safari to not unzip: Safari->Preferences->General, uncheck Open "Safe" Files


Drag and drop the HelperCollider_v3.unitypackage into your project Assets folder.
     Install the package, click
Import
     This adds a folder called
HelperLibrary into the project, there is a prefab and and script.

Open the
HelperLibrary folder in Assets.
Drag the
SteamVRSimulatorColliderHelper prefab into your project Hierarchy, (not as a child of the Player)



::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
You won't see this while running the simulator

Teleportation
Do not add if you are publishing webGL
Drag the Assets/SteamVR/Teleport/Prefabs/Teleporting into your Hierarchy.

Place a plane just above the ground, it can not be below.

Add Component->Teleport Area


::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
You won't see this while running the simulator
Hide the Glove, Replace with a controller
Select Assets/SteamVR/InteractionSystem/.Core/Prefabs/LeftRenderModel Slim
     Uncheck Display Hand By Default
     Select Display Controller By Default


Change the Glove Color of the VR Hands
Select Assets/SteamVR/Models/vr_glove_right_model_slim/vr_clove_right_slim
Reset the material on to this model, this will remove the normal map and colors.

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::


Make a new SkyBox
Select Assets-Create->Material
In the Inspector change the Shader to Skybox/Procedural
Play with the color settings

Lighting Settings
Select Window->Rendering->Lighting
     Under the Environment tab, change the Skybox Material to your new SkyBox



Solid Color Background if you do not want to use a Skybox
Main Camera:

Choose
Window->Rendering->Lighting Settings
Click the unity_dot next to Skybox Material select None

Scene Window and Unity interface:
Select Edit->Preferences   (Mac: Select Unity->Preferences)
     Select Colors
          Change the Background color

SteamVR Headset Camera:
Open the arrow next to Player in the Hierarchy unity_down_arrow_hierarchy
     Open the arrow next to SteamVRObjects unity_down_arrow_hierarchy
     Select VRCamera
     Under Clear Flags change Skybox to Solid Color in the Inspector
     Change the Background color in the Inspector
     Change the Field of View to 90

Simulation Camera:
Open the arrow next to Player in the Hierarchy unity_down_arrow_hierarchy
     Open the arrow next to NoSteamVRFallbackObjects unity_down_arrow_hierarchy
     Select FallbackObjects
     Under Clear Flags change Skybox to Solid Color in the Inspector
     Change the Background color in the Inspector


::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

Fix Shadows and Lighting
These settings can effect performance.

Quality
Edit->Project Settings->Quality
     Select Ultra
    
Change Shadow Resolution to Very High Resolution (default high)
     If the shadows do not line up correctly:
          Decrease
Shadow distance to 4
0   (default 150)


Lights
Select your Directional Light

     Turn on Shadows
     Turn down
Strength to lighten the shadow color, try .5    (default 1)

    
Change Bias to .007            (default .05)
     Keep Normal Bias at .4      (watch for artifacts, default .4)
     Change Near Plane to .1   (default .2)
     Change Render Mode to Important  Do this to main lights, use as needed. (default auto)



Lighting Setting

Select Window->Rendering->Lighting 
Scene
tab
     Select New Lighting Settings button
          Change Max Lightmap Size to 2048  (default 1024)
Environment tab
     You may want to change Environment Lighting Source
to Color (default skyBox)
          If you turn off skybox,  decrease the Ambient Color for the scene a little to help the contrast.
     Try changing Environment Reflections Source to Custom (default Skybox)
          You can add your own Skybox, see above.



::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

unity_post_processing
Post Process Render, Guy Debord model by McKenzie Wark

Ambient Occlusion with Post Processing
Use Post Processing to add anti-aliasing and ambient occlusion to your project. Ambient Occlusion simulates indirect light and shadow reflecting off surfaces.

Open Window->Package Manager
Select Post Processing
     A window will pop-up, select Install

Add a Post-process Layer to each Camera
Choose the camera(s) you will be using:
     For the VR camera in the Hierarchy open Player->SteamVRObjects->VRCamera
     For the Steam VR simulator camera in Hierarchy
open
Player->NoSteamVRFallbackObjects->FallbackObjects

Select Component->Rendering->Post-process Layer
     Do this for both cameras.


Add a Scene Layer
At the top of the Inspector select Layer->Add layer...
     Type a name such as post process in one of the empty layers
unity_scene_layer


Select the
Player->NoSteamVRFallbackObjects->FallbackObjects Camera (FallbackObjects)
     In the Inspector under Post-process Layer
          Change Layer to post process
     Select Mode   Fast App
roximate Anti Alias (FXAA)
  (default no Anti-Aliasing)
Do this for all cameras

unity_post_process_cam_layer



Add Post Process Volume for Effects
Select GameObject->3D Object->Post-process Volume

Select the Post-process Volume in the Hierarchy
     Change the Layer to post process in the Inspector (near the top)
     Select  Is Global


Under Post-process VolumeProfile click New
Click Add effect...
     Select Unity->Ambient Occlusion

Under Ambient Occlusion  unity_down_arrow_hierarchy
     Select Mode, Intensity
     Change the Mode to Scalable Ambient Obscurance   (The other option will not work with WebGL.)
     Change Intensity to .25
Select Radius

You will need to run the Game to see the effect. It will be more obvious with walls.

Try adding other effects, use Add effect...



::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

Reflection Probe for shiny glass and chrome

Select GameObject->Light->Reflection Probe
Change the Position to 0,0,0 in the Inspector
Make sure your objects are within the cube area. Use this editor to adjust. unity_reflection_probe

Change the
Type to Realtime     (default Baked)
Change the
Clear Flags and Background color to match your camera

Increase Smoothness
on Materials to change the reflectivity


See these notes for Universal Rendering Pipeline

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

Publish to WebGL
You can view your project on a website server and access via the internet

Fix SteamVR Newton script

Under the Project tab select Assets/SteamVR/Input/Plugins/JSON.NET/Valve.Newtonsoft.Json.dll  (search for Newton)
In the Inspector
put a checkmark next to WebGL
Hit Apply


Remove OpenVR XR Plugin
Select Window->Package Manager
     Select and Remove the OpenVR XR Plugin
(You can always reinstall for VRl, see top of page, orange section)


Build Your Scene for WebGL Publish
Remove any and all teleporting from your scene

Select File->Build Settings...


Select WebGL
    
Select Switch Platform

Fix some issues:
Select Player Settings... Button
  Select Player
Section
     Under Resolution and Presentation
          Select Minimal WebGL Template or I recommend install BetterWebGLTemplate, see below.
     Under Other Settings

          Select Color Space to Gamma   (default Linear)
          Make sure Auto Graphics API is selected (default selected)
          Change Lightmap Encoding
to Normal Quality   (default High Quality)
     Under Publishing Settings
          Change Compression Format  to Disabled  (default Gzip)

     Close Project Settings


Select the Build And Run
button
PC:
     Create a New Folder outside of your Unity project, name it something similar to the yourname_project + _player
     Select and Save to the folder... 

Mac:
     Select a location outside your project.
     Save As: Name it something similar to the yourname_project + _player, a folder will be created for you.
MAC WebGL Bug, magic spell: If your project is not visible in a browser, save your project, quit Unity, reopen the project and publish one more time using Build and Run.


wait...


::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
File Transfer to Web Folder
You can test publish your site through the class folders.
Mac use Filezilla
, PC use WinSCP to transfer
     Host name: file.design.ucla.edu 
     Port number: 22

     User name: Your UCLA login

winscp

By default WinSCP starts at your home directory  /home/users/yourname
Select the link to myClasses
Select the link to W22-156     AKA   /data/classes/Winter22/156
Select web                           AKA   /data/classes/web/Winter22/156
Select projects
Select the correct assignment folder such as exerciseA

Upload the entire
yourname_project + _player you created for the publish, this includes an index.html and Build folder.

Use this link to find your project on the web:
https://classes.dma.ucla.edu/Winter22/156/projects/exerciseA   yourfolder    add the name of your folder for a direct link




::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Really great custom WebGL Front Page Package for Unity
This lets you add your own logo and the page publishes larger. Use with caution, need to test more.

https://github.com/greggman/better-unity-webgl-template
You may need to create a Github account first.
Locate Instructions 2020
     Click this unity package link
     Download betterunitytemplate2020.0.1.0.unitypackage
Select Assets->Import Package->Cutom Package...
If you follow the installation instructions, webGL builds will look a lot more sensible, they will fill the whole browser window, give you and editable logo image to obscure the unity logo while loading.

Select File->Build Settings...
Select Player Settings...
  Select Player
Section
     Under Resolution and Presentation
          Select Better2020



Modify the GUI text Overlay
Modify the directions for interaction:


Modify the Message
Edit the script FallbackCameraController  SteamVR->InteractionSystem->Scripts
Carefully replace each line of text between the "" under the  if ( showInstructions ) section at the bottom of the script.


Change the Font
Make a new folder in Assets called Resources
PC: Copy a font from C:\Windows\Fonts into resources
Mac: Copy a font from Macintosh HD/System/Library/Fonts into Resources, look at the name in the assets for spelling
Edit the script FallbackCameraController  SteamVR->InteractionSystem->Scripts
Replace all the text between the { } for if ( showInstructions ) section
Change the fontname to your selected font

GUIStyle myButtonStyle = new GUIStyle();
myButtonStyle.fontSize = 18;
//create a folder in Assets called Resources, put a font in there
Font myFont = (Font)Resources.Load("fontname", typeof(Font));
myButtonStyle.font = myFont;
myButtonStyle.normal.textColor = Color.white;
myButtonStyle.hover.textColor = Color.white;
GUI.Label(new Rect(5.0f, 5.0f, 600.0f, 400.0f),
"WASD EQ/Arrow Keys to translate the camera\n" +
"Right mouse click to rotate the camera\n" +
"Left mouse click for standard interactions.\n", myButtonStyle);



::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

Checklist

WebGL should be installed from the Unity Hub

Remove any and all teleporting from the Hierarchy

Fix SteamVR Newton script
Search for Newton
In the Inspector select WebGL
    
Select Switch Platform

Remove OpenVR XR Plugin
Select Window->Package Manager
Select and Remove the OpenVR XR Plugin

Build Your Scene for WebGL Publish
Select File->Build Settings...

Change the Platform to WebGL

Select Player Settings... Button
     Select Player Section
          Under Other Settings
               Select Color Space to Gamma (default Linear)
               Make sure Auto Graphics API is selected (default selected)
               Change Lightmap Encoding to Normal Quality (default High Quality)
Under Publishing Settings
Change Compression Format to Disabled (default Gzip)

Select the Build And Run button



smallarrows.GIF

© 1988-2022 34 years Jennifer Steinkamp