Zone’s Technical Director, Steven Newstead, shares the discoveries from our hackathon where we explored engineering options in the metaverse through Meta’s Horizon Worlds and A-Frame.
Now that the antics of COVID-19 have started to fade into our subconscious and people are finally feeling more comfortable drifting closer than two meters to each other, it felt like the right time to kick off the second Zone hack day of the year.
This event was exciting for me as we hosted it in my hometown of Bristol, dragging the confused London team out of the big smoke and into a city where their Oyster cards would do them no good whatsoever.
We decided to base this hack day on the work we completed in our first one, which explored how we might make the metaverse a more inclusive environment for women.
Last time around, we used several multi-disciplinary teams to cast our net wide to explore this problem space. The day was great, though we cut very little code, so this time we had a bunch of technologists desperate to get stuck in.
We split four teams into two that wanted to code and two who wanted to understand more about the metaverse and design concepts offline.
This post covers the work the technical teams completed on the day.
The setup
Our resident metaverse expert Mika lugged in a pile of Oculus Quest devices and an oversized desktop computer so we could see the art of the possible when you have some CPU (central processing unit) power behind you.
Access to this tech meant that the first couple of hours were a bunch of adults regressing to children as they swung through buildings as Spiderman and stood toe-to-toe with Darth Vader.
Once the novelty had worn off, we focused on the task at hand, one team focusing on Meta’s Horizon Worlds and the other A-Frame — a web framework built on top of HTML.
The one that played in Horizon Worlds
Facebook recently rebranded to Meta and reoriented its core business to focus on the metaverse. It’s been quite the bet; currently, its stock is down a whopping 50% from a year ago. With this investment, there must be some potential, so this is what we wanted to explore.
The core offering in Horizon is the ability for users to world-build, in some respects, a sort of immersive Minecraft.
Meta expects that people will want to spend time on these user-generated worlds and have started the monetisation process, allowing creators to sell virtual items or even pay bonuses for worlds that encourage users to spend more time within the ecosystem.. This team aimed to understand two core pillars that will be the key to Horizons becoming successful — how users can create an interactive world and what is in place to make people feel safe interacting with that world.
World-building
One of the first surprises we found was all engineering tooling is within the Oculus headset. You cannot, for example, work on your laptop and publish your worlds to Horizons; all the work for world-building happens within the headset.
This process worked well enough, but the team initially found the experience clunky. Placing, resizing and shapes to make objects took a long time to correct. However, once you get into the swing of creating and duplicating items, you can quite quickly create a simple world with which you can wander around but not yet interact.
For that, you used scripting blocks. Like Scratch, Horizon offers a simple drag-and-drop user interface to build up behaviours and rules of the world. It was simple, but we can see the potential of it becoming confusing to understand where problems occur if you build up complex game mechanics.
Human interaction & safety
Arguably the most exciting part of exploring Horizon is the work that has gone into it as it played into some of the key challenges from our first hack day — ‘Safety’ and ‘Lack of Respect’.
Hence, it was interesting to see how they were addressing it. We found you could now quite easily put a personal boundary around yourself, for everyone, or just for strangers. This approach prevents sexual harassment and groping in VR (virtual reality) reported in Horizon’s earlier releases.
In addition, you can ‘pause’ the world you are in, then mute, block and report users you are interacting with — this will send the last few minutes of your interaction to moderators.
Overall, Meta Horizons looks like an exciting way to explore the emerging metaverse, and likely there are good opportunities for content creators to become early adopters. For end users, there is no doubt more work to do to make people comfortable interacting in a new way, but they are making fast progress.
The one that played with A-Frame
Meta Horizons isn’t ‘The Metaverse’; it is just one way to experience it. Our second team looked at A-Frame , which allows you to create VR experiences using more classic technologies (HTML, CSS and JavaScript).
The team found it easy to get started with A-Frame. The framework allows anyone with some HTML, CSS and JavaScript knowledge to bring worlds to life quickly.
A simple example is this CodePen, which you can play with to change shapes’ size, shape, colour and rotation.
Once the team understood the basics, they moved on to more advanced topics, finding they could inject 3D models using HTML markup and an open-source project called glTF (GL Transmission Format). glTF provides quick-loading, compact 3D assets, making it possible to explore high-resolution environments from just your browser.
This approach meant it was possible to import a model called ‘Tiny Tokyo’ onto a canvas with a few lines of HTML code and some saved assets. Finally, the team went creative — inventing a game that had something to do with looking after an animal; but honestly, most of us got distracted looking at this cutely rendered cat to focus entirely on the rules!
There is a lot of fun to have with A-Frame; you can code from your favourite IDE and play with the output in your browser in a matter of minutes.
For this hack day, we only really focused on world-building in A-Frame. Our next steps would be to understand how you can make interactive experiences you could enjoy with friends. We haven’t yet looked into how A-Frame can support multi-user experiences; this will likely be a lovely next step for us.
Although we perhaps didn’t stick as closely to the original brief as we thought, it was a brilliant day; everyone learnt a lot and getting to see people face-to-face after so much remote work was fantastic. As a bonus, we’ve now also got a few Oculus devices knocking around the office for people to borrow.
You can play with a deployed version on Little Tokyo, and feel free to branch our code to experiment more.
Okay, I’m off to start planning our next hackathon (sorry project managers).
