# realvirtual.io WEB (Pro)

{% hint style="info" %}
realvirtual.io WEB export requires **realvirtual.io Professional**. The browser-based viewer itself is open source (AGPL-3.0) and available at [github.com/game4automation/realvirtual-WEB](https://github.com/game4automation/realvirtual-WEB).
{% endhint %}

<figure><img src="https://260262196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpYxFg97YnJX96UzNNTSd%2Fuploads%2Fgit-blob-b5c437a7e8c5167ca9f6aacb2959da62fb08a5ee%2Frealvirtual-web-demo.jpg?alt=media" alt=""><figcaption><p>realvirtual WEB — browser-based 3D HMI with KPI dashboards, drive monitoring, and alarm messages</p></figcaption></figure>

## Overview

realvirtual.io WEB is a browser-based 3D HMI and digital twin viewer. It loads GLB files exported from Unity and runs interactive transport simulation, drive animation, sensor collision, and LogicStep sequencing directly in the browser — no installation required.

**One link. Any device. Live Digital Twin.**

The Unity Editor provides the authoring tools to export your digital twin as a single GLB file containing all 3D geometry, component metadata, signal bindings, kinematic definitions, and drive parameters. The browser viewer reads this metadata and recreates the full interactive simulation.

## The Two-Platform Strategy

|                    | Unity (Engineering Platform)                         | realvirtual WEB (Delivery Platform)             |
| ------------------ | ---------------------------------------------------- | ----------------------------------------------- |
| **Purpose**        | CAD import, behavior modeling, virtual commissioning | Browser-based 3D HMI, monitoring, collaboration |
| **Technology**     | Unity Engine, C#, Unity Industry                     | Three.js, TypeScript, React                     |
| **Deployment**     | Desktop application, XR headsets, mobile devices     | Any modern browser                              |
| **PLC connection** | Native protocol drivers                              | WebSocket / MQTT gateway                        |
| **Target user**    | Automation engineer, simulation expert               | Operator, service tech, sales, customer         |

The GLB file is the bridge between the two platforms.

## Quick Start

### 1. Open WebViewer Tools

Open via **Tools > realvirtual > Export > WebViewer Tools**. The window has five tabs for the complete export-to-publish workflow.

### 2. Export Your Scene

<figure><img src="https://260262196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpYxFg97YnJX96UzNNTSd%2Fuploads%2Fgit-blob-c5e224677d74e6e70273c008364d7ef399f330e7%2Fwebviewerexport.png?alt=media" alt=""><figcaption><p>Export tab — export selected GameObjects or the entire scene as GLB</p></figcaption></figure>

In the **Export** tab, you have three options:

* **Export Selected to WebViewer** — Exports the currently selected GameObject and its children
* **Export Scene to WebViewer** — Exports all root GameObjects in the current scene
* **Export Selected as...** — Opens a file save dialog to choose any output path

The exported GLB is placed in the WebViewer's `public/models/` folder and contains:

* All 3D geometry (meshes, materials, textures)
* All realvirtual component data (drives, sensors, transport surfaces, sources, sinks, grippers, logic steps)
* Signal bindings (PLCInput/PLCOutput connections)
* Kinematic hierarchies and axis configurations
* Group definitions for visibility control
* Camera presets

### 3. Preview in Browser

<figure><img src="https://260262196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpYxFg97YnJX96UzNNTSd%2Fuploads%2Fgit-blob-74b174ad878973c9b4882018705056eee3db9454%2Fwebviewer-devserver.png?alt=media" alt=""><figcaption><p>Dev Server tab — start the local preview server and open the browser</p></figcaption></figure>

Start the local development server by clicking **Start Dev Server**. The browser opens automatically at `http://localhost:5173`. Select your exported model from the model selector.

You can also open the WebViewer and Models folders directly from this tab.

### 4. Publish

<figure><img src="https://260262196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpYxFg97YnJX96UzNNTSd%2Fuploads%2Fgit-blob-8ebcf129180b35ffd394db9c4f8da4f461081b9a%2Fwebviewerpublish.png?alt=media" alt=""><figcaption><p>Publish tab — one-click deployment to Bunny CDN</p></figcaption></figure>

The **Publish** tab provides integrated deployment to **Bunny CDN** at `web.realvirtual.io`. Configure your Bunny CDN credentials (Storage Key, Account API Key, Pull Zone ID), set a demo name, and click **Publish Scene** or **Publish Selected**.

**Publishing options:**

* **Publish Selected** — Exports and uploads the selected GameObject
* **Publish Scene** — Exports and uploads the entire scene
* **Publish Last Export** — Uploads a previously exported GLB without re-exporting

{% hint style="info" %}
Bunny CDN publishing is the integrated one-click solution. You can also **manually deploy** to any web server or cloud platform — the export produces a standard `dist/` folder (via `npm run build`) that can be uploaded to any static hosting service: your own web server, AWS S3, Azure Blob Storage, Netlify, Vercel, or any internal infrastructure. The GLB files and the built viewer are fully self-contained.
{% endhint %}

### 5. Private Projects

<figure><img src="https://260262196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpYxFg97YnJX96UzNNTSd%2Fuploads%2Fgit-blob-abf40a2994ca44181e5de1ab32b1694984516741%2Fwebviewerprivateexort.png?alt=media" alt=""><figcaption><p>Private tab — create and manage private customer deployments with secure URLs</p></figcaption></figure>

The **Private** tab manages customer-specific deployments:

* **Create** new private projects with auto-generated secure URLs (128-bit entropy)
* Each project has its own GLB models, settings, and optional plugins
* **Export Scene** directly into the project's models folder
* **Publish** to an unguessable URL at `web.realvirtual.io/{code}/`
* **Copy** the secure link to share with customers

Private projects are ideal for customer-specific digital twins that should not be publicly accessible.

### 6. Manage Deployments

<figure><img src="https://260262196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpYxFg97YnJX96UzNNTSd%2Fuploads%2Fgit-blob-43eee31298559f99b990156955b5811bcb800bc3%2Fwebviewermanage.png?alt=media" alt=""><figcaption><p>Manage tab — overview of all published deployments with usage statistics</p></figcaption></figure>

The **Manage** tab shows all published deployments (public and private) on Bunny CDN:

* File sizes and last update timestamps
* **Copy Link** to share deployment URLs
* **Open** in browser to preview
* **Delete** to remove deployments
* Usage statistics: page views, unique visitors, bandwidth, and cache hit rate

## WebViewer Settings

<figure><img src="https://260262196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpYxFg97YnJX96UzNNTSd%2Fuploads%2Fgit-blob-5998575a65aecae05ff16a99537d6c4366299858%2Fwebviewersettings.png?alt=media" alt=""><figcaption><p>WebViewerSettings asset — configure paths for the WebViewer installation</p></figcaption></figure>

The **WebViewerSettings** asset controls paths for the WebViewer installation:

| Setting             | Default                                 | Description                     |
| ------------------- | --------------------------------------- | ------------------------------- |
| **Web Viewer Path** | `Assets/realvirtual-WebViewer~`         | Path to the WebViewer source    |
| **Private Path**    | `Assets/realvirtual-WebViewer-Private~` | Path to private projects folder |

These paths determine where exported GLB files are placed and where the dev server runs.

## What Gets Exported

The export pipeline embeds all realvirtual component data into the GLB file using the `rv_extras` extension. The browser viewer reads this metadata to reconstruct the simulation.

### Supported Components

| Component             | Exported Data                                            |
| --------------------- | -------------------------------------------------------- |
| **Drive**             | Direction, speed, acceleration, limits, current position |
| **Sensor**            | AABB dimensions, signal connections                      |
| **TransportSurface**  | Speed, direction, dimensions                             |
| **Source**            | Spawn interval, MU template reference                    |
| **Sink**              | Signal connections                                       |
| **Grip / GripTarget** | Grip positions, pick/place configuration                 |
| **LogicStep**         | Step type, parameters, signal conditions, hierarchy      |
| **Group**             | Visibility group assignments                             |
| **Kinematic**         | Joint hierarchy, axis definitions                        |
| **Signals**           | PLCInput/PLCOutput bindings with names and types         |

## Export Settings

Export behavior is configured via the **AssetManagerSettings** asset (`Packages/io.realvirtual.professional/Runtime/AssetManager/Resources/AssetManagerSettings.asset`):

| Setting                        | Default | Description                                                                 |
| ------------------------------ | ------- | --------------------------------------------------------------------------- |
| **Export Material Properties** | Off     | Embeds full shader property values (textures, colors). Increases file size. |
| **Enable Mesh Deduplication**  | On      | Removes duplicate meshes to reduce GLB file size                            |
| **Export Thumbnails**          | On      | Generates and embeds a PNG preview thumbnail                                |
| **Export Decal Projectors**    | On      | Includes URP DecalProjector data                                            |
| **ScriptableObject Export**    | On      | Serializes ScriptableObject fields into the GLB                             |

## Browser Viewer

The exported GLB files are loaded by the browser-based viewer. For full documentation on the viewer itself, see the [realvirtual WEB GitHub repository](https://github.com/game4automation/realvirtual-WEB).

Key viewer capabilities:

* Live 3D HMI with PLC connectivity via WebSocket or MQTT
* In-browser transport simulation at 60 Hz
* KPI dashboards with Apache ECharts
* WebXR support (VR/AR)
* Plugin system for custom extensions
* AI-enabled via [MCP Server](https://github.com/game4automation/realvirtual-MCP)

## MultiplayerWEB (Beta)

<figure><img src="https://260262196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpYxFg97YnJX96UzNNTSd%2Fuploads%2Fgit-blob-11e8e324a62c02b749f7706ea8b35dd2a6b8f330%2Fmultiplayerweb-inspector.png?alt=media" alt=""><figcaption><p>MultiplayerWEB component — relay client mode with session and sync settings</p></figcaption></figure>

The **MultiplayerWEB** component (Pro) enables real-time multiuser sessions between Unity and browser clients. It runs a WebSocket server inside Unity on port 7000, streaming drive positions, MU states, and signal values to all connected browser viewers.

Browser clients connect via the Multiuser panel in the WebViewer and see shared avatars, camera positions, and live machine state. Roles (Operator/Observer) control who can interact with the simulation.

MultiplayerWEB supports two connection modes:

* **Direct** — Browser clients connect directly to Unity's WebSocket server (local network)
* **Relay** — Browser clients connect via a hosted relay server (internet access, no port forwarding needed)

{% hint style="warning" %}
MultiplayerWEB is currently in **Beta**. The relay server is hosted via the realvirtual customer portal.
{% endhint %}

## See Also

* [realvirtual WEB on GitHub](https://github.com/game4automation/realvirtual-WEB) — Open-source browser viewer (AGPL-3.0)
* [realvirtual MCP Server](https://github.com/game4automation/realvirtual-MCP) — AI agent bridge for Unity and WebViewer
* [Publishing the Digital Twin](https://doc.realvirtual.io/basics/publishing-the-digital-twin) — Other deployment options (Windows, WebGL, VR)