Unity Steam Vive Emulator WebGL Publishing


Install WebGL
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 SteamVR plugin
, Steam VR Camera, Emulator and Controllers for Vive
If you prefer not to use the Steam VR emulator skip this part.

Choose the
Asset Store tab next to the Scene window tab
If the Asset Store says you are offline, sign out and then back in to your account

Type SteamVR in the search bar
Select the
SteamVR Plugin by Valve  (It is free)
If you have never done this select Download first, then Import
(If you are reimporting the SteamVR plugin into your project, delete all the SteamVR files and folders from your Assets folder first.)

Choose Import in the store window

The Import Unity Package window will pop-up
     Scroll down to Longbow
          Uncheck Longbow
          Uncheck Samples

Select Import
Accept All if there is a SteamVR error window.

Plugins always import into the Assets folder of your project. You can always copy or delete them between projects.

Put the main view window back to Scene instead of Asset Store

     Click the Scene tab on the left

Setup the Player
Select the
SteamVR folder from the Project tab
Select the arrow, open InteractionSystem, open Core, select Prefabs
Drag the Player into the Hierarchy tab


Setup the Main Camera
(The main camera interferes with the Vive Headset camera.)
In the Inspector tab:
     Change Target Display to Display 2

     Change Target Eye to None in the Inspector tab
     Uncheck Audio Listener

Settings for Emulator Camera
Select the Player from the Hierarchy
In the Inspector:
Player open NoSteamVRFallbackObjects, select FallbackObjects
     Under ClearFlags, change Skybox to Solid Color if you like, should match all other cameras
          Choose a Background color

     Change Field of View to 90   (default 60)

Settings for Vive Head Set Camera
You are not using these settings for WebGL
Select the
Player from the Hierarchy
Select the arrow, open Player open SteamVRObjects, select VRCamera
In the Inspector, change Field of View to 90   (default 60)

Add a Collider to your Emulator Camera
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...

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.
     This adds a folder called HelperLibrary into the project, there is a prefab and and script.

Open the HelperLibrary folder in Assets.
Drag the the SteamVRSimulatorColliderHelper prefab into your project Hierarchy, (not as a child of the Player)


In the Hierarchy:

In the Inspector:
    Add Component->Physics->Sphere Collider  This will let the camera bump into throwable objects
     Change the Radius to .1

     (This forces the emulator camera to stop at any model that has a collider, such as a floor.)


Fix the shadows on your light
These settings can effect performance.

Edit->Project Settings->Quality
In the Inspector tab
     Uncheck all Levels except Ultra for both columns, display and WebGL
     Select Anti Aliasing    8x Multi Sampling   (default 2x)
Change Shadow Resolution to Very High Resolution
     If the shadow does not appear when you make a Player
          decrease Shadow distance to 40   (default 150)

Select your Directional Light
Set Mode to Realtime
     Turn on Shadows
     Turn down
Strength to lighten the shadow color.

Change Bias to .02               default .05
     Keep Normal Bias at .4      watch for artifacts, default .4

All lights should be Realtime to avoid baking.

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
Open Window->Package Manager
Select Post Processing
     Select Install

Choose the camera(s) you will be publishing:
     For the Steam VR emulator camera

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
     In the Inspector
          Near the top change the Layer to post process
     Under Post-process Layer
          Change Layer
to post process
     Select Mode   Fast Approximate Anti Alias (FXAA) (default no Anti-Aliasing)

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 and Radius
     Change the Mode to Scalable Ambient Obscurance   (The other option will not work with WebGL.)
     Change Intensity to 4
     Change the Radius to 1

Try adding other effects such as Bloom, 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.

Lighting Settings

Select Window->Rendering->Lighting Settings  (Or click the button lower right of screen.)
     You may want to change Source to Color (default skyBox)
          You may want to increase the Ambient Color for the scene to make it less dark.
     Keep Baked Global Illumination (default, Keep unless you are having problems with baking.)
     Keep Lighting Mode at Shadowmask  (default)
     Do not use Ambient Occlusion

Lower Right of the Lighting Settings window:
     Turn off Auto Generate in the lower right corner.
     Select Generate Lighting->Clear baked Data   (Hold down the arrow button.)
     Turn on Auto Generate in the lower right corner.

Publish to WebGL
You can put this folder on a website server and access via the internet

Select File->Build Settings...

     Select WebGL

Select Switch Platform
          Hit Ignore if there are any SteamVR Warning

Select Player Settings...
  Select Player Section

     Under Resolution and Presentation
          Select Minimal WebGL Template
     Under Other Settings

          Select Color Space to Gamma    (Linear which makes WebGL 2.0 does not work with Safari and Explorer.)
          Select Auto Graphics API

     Close the Project Settings window

     Select Build And Run button
     Create a New Folder outside of your Unity project, name it something similar to the project + _player
     Select and Save to the folder... 

Double click the index.html file in the player folder to run the player.

File Transfer

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 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 winter20-156  AKA /data/classes/Winter20/156
Select web
Select projects
Upload the folder you created for the publish

Use this link to find your project on the web:
http://classes.dma.ucla.edu/Winter20/156/projects    add the name of your folder for a direct link

Custom WebGL Page Package for Unity
You may need to create a Github account first.
Download the file, place the folder in your Assets folder and doubleclick BetterUnityWebGLTemplate 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.  If you want to try the code change for yourself, you can edit the index.html that gets imported into Assets\WebGLTemplates\BetterTemplate