smallarrows.GIF

156 syllabus   site index   3D artists   past student work   DMA

Publish WebGL to the Internet
You can view your project on a website server and access via the internet


star
Prebuilt SteamVR Project with Universal Rendering Pipeline & Post Processing
Download this 2020 scene, move the folder to your Desktop or working area.
This file is already setup with SteamVR and some other tools.
https://classes.dma.ucla.edu/Winter22/156/projects/URPtemplate.zip


Change the greggman Better2020 Startup Logo
Change the startup screen logo. Use Photoshop and open logo.png from Assets\WebGLTemplates\Better2020


In Unity
WebGL Publish
Select File->Build Settings...


Select WebGL
    
Select Switch Platform


Fix Some Issues
(many are already fixed in the template):
No Teleporting
Remove any teleporting from your scene, including teleport areas. This creates publishing errors for webGL.


Fix SteamVR Newton script
Under the Project tab select Assets/SteamVR/Input/Plugins/JSON.NET/Valve.Newtonsoft.Json.dll  (search for Newton)
In the Inspector
put a checkmark next to WebGL
Hit Apply


Remove OpenVR XR Plugin
Select Window->Package Manager
     Select and Remove the OpenVR XR Plugin
(You may always reinstall for VR, see bottom of page, orange section)


File->Build Settings...
     Select Player Settings...
button

Select Player Section
     Under Resolution and Presentation
          Select Better2020


     Under Other Settings
          Select Color Space to Gamma   (default Linear)
          Make sure Auto Graphics API is selected (default selected)
          Change Lightmap Encoding to Normal Quality   (default High Quality)

     Under Publishing Settings
          Change Compression Format  to Disabled  (default Gzip)

     Close Project Settings


Select the Build And Run button
     If SteamVR asks you to change the Build Target answer Ignore All

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.

MAC WebGL Bug, magic spell: If your project is not visible in a browser, save your project, quit Unity, reopen the project and publish one more time using Build and Run.

Mac Issue: If your project does not publish and you are using an external hard drive, you will need to move all your files to your main drive and publish to the main drive.

wait...



::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
File Transfer to Class 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  (not email)

winscp


filezilla

By default WinSCP starts at your home directory  /home/users/yourname
Select the link to myClasses
Select the link to W22-156     AKA   /data/classes/Winter22/156
Select web                           AKA   /data/classes/web/Winter22/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/Winter22/156/projects   yourfolder   
     add the name of your folder for a direct link



Or Login to the DMA Cloud
Go to the https://cloud.dma.ucla.edu website and login with your DMA username and password.
     Select file.DMA Home
     Select myClasses
     Select W22-156
     Select web
     Select projects
     Drag your webGL publish folder into the correct assignment folder


Website link to folder for the class

https://classes.dma.ucla.edu/Winter22/156/projects




Prior 156 Classes that used webGL
https://classes.dma.ucla.edu/Winter21/156/projects
https://classes.dma.ucla.edu/Fall20/156-1/projects
https://classes.dma.ucla.edu/Winter20/156/projects



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

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



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

Later install OpenVR XR Plugin to run a VR Headset
This plugin interferes with WebGL publish.

Select File->Build Settings...
     Select PC, Mac & Linux Standalone
    
Select Switch Platform

Download:
OpenVR
Click Latest button to download:   com.valvesoftware.unity.openvr-1.1.4.tgz tarball file
XR Plug-in called OpenVR Loader or OpenVR XR Plugin.
(There is a copy in the main project folder of this template.)

Window->Package Manager
Under the +, upper left
     Select Add package from tarball...
     Locate the com.valvesoftware.unity.openvr-1.1.4.tgz tarball file in your downloads folder
Change to Packages: In Project
     OpenVR XR Plugin was installed

Fix Bindings, if it is a problem
Delete the Assets/SteamVR_Input folder in your project.

Make sure the Player
is at 0,0,0

© 1988-2022 34 years Jennifer Steinkamp