Unity WebGL Example

Code examples, compatibility guides, and technical documentation for Unity WebGL builds targeting VIVERSE. Includes render pipelines, WebGL templates, loading screens, and deployment examples.

Publishing Tutorial

Anyone can publish their WebGL-compatible Unity project to VIVERSE in a few simple steps. In this guide, we'll walk through the process of creating an new Unity project, making sure it is compatible with WebGL, and publishing to VIVERSE using the VIVERSE CLI.

For this guide, we are using the VIVERSE CLI, but it is also possible to compress and upload your build file directly to the VIVERSE Studio.

While VIVERSE is a great place for multiplayer games with networked avatars — and we have a number of services that can help you implement these features — it is not required to implement networked avatars to publish to VIVERSE.

Prerequisites

Unity Hub and Unity installed on your device.
Node and npm installed on your device. Please use at least Node v22 - Only required if using the CLI, not VIVERSE Studio

In this tutorial, we will be using Unity v6.1, however any WebGL-compatible version of Unity should be supported.

Step 1. Configure Your Unity Project

Create a Unity Project

Install the Unity Plugin

Navigate to Window > Package Manager > Unity Registry and search for "WebGL Publisher". Add the module to your project.

(Optional) Enable Decompression Fallback

Compression is supported on VIVERSE, however you can enable fallback if you are encountering errors or would like to have it included. Navigate to Edit > Project Settings > Player > Web Settings > Publishing Settings and check "Decompression Fallback".

Step 2. Build and Publish to VIVERSE

Build Your Project

Navigate to Publish and select "WebGL Publish". In the pop-up, click "Build and Publish", selecting the desired folder for your build. When doing this for the first time, Unity will automatically publish to their web-servers for testing. For future builds, you can disable this behavior to just the builds without publishing.

Install the VIVERSE CLI

In a terminal session, run npm install -g @viverse/cli to install the CLI globally. Make sure you are using at least node v22.

In the terminal session, run viverse-cli auth login and enter your VIVERSE account email and password.

Create VIVERSE App

In the terminal session, run viverse-cli app create . Once complete, copy the app ID to be used when publishing.

Publish to VIVERSE

In the terminal session, run viverse-cli app publish {path/to/unity/webgl/build} --app-id {your app id from step 4} referencing folder containing the index.html of your Unity build.

Test & Configure World Settings

Navigate to the preview url created for the world. You can also access the world and its settings in studio.viverse.com/content.

Submit for Curation and Discovery

By default, worlds uploaded will only be accessible via preview urls. For placement and curation on our webpages, meaning your experience will be easier to share, please submit for review.

Unity & VIVERSE Compatibility Overview

VIVERSE supports Unity WebGL builds with specific requirements and recommendations for optimal performance and compatibility. This section covers essential settings and considerations for targeting VIVERSE.

Supported Unity Versions

VIVERSE supports the following Unity versions:

Unity 2021 LTS (2021.3.x) - Recommended for stability
Unity 2022 LTS (2022.3.x) - Recommended for newer features
Unity 2023.x - Supported, but verify compatibility with VIVERSE SDK

Note: Always use LTS (Long Term Support) versions for production projects targeting VIVERSE to ensure long-term compatibility and support.

Required Unity Modules

Install the following modules via Unity Hub:

WebGL Build Support - Essential for building WebGL projects
WebGL Development Build Support - Recommended for debugging
IL2CPP - Required for WebGL builds (automatically included with WebGL module)

Verify installation: Edit → Preferences → External Tools or check installed modules in Unity Hub.

Supported Render Pipelines

Important: Unity WebGL does NOT support HDRP (High Definition Render Pipeline).

Built-in Render Pipeline:

Fully supported for WebGL/VIVERSE
Best compatibility across all browsers
Recommended for projects targeting maximum compatibility
No additional packages required

Universal Render Pipeline (URP):

Fully supported for WebGL/VIVERSE
Recommended for new projects targeting WebGL
Better performance and modern features optimized for web platforms
Requires URP package (installed via Package Manager)
Optimized for low-end and web platforms

High Definition Render Pipeline (HDRP):

NOT supported on WebGL/VIVERSE
HDRP is designed for high-end GPUs and requires features unavailable in WebGL:
- Real-time ray tracing
- Advanced volumetrics
- Compute shaders with full GPU access
- Large render targets
- Advanced shader models
WebGL runs in a browser sandbox with restricted GPU access and memory
You must convert HDRP projects to URP for WebGL builds

