Awesome Mozilla Hubs

This is a curated list of resources for Mozilla Hubs & Hubs-Cloud Developers and Creators.

Table of contents

• Awesome Mozilla Hubs
  • Table of contents
  • Community
  • Creation
    • Avatar Creators
    • Avatars
    • Blender
    • Room and scene directories
    • Scenes
    • Spoke
    • Tools
    • Tutorials
  • Development
    • Accessibility
    • Code Snippets
    • DevOps
    • Hubs Client
    • Libraries
    • Reticulum
    • WebRTC
  • Hubs-Cloud Hosting
    • Self Hosting
  • Other
    • Bookmarklets
  • Contributing
  • License
  • Sponsor
    • Tvibit - Kreativ Teknologi

Community

^ back to top ^

• Hubs Creators Meetup - Community meetup for Hubs Cloud Devs, 3D artists, designers, and webXR makers. They host workshops and tech talks around topics related to Mozilla Hubs, Blender and Spoke.
• Taco Tuesday Testing Day - Weekly community led testing day to help each other test rooms and features. Also see the event document for the TTTD by Imaginer and JTa.

Creation

^ back to top ^

Avatar Creators

• Hubs Hackweek Avatar Maker - Avatars that perform very well in Hubs with customizable eyes, hair-styles, skin-tones, freckles, clothing, accessories and more.
• Ready Player Me - Avatars generated from a real photo of yourself with many customization options.
• Rhiannan Berry Avatar Customizer - Hubs compatible avatars, with a lot of customization options and the option to upload your own logo.

Avatars

• Flash Bot - glTF Source file for the Flash Bot Avatar (Avatar Preview on Mozilla Hubs).

Blender

• Avatar assets and templates for Mozilla Hubs - A repository with useful working files for editing avatars for Mozilla Hubs.
• Tutorial: Lightmapping Process - A tutorial on how to create lightmaps in Blender for usage in Mozilla Hubs.

Room and scene directories

• Hubs Directory - A browsable and searchable community built directory of Mozilla Hubs scenes and rooms.

Scenes

• Express - Scene by Exo Guid, where users are located on a train, which travels through a landscape at night.
• HubHenge - Scene by Pellinore/rawnsley, which is a Stonehenge inspired night scenery for learning purposes. It demonstrates the use of lightmaps and HDR environment maps.
• Hubs Race Track - Scene by Imaginer where users can participate in a kart-reminiscent race experience. Warning: flashing lights.

Spoke

• Introduction to Mirrors and Troika Text - A short video tutorial on how to use Mirror and Troika Text components in Spoke.
• A Summer with Particles and Emojis - Written introduction to particles in Spoke.

Tools

• glbutils - Command line utility for inspecting and modifying gltf binary files.
• glTF Report - WebApp to inspect glTF/glb files.
• glTF Sample Viewer - Tool to inspect gltf/glb files.
• hubs-glb-tools - Command line utility to optimize glb files for usage in Mozilla Hubs, e.g. compressing textures.
• VARTISTE - Open Source, web-based 3D art creation tool in your webbrowser for desktop and VR.

Tutorials

• glTF-Tutorials - KhronosGroup - Tutorials and resources about using the glTF file format.
• Hubs Creator Labs - A blog for sharing inspiration, creativity and knowledge regarding Hubs creation.
• Mozilla Hubs Youtube Channel - Lots of videos regarding content creation for Mozilla Hubs, including Material Setup, Light Baking, Virtual Cameras, Floor Plans, Waypoints, Hubs Blender Exporter, Avatars and more.

Development

^ back to top ^

• Developer Talk: Understanding the Mozilla Hubs Code Base - Former engineering Lead Greg Fodor talks about the inner workings of Mozilla Hubs and the architectural decisions behind the project. ⚠️ Might be outdated.
• Hubs Scripting Guide - Tutorial and template development environment for custom scripting.
• Hubs System overview - Written overview of the Mozilla Hubs. ⚠️ Might be outdated.

Accessibility

• Using Mozilla Hubs with a Screen Reader - Experience report of using Mozilla Hubs with a screen reader (2020).

Code Snippets

• Simple note taking - Code snippet to integrate a the command /note for note taking.
• Tools & Code snippets - A collection of notes, experiments, tools and code snippets. Also see his Github Gists.
• Trigger volume color box - A script to create a trigger volume test for Mozilla Hubs. It sets up a trigger-volume that changes the color of a box.

DevOps

• Automating Hubs Cloud Deployment Using CircleCI - Use CircleCI to maintain code quality and automatically deploy your custom Hubs Client.

Hubs Client

• Creating Networked Interactables - A tutorial on how to create new interactable objects. ⚠️ Might be outdated.
• Custom Hubs Components - Guide and examples to create custom Hubs components.
• Custom Video Geometry - Tutorial and example code on how to create a custom video geometry.
• Research logger system - Client side logger of user location and actions (not chat), which sends its data to a third party server for collection. Also see this blog entry for further details.
• Extending Hubs with Code live in the browser - Video of a community meetup, where Fabien Benetou explains how to change objects in Mozilla Hubs without installing anything.
• Powering a Hubs Cloud homepage with WordPress – and beyond! - Technical overview on how to get WordPress REST data to inject html content in your Hubs Cloud home page.

Libraries

• HubsCloudUtil - A library, written in Kotlin, to access Mozilla Hubs rooms via the WebSocket Interface.
• Hubs Connect - A library for usage in the processing programming environment, to access Mozilla Hubs rooms via the WebSocket Interface. The library is based on the HubsCloudUtil, mentioned before.

Reticulum

• Customizing Reticulum - A guide (in Japanese) to customize reticulum.
• Public API (v2) Documentation - A short guide on how to utilize the publica API (v2) of Mozilla Hubs.

WebRTC

• WebRTC Notes for Hubs - Notes on how WebRTC is used within Mozilla Hubs.

Hubs-Cloud Hosting

^ back to top ^

• Beyond monopolies: Mozilla Hubs on Digital Ocean - Video tutorial on how to install Mozilla Hubs on Digital Ocean. Also see this tutorial, if you want to setup an internal database instead of a managed one.
• Custom polycosm boot - Alternative instance boot script for Mozilla Hubs CF template 1.1.1, which among other things prevents automatic updates.

Self Hosting

• Docker Images - Mozilla Hubs Docker images for their upcoming hosted service (project name: turkey). ⚠️ Not yet ready for production usage.
• Hubs Installation Guide - Guide and documentation on how to run Mozilla Hubs locally or on a VPS.

Other

^ back to top ^

Bookmarklets

• hubs-bookmarklets - A collection of bookmarklets (greyscale, toggle cursor, wireframe, solid shading, ...) to aid in the use of Mozilla Hubs.
• Hubs Director - Hubs Director Mode bookmarklet - Lets you easily create a custom lerp/slerp of the camera, optionally tracking a user, for recording nice videos in Hubs.
• Print users to console - Prints all present user to browser console.
• Streamer Mode - Toggle streamer mode via bookmarklet.

Contributing

Contribution guidelines can be found in CONTRIBUTING.md.

License

This list is licensed under the Creative Commons Zero v1.0 Universal (CC0 1.0) License.

Sponsor

Tvibit - Kreativ Teknologi

Tvibit graciously sponsored working hours of their department Kreativ Teknologi, to create a 3D scenery for the Mozilla Hubs Awesome List. This scenery, once finished, will be released on GitHub as a learning resource. Tvibit is a cultural and creative hub for youth and young adults. Click here to check out their website.