Browser-Based 3D HMI, Machine Information System, and Digital Twin Viewer for Industrial Automation

realvirtual WEB is an open-source, browser-based 3D HMI and digital twin viewer for manufacturing. Load any standard GLB/glTF file and view it as an interactive 3D model in the browser. For full digital twin functionality — drives, sensors, transport simulation, signal wiring, and KPI dashboards — use GLB files enriched with rv_extras metadata, either exported from realvirtual.io Professional or authored manually. No installation required.

One link. Any device. Live Digital Twin. Try it: web.realvirtual.io/demo

Part of the realvirtual.io industrial digital twin platform — a Unity Verified Solution for virtual commissioning, 3D HMI, and simulation.

realvirtual WEB replaces traditional desktop HMI and SCADA visualization with a modern, browser-based 3D experience. Connect to real PLCs via WebSocket or MQTT, and operators see live machine states — drive positions, sensor readings, alarms, KPIs — all in the context of the machine's 3D layout. Unlike flat panel HMIs, operators see what is happening, where it is happening, and why.

• Live 3D HMI — Real-time PLC signal visualization via WebSocket or MQTT. Drive monitoring, sensor states, KPI overlays, alarm dashboards, and production charts powered by Apache ECharts.
• Machine Information System — Attach documents, maintenance guides, technical drawings, and manuals directly to 3D components. Technicians click a part and see its documentation in context — accessible from any device on the shop floor.
• Transport Simulation — Full in-browser simulation engine at 60 Hz fixed timestep: conveyor surfaces, sources, sinks, sensors with AABB collision, grippers, and material flow.
• LogicStep Sequencing — Serial/parallel containers, signal conditions, delays, drive commands — ported from realvirtual.io Professional based on Unity.
• WebXR (VR/AR) — Immersive visualization on Meta Quest, Apple Vision Pro, and AR on Android/iOS with surface detection.
• Layout Planning (Beta) — Assemble factory layouts directly in the browser: drag reusable parts from a library onto a grid, connect them with typed snap points, and position them with transform gizmos. Ships with a standard parts library and can load any GLB catalog straight from a GitHub repository.
• Multiuser Sessions (Beta) — Real-time collaboration with avatars, shared camera views, role management, and late-join state sync.
• Plugin Architecture — Extend with custom plugins for project-specific HMI, KPI dashboards, maintenance workflows, and industrial interfaces.
• AI-Ready (MCP) — Built-in Model Context Protocol bridge lets AI assistants like Claude inspect, control, and debug the running viewer — read drive states, set signals, query scene hierarchy, and automate testing through natural language. Uses the realvirtual MCP Server.

Web-based HMI connected to real PLCs via WebSocket or MQTT. Live signal visualization, KPI overlays, drive monitoring — replacing desktop HMI applications with a browser link.

Attach PDFs, maintenance guides, technical drawings, operating manuals, and spare part lists directly to individual 3D components. Technicians open a link on their tablet, click on a motor or valve, and immediately see its documentation, maintenance history, and real-time status — all in 3D context, on-site or remotely. No more searching through binders or file shares.

Interactive 3D models that let prospects explore machines live in the browser. More convincing than slides, more accessible than installed software. Share a link — done.

Build browser-based 3D product configurators where customers select options, variants, and accessories — and see the result rendered in real time. Combine with the plugin system to add pricing, BOM generation, or quote workflows.

Assemble factory layouts directly in the browser — drag conveyors, robots, fixtures, and pallets from a parts library onto a grid, connect them with typed snap points, and arrange them with transform gizmos. Ships with a standard parts library and loads any GLB catalog straight from a GitHub repository.

Operators learn machine behavior interactively before touching the real system. No software installation, no VPN, no IT department required.

Share virtual commissioning models with customers for review and sign-off — worldwide, instantly.

# Requirements: Node.js >= 20.19 or >= 22.12
# Clone the repository (increase buffer for large GLB model files)
git config --global http.postBuffer 524288000
git clone https://github.com/game4automation/realvirtual-WEB.git
cd realvirtual-WEB

npm install
npm run dev          # Vite dev server with HMR

Drop .glb files exported from realvirtual.io into public/models/ — they appear automatically in the model selector.

npm run build        # Production build -> dist/
npm run preview      # Preview production build
npm test             # Run browser tests (headless Chromium via Playwright)
npm run test:node    # Run Node.js tests (fs, glob, ESLint instance)
npm run test:all     # Run both Node + browser tests
npm run lint         # ESLint (flat-config, boundaries rule)

• Public Demo — Publish to web.realvirtual.io for sales demos and marketing
• Private Projects — Unguessable URLs with 128-bit entropy for secure customer access
• Self-Hosted — Deploy on your own infrastructure with settings.json configuration
• Kiosk Mode — Lock all configuration UI for shopfloor panels and public displays

Connect to real automation systems via:

