VIVERSE

https://docs.viverse.com/
Admin
VIVERSE is a web-based platform providing robust tools and SDKs for artists, creators, and...
Tokens:104,277
Snippets:577
Trust Score:9.5
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install VIVERSE CLI Globally

Source: https://docs.viverse.com/unity-webgl-example

Installs the VIVERSE command-line interface (CLI) globally using npm. This tool is essential for interacting with the VIVERSE platform, including authentication and publishing builds. Ensure Node.js v22 or higher is installed before running this command.

```npm
npm install -g @viverse/cli
```

--------------------------------

### Verify Node.js Installation and Version

Source: https://docs.viverse.com/three

This command is used to confirm that Node.js is successfully installed on the system and to check its version, ensuring it meets the minimum requirement of v22 for project compatibility.

```Shell
node
```

--------------------------------

### Install VIVERSE CLI Globally via npm

Source: https://docs.viverse.com/three

This command globally installs the VIVERSE Command Line Interface (CLI) tool using npm. Global installation makes the 'viverse' command accessible from any directory in the system, allowing users to interact with VIVERSE services.

```bash
npm install -g @viverse/cli
```

--------------------------------

### Setup Media Video in VIVERSE

Source: https://docs.viverse.com/~gitbook/pdf

This guide provides instructions for setting up and extending video functionality within a VIVERSE project. It covers the basic steps of creating a new entity to host the video and adjusting its visual size using the scale property.

```APIDOC
Action: Media Video Setup
  Entity Setup:
    - Create: New entity
    - Transform: Resize using Scale property
```

--------------------------------

### Install VIVERSE Command Line Interface (CLI)

Source: https://docs.viverse.com/unity-webgl-example

Command to install the VIVERSE CLI globally using npm. The CLI is a crucial tool for building and publishing your Unity WebGL applications directly to the VIVERSE platform.

```npm
npm install -g @viverse/cli
```

--------------------------------

### Install Three.js Library via NPM

Source: https://docs.viverse.com/three

This command installs the Three.js library as a production dependency in your project using npm. It downloads the necessary packages and saves them to the 'node_modules' directory, also updating the 'package.json' file.

```Shell
npm install --save three
```

--------------------------------

### Install VIVERSE Unity SDK

Source: https://docs.viverse.com/unity-webgl-example

Instructions to add the VIVERSE Unity SDK to a Unity project using the Package Manager's "Add from Git URL" feature. This SDK provides essential tools for VIVERSE integration within your Unity application.

```Git URL
https://github.com/ViveDeveloperRelations/ViverseUnitySDK.git
```

--------------------------------

### Install Vite Build Tool via NPM

Source: https://docs.viverse.com/three

This command installs Vite, a fast build tool, as a development dependency in your project using npm. It's used for development server and bundling, and will be saved to 'node_modules' and listed in 'package.json' devDependencies.

```Shell
npm install --save-dev vite
```

--------------------------------

### Configure Unity Project for WebGL and VIVERSE Deployment

Source: https://docs.viverse.com/~gitbook/pdf

A guide for setting up a Unity project to be compatible with WebGL and deployable to VIVERSE. This includes instructions for installing the VIVERSE Unity SDK plugin via its Git URL, switching the build platform to WebGL, and applying necessary settings.

```APIDOC
Add from git URL: "https://github.com/ViveDeveloperRelations/ViverseUnitySDK.git"
```

--------------------------------

### Handle XR and Player Ready Events for Camera Switching

Source: https://docs.viverse.com/~gitbook/pdf

Illustrates how to react to XR start events to get a reference to the VR camera (which the VIVERSE player rig automatically switches to). It also demonstrates how to switch cameras once the local player is ready, providing flexibility for camera control based on game state.

```JavaScript
// Wait for the XR start event then get the VR camera
this.app.xr.on("start", () => {
  // The VIVERSE player rig will switch to its "CAMERA_VR" automatically
  // So getting reference to the activeCamera at this time will point to
  // the "CAMERA_VR" entity
  const vrCamera = this.cameraService.activeCamera;

  // You could also search for this by name
  // const vrCamera = this.app.root.findByName("CAMERA_VR");

  // Then raycast from the forward vector, apply scripts, etc.
});

// Or wait for player to be ready before switching cameras
this.playerService.localPlayer.on("player:ready", () => {
  this.cameraService.switchCamera(this.previewCamera);
});
```

--------------------------------

### Install Project Dependencies

Source: https://docs.viverse.com/polygon-streaming/~gitbook/pdf

This snippet shows how to install the necessary Node.js packages and start the development server for the project.

```bash
npm install
npm run dev
```

--------------------------------

### Run Vite Development Build for Three.js Project

Source: https://docs.viverse.com/three

This command initiates a development build of the Three.js project using Vite. It starts a local development server, typically providing a localhost URL (e.g., http://localhost:5173) for real-time testing and debugging of the application.

```bash
npx vite
```

--------------------------------

### Configure Game Start Button UI

Source: https://docs.viverse.com/~gitbook/pdf

Instructions for creating and configuring the game's start button. This involves setting up its visual properties, interaction modes, and attaching necessary assets and scripts for functionality.

```UI Configuration
A. Under the GameInstructionsBoard entity, create a new button called StartButton. Remove the Text entity that is created under the button.
B. Update the Position, Rotation and Scale so the button fits appropriately on the board.
C. On the Button component, change Transition Mode to Sprite Change.
D. Add the 3 button sprites.
E. Add a Collision component and resize it using Half Extents.
A. Update the Width and Height on the Element component
B. Add the start_normal sprite to the Sprite slot.
C. Add the start-btn.mjs script.
```

```JavaScript
start-btn.mjs
```

--------------------------------

### Run Sample Babylon.js Project

Source: https://docs.viverse.com/polygon-streaming/~gitbook/pdf

Instructions to set up and run the provided sample Babylon.js project. This involves installing Node.js dependencies and starting the development server to display a 3D model.

```Shell
npm install
npm run dev
```

--------------------------------

### Authenticate and Publish with VIVERSE CLI

Source: https://docs.viverse.com/unity-webgl-example

Essential VIVERSE CLI commands for logging into your VIVERSE account, creating new applications, and publishing your Unity WebGL builds. These commands streamline the deployment process to VIVERSE.

```Shell
viverse login
```

```Shell
viverse app create
```

```Shell
viverse publish
```

--------------------------------

### Initialize Pad Synthesizer with Tone.js PolySynth

Source: https://docs.viverse.com/playcanvas-sdk/tutorials/within-or-a-generative-audiovisual-maze

This snippet begins the initialization of a Tone.PolySynth, intended for creating rich, sustained pad sounds. It sets up the basic PolySynth instance and starts configuring its oscillator properties. The provided code is incomplete, showing only the initial setup of the pad synthesizer.

```JavaScript
GridBuilder.prototype.createPad= function () {
    this.padSynth = new Tone.PolySynth(Tone.Synth, {
        oscillator: {
```

--------------------------------

### Start Tone.js Audio Context

Source: https://docs.viverse.com/~gitbook/pdf

Initializes the Tone.js audio context if it's not already running. It checks the `Tone.context.state` and calls `Tone.start()` if necessary, then proceeds to initialize the music system via `this.initMusic()`.

```JavaScript
GridBuilder.prototype.startMusic = function () {
    if (Tone.context.state !== "running") {
        Tone.start().then(() => {
            console.log("🎶 Tone.js Started");
            this.initMusic();
        });
    }else{
        this.initMusic();
    }
};
```

--------------------------------

### Create VIVERSE Application using CLI

Source: https://docs.viverse.com/unity-webgl-example

This command initiates the creation of a new VIVERSE application. After execution, an application ID will be generated, which is essential for subsequent publishing steps.

```Shell
viverse-cli app create
```

--------------------------------

### Install VIVERSE CLI

Source: https://docs.viverse.com/~gitbook/pdf

Installs the VIVERSE Command Line Interface globally, enabling interaction with VIVERSE services. Requires Node.js v22 or higher.

```bash
npm install -g @viverse/cli
```

--------------------------------

### Log in to VIVERSE CLI interactively

Source: https://docs.viverse.com/standalone-publishing

This command initiates an interactive login process for the VIVERSE platform, prompting the user to enter their credentials securely through the command line.

```Shell
viverse-cli auth login
```

--------------------------------

### Configure Viverse Extension to Start Quest

Source: https://docs.viverse.com/~gitbook/pdf

Steps to configure the VIVERSE extension's TriggerAndAction plugin to start a specific quest when a local player enters a defined trigger area, linking the trigger to the quest's start action.

```Viverse Configuration
A. In the VIVERSE extension, select the "TriggerAndAction" plugin for the "Select plugins" dropdown.
B. Add a "Trigger" and select "EntitySubscribeTriggerEnter".
C. Add "local-player" to the "tags to filter" field.
D. Add an "Action" and select "Quest."
E. In the "selected quest" field, choose "Find the boxes!"
F. In the "quest response" field, choose "startQuest".
```

--------------------------------

### Setup Game Over Screen UI

Source: https://docs.viverse.com/~gitbook/pdf

Instructions for configuring the game over user interface. This involves adding the background texture and creating the main image element for the game over screen.

```UI Configuration
A. Drag the congrats-bg.png texture to the Assets window.
A. Create a new Image Element entity under 2D Screen.
B. Change the Width to 240 and Height to 177.
C. Add the congrats-bg.png texture to the Texture slot.
```

--------------------------------

### General Entity Setup for Triggers and Actions

Source: https://docs.viverse.com/~gitbook/pdf

This describes the initial setup for entities that will act as triggers or targets for collision actions. It involves creating a 3D Box entity, adding a Collision component, and optionally applying a transparent material for visibility during development.

```APIDOC
Entity Setup:\n  Create: 3D Box entity\n  Add Component: Collision\n  Optional: Add transparent material for visibility\n  Action: Click Edit Viverse Extension button
```

--------------------------------

### Create a New PlayCanvas Project

Source: https://docs.viverse.com/playcanvas-sdk/tutorials/create-your-first-playcanvas-project

Initiate a new PlayCanvas project by removing the default camera to prepare for custom scene setup, which is essential for integration with the VIVERSE avatar system.

```APIDOC
Delete the Camera.
```

--------------------------------

### Login to VIVERSE CLI

Source: https://docs.viverse.com/godot-html5-example

Authenticate with the VIVERSE platform using the command-line interface. This step requires entering your VIVERSE email and password to confirm a successful login.

```Shell
viverse-cli auth login
```

--------------------------------

### Authenticate with VIVERSE CLI

Source: https://docs.viverse.com/three

This command initiates the login process for the VIVERSE platform via the command-line interface. Users will be prompted to enter their VIVERSE email and password to establish an authenticated session.

```Shell
viverse-cli auth login
```

--------------------------------

### Install VIVERSE CLI Globally

Source: https://docs.viverse.com/~gitbook/pdf

This command installs the VIVERSE command-line interface tool globally on the system using npm. The `-g` flag ensures it's accessible from any directory.

```Shell
npm install -g @viverse/cli
```

--------------------------------

### Log in to VIVERSE CLI using environment variables

Source: https://docs.viverse.com/standalone-publishing

This command demonstrates logging into the VIVERSE platform using environment variables for email and password. This is the recommended and more secure practice for CI/CD integrations to avoid hardcoding sensitive credentials.

```Shell
viverse-cli auth login -e $VVS_EMAIL -p $VVS_PASSWORD
```

--------------------------------

### Authenticate VIVERSE CLI with interactive login

Source: https://docs.viverse.com/standalone-publishing/installing-the-cli

This command initiates an interactive login process for the VIVERSE CLI, typically opening a browser window for user authentication. It connects the CLI to your VIVERSE platform account.

```bash
viverse-cli auth login
```

--------------------------------

### Install VIVERSE CLI using npm

Source: https://docs.viverse.com/standalone-publishing

This command globally installs the VIVERSE command-line interface tool using npm. It requires Node.js version 22.15.0 or higher for proper functionality.

```Shell
npm install -g @viverse/cli
```

--------------------------------

### Install VIVERSE CLI via npm

Source: https://docs.viverse.com/~gitbook/pdf

Installs the VIVERSE command-line interface globally using npm. This CLI requires Node.js version 22.15.0 or higher.

```bash
npm install -g @viverse/cli
```

--------------------------------

### Add ScoreboardBg.png Texture to Project

Source: https://docs.viverse.com/playcanvas-sdk/tutorials/pet-rescue-template-project

This step imports the image file used as the background for the scoreboard UI. The PNG texture needs to be added to the project's assets.

```Configuration
A. Drag the ScoreboardBg.png texture to the Assets window.
```

--------------------------------

### API Documentation for IXrService Interface

Source: https://docs.viverse.com/~gitbook/pdf

Documents the IXrService interface, which provides methods for controlling XR functionalities within the VIVERSE SDK. It includes methods to start and end XR services.

```APIDOC
IXrService:
  Methods:
    start()
    end()
```

--------------------------------

### Log in to VIVERSE CLI with direct credentials

Source: https://docs.viverse.com/standalone-publishing

This command allows logging into the VIVERSE platform by directly passing email and password as command-line arguments. This method is suitable for CI/CD environments but should be used with caution due to security implications of exposing credentials.

```Shell
viverse-cli auth login -e <email> -p <password>
```

--------------------------------

### MJS Module Import and Export Example

Source: https://docs.viverse.com/playcanvas-sdk/custom-code/introduction-to-mjs

Illustrates how to import the File System module using `import` and export a function using `export` in a Modular JavaScript (MJS) environment, contrasting with CommonJS.

```JavaScript
// To include the File System module, you no longer use require() method
// Use import instead.
import fs from 'fs';

// Using the File System module to read files
fs.readFile();

// Exporting the greet function so it can be used in other modules, you no longer
// use `module.exports`. Use `export` instead.
export const greet = (name) => {
    return 'Hello, ${name}!';
};
```

--------------------------------

### Add Scoreboard.mjs Script to Project

Source: https://docs.viverse.com/playcanvas-sdk/tutorials/pet-rescue-template-project

This step involves importing the main JavaScript script responsible for scoreboard functionality. It requires dragging the script into the project's assets and parsing it for use.

```Configuration
A. Drag the Scoreboard.mjs script to the Assets window.
B. Select the Scoreboard.mjs script and click the Parse button.
```

--------------------------------

### EntitySubscribeAnimationStart API Reference

Source: https://docs.viverse.com/~gitbook/pdf

API reference for subscribing to an entity's animation start event within the Viverse PlayCanvas SDK.

```APIDOC
API Name: EntitySubscribeAnimationStart
Documentation Link: https://docs.viverse.com/playcanvas-sdk/api-reference/trigger-and-action/animation-and-sound#entitysubscribeanimationstart
```

--------------------------------

### VIVERSE CLI: Re-publish Content

Source: https://docs.viverse.com/godot-html5-example

This command re-publishes an existing project to VIVERSE using the command-line interface. It requires the path to the project's production build folder as an argument to specify the content to be published.

```Shell
viverse-cli publish <path>
```

--------------------------------

### Setup Game Countdown Timer UI

Source: https://docs.viverse.com/~gitbook/pdf

Steps to configure the in-game countdown timer user interface. This includes creating the 2D screen, adding fonts and scripts, and setting up the visual properties of the countdown text.

```UI Configuration
A. Create a new 2D Screen entity.
B. The Position is arbitrary because it's 2D, but moving it's position so that it's visible in the editor is helpful.
C. Set Priority to 1.
A. Drag the SFProText-Bold.ttf font to the Assets window.
A. Drag the CountDown.mjs script to the Assets window.
B. Select the CountDown.mjs script and click the Parse button.
A. Add the SFProText-Bold.ttf font to the Font slot.
B. Change the Text field to 3.
C. Update the Font Size and Line Height.
D. Change the Color to FAF5CD, the Outline Color to 3C5511FF and the Outline Thickness to 1.
A. Add the CountDown.mjs script to the CountDown entity.
A. Disable the countdown entity.
```

```JavaScript
CountDown.mjs
```

--------------------------------

### Initialize Music System

Source: https://docs.viverse.com/~gitbook/pdf

Sets up the core music system components. It calls `this.initMixer()` to configure audio routing, `this.startAmbientDrone()` for background sound, and initializes an empty array `this.instruments` to hold collectible-triggered instruments.

```JavaScript
GridBuilder.prototype.initMusic = function () {
   console.log(" Music System Initialized");
    this.initMixer();
    // Ambient drone
    this.startAmbientDrone();
    // Collectible-triggered instruments
    this.instruments = [];
};
```

--------------------------------

### Create Scoreboard Image UI Element

Source: https://docs.viverse.com/playcanvas-sdk/tutorials/pet-rescue-template-project

This step creates the primary image element for the scoreboard, setting its dimensions, anchor, and assigning the background texture. It also attaches the Scoreboard.mjs script to this entity.

```Configuration
A. Add an Image Element under the 2D Screen entity called Scoreboard.
B. Change Preset to Top Anchor & Pivot.
C. Change the Width and Height to 159 and 44.
D. Add the ScoreboardBg.png texture to the Texture slot.
E. Add the Scoreboard.mjs script to the Scoreboard entity.
```

--------------------------------

### Create Vite Production Build for Three.js Project

Source: https://docs.viverse.com/three

This command generates an optimized production build of the Three.js project using Vite. It compiles and bundles the application's assets into a 'dist' folder, ready for deployment to a production environment.

```bash
npx vite build
```

--------------------------------

### Import Start-Btn.mjs Script

Source: https://docs.viverse.com/~gitbook/pdf

Instructions to import the Start-Btn.mjs script into the project assets and parse it.

```JavaScript
1. Drag the Start-Btn.mjs script to the Assets window.
2. Select the Start-Btn.mjs script and click the Parse button.
```

--------------------------------

### Authenticate VIVERSE CLI with direct credentials

Source: https://docs.viverse.com/standalone-publishing/installing-the-cli

This command allows direct authentication of the VIVERSE CLI by providing email and password as command-line arguments. It is particularly useful for automated environments like CI/CD pipelines where interactive login is not feasible.

```bash
viverse-cli auth login -e <email> -p <password>
```

--------------------------------

### VIVERSE 3D Model Animation Setup

Source: https://docs.viverse.com/playcanvas-sdk/api-reference/trigger-and-action/animation-and-sound

Step-by-step guide to configure a 3D model for animation in VIVERSE, including adding Anim components, Animation State Graphs, and defining Idle and Dancing animation states.

```VIVERSE Configuration
1. Add a 3D model to the scene.
2. Add an Anim component.
3. Add the Animation State Graph.
4. Add the Idle animation.
5. Add the Dancing animation.
```

--------------------------------

### Configure Animation State Graph for EntityPlayAnimation

Source: https://docs.viverse.com/playcanvas-sdk/api-reference/trigger-and-action/animation-and-sound

This guide details the initial setup of the animation state graph required for the EntityPlayAnimation action in VIVERSE, including how to name the initial and additional animation states for character animation transitions.

```Configuration
Animation State Graph Configuration:
  - Create new Animation State Graph
  - Rename initial state to: "Idle"
  - Create additional state named: "Dancing"
```

--------------------------------

### Get Available Rooms with Matchmaking Client

Source: https://docs.viverse.com/developer-tools/matchmaking-and-networking-sdk

This example shows how to retrieve a list of currently available rooms using `matchmakingClient.getAvailableRooms()`. The successful response includes an array of room objects, each with detailed properties. It also provides the format for an error response.

```JavaScript
matchmakingClient.getAvailableRooms();
```

```APIDOC
//Return Value
{
  "success": true,
  "rooms": [
    {
      "id": "78e4c44a-4d3f-433c-820f-805c0b915dfb",
      "app_id": "app_id",
      "mode": "team",
      "name": "Alex's room",
      "actors": [
        {
          "session_id": "7dc0bf85-ff81-4bcd-907d-1ad35d4aad1f",
          "name": "Alex",
          "properties": {
            "level": 24,
            "skill": 90
          },
          "is_master_client": true
        }
      ],
      "max_players": 4,
      "min_players": 2,
      "is_closed": false,
      "properties": {},
      "master_client_id": "7dc0bf85-ff81-4bcd-907d-1ad35d4aad1f",
      "game_session": "78e4c44a-4d3f-433c-820f-805c0b915dfb"
    }
  ]
}

Failed Value:
{
  "success": false,
  "message": "error message"
}
```

--------------------------------

### Configure NotificationCenterPublish and Subscribe for Inter-Object Communication

Source: https://docs.viverse.com/playcanvas-sdk/no-code-tools/trigger-and-action/event-listeners

This guide explains how to use NotificationCenterPublish and NotificationCenterSubscribe to enable communication between objects. An example shows an avatar entering a trigger area publishing a notification, which another object (a wall) subscribes to, toggling its collider on/off.

```Configuration
NotificationCenterPublish:
  - Trigger: Avatar enters area (e.g., via CollisionEnter trigger on the area)
  - Action: Publish a notification (e.g., 'wall_toggle_event')
NotificationCenterSubscribe:
  - Trigger: Subscribe to notification (e.g., 'wall_toggle_event')
  - Action: Perform action on receiving notification (e.g., EntityToggleCollider on the wall)
```

--------------------------------

### Import GameInstructionsBoard FBX

Source: https://docs.viverse.com/~gitbook/pdf

Steps to import the GameInstructionsBoard.fbx model into the project assets.

```Viverse Configuration
1. Drag the GameInstructionsBoard.fbx to the Assets window.
```

--------------------------------

### Publish Unity WebGL Build to VIVERSE via CLI

Source: https://docs.viverse.com/unity-webgl-example

Use this command to publish your Unity WebGL build to the VIVERSE platform. You must provide the path to your Unity WebGL build folder (containing index.html) and the application ID obtained during the app creation step.

```Shell
viverse-cli app publish {path/to/unity/webgl/build} --app-id {your app id from step 4}
```

--------------------------------

### Configure EntitySubscribeTriggerLeave for Player Exit

Source: https://docs.viverse.com/playcanvas-sdk/no-code-tools/trigger-and-action/event-listeners

This guide outlines the process for setting up an EntitySubscribeTriggerLeave trigger in the VIVERSE extension. It defines an action to disable a specified entity, like a 'golden_coin', when the local player exits a trigger area. It also covers the initial setup for creating the trigger area itself.

```APIDOC
Trigger Area Setup:
  Entity Type: 3D Box
  Required Components: Collision
  Optional Components: Material (e.g., transparent for visibility in play mode)

Trigger: EntitySubscribeTriggerLeave
  Description: Activates when an entity with specified tags leaves a trigger area.
  Configuration:
    Plugin: TriggerAndAction
    Trigger Type: EntitySubscribeTriggerLeave
    Tags to Filter: local-player (specifies the entity that triggers, e.g., the avatar)
  Action: EntityDisableById
    Description: Disables a specified entity by its ID.
    Configuration:
      Execution Entity: golden_coin (the entity to be disabled)
```

--------------------------------

### Control Camera Zoom, Rotation, and Get Properties

Source: https://docs.viverse.com/~gitbook/pdf

Provides examples for setting minimum and maximum zoom distances, disabling camera zooming and rotation, and retrieving the current point-of-view (POV) type and the active camera entity. These properties allow fine-grained control over the user's camera experience.

```JavaScript
// Set minimum and maximum zoom distances
this.cameraService.minZoomDistance = 1;
this.cameraService.maxZoomDistance = 10;

// Disable camera zooming
this.cameraService.canZoom = false;

// Disable camera rotation
this.cameraService.canRotate = false;

// Get current POV type
const currentPov = this.cameraService.pov; // Returns PovTypes enum value

// Get active camera entity
const activeCamera = this.cameraService.activeCamera; // Returns null | Entity
```

--------------------------------

### Initialize Music System

Source: https://docs.viverse.com/playcanvas-sdk/tutorials/within-or-a-generative-audiovisual-maze

This function orchestrates the initial setup of the music system. It logs a confirmation message, then proceeds to call `this.initMixer()` to configure audio routing and effects. Subsequently, it initiates an ambient drone sound by calling `this.startAmbientDrone()` and prepares an empty array, `this.instruments`, to store dynamically added musical layers.

```javascript
GridBuilder.prototype.initMusic = function () {
   console.log(" Music System Initialized");
    this.initMixer();
    // Ambient drone
    this.startAmbientDrone();
    // Collectible-triggered instruments
    this.instruments = [];
};
```

--------------------------------

### Publish New Content via VIVERSE CLI

Source: https://docs.viverse.com/three

This command is used to publish new content to the VIVERSE platform. It requires specifying the path to the project's production build folder and prompts the user to provide an application title and description for the content.

```Shell
viverse-cli publish <path>
```

--------------------------------

### Publish Godot Content to VIVERSE CLI

Source: https://docs.viverse.com/godot-html5-example

Publish your Godot project's production build to the VIVERSE platform via the CLI. You will need to provide the path to your project's build folder and then enter an application title and description.

```Shell
viverse-cli publish <path>
```

--------------------------------

### Install VIVERSE CLI using npm

Source: https://docs.viverse.com/standalone-publishing/installing-the-cli

This command installs the VIVERSE command-line interface globally using npm. It requires Node.js version 22.15.0 or higher for proper functionality.

```bash
npm install -g @viverse/cli
```

--------------------------------

### Event-Driven Camera Switching for VR and Player Ready (PlayCanvas)

Source: https://docs.viverse.com/playcanvas-sdk/custom-code/camera-management-settings-and-switching

This snippet demonstrates how to switch cameras based on specific events, such as the XR start event for VR or the player:ready event. It shows how to get a reference to the active VR camera or switch to a custom preview camera once the player is fully loaded. This ensures camera logic executes when relevant systems are ready.

```JavaScript
// Wait for the XR start event then get the VR camera
this.app.xr.on("start", () => {
  // The VIVERSE player rig will switch to its "CAMERA_VR" automatically
  // So getting reference to the activeCamera at this time will point to
  // the "CAMERA_VR" entity
  const vrCamera = this.cameraService.activeCamera;

  // You could also search for this by name
  // const vrCamera = this.app.root.findByName("CAMERA_VR");

  // Then raycast from the forward vector, apply scripts, etc.
});

// Or wait for player to be ready before switching cameras
this.playerService.localPlayer.on("player:ready", () => {
  this.cameraService.switchCamera(this.previewCamera);
});
```

--------------------------------

### Unity Engine Polygon Streaming Plugin Installation

Source: https://docs.viverse.com/polygon-streaming/~gitbook/pdf

This section outlines the installation process for the VIVERSE Polygon Streaming Unity Plugin. The plugin enables streaming of high-polygon models into Unity projects for various platforms. Installation is performed via Unity's Package Manager using a '.tgz' file, ensuring all dependencies are automatically handled.

```APIDOC
Unity Engine Plugin:
  Description: Enables streaming of multi-million polygon models from the cloud into Unity projects. Supports desktop, mobile, and VR headsets.
  Installation:
    Method: Package Manager (recommended, not direct copy)
    Steps:
      1. Open Package Manager in Unity Engine.
      2. Press '+' button and choose 'Add Package from tarball…'.
      3. Select the downloaded '.tgz' file.
  Verification:
    Check: Package should be visible under 'Packages' list in the project panel.
```

--------------------------------

### List VIVERSE Applications

Source: https://docs.viverse.com/~gitbook/pdf

Displays a list of all VIVERSE applications associated with your authenticated account. The output includes ID, state, title, and preview URL.

```bash
viverse-cli app list
```

--------------------------------

### Place GameInstructionsBoard in Scene

Source: https://docs.viverse.com/~gitbook/pdf

Instructions for adding the GameInstructionsBoard template to the scene hierarchy and positioning it correctly.

```Viverse Configuration
1. Drag the GameInstructionsBoard Template to the Hierarchy.
2. Select the GameInstructionsBoard in the Hierarchy.
3. Update the Position, Rotation and Scale of the GameInstructionsBoard to fit appropriately in the scene.
```

--------------------------------

### Install Three.js npm Package

Source: https://docs.viverse.com/~gitbook/pdf

This command installs the Three.js library as a dependency in the current project using npm. The `--save` flag adds it to the `dependencies` section of `package.json`.

```Shell
npm install --save three
```

--------------------------------

### Install Vite Build Tool as Development Dependency

Source: https://docs.viverse.com/~gitbook/pdf

This command installs Vite, a fast build tool, as a development dependency for the project using npm. The `--save-dev` flag adds it to the `devDependencies` section of `package.json`.

```Shell
npm install --save-dev vite
```

--------------------------------

### Start Ambient Drone Sound

Source: https://docs.viverse.com/~gitbook/pdf

Creates and starts a continuous ambient drone sound using `Tone.PolySynth`. It applies various effects like a low-pass filter, chorus, and reverb, chaining them together. An LFO modulates the filter frequency for dynamic texture, and a `Tone.Loop` plays slow-evolving notes to create the drone.

```JavaScript
GridBuilder.prototype.startAmbientDrone = function () {
    // Create the Drone Synth (Low Background Layer)
    this.droneSynth = new Tone.PolySynth(Tone.Synth, {
        oscillator: {
            type: "fatsine", // Thick, warm tone
            count: 3,
            spread: 12
        },
        envelope: {
            attack: 5,
            decay: 10,
            sustain: 0.8,
            release: 15
        }
    });

    //  Apply a Low-Pass Filter
    this.filter = new Tone.Filter({
        frequency: 900,
        type: "lowpass",
        Q: 0.8
    });
    // Add Effects (Chorus & Reverb)
    this.chorus = new Tone.Chorus(0.15, 3.5, 0.7);
    this.reverb = new Tone.Reverb(12);
    // Chain Effects
     this.droneSynth.chain(this.filter, this.chorus, this.reverb,this.channels.ambient, this.globalReverb);
    // Modulate Filter Over Time
    this.lfo = new Tone.LFO(0.02, 700, 1100).start();
    this.lfo.connect(this.filter.frequency);
    //  Play Slow-Evolving Drone Notes
    let droneNotes = ["C2","Db2","C3", "Db3", "E3", "F3", "G3", "Ab3", "B3","C4","Ab4"];
    let droneInterval = new Tone.Loop((time) => {
        let note = droneNotes[Math.floor(Math.random() * droneNotes.length)];
        let velocity = Math.random() * 0.3 + 0.6;
        this.droneSynth.triggerAttackRelease(note, "14s", time, velocity);
    }, "10s").start();
    //console.log("Drone & Random Bell Lead Active");
    // Start Tone.js Transport
    Tone.Transport.start();
};
```

--------------------------------

### Start Ambient Drone Sound

Source: https://docs.viverse.com/playcanvas-sdk/tutorials/within-or-a-generative-audiovisual-maze

This function creates and activates a continuous ambient drone sound using Tone.js. It configures a `PolySynth` with a 'fatsine' oscillator for a rich tone, applies a low-pass filter, and adds chorus and reverb effects for spatial depth. An LFO is used to subtly modulate the filter frequency, and a `Tone.Loop` plays slow, evolving notes to generate the drone. Finally, the Tone.js transport is started to initiate playback.

```javascript
GridBuilder.prototype.startAmbientDrone = function () {
    // Create the Drone Synth (Low Background Layer)
    this.droneSynth = new Tone.PolySynth(Tone.Synth, {
        oscillator: {
            type: "fatsine", // Thick, warm tone
            count: 3,
            spread: 12
        },
        envelope: {
            attack: 5,
            decay: 10,
            sustain: 0.8,
            release: 15
        }
    });

    //  Apply a Low-Pass Filter
    this.filter = new Tone.Filter({
        frequency: 900,
        type: "lowpass",
        Q: 0.8
    });
    // Add Effects (Chorus & Reverb)
    this.chorus = new Tone.Chorus(0.15, 3.5, 0.7);
    this.reverb = new Tone.Reverb(12);
    // Chain Effects
     this.droneSynth.chain(this.filter, this.chorus, this.reverb,this.channels.ambient, this.globalReverb);
    // Modulate Filter Over Time
    this.lfo = new Tone.LFO(0.02, 700, 1100).start();
    this.lfo.connect(this.filter.frequency);
    //  Play Slow-Evolving Drone Notes
    let droneNotes = ["C2","Db2","C3", "Db3", "E3", "F3", "G3", "Ab3", "B3","C4","Ab4"];
    let droneInterval = new Tone.Loop((time) => {
        let note = droneNotes[Math.floor(Math.random() * droneNotes.length)];
        let velocity = Math.random() * 0.3 + 0.6;
        this.droneSynth.triggerAttackRelease(note, "14s", time, velocity);
    }, "10s").start();
    //console.log("Drone & Random Bell Lead Active");
    // Start Tone.js Transport
    Tone.Transport.start();
};

```

--------------------------------

### Initialize VIVERSE Multiplayer Client

Source: https://docs.viverse.com/developer-tools/~gitbook/pdf

This snippet demonstrates how to initialize the `MultiplayerClient` instance, which is essential for using Multiplayer APIs. It requires a `roomId` (obtained from matchmaking) and an `appId` (from VIVERSE Studio), and shows how to call `init()` to establish the multiplayer session.

```JavaScript
const roomId = 'example_room'; //obtained from matchmaking
const appId = 'example_game'; //App ID from VIVERSE Studio

globalThis.multiplayerClient = new globalThis.play.MultiplayerClient(roomId, appId);
const info = await multiplayerClient.init();
```

--------------------------------

### Create and Configure Room with Matchmaking Client

Source: https://docs.viverse.com/developer-tools/matchmaking-and-networking-sdk

This code demonstrates how to create a new room using the `matchmakingClient.createRoom()` method. It accepts a configuration object specifying room name, mode, player limits, and custom properties. The snippet also shows the expected successful and failed JSON return values, including detailed room and actor information.

```JavaScript
matchmakingClient.createRoom({
    name: 'Casey's room',
    mode: 'team',
    maxPlayers: 4,
    minPlayers: 2,
    properties: {
        "level": 13,
        "skill": 21
    }
});
```

```APIDOC
// Return values:
//
// {
//    "success": true,
//    "room": {
//        "id": "14aa0657-3fd9-438a-a4b0-e6af349d8600",
//        "app_id": "app_id",
//        "mode": "team",
//        "name": "Casey's room",
//        "actors": [
//            {
//                "session_id": "ac98d013-a9c5-4a5f-ab47-727d2951bd4a",
//                "name": "Casey",
//                "properties": {
//                    "level": 13,
//                    "skill": 21
//                },
//                "is_master_client": true
//            }
//         ],
//         "max_players": 4,
//         "min_players": 2,
//         "is_closed": false,
//         "properties": {},
//         "master_client_id": "ac98d013-a9c5-4a5f-ab47-727d2951bd4a",
//         "game_session": "14aa0657-3fd9-438a-a4b0-e6af349d8600",
//         "created_by_me": true
//     }
// }
//     or
// {
//     "success": false,
//     "message": "error message"
// }
```

--------------------------------

### Log out from VIVERSE CLI

Source: https://docs.viverse.com/standalone-publishing

This command logs the user out of the VIVERSE CLI, effectively ending the current authenticated session and requiring re-authentication for future operations.

```Shell
viverse-cli auth logout
```

--------------------------------

### Log out from VIVERSE CLI

Source: https://docs.viverse.com/standalone-publishing/installing-the-cli

This command logs out the currently authenticated user from the VIVERSE CLI. It terminates the active session and requires re-authentication for subsequent protected operations.

```bash
viverse-cli auth logout
```

--------------------------------

### Initialize Viverse Play SDK Client

Source: https://docs.viverse.com/developer-tools/~gitbook/pdf

This snippet demonstrates how to initialize the global 'playClient' instance for the Viverse Play SDK. This step is crucial as it makes the SDK features accessible throughout the application.

```javascript
globalThis.playClient = new globalThis.viverse.play();
```

--------------------------------

### Configure RandomWaypointAssignment Entity

Source: https://docs.viverse.com/~gitbook/pdf

Detailed steps to create and configure the RandomWaypointAssignment entity, including debug mode, group setup, and assigning cats.

```Viverse Configuration
1. Create a new entity called RandomWaypointAssignment and add the RandomWaypointAssignment script to it.
2. Place a checkmark on the DebugMode checkbox for testing.
3. Add the number of groups to the Array Size box (e.g., 4 groups). Add each of the groups to the Waypoint Group Entity boxes. Add the number of cats in each group to the Random Entity box. Add each cat from the Cats entity to the boxes below the Random Entity box.
```

--------------------------------

### Check VIVERSE CLI authentication status

Source: https://docs.viverse.com/standalone-publishing

This command verifies the current authentication status of the VIVERSE CLI. It indicates whether a user is currently logged in and authenticated with the VIVERSE platform.

```Shell
viverse-cli auth status
```

--------------------------------

### Import GameInstructionsBoard Texture

Source: https://docs.viverse.com/~gitbook/pdf

Steps to import the base color texture for the GameInstructionsBoard into the project assets.

```Viverse Configuration
1. Drag the Board_B_board_shader_BaseColor.jpg texture to the Assets window.
```

--------------------------------

### Create and Apply Material for Ball in VIVERSE

Source: https://docs.viverse.com/playcanvas-sdk/tutorials/create-your-first-playcanvas-project

Instructions to create a new material, name it 'BallMaterial', set its diffuse color, and apply it to the Ball entity within the VIVERSE editor.

```VIVERSE Editor Steps
A. Inside the Materials folder, create a new material and name it BallMaterial.
B. Expand the Diffuse section and click the Color field.
C. For the Color, change the values to (244, 139, 139).
D. Add the BallMaterial to the Material slot on the Ball entity.
```

--------------------------------

### PlayCanvas MJS Script Structure for GameManager

Source: https://docs.viverse.com/playcanvas-sdk/custom-code/introduction-to-mjs

Example of a `GameManager.mjs` script for PlayCanvas, demonstrating how to extend the built-in `Script` class and define `initialize` and `update` methods for game logic.

```JavaScript
import { Script } from 'playcanvas';

export class GameManager extends Script {
    /**
     * Called when the script is about to run for the first time.
     */
    initialize() {
    }

    /**
     * Called for enabled (running state) scripts on each tick.
     *
     * @param {number} dt - The delta time in seconds since the last frame.
     */
    update(dt) {
    }
}
```

--------------------------------

### Create and Configure a Room in Viverse Matchmaking

Source: https://docs.viverse.com/developer-tools/~gitbook/pdf

This snippet demonstrates how to create a new room using the 'createRoom()' method, providing a configuration object. The configuration includes room name, mode, player limits, and custom properties.

```javascript
matchmakingClient.createRoom({
    name: 'Casey\'s room',
    mode: 'team',
    maxPlayers: 4,
    minPlayers: 2,
    properties: {
        "level": 13,
        "skill": 21
    }
});
```

```APIDOC
createRoom() Possible return values:
Success:
{
   "success": true,
   "room": {
       "id": "14aa0657-3fd9-438a-a4b0-e6af349d8600",
       "app_id": "app_id",
       "mode": "team",
       "name": "Casey's room",
       "actors": [
           {
               "session_id": "ac98d013-a9c5-4a5f-ab47-727d2951bd4a",
               "name": "Casey",
               "properties": {
                   "level": 13,
                   "skill": 21
               },
               "is_master_client": true
           }
        ],
        "max_players": 4,
        "min_players": 2,
        "is_closed": false,
        "properties": {},
        "master_client_id": "ac98d013-a9c5-4a5f-ab40-e6af349d8600",
        "game_session": "14aa0657-3fd9-438a-a4b0-e6af349d8600",
        "created_by_me": true
    }
}

Failure:
{
    "success": false,
    "message": "error message"
}
```

--------------------------------

### Initialize VIVERSE Game Dashboard Client

Source: https://docs.viverse.com/developer-tools/~gitbook/pdf

This snippet demonstrates how to initialize the VIVERSE Game Dashboard client. It first retrieves the user's access token and then instantiates gameDashboardClient with necessary base URLs and the obtained token for authentication.

```javascript
// If the user is logged in, get the token; if not, return `undefined`
const accessToken = await globalThis.viverseClient.getToken();

// initialize game dashboard client instance
globalThis.gameDashboardClient = new globalThis.viverse.gameDashboard({
    baseURL: 'https://www.viveport.com/',
    communityBaseURL: 'https://www.viverse.com/',
    token: { accessToken }
});
```

--------------------------------

### Initialize VIVERSE Game Dashboard Client in JavaScript

Source: https://docs.viverse.com/developer-tools/leaderboard-sdk

This snippet demonstrates how to initialize the VIVERSE game dashboard client. It requires an authenticated user's access token and configures the client with base URLs for the VIVEPORT and VIVERSE communities.

```JavaScript
// If the user is logged in, get the token; if not, return `undefined`
const accessToken = await globalThis.viverseClient.getToken();

// initialize game dashboard client instance
globalThis.gameDashboardClient = new globalThis.viverse.gameDashboard({
    baseURL: 'https://www.viveport.com/',
    communityBaseURL: 'https://www.viverse.com/',
    token: { accessToken }
});
```

--------------------------------

### API Documentation for IXrService

Source: https://docs.viverse.com/playcanvas-sdk

Provides core XR functionalities, including controller management and locomotion options. It allows starting and ending XR sessions and accessing connected XR controllers.

```APIDOC
IXrService:
  Properties:
    controllers: IXrController[]
  Methods:
    start(): void
    end(): void
```

--------------------------------

### Initialize Three.js Scene, Camera, Renderer, and Cube

Source: https://docs.viverse.com/~gitbook/pdf

This JavaScript file initializes a basic Three.js scene, camera, and WebGL renderer. It creates a green cube, adds it to the scene, and sets up an animation loop to rotate the cube.

```JavaScript
import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animate );
document.body.appendChild( renderer.domElement );

const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

function animate() {

  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  renderer.render( scene, camera );

}
```

--------------------------------

### Handle Multiplayer Client Connect Event

Source: https://docs.viverse.com/developer-tools/matchmaking-and-networking-sdk

Describes the event triggered when the multiplayer client successfully establishes a connection. This event is crucial for performing setup logic once the session is ready for interaction.

```APIDOC
Event: multiplayerClient.on('connect', callback: Function)
  Description: Triggered when the multiplayer client establishes a connection.
  callback: Function - A callback function to execute when the 'connect' event occurs.
```

--------------------------------

### Handle Client Connection with onConnect Event

Source: https://docs.viverse.com/developer-tools/matchmaking-and-networking-sdk

The `onConnect` event is triggered when the client successfully establishes a connection with the SDK. This event can be used to confirm connection status and perform initial setup.

```APIDOC
matchmakingClient.on('onConnect', callback: Function)
```

--------------------------------

### Login to VIVERSE CLI

Source: https://docs.viverse.com/unity-webgl-example

Authenticates the VIVERSE CLI with your VIVERSE account. This command initiates an interactive login process in the terminal, prompting for your VIVERSE account email and password to establish a secure session for subsequent operations like publishing.

```CLI
viverse-cli auth login
```

--------------------------------

### CommonJS (NodeJS) Module Export and Import Example

Source: https://docs.viverse.com/playcanvas-sdk/custom-code/introduction-to-mjs

Demonstrates how to include the File System module using `require()` and export a function using `module.exports` in a CommonJS environment, typically used with Node.js.

```JavaScript
// To include the File System module, use the require() method
const fs = require('fs');

// Using the File System module to read files
fs.readFile();

// Exporting the greet function so it can be used in other modules, use module.exports
module.exports = function greet(name) {
    return 'Hello, ${name}!';
};
```

--------------------------------

### Configure EntityEnableCollision Action in VIVERSE

Source: https://docs.viverse.com/~gitbook/pdf

This guide explains how to set up the EntityEnableCollision action to enable an object's collider when a trigger is activated. The provided steps detail the configuration of the trigger area.

```APIDOC
Trigger Area Configuration:
  1. Create new 3D Box entity.
  2. Add Collision component.
  3. Add material (optional, e.g., transparent for visibility).
  4. Click the Edit Viverse Extension button.
```
Tokens:
Raw