I had the pleasure of creating Spirit Realm, a browser-based ThreeJS metaverse alongside my team at XELEVEN.

The website was built with NextJS and React. The actual metaverse was built with a WebGL library called ThreeJS, more specifically React Three Fiber, a popular library that essentially wraps ThreeJS into React components.

I chose this because I wanted the flexibility of ThreeJS with the Functional component style of React.

How was the browser-based ThreeJS metaverse created?

The 3D models and avatars are the vision of Stacie Ant, a digital artist that I often work with. Stacie is a very well-rounded artist who has worked with brands like Nike, Adidas, Sony, and Universal.

The tricky part of browser-based 3D applications like the Spirit Realm metaverse is that they must have a low file size, and triangle count. For those who are not 3D developers, triangles are the vertices that make up the shapes in any 3D world.

File size must remain low so that the 3D models can download quickly, this is very important for both user experience and accessibility. If someone is loading a 3D app on their mobile phone, they do not want to be downloading a multi-gigabyte file.

Low triangles are important because the scene must render many times per second. In order to do this your graphics processor must decide where each triangle goes in the scene, color it, and potentially add shadows. And it must do this many times per second, we are talking billions of calculations per second.

To put this into perspective Stacie told me that she often spends up to several minutes rendering one frame of an HD animation that she is working on for her art. But in an interactive browser-based app the GPU has to render each “frame” at least 30-60 times per second for the user to have a good experience.

A major development in collider creation

I built the metaverse in a way that I can place any GLB file into the project and the colliders are built automatically!

A collider instruction the app where the players can and cannot go, as well as how ‘high’ they should be. Are they going up a hill? Did they land on a rock?

Many apps would create a separate transparent collider file, but my app builds this automatically in a highly optimized way.

How did I create the colliders?

MAGIC! Dark ancient magic.

I wish, actually, it uses a library called “three-mesh-bvh” by Garrett Johnson from N.A.S.A.

Time to get nerdy. It uses a bounding volume hierarchy (BVH), a tree structure on a set of geometric objects. All geometric objects, that form the leaf nodes of the tree, are wrapped in bounding volumes.

Basically, a BVH takes the 3D model and turns it into a lot of rectangles, imagine filling a jar with dice. If you removed the jar the dice would approximate the shape of the jar.

Why use BVH?

Basically, it simplifies collider creation. It also simplifies raycasting, the method used to detect when a player pumps into a collider.

Raycasting and collision detection on complicated surfaces, like the tens of thousands of triangles in a 3D model is incredibly processor-heavy. It is doomed to fail with anything but the most basic of 3D models. A BVH simplifies the model enough that it can be used for detection.

What’s next for Spirit Realm?

I am currently working on mobile controls. I really believe that web apps should be accessible to everyone, even someone who is using a very simple smartphone.

In order to do this I want to create mobile controls. I already have a working version, however, I am unhappy with the latency so I am working to optimize it. Hopefully, that will roll out soon.

After that, I will be focusing on VR controls.

If you have any questions please feel free to reach out to me at aaron@xeleven.tech