The Unity-side realvirtual.io Professional supports 15+ industrial protocols including Siemens S7, Beckhoff ADS, OPC UA, Fanuc, KUKA, ABB, EtherNet/IP, Modbus, and more — all bridged to the browser via WebSocket.

realvirtual WEB works with any standard GLB/glTF file — load a CAD export from Blender, SolidWorks, Fusion 360, or any other 3D tool and view it as an interactive 3D model in the browser.

For full digital twin functionality, the GLB file becomes the single source of truth: signal bindings, kinematic definitions, drive parameters, sensor thresholds, and component metadata are embedded via the rv_extras schema. realvirtual.io Professional provides the authoring tools to add this metadata during Unity export, but the rv_extras format is open and documented — you can author it with any toolchain.

src/
  core/
    engine/          # Simulation engine (drives, sensors, transport)
    hmi/             # React HMI components (panels, tooltips, settings)
  hooks/             # React hooks
  interfaces/        # Industrial protocol adapters (WebSocket, MQTT, ctrlX)
  plugins/           # Built-in plugins (multiuser, annotations, FPV, XR)
    demo/            # Demo charts and HMI (OEE, cycle time, energy, drive/sensor overlays)
    models/          # Per-model plugins (auto-loaded when a model is selected)
tests/               # Vitest browser-mode tests
e2e/                 # Playwright E2E tests
public/models/       # GLB model files

Plugins can contribute UI components to predefined slots in the HMI layout — KPI bar, button panel, message panel, settings tabs, and more. The built-in demo plugin uses all of these:

The plugin system makes it easy to add custom functionality. Create a plugin class and register it with viewer.use():

import type { RVViewerPlugin } from './core/rv-plugin';
import type { RVViewer } from './core/rv-viewer';

class MyPlugin implements RVViewerPlugin {
  id = 'my-plugin';

  install(viewer: RVViewer) {
    // Access drives, signals, scene — all from the viewer API
    viewer.on('model-loaded', () => {
      const drives = viewer.drives;          // all drives in the scene
      const signals = viewer.signalStore;    // PLC signal store
      console.log(`Model loaded with ${drives.length} drives`);
    });
  }
}

// Register in main.ts or a model-specific plugin module
viewer.use(new MyPlugin());

Per-model plugins load automatically when a specific GLB is selected. Place them in src/plugins/models/<ModelName>/index.ts:

export const models = ['MyMachine'];  // matches MyMachine.glb

export function registerModelPlugins(viewer) {
  viewer.use(new MyCustomDashboard());
}

export function unregisterModelPlugins(viewer) {
  viewer.removePlugin('my-dashboard');
}

For the full plugin API — UI slots, event bus, hooks, context menus, and tooltip extensions — see doc-extending-webviewer.md.

realvirtual WEB and realvirtual.io are fully AI-enabled through the Model Context Protocol (MCP). AI coding assistants like Claude Code can directly interact with both the Unity Editor and the running realvirtual WEB instance:

The realvirtual MCP Server is the recommended AI bridge. It connects AI assistants to:

• realvirtual WEB — List drives and positions, read/write PLC signals, query the scene hierarchy, inspect sensor states, debug transport simulation — all from the running browser scene.
• Unity Editor (optional) — When used with realvirtual.io, 80+ additional tools are available: create GameObjects, set component properties, run simulations, manage scenes, take screenshots, and run tests.

This means AI assistants can design, build, test, and debug industrial digital twins end-to-end.

This repo includes a full Claude Code setup:

• CLAUDE.md — Project conventions, architecture overview, and coding guidelines for AI assistants
• .claude/commands/ — Slash commands for common workflows: /dev, /debug, /test, /build, /inspect, /license-check
• webviewer.mcp.md — MCP tools reference for browser-side scene inspection

Open this project in Claude Code and use /dev to start the dev server, /debug drives to inspect drive states, or /test to run the full test suite — all through natural language.

realvirtual.io follows a deliberate two-platform architecture:

Copyright (C) 2025 realvirtual GmbH

This program is licensed under the GNU Affero General Public License v3 (AGPL-3.0).

What this means: If you use, modify, or build upon realvirtual WEB in your own project — including deploying it as a web service — you must publish your complete project under the same AGPL-3.0 license and make it freely available. This includes all source code, configuration, and all content delivered through the application (such as GLB model files, settings, and plugins). This applies whether served over a network or distributed directly.

The "Powered by realvirtual WEB" watermark and the realvirtual logo must remain visible and unmodified in all AGPL deployments. Removal or modification of any branding requires a commercial license.

See LICENSE for the full license text.

SPDX-License-Identifier: AGPL-3.0-only

If you want to use realvirtual WEB in proprietary or closed-source products — or keep your 3D models, project configuration, and plugins private — a commercial license is available.

Contact: realvirtual.io/en/company/license

realvirtual.io | Live Demo | Documentation | YouTube | Forum