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

Go to https://hubs.mozilla.com/spoke and click on the blue Get Started button
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
Once you are in your scene, you can add assets from the Assets tab on the lower left corner
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
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
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

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
After confirming your email, Spoke will allow you to review your project specs and create a room with your scene
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
Another user can join by going to https://hubs.mozilla.com/ and clicking the Have a room code? button at the bottom
This can be done both on browser or in VR!
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)
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!

Page updated

Google Sites

Report abuse