Cheat Sheet checklist for this page After you read through this page, you may refer to the shorter list. 1) Download this file HelperCollider_v3.unitypackage (Mac use Stuffit) (All ready installed with Big Sur Workaround) Double click HelperCollider_v3 from the Assets tab Drag SteamVRSimulatorColliderHelper into Hierarchy Add a.1 radius sphere collider to your Fallback camera
2) Edit->Project Settings->Quality Uncheck all Levels except Ultra for both columns Change Shadow Resolution to Very High Resolution Decrease Shadow distance to 40
3) Select your Lights Set Mode to Realtime Turn down Strength to lighten the shadow color, try .5 Change Bias to .007 Change Near Plane to .1 Change Render Mode to Important Do this to main lights, use as needed. (default auto)
4) Select Window->Rendering->Lighting Settings You may want to decrease the Ambient Color for the scene a little to make it less dark. Do not use Ambient Occlusion
5) Install Post Processing with Window->Package Manager
6) Add a Scene Layer to the project At the top of the Inspector select Layer->Add layer... name it post process
7) Choose the Player->NoSteamVRFallbackObjects->FallbackObjects camera in Hierarchy Add Component->Rendering->Post-process Layer In the Inspector under Post-process Layer change Layer to post process Select Mode Fast Approximate Anti Alias (FXAA)
8) Add GameObject->3D Object->Post-process Volume Select the Post-process Volume in the Hierarchy Change the Layer to post process top of the Inspector Select Is Global
Under Post-process VolumeProfile click New Click Add effect... Select Unity->Ambient Occlusion Select Mode, Intensity Change the Mode to Scalable Ambient Obscurance Change Intensity to .25 Select Radius
9) Publish webGL Select File->Build Settings... Select WebGL Select Switch Platform
Select Player Settings... Select Player Section Under Resolution and Presentation Select Minimal Under Other Settings Select Color Space to Gamma Select Auto Graphics API Select Build And Run button
PC: Create a New Folder outside of your Unity project yourname_project + _player, Select and Save to the folder...
Mac: Name a folder something similar to the yourname_project + _player
Mac Big Sur OS BUG workaround Download this 2019.4.17 scene, move the folder to your Desktop or working area. This file is already setup with SteamVR and the SteamVR Emulator. https://classes.dma.ucla.edu/Winter21/156/projects/generic2.zip Rename the folder to a new project name. Start the Unity Hub Select ADD Locate your renamed project folder Click on the project to start Mac errors: Do not Move any files to the trash, answer preferably Open or Cancel a lot Save the scene Quit Unity Mac: Open System Preferences->Security & Privacy Go to General tab Unlock the lock with your password Click Allow Anyway for any SteamVR apps listed, keep this running, there may be more files to fix. Restart the Unity Hub Open the project
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Install Unity WebGL if you did not do this before Using Unity Hub: Select Installs Select the version of Unity you are using, should be the most recent or the version the class is using. Select the menu options Choose Add Modules Choose WebGL Build Support
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Import plugin, Steam VR Camera and Controllers for VR

SteamVR Camera Settings Simulation Camera: Open the arrow next to Player in the Hierarchy  Open the arrow next to NoSteamVRFallbackObjects  Select FallbackObjects Change Position in Y to 0 Change Field of View to 90 (default 60)
Grab and drop the Game tab below the Scene tab to create a split view.
Select Player from the Hierarchy to position and rotate the SteamVR camera. You will see the result in the Game tab
Choose Accept All if there is a SteamVR error messages about Resizeable Window.
Setup the Main Camera to be out of the way Or you can delete it too. Select the Main Camera from the Hierarchy tab In the Inspector tab: Uncheck Audio Listener Change Target Display to Display 2 Change Target Eye to None in the Inspector tab (The main camera interferes with SteamVR.)
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Add a Collider to your SteamVR Emulator Camera (All ready installed with Big Sur Workaround) 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 Emulator, 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: 
Drag and drop the HelperCollider_v3.unitypackage into your project Assets folder.
Double click HelperCollider_v3 from the Assets tab, in Unity. 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)
In the Hierarchy: Select Player->NoSteamVRFallbackObjects->FallbackObjects
In the Inspector: Add Component->Physics->Sphere Collider Change the Radius to .1 This forces the emulator camera to stop at any model that has a collider, such as a floor. This will let the camera bump into throwable objects
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Fix Shadows and Lighting These settings can effect performance.
Quality Edit->Project Settings->Quality Uncheck all Levels except Ultra for both columns, display and WebGL Select Anti Aliasing Disabled (default 2x) Post Processing below ignores this for webGL. Change Shadow Resolution to Very High Resolution (default high) If the shadow does not line up corrrectly: Decrease Shadow distance to 40 (default 150)
Lights Select your Directional Light Set Mode to Realtime 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) All lights should be Realtime to avoid baking.
Lighting Setting Select Window->Rendering->Lighting Settings (Or click the button lower right of screen.) You may want to change Environment Lighting Source to Color (default skyBox) You may want to decrease the Ambient Color for the scene a little to help the contrast. Try changing Environment Reflections Source to Custom (default Skybox)
Keep Baked Global Illumination (default, Keep unless you are having problems with baking.) Keep Lighting Mode at Shadowmask (default) Do not use Ambient Occlusion
We are not using light baking for this class for several reasons, it can take along time to render all the maps. The UV texture mapping needs to be checked for all models in the scene if you are going to bake lights. You should be able to get a pretty decent ambient occlusion effect with Post Processing.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Save Use File->Save Scene As your Unity project, if this is the first time saving. otherwise use File->Save
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
 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 webGL.
Open Window->Package Manager Select Post Processing A window will pop-up, select Install
Layer Choose the camera(s) you will be publishing: For the Steam VR emulator camera in Hierarchy open Player->NoSteamVRFallbackObjects->FallbackObjects
Select Component->Rendering->Post-process Layer
At the top of the Inspector select Layer->Add layer... Type a name such as post process in one of the empty layers

Select the Player->NoSteamVRFallbackObjects->FallbackObjects Camera (FallbackObjects) In the Inspector under Post-process Layer Change Layer to post process Select Mode Fast Approximate Anti Alias (FXAA) (default no Anti-Aliasing)

Volume 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  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...
Follow this procedure for any camera you would like to use with the Post Processing.
Model Settings In order to avoid Baking: Do not use Static on any of your models. Do not select Contribute Global Illumination on any of your models.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Publish to WebGL You can put this folder on a website server and access via the internet
Possible MAC SteamVR BUG: Answer Ignore to change settings to Linear, this needs to be Gamma
Select File->Build Settings... Select WebGL Select Switch Platform
Select Player Settings... 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 Select Auto Graphics API Close the Project Settings window
Select 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.
wait...
Double click the index.html file in the player folder to run the player in a browser.
MAC SteamVR Bug: If your project is not visible in a browser, save your project, quit Unity, reopen the project and publish one more time.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 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

By default WinSCP starts at your home directory /home/users/yourname Select the link to myClasses Select the link to W21-156 AKA /data/classes/Winter21/156 Select web AKA /data/classes/web/Winter21/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/Winter21/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.
https://github.com/greggman/better-unity-webgl-template You may need to create a Github account first. Locate Instructions 2019 Click this unity package link Download BetterUnityWebGLTemplate-v0.0.3.unitypackage.zip PC: Right mouse to Extract All... Place the BetterUnityWebGLTemplate-v0.0.3.unitypackage file in your Assets folder Doubleclick betterunitytemplate2020.0.1.0.unitypackage to install. 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 BetterTemplate
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 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);

|