Choosing a Render Pipeline

For New Projects Targeting WebGL/VIVERSE:

URP is strongly recommended for modern features and optimal WebGL performance
Install via Window → Package Manager → Unity Registry → Universal RP

For Existing Projects:

Built-in: Works without changes, but URP offers better WebGL performance
URP Migration: Use Unity's Render Pipeline Converter tool (Edit → Render Pipeline → Universal Render Pipeline → Convert Project to URP)
HDRP Projects: Must convert to URP for WebGL builds (HDRP is not supported)

Converting HDRP to URP for WebGL:

Install URP package via Package Manager
Use Unity's Render Pipeline Converter:
- Edit → Render Pipeline → Universal Render Pipeline → Convert Project to URP
Review and update materials (HDRP materials need URP equivalents)
Test shaders and lighting (some HDRP features may not have direct URP equivalents)
Optimize for WebGL performance (WebGL is sensitive to draw calls, textures, and shader complexity)

Considerations:

URP provides better WebGL performance than Built-in
URP has smaller build sizes
URP supports modern shader features optimized for web
Built-in has maximum compatibility but lower performance
HDRP cannot be used for WebGL builds

Render Pipeline Settings

Built-in Render Pipeline:

No special configuration needed
Settings in Edit → Project Settings → Graphics
Configure Quality Settings as needed

Universal Render Pipeline (URP):

