Hubs

Hubs

  • Hubs Foundation
  • Docs
  • GitHub
  • Help

›Hubs Client development

Introduction

  • Welcome
  • Getting Started With Hubs
  • Building Scenes with Spoke
  • Creating Custom Avatars
  • Hosting Events in Hubs

Setting Up Your Hub

  • Beginner’s Guide to CE
  • Set up SMTP email service
  • Download and install doctl
  • What’s next?
  • Troubleshooting and FAQs
  • How to back up your Hubs instance
  • Managing Your Hub's Content
  • Frequently Asked Questions
  • Contact Us

Hubs Fundamentals

  • Create and Join Rooms
  • Hubs Features
  • Sharing Avatar Links Privately
  • User Settings
  • Room Settings
  • Controls
  • Discord Bot
  • Troubleshooting
  • FAQ

Spoke Documentation

  • Create Project
  • User Interface
  • Spoke Controls
  • Adding Content
  • Architecture Kit
  • Grid
  • Skyboxes
  • Lighting and Shadows
  • Physics and Navigation
  • Publish Scenes

For Creators

  • Advanced Avatar Customization
  • Linking Hubs Rooms
  • Using the Blender glTF Exporter
  • Blender Add-on Components
  • Optimizing Scenes
  • Introduction to Behavior Graphs

For Developers

  • System Overview
  • Build a Custom Client
  • Contributing
  • Hubs Query String Parameters
  • GitHub Workflows

Hubs Client development

  • Hubs Client development Basics
  • Core Concepts for Gameplay Code
  • Hubs Client development Interactivity
  • Hubs Client development Networking

Hubs Admin Panel

  • Introduction
  • Getting Started
  • Importing Content
  • Customizing Themes
  • Managing Content
  • Adding Administrators
  • Limiting Access
  • Recipe: Permissive Rooms
  • Recipe: Enable Scene Editor
Edit

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 the Three.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-allocated TypedArrays.
  • Media Capture and Streams API, WebRTC, and WebAudio : The Media Capture and Streams API allows microphones, cameras, and screencapture to be accessed within the browser. Data is captured and encoded locally before being sent (as WebRTC 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. by PannerNode s and GainNodes from the WebAudio 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 makes HTTP requests. To exchange game state information like, “where my avatar is moving”, the client sends messages over a Web Socket connection (specifically, via Phoenix channels).
  • Webpack and 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 npm.
  • 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.

  • Core Concepts for Gameplay Code
  • Interactivity (WIP)
  • Networking
← GitHub WorkflowsCore Concepts for Gameplay Code →
  • Technologies and Backend Services
  • How the code is organized
  • Where to go from here
Hubs
Docs
IntroductionSetting Up Your HubHubs FundamentalsSpoke DocumentationFor CreatorsFor DevelopersAdministration
Community
Discord Chat
More
HubsSpokeGitHub
Copyright © 2024–2025 Hubs Foundation. Hubs Documentation available under the Creative Commons Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0) license.