{"id":13691428,"url":"https://github.com/takahirox/tiny-web-metaverse","last_synced_at":"2025-11-13T22:59:06.754Z","repository":{"id":160830273,"uuid":"633173242","full_name":"takahirox/tiny-web-metaverse","owner":"takahirox","description":"A web-based 3D virtual space lightweight framework with high flexibility, extensibility, and easy hosting, built on ECS architecture","archived":false,"fork":false,"pushed_at":"2024-02-13T10:58:37.000Z","size":21161,"stargazers_count":125,"open_issues_count":44,"forks_count":14,"subscribers_count":10,"default_branch":"main","last_synced_at":"2024-10-18T07:04:18.529Z","etag":null,"topics":["3d","ecs","elixir","javascript","metaverse","threejs","typescript","web","webaudio","webrtc","websocket"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/takahirox.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2023-04-27T00:05:03.000Z","updated_at":"2024-09-06T04:13:47.000Z","dependencies_parsed_at":null,"dependency_job_id":"ff93bd20-85b1-4d66-b64a-db9a46760cc6","html_url":"https://github.com/takahirox/tiny-web-metaverse","commit_stats":null,"previous_names":["takahirox/tiny-web-metaverse"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/takahirox%2Ftiny-web-metaverse","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/takahirox%2Ftiny-web-metaverse/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/takahirox%2Ftiny-web-metaverse/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/takahirox%2Ftiny-web-metaverse/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/takahirox","download_url":"https://codeload.github.com/takahirox/tiny-web-metaverse/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230423559,"owners_count":18223435,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["3d","ecs","elixir","javascript","metaverse","threejs","typescript","web","webaudio","webrtc","websocket"],"created_at":"2024-08-02T17:00:44.929Z","updated_at":"2025-11-13T22:59:01.710Z","avatar_url":"https://github.com/takahirox.png","language":"JavaScript","funding_links":[],"categories":["Projects"],"sub_categories":["Tool"],"readme":"# Tiny Web Metaverse\n\n[![Latest NPM release](https://img.shields.io/npm/v/@tiny-web-metaverse/client.svg)](https://www.npmjs.com/package/@tiny-web-metaverse/client)\n\nTiny Web Metaverse is a Web-based multi-user 3D virtual space lightweight\nframework with high flexibility and extensibility. It is built on web\nstandards, making it familiar and easy to use for developers with Web\ndevelopment experience.\n\nTiny Web Metaverse adopts an ECS architecture. This architecture makes it\neasy to add or modify features without having to modify existing code.\n\nTiny Web Metaverse uses Docker containers to reduce the overhead of environment\nsetup.\n\n## Online Demo\n\n[Online Demo](https://tiny-web-metaverse.net)\n\nClick to enter a room, and then share the URL (with `?room_id=xxx`) with your \nfriends to meet up with in a room.\n\nBuilt on this framework, this demo offers the following features:\n\n* 3D Exploration: Walk around and rotate the 3D space\n* Collaborative Object Manipulation: Collaborate with remote users to manipulate\n  objects in the 3D space\n* Audio and Text Chat: Communicate with remote users via audio or text\n* Mobile-Friendly: Good support for mobile devices\n* VR/AR Experience: Experience the 3D space in a realistic way using VR/AR\n  devices\n* AI Model Generation: Generate 3D models automatically using generative AI\n\n## Screenshots\n\n\u003cimg src=\"./screenshots/screenshot_mobile.png\" width=\"480\" /\u003e\u003cbr /\u003e\n\u003cimg src=\"./screenshots/screenshot_mobile_vr.png\" width=\"480\" /\u003e\u003cbr /\u003e\n\u003cimg src=\"./screenshots/screenshot_mobile_ar.png\" width=\"480\" /\u003e\n\n## AI Demo videos\n\nOne of the features of Tiny Web Metaverse is that it is easy to add features\ndue to its high extensibility. For example, it is easy to add features that\nleverage generative AI, which is rapidly growing recently. I have actually\nadded some features locally and recorded videos. You can watch them here.\n\n* [Text to 3D model AI + AR/VR](https://twitter.com/superhoge/status/1720274165125840997)\n* [AI chatbot](https://twitter.com/superhoge/status/1723184343542317418)\n* [Realtime Image to Image AI](https://twitter.com/superhoge/status/1730847570422100179)\n* [Realtime texture generation with Text to Texture AI](https://twitter.com/superhoge/status/1735887721644888268)\n* [Canvas to Image AI into 3D scene](https://twitter.com/superhoge/status/1736174055315947677)\n\n## What this framework provides\n\nThis framework makes it easy to create and deploy multiplayer virtual 3D space\nweb apps that reflect user ideas in a free way.\n\nThe advent of [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API)\nand [WebGPU](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API), as\nwell as JavaScript 3D graphics libraries that use them, has made 3D rendering\neasier in browsers. Also, [WebXR](https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API),\n[WebSocket](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API), and\n[WebRTC](https://webrtc.org/) have made it possible to create web apps with\nVR/AR, and real-time network processing.\n\nMany people are interested in developing multiplayer virtual 3D space web apps\nthat could realize new forms of human interaction, such as open online games\nand virtual events.\n\nHowever, developing them can be surprisingly laborious. You need to develop\nboth the client and the server, and you need knowledge of hosting and Web APIs.\nNetwork synchronization is especially troublesome. These processes can be\ncumbersome.\n\nThere are ways to use existing platforms to create custom content, but they can\nbe restrictive, as custom logic can be difficult to add, and you may need to\nregister with the platforms.\n\nTo address these challenges, I created a framework that is easy to modify, extend,\nand self-host.\n\nThe framework handles the cumbersome processing of the Web APIs and networking,\nso you can focus on your own custom logic and content creation. It is also\nbuilt on technologies that are commonly used in web app development, such as\n[JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) and\n[TypeScript](https://www.typescriptlang.org/), so you can develop with a\nfamiliar development environment and workflow.\n\n## Features\n\n* Extendibility and flexibility with [ECS architecture](https://en.wikipedia.org/wiki/Entity_component_system)\n* Easy self-hosting with [Docker](https://www.docker.com/)\n* 3D space rendering with [WebGL](https://www.khronos.org/webgl/)\n* VR/AR support with [WebXR](https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API)\n* Real-time network synchronization with [WebSocket](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API)\n* Real-time Audio/Video communication with [WebRTC](https://webrtc.org/)\n* Audio effects with [WebAudio](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API)\n* Support for mobile devices\n* Accelerates development with standard Web technologies\n\n## Example use cases\n\n* Multiplay 3D games: Develop online multiplay virtual 3D games.\n* Virtual meeting rooms: Host online meetings and conferences in 3D spaces with\navatars and interactive elements.\n* Art galleries and museums: Showcase virtual exhibitions and collections for\nimmersive viewing and interaction.\n* Online Music Festivals: Host online music live events in 3D spaces where many\npeople connect with music lovers.\n* Educational simulations: Create virtual environments for learning about\nvarious topics, like history, science, or technology.\n* 3D model viewer and builder: Develop a platform for users to create and share\n3D models within the virtual 3D platform.\n* Collaborative art projects: Create shared spaces where multiple users can\ncontribute to a virtual artwork or project.\n\n## Architecture overview\n\n[Client:](https://github.com/takahirox/tiny-web-metaverse/tree/main/packages/client)\n\n- bieECS resource management\n- 3D graphics rendering using WebGL\n- VR/AR processing using WebXR, such as positional tracking\n- Network synchronization of object states with remote clients using WebSockets\n  via State server\n- Audio and video communication with remote clients using WebRTC via Stream\n  server\n- Input handling from input devices such as mouse, keyboard, touchscreen,\n  VR headset, and so on\n\n[Stream server:](https://github.com/takahirox/tiny-web-metaverse/tree/main/packages/stream_server)\n\n- SFU WebRTC server for client-to-client audio and video communication\n- Reduces the burden on the publisher, and also saves the number of WebRTC\n  connections\n\n[State server:](https://github.com/takahirox/tiny-web-metaverse/tree/main/packages/state_server)\n\n- A Pub/Sub server for synchronizing object state between clients\n- Adopts a Pub/Sub architecture, which makes it loosely coupled and scalable\n\nDatabase:\n\n- Used by the state server to store object state\n\n\u003cimg src=\"./docs/diagrams/overview.svg\"\u003e\n\n## Sub-projects\n\nThis project consists of the sub projects. See `packages` directory.\n\n* [addons](https://github.com/takahirox/tiny-web-metaverse/tree/main/packages/addons): [![Latest addons NPM release](https://img.shields.io/npm/v/@tiny-web-metaverse/addons.svg)](https://www.npmjs.com/package/@tiny-web-metaverse/addons) Addons for Client\n* [client](https://github.com/takahirox/tiny-web-metaverse/tree/main/packages/client): [![Latest client NPM release](https://img.shields.io/npm/v/@tiny-web-metaverse/client.svg)](https://www.npmjs.com/package/@tiny-web-metaverse/client) Client\n* [demo](https://github.com/takahirox/tiny-web-metaverse/tree/main/packages/demo): [![Latest examples NPM release](https://img.shields.io/npm/v/@tiny-web-metaverse/examples.svg)](https://www.npmjs.com/package/@tiny-web-metaverse/examples) Demo\n* [state_client](https://github.com/takahirox/tiny-web-metaverse/tree/main/packages/state_client): [![Latest state_client NPM release](https://img.shields.io/npm/v/@tiny-web-metaverse/state_client.svg)](https://www.npmjs.com/package/@tiny-web-metaverse/state_client) Client of State server\n* [state_server](https://github.com/takahirox/tiny-web-metaverse/tree/main/packages/state_server): State server\n* [stream_client](https://github.com/takahirox/tiny-web-metaverse/tree/main/packages/stream_client): [![Latest stream_client NPM release](https://img.shields.io/npm/v/@tiny-web-metaverse/stream_client.svg)](https://www.npmjs.com/package/@tiny-web-metaverse/stream_client) Client of Stream server\n* [stream_server](https://github.com/takahirox/tiny-web-metaverse/tree/main/packages/stream_server): [![Latest stream_server NPM release](https://img.shields.io/npm/v/@tiny-web-metaverse/stream_server.svg)](https://www.npmjs.com/package/@tiny-web-metaverse/stream_server) Stream server\n\n## Documents\n\n* [Getting Started](https://github.com/takahirox/tiny-web-metaverse/blob/main/docs/development/getting_started.md)\n* Client\n  * [Client Core concept](https://github.com/takahirox/tiny-web-metaverse/blob/main/docs/client/core_concept.md)\n  * API and built-in addons\n  * Entity State networking internal\n  * Streaming\n* Addons\n  * Addons list\n* State server\n  * Overview\n* Stream server\n  * Overview\n* Deploy\n  * [Deploy Demo to AWS ECS](https://github.com/takahirox/tiny-web-metaverse/blob/main/docs/deploy/aws/Readme.md)\n  * [Deploy Demo to Google Cloud](https://github.com/takahirox/tiny-web-metaverse/blob/main/docs/deploy/google_cloud/Readme.md)\n\nWe strongly recommend starting with the Getting Started documentation.\n\n## How to build\n\n```sh\n$ git clone https://github.com/takahirox/tiny-web-metaverse.git\n$ cd tiny-web-metaverse\n$ npm run install:all\n$ npm run build:all\n```\n\n## How to run Demo locally\n\nPrerequirements:\n\n* Install [PostgreSQL](https://www.postgresql.org/)\n  * Setup User/Password as postgres/postgres\n* Install [Elixir](https://elixir-lang.org/)\n* [Build the project](#how-to-build)\n\n```sh\n# Terminal 1\n$ cd packages/stream_server\n$ npm run server\n\n# Terminal 2\n$ cd packages/state_server\n$ mix deps.get\n$ mix deps.compile\n$ mix ecto.create\n$ mix ecto.migrate\n$ mix phx.server\n\n# Terminal 3\n$ cd packages/demo\n$ npm run server\n```\n\nAnd access http://localhost:8080 on your browser.\n\n## How to run Demo locally with Docker\n\nPrerequirements:\n\n* Install [Docker](https://www.docker.com/)\n\n```sh\n$ ./deploy/up.sh\n```\n\nAnd access http://localhost:8080 on your browser.\n\n## Deploy Demo to Cloud servers\n\nRefer to [the documents](#documents).\n\n## How to support the project\n\n* Test and [Report bugs](https://github.com/takahirox/tiny-web-metaverse/issues)\n* [Make Pull requests](https://github.com/takahirox/tiny-web-metaverse/pulls) to fix bugs or add new features\n* Monthly or one-time support via GitHub sponsors: T.B.D.\n* Make a support contract: T.B.D.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftakahirox%2Ftiny-web-metaverse","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftakahirox%2Ftiny-web-metaverse","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftakahirox%2Ftiny-web-metaverse/lists"}