Create URP Asset: Assets → Create → Rendering → URP Asset
Assign in Edit → Project Settings → Graphics → Scriptable Render Pipeline Settings
Configure URP Asset settings:
- Render Scale: 1.0 (or lower for performance)
- HDR: Disabled (WebGL doesn't support HDR)
- MSAA: 2x or 4x (balance quality vs performance)
- Shadow Distance: Adjust based on your scene needs

Shader Compatibility

Built-in Shaders:

All built-in shaders work with Built-in Render Pipeline
Standard, Unlit, UI shaders fully supported

URP Shaders:

Use URP-compatible shaders (Lit, Unlit, etc.)
Built-in shaders won't work with URP
Convert shaders using Shader Graph or manually rewrite
HDRP shaders are NOT compatible - must convert to URP shaders for WebGL

Custom Shaders:

Ensure shaders are compatible with your chosen render pipeline
HDRP shaders cannot be used in WebGL builds - convert to URP equivalents
Test shaders in WebGL build (some features may not work)
WebGL 2.0 supports most modern shader features, but not HDRP-specific features
WebGL is sensitive to shader complexity - optimize for performance

Unity Formatting and Custom Loading Screens

An example of a fullscreen webgl template can be found here. The instructions for creating a webgl fullscreen template are below.

Understanding WebGL Templates

WebGL templates control the HTML/CSS/JavaScript wrapper around your Unity WebGL build. They determine:

How the canvas is displayed (fullscreen, windowed, etc.)
Loading screen appearance and behavior
Browser UI elements visibility
Mobile responsiveness
Fullscreen functionality

Default Templates:

Unity provides default templates (Minimal, Default, etc.)
Custom templates allow full control over presentation

Fullscreen Canvas Benefits

A fullscreen canvas template provides:

Immersive Experience: No browser UI distractions
Maximum Screen Usage: Canvas fills entire viewport
Better Performance: No layout calculations for browser elements
Professional Appearance: Clean, game-like presentation
VIVERSE Optimization: Matches VIVERSE's immersive environment

Key Features:

Canvas set to 100% width and height
Body and container with overflow: hidden
No scrollbars or browser chrome
Responsive to different screen sizes
Mobile-friendly viewport configuration

Custom Loading Screen Overview

Custom loading screens enhance user experience by:

Branding: Display your logo/branding during load
Progress Feedback: Show loading progress to users
Professional Appearance: Custom design matching your project
User Engagement: Keep users informed during asset loading

Components:

Loading bar container (centered on screen)
Logo/branding element
Progress bar (animates from 0% to 100%)
Optional loading text or animations
Styled with CSS for custom appearance

Step 1. Create the WebGL Template Folder Structure

Navigate to Assets Folder

In Unity, open your project and navigate to the Assets folder in the Project window.

Create WebGLTemplates Directory

Right-click in the Assets folder → Create → Folder
Name the folder WebGLTemplates (exact name required by Unity)
This folder will contain all custom WebGL templates

Create FullScreen Template Folder

Right-click on WebGLTemplates → Create → Folder
Name it FullScreen (this will be the template name visible in Build Settings)
Unity will automatically detect this folder as a WebGL template

Step 2. Create the Fullscreen HTML Template

Create index.html File

Right-click on the FullScreen folder → Show in Explorer (Windows) or Reveal in Finder (Mac)
Create a new text file named index.html (not index.html.txt)
This file will serve as the main HTML template for your WebGL build

Add Fullscreen HTML Structure

Open index.html and add the following fullscreen template code:

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unity WebGL Player | {{{ PRODUCT_NAME }}}</title>
    <style>
      body {
        padding: 0;
        margin: 0;
        overflow: hidden;
      }
      #unity-container {
        position: absolute;
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
      #unity-canvas {
        background: #231F20;
      }
      #unity-loading-bar {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: none;
      }
      #unity-logo {
        width: 154px;
        height: 130px;
        background: url('unity-logo-dark.png') no-repeat center;
      }
      #unity-progress-bar-empty {
        width: 141px;
        height: 18px;
        margin-top: 10px;
        margin-left: 6.5px;
        background: url('progress-bar-empty-dark.png') no-repeat center;
      }
      #unity-progress-bar-full {
        width: 0%;
        height: 18px;
        margin-top: 10px;
        background: url('progress-bar-full-dark.png') no-repeat center;
      }
      #unity-footer {
        position: relative;
        display: none;
      }
      .unity-mobile #unity-footer {
        display: none;
      }
      #unity-webgl-logo {
        float: left;
        width: 204px;
        height: 38px;
        background: url('webgl-logo.png') no-repeat center;
      }
      #unity-build-title {
        float: right;
        margin-right: 10px;
        line-height: 38px;
        font-family: arial;
        font-size: 18px;
      }
      #unity-fullscreen-button {
        cursor: pointer;
        float: right;
        width: 38px;
        height: 38px;
        background: url('fullscreen-button.png') no-repeat center;
      }
      #unity-warning {
        position: absolute;
        left: 50%;
        top: 5%;
        transform: translate(-50%);
        background: white;
        padding: 10px;
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="unity-container" class="unity-desktop">
      <canvas id="unity-canvas" tabindex="-1"></canvas>
      <div id="unity-loading-bar">
        <div id="unity-logo"></div>
        <div id="unity-progress-bar-empty">
          <div id="unity-progress-bar-full"></div>
        </div>
      </div>
      <div id="unity-warning"> </div>
      <div id="unity-footer">
        <div id="unity-webgl-logo"></div>
        <div id="unity-fullscreen-button"></div>
        <div id="unity-build-title">{{{ PRODUCT_NAME }}}</div>
      </div>
    </div>
    <script>
      var container = document.querySelector("#unity-container");
      var canvas = document.querySelector("#unity-canvas");
      var loadingBar = document.querySelector("#unity-loading-bar");
      var progressBarFull = document.querySelector("#unity-progress-bar-full");
      var fullscreenButton = document.querySelector("#unity-fullscreen-button");
      var warningBanner = document.querySelector("#unity-warning");

      function unityShowBanner(msg, type) {
        function updateBannerVisibility() {
          warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
        }
        var div = document.createElement('div');
        div.innerHTML = msg;
        warningBanner.appendChild(div);
        if (type == 'error') div.style = 'background: red; padding: 10px;';
        else {
          if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
          setTimeout(function() {
            warningBanner.removeChild(div);
            updateBannerVisibility();
          }, 5000);
        }
        updateBannerVisibility();
      }

      var buildUrl = "Build";
      var loaderUrl = buildUrl + "/{{{ LOADER_FILENAME }}}";
      var config = {
        dataUrl: buildUrl + "/{{{ DATA_FILENAME }}}",
        frameworkUrl: buildUrl + "/{{{ FRAMEWORK_FILENAME }}}",
        codeUrl: buildUrl + "/{{{ CODE_FILENAME }}}",
#if MEMORY_FILENAME
        memoryUrl: buildUrl + "/{{{ MEMORY_FILENAME }}}",
#endif
#if SYMBOLS_FILENAME
        symbolsUrl: buildUrl + "/{{{ SYMBOLS_FILENAME }}}",
#endif
        streamingAssetsUrl: "StreamingAssets",
        companyName: "{{{ COMPANY_NAME }}}",
        productName: "{{{ PRODUCT_NAME }}}",
        productVersion: "{{{ PRODUCT_VERSION }}}",
        showBanner: unityShowBanner,
      };

      if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
        var meta = document.createElement('meta');
        meta.name = 'viewport';
        meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
        document.getElementsByTagName('head')[0].appendChild(meta);
        container.className = "unity-mobile";
        canvas.className = "unity-mobile";
      } else {
        canvas.style.width = "100%";
        canvas.style.height = "100%";
      }

      loadingBar.style.display = "block";

      var script = document.createElement("script");
      script.src = loaderUrl;
      script.onload = () => {
        createUnityInstance(canvas, config, (progress) => {
          progressBarFull.style.width = 100 * progress + "%";
        }).then((unityInstance) => {
          loadingBar.style.display = "none";
          fullscreenButton.onclick = () => {
            unityInstance.SetFullscreen(1);
          };
        }).catch((message) => {
          alert(message);
        });
      };

      document.body.appendChild(script);
    </script>
  </body>
