Hubs

Introduction

I had the pleasure to work on the Mozilla Hubs team just a couple of months before leaving Mozilla.

During that period I was working mainly on integrate the webgfx-tests to benchmark and test the client.

But I had also fun exploring new features as the following ones.

Card games

I started creating a basic component named carddeck which places a card deck on the scene and is responsible for spawning networked cards.

// Card
AFRAME.registerComponent("card", {
  schema: {
    id: { default: 0 },
    deck: { default: {} },
    public: { default: false },
    owner: { default: "" }
  },
  // ...
});

// Card deck
AFRAME.registerComponent("carddeck", {
  schema: {
    id: { default: "" },
    numWidth: { default: 10 },
    numHeight: { default: 7 },
    backURL: { default: "" },
    height: { default: 0.5 },
    faceURL: { default: "#cards" },

    numberCards: { default: 48 },
    currentCards: { default: 48 }
  },
  // ...
});

I configured the Hubs Blender exporter to expose this component so I could easily include it on scenes exporter from Blender into glTF:

The card deck lets you click on it to spawn random cards and have also a reset button to collect all the cards again and shuffle them.

By default all the cards are public so everyone on the room could see them. But you can change also that behaviour and just make them visible for their owners.

In the following video you can see how two players are grabbing cards from a card deck and each one can see their own cards while the other's player card will be seen as red.

Players could organize their cards hand into their own avatar space too:

Finally I included also a guessgame component that will turn the carddeck into a "Guess which card I have in my head" game:

Way/Spawn points

I pushed a small change to Hubs to allow users to choose in which way/spawn points they want to be teleported to when they load the room initially. It also works dynamically so it could help build tours or similar guided experiences: