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) (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      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
 (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: helpercollider_mac

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



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


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
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)
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 (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...

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



smallarrows.GIF

© 1988-2021 Jennifer Steinkamp