</html>

Key Features:

body and #unity-container set to 100% width/height with overflow: hidden for true fullscreen
Canvas fills entire viewport (width: 100%, height: 100%)
Loading bar centered on screen during asset loading
Footer hidden by default (can be shown if needed)
Mobile-responsive viewport meta tag

Refresh Unity Project

Return to Unity Editor
The index.html file should appear in the Project window under Assets/WebGLTemplates/FullScreen/
If not visible, right-click in Project window → Refresh, or press Ctrl+R (Windows) / Cmd+R (Mac)

Step 3. Customize the Loading Screen

Understanding the Loading Screen Elements

The template includes several customizable elements:

#unity-loading-bar: Container for loading screen elements
#unity-logo: Logo image displayed during loading
#unity-progress-bar-empty: Background of the progress bar
#unity-progress-bar-full: Animated progress bar that fills from 0% to 100%

All elements are centered on screen using CSS transforms.

Replace Default Loading Images

In the FullScreen folder, replace the default Unity loading images with your custom assets:
- unity-logo-dark.png (154×130px recommended) - Your logo/branding
- progress-bar-empty-dark.png (141×18px) - Progress bar background
- progress-bar-full-dark.png (141×18px) - Progress bar fill image
Alternatively, modify the CSS in index.html to use different image paths or create custom loading UI with HTML/CSS instead of images.

Custom Loading Screen with HTML/CSS

To create a fully custom loading screen without images, modify the #unity-loading-bar section:

<div id="unity-loading-bar">
  <div id="custom-logo" style="width: 200px; height: 200px; margin: 0 auto; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 20px; display: flex; align-items: center; justify-content: center; color: white; font-size: 48px; font-weight: bold;">
    YOUR LOGO
  </div>
  <div id="custom-progress-container" style="width: 300px; height: 20px; margin: 20px auto; background: rgba(255,255,255,0.2); border-radius: 10px; overflow: hidden;">
    <div id="unity-progress-bar-full" style="width: 0%; height: 100%; background: linear-gradient(90deg, #667eea 0%, #764ba2 100%); transition: width 0.3s ease;"></div>
  </div>
  <div id="loading-text" style="text-align: center; color: white; font-family: Arial; font-size: 18px; margin-top: 10px;">
    Loading...
  </div>
</div>

Update the JavaScript progress callback to also update text:

createUnityInstance(canvas, config, (progress) => {
  progressBarFull.style.width = 100 * progress + "%";
  var loadingText = document.querySelector("#loading-text");
  if (loadingText) {
    loadingText.textContent = "Loading... " + Math.round(progress * 100) + "%";
  }
})

Add Custom Loading Animations

Enhance the loading screen with CSS animations. Add to the <style> section:

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

#unity-logo {
  animation: pulse 2s ease-in-out infinite;
}

@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

#unity-progress-bar-full {
  transition: width 0.3s ease;
  animation: slideIn 0.5s ease-out;
}

Step 4. Configure Build Settings

Open Build Settings

In Unity, go to File → Build Settings...
Select WebGL from the Platform list
Click Switch Platform if not already on WebGL (this may take a few minutes)

Select the FullScreen Template

Click Player Settings... (or go to Edit → Project Settings → Player)
In the Player Settings window, expand the Publishing Settings section
Under WebGL Template, select FullScreen from the dropdown
The template you created should now be available in this list

