Hubs Client development Basics
The Hubs client is a web application that runs in each user’s web browser. It contains the HTML, CSS, and Javascript necessary to simulate a networked 3D world and display interactive 2D menus. This document provides an overview of the Hubs client: the technologies it uses, the backend services it connects to, and how its code is organized.
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.js
:Three.js
is 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).bitECS
:bitECS
is an ECS library for managing game state that lives outside theThree.js
scene 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-allocatedTypedArrays
.Media Capture and Streams API
,WebRTC
, andWebAudio
: TheMedia Capture and Streams API
allows microphones, cameras, and screencapture to be accessed within the browser. Data is captured and encoded locally before being sent (asWebRTC
streams) 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. byPannerNode
s andGainNodes
from theWebAudio
API) before being played through the user’s speakers.HTTP
,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 makesHTTP
requests. To exchange game state information like, “where my avatar is moving”, the client sends messages over aWeb Socket
connection (specifically, viaPhoenix channels
).Webpack
andnpm
: The Hubs client is built and bundled byWebpack
. Building the client (or custom versions of the client) typically involves running a few commands withnpm
.Typescript
:Typescript
is a superset of Javascript that compiles to Javascript. We adopted typescript in 2022. While we are not trying to rewrite all of our existing javascript, new code is usually written in typescript.
How the code is organized
There are three main sections of application code:
The admin
directory
contains a separate application that powers the Hubs admin panel. Note that
this directory will likely undergo changes in the near future.
The react-components
directory contains all of the 2D UI shown in menus, modals, and toolbars
throughout the client. It is built with React
.
The src
directory contains
of the code that powers the 3D simulation. The entry points for various pages
are defined in webpack.config.js
.
Where to go from here
Check out the other docs.