Mozilla Spoke

VR Scene Editing, All In Browser

By Alejandro Romero

Description

Mozilla Spoke is a browser-based environment creating platform for Mozilla Hubs. It allows users to explore images, videos, and 3D models from around the web, import their own 3D models, build 3D scenes in a browser based editor without any downloads or installations, and share their worlds to be explored collaboratively in VR with Mozilla Hubs.

Home Page

https://hubs.mozilla.com/spoke

Source Code

https://github.com/mozilla/Spoke

Core Features

Editing:

  • Create 3D scene in browser

  • Add 3D models as GLTF URL or file

  • Add particle effects, lights, colliders, 3D audio, teleportation points, and more

  • Scale, rotate, translate any object

  • Preview scene in "play" mode

  • View project in wireframe, rendered, unlit, and more view types

  • Edit object properties (coordinates, dimensions, materials, etc.) in editor

  • Can be run from Oculus browser

Discovery:

  • Integration with following databases allows for discovery and inclusion of external media

    • Google Poly (3D models)

    • Sketchfab (3D models)

    • Bing Images

    • Bing Videos

    • Hubs Sound Pack

    • Tenor GIFs

Collaboration:

  • Natively allows user to export scent to Mozilla Hubs at click of button

  • From Hubs, anyone with link can join the scene, either from desktop or VR

  • Supports up to 25 users in single scene

  • Users can see each other's avatars, view 3D models, screen share, share GIFs, images, videos, write in chat, emote, and draw together

Metrics

Accessibility: How user-friendly is the software?

  • Simple access (simply go to browser)

  • No downloads/installations

  • On startup, provides tutorial on functionality

  • No collaboration in level editor

Power: The engine's power - i.e. how much one can do with this

  • Able to show lit view of scene in browser editor

  • Supports particle effects, ambient lighting, animations

  • Not as powerful as engines like Unity or Unreal, but it suits its purpose quite well

Usage: Evaluation of software's effectiveness in certain use cases

  • Can upload and manipulate 3D models quickly

  • Create easily accessible collaboratively environments


Tutorial: Making and Sharing a Spoke Scene

Getting Started

  1. Go to https://hubs.mozilla.com/spoke and click on the blue Get Started button

  2. You will be taken to a screen asking you to create a new project or start the tutorial

    1. The tutorial is great for learning navigation within the editor and learning what is possible. You can quit out of it at any time.

    2. If you select a new project, you can either opt to start a scene from scratch or load up one of the sample scenes

  3. Once you are in your scene, you can add assets from the Assets tab on the lower left corner

  4. You can translate, rotate, or scale the objects either with the toolbox on the top left, or by tweaking values in the bottom right Properties window

  5. On the right side of the screen, over the Properties window is the Hierarchy

    1. This lets you see and select all objects in your scene

  6. Play around with the scene and see what you come up with! If you ever get confused, the Help tab is accessible via the drop down hamburger menu icon on the top left

    1. From here, you can also save your project

Sharing Your Scene

  1. To share your scene, click on the Publish to Hubs button on the top right of the editor. This will prompt you to sign into Spoke with your email

  2. After confirming your email, Spoke will allow you to review your project specs and create a room with your scene

  3. This will generate a room for you! Once you enter, you can invite other users by clicking on the Invite button on the bottom left and sharing the URL or room code with them

  4. Another user can join by going to https://hubs.mozilla.com/ and clicking the Have a room code? button at the bottom

  5. This can be done both on browser or in VR!

  6. NOTE: If joining from VR, make sure to allow the WebXR experience in the browser (a small banner will pop up on the bottom of the VR browser screen)

  7. You can now see and collaborate with other users in your scene!


NOTE: This entire process, from development to collaboration, can be completed in VR due to its browser-based nature!