Configure Additional WebGL Settings

For optimal VIVERSE deployment, configure these settings:

Resolution and Presentation:

Default Canvas Width: 1920 (or your target resolution)
Default Canvas Height: 1080 (or your target resolution)
Run In Background: Enabled (recommended for VIVERSE)

Publishing Settings:

Compression Format: Gzip or Brotli (for smaller file sizes)
Data caching: Enabled (improves load times for returning users)
Name Files As Hashes: Enabled (better caching)

Other Settings:

Strip Engine Code: Enabled (reduces build size)
Managed Stripping Level: Medium or High (further reduces size)

Step 5. Build the WebGL Project

Prepare for Build

Ensure your scene is saved (Ctrl+S / Cmd+S)
In Build Settings, verify the scenes you want to include are checked
Click Add Open Scenes if your current scene isn't listed

Build the Project

Click Build in the Build Settings window
Choose or create an output folder (e.g., Builds/WebGL)
Click Select Folder
Unity will compile and build your project (this may take several minutes)
Once complete, navigate to the build output folder

Verify Build Output

Your build folder should contain:

index.html - Your custom fullscreen template
Build/ folder - Contains Unity WebGL build files (.data, .framework.js, .loader.js, etc.)
TemplateData/ folder (if using default template) - Contains template assets
StreamingAssets/ folder (if you have streaming assets) - Contains additional assets

The index.html should be your custom fullscreen template with the loading screen.

Step 6. Test the Fullscreen Build Locally

Set Up Local Server

WebGL builds require a web server to run (cannot open index.html directly due to CORS restrictions).

Option 1: Python HTTP Server (if Python installed):

cd path/to/your/build/folder
python -m http.server 8000

Then open http://localhost:8000 in your browser.

Option 2: Node.js HTTP Server:

npm install -g http-server
cd path/to/your/build/folder
http-server -p 8000

Option 3: Unity's Built-in Server: After building, Unity may offer to open a local server automatically.

Test Fullscreen Functionality

Open the build in your browser
Verify the loading screen appears and progress bar animates
Once loaded, the canvas should fill the entire browser window
Test the fullscreen button (if visible) or press F11 for browser fullscreen
Verify no browser UI elements are visible (address bar, scrollbars, etc.)
Test on different screen resolutions and aspect ratios

Test Mobile Responsiveness

Open browser developer tools (F12)
Enable device emulation mode
Test on various mobile device presets (iPhone, Android, tablets)
Verify the viewport meta tag works correctly
Test touch interactions if your project uses them

Step 7. Deploy to VIVERSE

Prepare Build for Upload

Navigate to your build output folder
Select all files and folders (index.html, Build/, StreamingAssets/ if present)
Create a ZIP archive of these files
Name it appropriately (e.g., MyProject_WebGL_Build.zip)
Verify the ZIP contains the root index.html file (not nested in a subfolder)

Upload to VIVERSE Studio

