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.
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:
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.
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.
Database:
This project consists of the sub projects. See packages
directory.
We strongly recommend starting with the Getting Started documentation.
$ git clone https://github.com/takahirox/tiny-web-metaverse.git
$ cd tiny-web-metaverse
$ npm run install:all
$ npm run build:all
Prerequirements:
# 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.
Prerequirements:
$ ./deploy/up.sh
And access http://localhost:8080 on your browser.
Refer to the documents.