|
Publish WebGL to the Internet
You can view your project on a website server and access via the internet
Prebuilt SteamVR Project with 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/template.zip
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)
Change the greggman Better2020 Startup Logo
Change the startup screen logo. Use Photoshop and open logo.png from Assets\WebGLTemplates\Better2020
Select Player Settings... Button
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 (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
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.
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
Fix Bindings, if it is a problem
Delete the Assets/SteamVR_Input folder in your project.
|