Log in to VIVERSE Studio (https://worlds.viverse.com/)
Navigate to Manage Content or your project dashboard
Click Upload or New Content
Select your ZIP file
Wait for upload and processing to complete

Configure VIVERSE Settings

In VIVERSE Studio, configure your content settings:
- Set appropriate title and description
- Configure access permissions (public/private)
- Set thumbnail/preview image
- Configure any required VIVERSE SDK settings
Ensure WebGL compatibility is enabled

Preview and Publish

Use VIVERSE Studio's preview feature to test your content
Verify fullscreen behavior works correctly in VIVERSE environment
Test loading screen appearance and timing
Once satisfied, submit for approval/publishing
After approval, your content will be available in VIVERSE

Step 8. Advanced Customization

Customize Background Color

Modify the canvas background in the CSS:

#unity-canvas {
  background: #231F20; /* Change to your desired color */
  /* Or use a gradient: */
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

Add Splash Screen or Branding

Add custom HTML before the canvas loads:

<div id="splash-screen" style="position: absolute; width: 100%; height: 100%; background: #000; display: flex; align-items: center; justify-content: center; z-index: 1000;">
  <div style="text-align: center; color: white;">
    <h1>Your Game Title</h1>
    <p>Loading...</p>
  </div>
</div>

Then hide it in JavaScript after Unity loads:

.then((unityInstance) => {
  loadingBar.style.display = "none";
  var splash = document.querySelector("#splash-screen");
  if (splash) splash.style.display = "none";
  // ... rest of code
})

Implement Custom Error Handling

Enhance error messages for better user experience:

.catch((message) => {
  // Hide loading screen
  loadingBar.style.display = "none";
  
  // Show custom error UI
  var errorDiv = document.createElement('div');
  errorDiv.style.cssText = 'position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.9); color: white; padding: 40px; border-radius: 10px; text-align: center; z-index: 1000;';
  errorDiv.innerHTML = '<h2>Failed to Load</h2><p>' + message + '</p><button onclick="location.reload()" style="margin-top: 20px; padding: 10px 20px; background: #667eea; color: white; border: none; border-radius: 5px; cursor: pointer;">Retry</button>';
  document.body.appendChild(errorDiv);
});

Optimize Loading Performance

Enable Compression: In Player Settings → Publishing Settings, use Gzip or Brotli compression
Reduce Build Size: Enable code stripping and remove unused assets
Use Addressables: For large projects, consider Unity Addressables for on-demand loading
Optimize Assets: Compress textures, reduce polygon counts, optimize audio files
CDN Hosting: Host your build on a CDN for faster global loading times

Troubleshooting

Template Not Appearing in Build Settings:

Ensure the folder is named exactly WebGLTemplates (case-sensitive)
Ensure index.html is directly in the template folder (e.g., Assets/WebGLTemplates/FullScreen/index.html)
Refresh Unity project (Ctrl+R / Cmd+R)
Restart Unity Editor

Loading Screen Not Showing:

Check browser console for JavaScript errors (F12)
Verify image paths in CSS are correct
Ensure loadingBar.style.display = "block" is called before Unity loads
Check that progress callback is properly connected

Fullscreen Not Working:

Verify canvas CSS has width: 100% and height: 100%
Check that body and container have overflow: hidden
Test in different browsers (Chrome, Firefox, Edge)
Some browsers require user interaction before allowing fullscreen API

Build Too Large:

Enable compression in Publishing Settings
Increase Managed Stripping Level
Remove unused assets and scripts
Consider using Unity Addressables for large content
Compress textures and audio files

VIVERSE Upload Issues:

Ensure ZIP contains index.html at root level
Verify all required files are included (Build folder, etc.)
Check file size limits in VIVERSE Studio
Ensure WebGL build target is correct (not IL2CPP if not supported)

PreviousPublishing to VIVERSE with the CLI NextThreeJS Example

Last updated 8 days ago

Was this helpful?

Publishing Tutorial

Prerequisites

Step 1. Configure Your Unity Project

Create a Unity Project

Install the Unity Plugin

(Optional) Enable Decompression Fallback

Step 2. Build and Publish to VIVERSE

Build Your Project

Install the VIVERSE CLI

Login to VIVERSE

Create VIVERSE App

Publish to VIVERSE

Test & Configure World Settings

Submit for Curation and Discovery

Unity & VIVERSE Compatibility Overview

Supported Unity Versions

Required Unity Modules

Supported Render Pipelines

Choosing a Render Pipeline

Render Pipeline Settings

Shader Compatibility

Unity Formatting and Custom Loading Screens

Understanding WebGL Templates

Fullscreen Canvas Benefits

Custom Loading Screen Overview

Step 1. Create the WebGL Template Folder Structure

Navigate to Assets Folder

Create WebGLTemplates Directory

Create FullScreen Template Folder

Step 2. Create the Fullscreen HTML Template

Create index.html File

Add Fullscreen HTML Structure

Refresh Unity Project

Step 3. Customize the Loading Screen

Understanding the Loading Screen Elements

Replace Default Loading Images

Custom Loading Screen with HTML/CSS

Add Custom Loading Animations

Step 4. Configure Build Settings

Open Build Settings

Select the FullScreen Template

Configure Additional WebGL Settings

Step 5. Build the WebGL Project

Prepare for Build

Build the Project

Verify Build Output

Step 6. Test the Fullscreen Build Locally

Set Up Local Server

Test Fullscreen Functionality

Test Mobile Responsiveness

Step 7. Deploy to VIVERSE

Prepare Build for Upload

Upload to VIVERSE Studio

Configure VIVERSE Settings

Preview and Publish

Step 8. Advanced Customization

Customize Background Color

Add Splash Screen or Branding

Implement Custom Error Handling

Optimize Loading Performance

Troubleshooting