Publish WebGL to the Internet You can view your project on a website server and access via the internet
 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)


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
|