|
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);
|
