Introduction

In this getting-started guide, we will cover the basics of setting up a Godot HTML5 project and publishing to VIVERSE using the VIVERSE CLI.

Project Settings for Godot

Web support for Godot currently requires the engine version to be Godot 4.1 or higher for successful exports. Currently using Godot without C# is essential. However, web export support for C# is expected soon from a recent .

Export Setting for Godot

Select the desired platform for export. For web exporting, choose HTML5. Also make sure that the export path is set to Build/index.html. This will lower your packaged build size and rename project exported .html to index.html so VIVERSE can easily find and run the project.

Publish to VIVERSE

From here you can publish the project using the CLI tool just like any other platform.

General Limitations of Godot and Web Export

List of Godot WebGL rendering issues:

Media Polygon Streaming

Streaming 3D Models into The Environment

Introduction

The VIVERSE scene settings interface is used to control several settings for your entire VIVERSE world. The interface can be opened by clicking on the triangle button that is added to the left-hand toolbar when the extension is enabled:

Polygon Streaming

The Polygon Streaming settings control how all assets embedded with VIVERSE's service are rendered in your world. For details on these settings, please consult this documentation:

Quest Config

The Quest Config settings allow you to create and add steps to Quests in your world. For details on these settings, please consult this documentation:

Post Effect

The Post Effect settings allow you to add and control the values of post-processing effects on your avatar's camera. For more details on the specific post effects and their values, please consult this documentation:

Introduction

The VIVERSE studio is the one-stop-shop for managing all content associated with your VIVERSE account and profile. Studio includes analytics about the performance of your content and tools to manage both video and application content.

Studio Dashboard

The main dashboard of the VIVERSE studio includes metrics on how users engage with your content. With an adjustable timeframe and content filer, you may explore the number of visitors, both new and unique, as well as the number of views and likes your content receives.

Worlds

The worlds page includes tabs for managing existing content and uploading new content. The Content Management page contains links to edit a project's settings, including its visibility, description, and associated media. The Upload tab allows you to create new Worlds, upload and update files for existing worlds.

When updating content through the Upload tab, you will see a new, testable version with a unique link that can be merged into the main version/link for your content after submitting for review. You may also delete or hide Worlds through these settings.

Videos

The Videos tab allows you to explore, upload, and manage settings of uploaded videos. Currently, it is not possible to upload a new version of a video to an existing link; you must delete the current version and upload a new file.

Content Settings

Your content's settings can be edited by clicking the kebab menu next to your world/video.

Worlds can be set to one of three accessibility states and can be password protected to add an additional level of security.

Review & Content Moderation

After uploading, your content will be viewable in preview mode only. To submit your world for curation on our webpages, please select "Submit for Review" and select whether you would like iframe support for your experience.

All content must comply with the standards outlined in the VIVERSE Platform Terms of Use: While not an exhaustive list, we will not tolerate content which...

• Depicts graphic or disturbing nudity, gore, sexual acts, violence, whether legal or illegal

• Incites violence/hatred against or exposes personal information of individuals or groups

• Includes malware, inappropriately collects user data, or inappropriately solicits money/information from users

Media Images

Adding Images And Extending Image Functionality

Pick and Throw

This guide provides instructions for setting up the pick and throw object your Scene.

If you don't want to use default VIVERSE avatars for your world, the PlayCanvas SDK features a simple method to swap to any .vrm avatar asset in your project.

Per the API docs, import the PlayerService into your .mjs script, which has a localPlayer property of type LocalPlayer, which in turn has a .changeAvatar() method.

NOTE: this script asset must be placed in /scripts or another subfolder, since it assumes the VIVERSE SDK is one level up, located at: "../@viverse/create-sdk.mjs" - or you can alter this import path as needed. For more information on how .mjs scripts and imports work, see .

Because vrmAsset is defined as an attribute of type Asset, we can then select which asset to use directly in the PlayCanvas editor once the script is added to an entity.

When we publish to VIVERSE and load the experience, the .vrm is loaded immediately. Avatar switching for the local player is possible at any point during runtime and can be triggered with UI, trigger colliders, or with any other programmatic callback. Reference Code:

Adding Media

Media are added to VIVERSE worlds in Edit Mode using the toolbar at the bottom of the screen. Detailed below are the categories of assets that correspond with the buttons in this toolbar.

Getting Started with Edit Mode

Edit Mode is available on all worlds you own or where you have been added as a co-owner/moderator. If you are a world owner or co-owner, you will have access to the "Edit Mode" button when you join the world.

When enabling Edit Mode, your controls and interface will be changed, and your camera will be detached from your avatar so that you can more easily navigate and edit your world. When in Edit Mode, your avatar will still be visible and your audio will be audible to others in the world.

Publishing Apps to VIVERSE

3D experiences and web applications are the foundation of VIVERSE's creator community. We invest heavily in the development of amazing interactive content and are always expanding our support for new tools and frameworks where the best experiences are being crafted for the web.

While VIVERSE supports custom publishing pipelines for a few platforms, any platform can publish to VIVERSE using by uploading a .zip file with an index.html file at the top level of its file tree.

Fundamentals

VIVERSE allows developers to use nearly any of the custom scripting interfaces , including but not limited to WebRequests like http & websockets, GLSL shaders, and 3rd party libraries imported directly into your project's hierarchy.

However, by default, VIVERSE's PlayCanvas SDK does automatically handles avatar transform and audio networking. For customizing any features related to the VIVERSE avatar, we provide an additional API reference (see VIVERSE SDK APIs below).

Creator Profile

VIVERSE makes it easy for creators to share their work with audiences on and outside of VIVERSE. All content is associated with the creator profile, which can be customized to showcase additional media and details. The VIVERSE team manually curates creator profiles who actively publish and share their work, so be sure to fully customize your creator profile with details about your creative practice!

Your VIVERSE Creator profile has two visibility modes, public and private. In addition to your banner image, description, media, and content, private mode allows creators to view the content that your have purchased, the creators you follow, and other liked content.

EntityCheckPoint

Create An Action That Sets A New Spawn Point

This guide provides instructions for setting up the EntityCheckPoint action. In the sample app, once the avatar enters one of the green trigger areas, the area becomes the new spawn location.

In this example, a trigger area is created and when triggered, an action sets a new spawn location. Any object can be used as a trigger, as long as the object has a collision component.

TeleportAvatar

Create An Action That Teleports An Object To A Specific Location

This guide provides instructions for setting up the TeleportAvatar action. In the sample app, once the avatar enters one of the green cylinder trigger areas, the avatar is teleported to another location.

In this example, a trigger is created and when the avatar or other objects enter the trigger area, an action teleports the avatar to a specific location. Any object can be used as a trigger, as long as the object has a collision component.

Templates are starter projects that are pre-built in VIVERSE. They are available on the profile page of your VIVERSE account.

Prerequisites

• In order to create worlds you must first create a VIVERSE account.

Media Audio

Adding Audio and Extending Audio Functionality

An audio clip has been added to the scene.

Media Video

Adding Video And Extending Video Functionality

WebXR experiences can run on desktop, mobile and virtual reality devices alike. Utilizing the XrService in the Create SDK, you can write custom code to manage VR controllers, locomotion settings, and XR session callbacks.

Custom Locomotion Settings

By default, the VIVERSE character controller uses teleport for locomotion, since this is the more comfortable option, in general. However, smooth locomotion (where the player glides smoothly across the floor) can be enabled on either or both controllers by setting the

Default Loading Experience

Because web games and assets take time to transfer over the internet and load onto the player's device, user experience during loading is important. If shown a blank or broken-looking screen during this time, users may leave early, and never get to try the full experience.

While creators should , it's also somewhat inevitable. As such, VIVERSE provides a default loading experience during the asset pre-load phase:

Introduction

PlayCanvas is an open-source game engine designed to advance the development of 3D web games, interactive content and rich multimedia. Unlike similar WebGL engines like Three.js or Babylon, PlayCanvas comes with sophisticated in-browser Editor (inspired by early Unity 2.x - 3.x), which provides its users with a rich set of tools — allowing to assemble scenes from imported assets, setup real-time and baked lighting, write custom scripts, create animation graphs, and much much more.

To make creator experience even smoother, VIVERSE has developed a special Extension for Chrome browsers which extends PlayCanvas Editor functionality with additional set of no-code tools and publishing options. It provides common building blocks like Triggers, Actions and Quests, enables Player locomotion and Avatar system in your project, and allows one-click testing and publishing right from the Editor.

Below is a useful set of tutorials to help you get started with VIVERSE PlayCanvas Extension. We assume you're already familiar with PlayCanvas Editor itself and have PlayCanvas account. If not, please feel free to explore first!

Install PlayCanvas Extension

Create and publish your first project

"Factory Reset" PlayCanvas Extension

Sometimes issues in the installation process can produce persistent bugs that are only fixed by fully resetting the Extension. If you're experiencing these bugs please follow the steps below

EntityAssetUnload

Create An Action That Unloads An Asset From The Scene, Stops The Asset From Rendering And Retains The Asset In Memory

This guide provides instructions for setting up the EntityAssetUnload action. In the sample app, the trigger area is outlined in blue. Once the avatar enters into the trigger area, the asset stops rendering in the scene. This will decrease draw calls and improve frames per second, but the asset will be retained in memory.

In this example, a trigger is created and when triggered, an action unloads an object. Any object can be used as a trigger, as long as the object has a collision component. This example uses a 3D box as the trigger area.

EntityAssetReload

Create An Action That Reloads An Asset Into The Scene From Memory And Causes The Asset To Be Rendered

This guide provides instructions for setting up the EntityAssetReload action. In the sample app, the trigger area is outlined in blue. Once the avatar leaves the trigger area, the asset is reloaded from memory and starts rendering in the scene.

In this example, a trigger is created and when triggered, an action reloads an object. Any object can be used as a trigger, as long as the object has a collision component. This example uses a 3D box as the trigger area.

EntityDestroy

Create An Action That Destroys An Asset, Removes It From Memory and Stops It From Rendering

This guide provides instructions for setting up the EntityDestroy action. In the sample app, the trigger area is outlined in blue. Once the avatar enters the trigger area, the asset is destroyed, which removes it from memory and stops it from rendering.

In this example, a trigger is created and when triggered, an action destroys an object. Any object can be used as a trigger, as long as the object has a collision component. This example uses a 3D box as the trigger area.

Overview

The Networked plugin allows local updates to certain properties of an entity's components to be sent to other connected avatars.

Transform

By adding the Transform component, an entity's position and rotation will be networked across clients.

Anim

By adding the Anim component, an entity's animation state will be networked across clients.

Networking Example

In this video, we have created an arena with a floor, four walls and a ball. The networking module has been added to the ball. After publishing and creating the world in VIVERSE, multiple players can join in the environment. The location of the ball is tracked across all player sessions.

To create the arena and ball in the video, you can follow the tutorial. The instructions below can be used to add Networking functionality to the ball or any other entity of your choosing.

VIVERSE provides a powerful camera system alongside its player controller and input scripting that allows developers to switch between different views and control various camera behaviors. This guide will show you how to implement camera switching in your VIVERSE project.

Basic Camera Switching

The VIVERSE player rig creates several cameras and switches between them depending on your settings and/or world scripting: CAMERA_3RD,

We created a PlayCanvas sample project that contains examples of how to utilize the PlayCanvas Extension. Download the project and import it into a PlayCanvas account. Publish the project to VIVERSE and enter Preview mode to test out the functionality. The pages listed under API Reference are the functionality that the sample project is demoing.

