You can now publish to VIVERSE from Unity, Godot, ThreeJS and more!
VIVERSE Documentation
SupportBlogDiscord

Unity WebGL Example

This document provides a guide for creating a sample app in Unity, building the app for WebGL, and deploying the app to VIVERSE.

Introduction

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 with the WebGL platform for that version of unity installed on your device, in the hub you should see the WebGL platform module next to the version of unity you're using.

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

A. Configure Your Unity Project

1

Create a Unity Project

2

Install the Unity Plugin

Go to the Package manager

Press the "Plus icon" and select "Add from git URL", and add the url "[email protected]:ViveDeveloperRelations/ViverseUnitySDK.git"

3

Switch your build to the WebGL platform in the Build Profiles

Select Switch platform if you're not currently on the webgl settings page

4

Open the menu Tools/WebGL Build Settings

It should look like the above, select "Apply WebGL Settings" to apply the appropriate settings

Selecting auto-zip builds after completion will allow you to quickly upload builds to the studio.viverse.com site

The selection for decompression fallback and other relevant settings will be there

5

If planning to use avatars, import the VRM packages by pressing the "Install VRM Packages" button

6

Add Missing shaders after importing VRM related packages to ensure proper rendering of avatars that are dynamically loaded

7

Import sample scenes

8

Optionally add the configurable driver scene to the build settings

This will help you familiar with the SDK lifecycle, how to configure and use the sdk visually

B. Build and Publish to VIVERSE

1

Build your project

Go to build profiles and select "Build", as build and run will not allow you to use Viverse functionality - you must publish the app to be able to use it at the moment

2

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.

3

Login to VIVERSE

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

4

Create VIVERSE App

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

5

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.

6

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.

7

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.

8

Iterate, Learn, Explore!

In addition to the sample scenes, the rough flow of api usage can be reviewed at https://github.com/ViveDeveloperRelations/ViverseUnitySDK/blob/master/Unity_Viverse_SDK_Developer_Guide.md And overview of the current version of the sdk with additional hints and tips at https://github.com/ViveDeveloperRelations/ViverseUnitySDK?tab=readme-ov-file#viverse-unity-sdk-for-webgl

PreviousPublishing to VIVERSE with the CLINextThreeJS Example

Last updated

Was this helpful?