Creating a WebXR Exhibition using Mozilla Hubs

Sophie Dixon
Mnemoscene
Published in
3 min readJun 15, 2020

Over the past two years, for one afternoon a week, I’ve been teaching Games Design students at MET College, Brighton, UK. It’s been an inspiration and pleasure supporting them to realise their creative ideas as they work towards a UAL Level 3 Extended Diploma. We’ve worked on a range of projects, from 2D concept art to playable 3D games with each student taking a very individual approach. The work in this exhibition shows the diverse range of skills and interests across the group.

These past months, however, have been challenging as lockdown measures have moved teaching entirely online. Under usual circumstances, the students present their work in an exhibition at the end of the year. Whilst acknowledging the disappointment that this isn’t possible, we’ve also sought the opportunity to explore online alternatives. This exhibition has been built using Mozilla Hubs.

Hubs is a free open source platform which enables people to come together in an online virtual space via their browser. It uses web standards so it can be experienced in Virtual Reality (VR) but importantly for those who don’t have VR headsets, it can be accessed using mobile devices and on desktop.

(above and below) images showing the final exhibition space in Mozilla Hubs

I created the space using Blender to give students as much time as possible on their final projects. The final model was then exported as a .glb to use in Mozilla’s online scene editor, Spoke. This editor is easy to use and enables the user to compose models and additional content, such as video, to create an environment that can be used in Hubs.

The model in Blender to be exported
Using Spoke to upload the custom model and add video to Mozilla Hubs

To decide what would be exhibited, the students used a shared Google Doc for planning. Each student had their own slides and included examples of their final work, sketches of the space, and descriptions. As a class, we went through several iterations, meeting in Hubs to explore the space at each stage of development. This process started with a basic mock-up, and moved through to something more complete over several sessions.

Initial mock-up of space used in Mozilla Hubs to check positioning and scale

Creating for a virtual space enabled students to try things they wouldn’t be able to do in a physical exhibition. This freedom influenced many of the final outcomes. In one example, several smaller designs were combined to make one large-scale mural. In other examples, students have developed installations including videos, images, and models.

(above and below) students have been able to present work in ways which otherwise wouldn’t be possible

Whilst virtual exhibitions might not be for everyone, this process has united the class in a common goal in the absence of a physical exhibition to prepare for. It’s given students an experience of designing for VR when most don’t have VR headsets, and it’s presented a whole host of possibilities for us to explore in future.

As the exhibiting students now prepare for work and University, I hope this exhibition might serve as both a memento and a showcase for some of the great creative projects being made by students at MET College.

To visit the exhibition using a desktop or mobile device follow this url: https://hub.link/HWrKBLQ

If using a VR headset, browse to hubs.mozilla.com and enter this room code: 979 831

--

--