Technologies and Backend Services
The client combines several libraries and technologies to provide this experience to users, and offers developers various ways to change and extend its functionality.
These are the main technologies in use by the hubs client:
Three.jsis a 3D graphics and scene graph library for building and creating 3D scenes. Three.js makes it easier to use the browser’s built-in graphics capabilities, such as WebGL, WebXR, and WebGPU (someday).
bitECSis an ECS library for managing game state that lives outside the
Three.jsscene graph. In the Hubs client, most “things” (avatars, images, an animated emoji) are referenced by an entity ID. This entity ID is used to access component data stored in pre-allocated
Media Capture and Streams API,
Media Capture and Streams APIallows microphones, cameras, and screencapture to be accessed within the browser. Data is captured and encoded locally before being sent (as
WebRTCstreams) to a backend service (
Dialog), where they are forwarded to other clients connected to the same room. Incoming streams are decoded and transformed (e.g. by
WebAudioAPI) before being played through the user’s speakers.
Web Sockets: The Hubs client is web app, which means its code is downloaded when you visit a hubs-powered site. After its initial load, the hubs client exchanges many, many messages to the backend web server,
Reticulum. To download assets like 3D model files and 2D images, the client makes
HTTPrequests. To exchange game state information like, “where my avatar is moving”, the client sends messages over a
Web Socketconnection (specifically, via
npm: The Hubs client is built and bundled by
Webpack. Building the client (or custom versions of the client) typically involves running a few commands with
How the code is organized
There are three main sections of application code:
contains a separate application that powers the Hubs admin panel. Note that
this directory will likely undergo changes in the near future.
src directory contains
of the code that powers the 3D simulation. The entry points for various pages
are defined in
Where to go from here
Check out the other docs.