Tiny Web Metaverse

Tiny Web Metaverse is a Web-based multi-user 3D virtual space lightweight framework with high flexibility and extensibility. It is built on web standards, making it familiar and easy to use for developers with Web development experience.

Tiny Web Metaverse adopts an ECS architecture. This architecture makes it easy to add or modify features without having to modify existing code.

Tiny Web Metaverse uses Docker containers to reduce the overhead of environment setup.

Online Demo

Click to enter a room, and then share the URL (with ?room_id=xxx) with your friends to meet up with in a room.

Built on this framework, this demo offers the following features:

3D Exploration: Walk around and rotate the 3D space
Collaborative Object Manipulation: Collaborate with remote users to manipulate objects in the 3D space
Audio and Text Chat: Communicate with remote users via audio or text
Mobile-Friendly: Good support for mobile devices
VR/AR Experience: Experience the 3D space in a realistic way using VR/AR devices
AI Model Generation: Generate 3D models automatically using generative AI

Screenshots

AI Demo videos

One of the features of Tiny Web Metaverse is that it is easy to add features due to its high extensibility. For example, it is easy to add features that leverage generative AI, which is rapidly growing recently. I have actually added some features locally and recorded videos. You can watch them here.

What this framework provides

This framework makes it easy to create and deploy multiplayer virtual 3D space web apps that reflect user ideas in a free way.

The advent of WebGL and WebGPU, as well as JavaScript 3D graphics libraries that use them, has made 3D rendering easier in browsers. Also, WebXR, WebSocket, and WebRTC have made it possible to create web apps with VR/AR, and real-time network processing.

Many people are interested in developing multiplayer virtual 3D space web apps that could realize new forms of human interaction, such as open online games and virtual events.

However, developing them can be surprisingly laborious. You need to develop both the client and the server, and you need knowledge of hosting and Web APIs. Network synchronization is especially troublesome. These processes can be cumbersome.

There are ways to use existing platforms to create custom content, but they can be restrictive, as custom logic can be difficult to add, and you may need to register with the platforms.

To address these challenges, I created a framework that is easy to modify, extend, and self-host.

The framework handles the cumbersome processing of the Web APIs and networking, so you can focus on your own custom logic and content creation. It is also built on technologies that are commonly used in web app development, such as JavaScript and TypeScript, so you can develop with a familiar development environment and workflow.

Features

Extendibility and flexibility with ECS architecture
Easy self-hosting with Docker
3D space rendering with WebGL
VR/AR support with WebXR
Real-time network synchronization with WebSocket
Real-time Audio/Video communication with WebRTC
Audio effects with WebAudio
Support for mobile devices
Accelerates development with standard Web technologies

Example use cases

Multiplay 3D games: Develop online multiplay virtual 3D games.
Virtual meeting rooms: Host online meetings and conferences in 3D spaces with avatars and interactive elements.
Art galleries and museums: Showcase virtual exhibitions and collections for immersive viewing and interaction.
Online Music Festivals: Host online music live events in 3D spaces where many people connect with music lovers.
Educational simulations: Create virtual environments for learning about various topics, like history, science, or technology.
3D model viewer and builder: Develop a platform for users to create and share 3D models within the virtual 3D platform.
Collaborative art projects: Create shared spaces where multiple users can contribute to a virtual artwork or project.

Architecture overview

Client:

bieECS resource management
3D graphics rendering using WebGL
VR/AR processing using WebXR, such as positional tracking
Network synchronization of object states with remote clients using WebSockets via State server
Audio and video communication with remote clients using WebRTC via Stream server
Input handling from input devices such as mouse, keyboard, touchscreen, VR headset, and so on

Stream server:

SFU WebRTC server for client-to-client audio and video communication
Reduces the burden on the publisher, and also saves the number of WebRTC connections

State server:

A Pub/Sub server for synchronizing object state between clients
Adopts a Pub/Sub architecture, which makes it loosely coupled and scalable

Database:

Used by the state server to store object state

Sub-projects

This project consists of the sub projects. See packages directory.

addons: Addons for Client
client: Client
demo: Demo
state_client: Client of State server
state_server: State server
stream_client: Client of Stream server
stream_server: Stream server

Documents

Getting Started
Client
- Client Core concept
- API and built-in addons
- Entity State networking internal
- Streaming
Addons
- Addons list
State server
- Overview
Stream server
- Overview
Deploy
- Deploy Demo to AWS ECS
- Deploy Demo to Google Cloud

We strongly recommend starting with the Getting Started documentation.

How to build

$ git clone https://github.com/takahirox/tiny-web-metaverse.git
$ cd tiny-web-metaverse
$ npm run install:all
$ npm run build:all

How to run Demo locally

Prerequirements:

Install PostgreSQL
- Setup User/Password as postgres/postgres
Install Elixir
Build the project

# Terminal 1
$ cd packages/stream_server
$ npm run server

# Terminal 2
$ cd packages/state_server
$ mix deps.get
$ mix deps.compile
$ mix ecto.create
$ mix ecto.migrate
$ mix phx.server

# Terminal 3
$ cd packages/demo
$ npm run server

And access http://localhost:8080 on your browser.

How to run Demo locally with Docker