smallarrows.GIF

156 syllabus      site index      3D artists      past student work        DMA

Unity WebGL Publishing SteamVR Emulator

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      unity_hub_menu 
          Choose Add Modules
          Choose WebGL Build Support

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Import plugin
, Steam VR Camera and Controllers for VR
unity_VR_steam_plugin


SteamVR Camera Settings
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
          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 4
0   (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



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


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 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
unity_scene_layer


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

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

winscp

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



smallarrows.GIF