|
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)
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
4) Install Post Processing with Window->Package Manager
5) Add a Scene Layer
At the top of the Inspector select Layer->Add layer... name it post process
6) Choose the Fallback camera in Hierarchy
Select Component->Rendering->Post-process Layer
In the Inspector under Post-process Layer change Layer to post process
Select Mode Fast Approximate Anti Alias (FXAA)
7) Select 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
8) 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
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Install 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
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...
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
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)
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 increase the Ambient Color for the scene a little to make it less dark.
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
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Save
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 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
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 on 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 F20-156-1 AKA /data/classes/Fall20/156-1
Select web AKA /data/classes/web/Fall20/156-1
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/Fall20/156-1/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.
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Modify the GUI text Overlay
Modify the directions for interaction:
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);
|
