AJCCASE STUDY / SELECTED WORK
// CASE STUDYFebruary 7, 2023

Spirit Realm

I was the sole developer behind Spirit Realm, a multiplayer Three.js metaverse that hosted international art exhibitions, enabled NFT minting, and was featured at NFT NYC in Times Square.

Spirit Realm Metaverse
//00PROJECT OVERVIEW

The Brief

Spirit Realm began with an ambitious premise: build a living, multiplayer art world that anyone could enter directly from their browser.

It was not a static virtual gallery or a 3D landing page. Visitors could explore the environment through an avatar, encounter other people in real time, chat, discover work from artists around the world, and mint NFTs from inside the experience.

I built the application as the sole developer at XELEVEN. I owned the technical architecture, Three.js implementation, multiplayer systems, Web3 integration, interaction design, performance work, and deployment. I collaborated with digital artist Stacie Ant, who created the world’s distinctive 3D models and avatars.

The Challenge

Building a metaverse in the browser combines several difficult engineering problems.

The environment must download quickly enough to remain accessible, render smoothly on consumer hardware, synchronize multiple players, support interactive artwork and NFT transactions, and still feel like a coherent product rather than a collection of technical experiments.

Browser-based 3D also operates within a strict performance budget. Every model adds geometry, textures, memory usage, and collision calculations. A beautifully detailed world can become unusable if the browser has to test player movement against thousands of triangles every frame.

The project therefore needed more than visual polish. It needed an architecture that could support a growing world without requiring every new environment to be rebuilt around technical limitations.

Building the World

I built Spirit Realm with TypeScript, Next.js, React Three Fiber, Three.js, WebGL, WebSockets, and Web3 tooling.

Next.js and React handled the surrounding product experience, while React Three Fiber connected the application’s component architecture to the Three.js scene. This allowed interface state, player state, interactive objects, and the rendered world to operate as parts of one application.

The multiplayer layer synchronized visitors inside the environment, including avatar movement and live chat. The gallery and Web3 systems allowed exhibitions to become interactive experiences: visitors were not simply looking at images on a page—they were occupying the same space, encountering other people, and engaging with digital work in context.

The result sat somewhere between an online exhibition, a multiplayer game, and a Web3 application.

Automatic BVH Colliders

One of the most important technical systems I built was a reusable pipeline for automatic collision geometry.

A typical 3D environment often requires artists or developers to create separate, simplified collider meshes by hand. Those invisible meshes tell the application where a player can walk, when they have reached a wall, whether they are standing on a slope, and how they should move across uneven terrain.

I designed Spirit Realm so that a new GLB environment could be added and its collision structure generated automatically. Using three-mesh-bvh, the application builds a bounding-volume hierarchy from the imported geometry. Instead of checking player movement against every triangle in the scene, the engine can rapidly eliminate large areas that cannot contain a collision.

This made raycasting and movement against detailed environments practical in real time. More importantly, it turned collision setup from repeated asset-production work into reusable application infrastructure. New worlds could inherit the same navigation system without requiring a bespoke collider to be modelled for each one.

Designing for Real Users

Performance decisions shaped the entire experience.

Models and textures had to remain small enough to download over ordinary connections. Geometry needed sufficient detail to preserve the artists’ work without overwhelming the GPU. Multiplayer updates had to feel responsive without allowing network activity to disrupt rendering.

The interface also had to make an unfamiliar experience understandable. Entering a 3D world, moving an avatar, meeting other visitors, viewing artwork, and interacting with Web3 functionality all needed to feel like one journey—not five disconnected features.

My role covered those boundaries. I was responsible not only for making the technology function, but for deciding how the systems should meet inside the user experience.

The Outcome

Spirit Realm became a real cultural platform, not simply a portfolio demonstration.

It hosted exhibitions featuring artists from around the world and gave visitors a shared environment in which to experience their work. The project was featured at NFT NYC in Times Square, taking something I had built in the browser into one of the most visible public settings in the digital-art world.

For me, the project demonstrates the scale of product I can deliver independently. I took responsibility for a real-time 3D application spanning multiplayer networking, Web3 transactions, asset pipelines, collision architecture, interface design, performance optimization, and production deployment.

I did not just build a Three.js scene. I built the technical foundation for an expandable multiplayer world—and shipped it far enough that artists exhibited inside it and the project appeared in Times Square.