This project is separated into different stations. Each station has Tags added to help identify the VIVERSE functionality the station is demonstrating.

Introduction

You can upload to VIVERSE from all web-compatible frameworks, including 3D experiences, web applications, and videos! No matter what you are building with, you can upload and manage your builds easily using VIVERSE Studio or our command-line interface (CLI). Once uploaded, VIVERSE content is associated with your VIVERSE account and profile located at https://worlds.viverse.com/profile. This page guides you through the uploading process using both methods!

Publishing with VIVERSE Studio

The VIVERSE Studio offers a user-friendly interface that makes it easy for creators of all skill levels to upload and manage content on VIVERSE. You can learn the process for uploading or below.

Publishing Apps with VIVERSE Studio

Publishing Videos with VIVERSE Studio

Publishing with the CLI

The can be used to publish any web-compatible WebGL / HTML5 build to the VIVERSE platform after an authentication process.

Installation

Using npm:

Note: This CLI requires Node.js version 22.15.0 or higher.

Authentication

Login to VIVERSE platform:

Or directly pass in login credentials for CI/CD integration:

In such CI/CD environments, it's recommended to use environment variables:

After login, check your authentication status:

And to logout:

After , the VIVERSE CLI can be used to publish any working WebGL build to the VIVERSE platform after an authentication process. When publishing, you'll either access your existing projects, or create a new one.

Creating Applications

You can use the VIVERSE CLI to create a new application directly:

Or specify a name:

Alternately, you can use the workflow to create an application ID:

Listing Applications

Once authenticaed, you can view your account's available application list:

The output will be displayed in a table format with the following columns:

• ID: Application identifier

• STATE: Application state

• TITLE: Application name

• URL: Application preview URL

Publishing

Publishing content requires two inputs:

1. App ID — the target application to publish to (required)

2. Content path — the directory containing your content (optional if you're already in that directory)

Option 1: Specify content path

Option 2: From within content directory

Note: The App ID is required. You can use the viverse-cli app list command to query your existing application IDs, or view the IDs of newly created applications after using app create.

Important: After uploading content successfully, you'll need to visit the Creator Studio website to complete the review and publishing process.

Warning: The <path> parameter MUST point to your build output folder and NOT your source code folder. Publishing source code folders (containing src/, node_modules/, or development files like .tsx, .jsx, .vue, .unity, etc.) will result in non-functional content and deployment failures.

Specifications for Video Content

Input video specifications

Output video specifications

Transcoding matrix

EntitySubscribeTriggerEnter

This guide provides instructions for setting up the EntitySubscribeTriggerEnter trigger. In the sample app below, the trigger areas are outlined in blue. Once the avatar enters into the blue area, an action occurs.

EntityToggleCollision

This guide provides instructions for setting up the EntityToggleCollision action. In the sample app, every time the avatar enters the green trigger area, a notification is sent to the wall and the collider on the wall is toggled on/off. The wall is green when the avatar can pass through and red when the avatar can not pass through.

The Best on the Web

EntityDisable

This guide provides instructions for setting up the EntityDisable action. In the sample app, once the avatar collides with the gold coin, the gold coin is disabled.

In this example, a trigger is created and when triggered, an action disables an object.

Create an action that disables an object

EntityEnableById

This guide provides instructions for setting up the EntityEnableById action. In the sample app, once the avatar enters the trigger area, the gold coin is enabled.

In this example, a trigger is created and when triggered, an action enables an object. Any object can be used as a trigger, as long as the object has a collision component. This example uses a 3D box as the trigger area.

Create an action that enables a single object

EntityDisableById

This guide provides instructions for setting up the EntityDisableById action. In the sample app, once the avatar leaves the trigger area, the gold coin is disabled.

In this example, a trigger is created and when triggered, an action disables an object. Any object can be used as a trigger, as long as the object has a collision component. This example uses a 3D box as the trigger area.

Create an action that disables a single object