Treasury

Treasury was focused on presenting and licensing high-quality digital building models for films, games, and metaverse projects. As the tech lead, I was responsible for planning the project's pacing and architecture and ensuring successful delivery.

SKIP TO

Team
MonstarLabWeb Development,Architecture

Project Background

Treasury asked us to build an engaging, interactive 3D website to showcase and license architectural-quality digital building models for use in film / game / metaverse projects. I served as tech lead, planning the pacing and architecture of the project, engineering and ensuring successful delivery. As the tech lead I got to work immediately, working to pick an architecture that would allow us to move quickly but could scale along with the business.

Architecture options

Vanilla Three.js:

  • Pro: Industry-standard, battled tested for 10+ years.
  • Con: lots of boiler plate code, somewhat unwieldy in a React codebase.

React Three Fiber

  • Pro: All the good stuff from Three
  • Pro: Works flawlessly within a React codebase
  • Con: Additional dependency on top of Three

Build details

Built on:

Deployed on AWS S3 (for images/ 3d assets and static web hosting).

Early Demos:

Home Grid: Link

Model View: Link

Notable Tech Wins

KTX2/Basis Textures: By encoding the building thumbnails into Basis/ KTX2 textures I was able to a achieve large file size reductions that allowed us to not only to reduce the data downloaded but also the amount of textures we could load into memory at once on all devices.

Size comparison: PNG vs BASIS 700kb - 10kb

GLTF/ Mesh compressed 3d assets: We received the buildings as large uncompressed FBX files, a format I have used for interactive web experiences in the past but one that I found bloated and somewhat unwieldy to load on devices. I chose instead to compress the files to GLTFs with Draco compression, saving in many cases hundreds of megabytes off the original file.

Size comparison: FBX vs GLTF 33mb - 5mb

For a more in-depth breakdown of this stack see my article Performant 3D on the Web

Results

The result was an engaging and interactive site that allowed user to play with models and to further understand the Treasury concept.

View the Demo

Treasury Demo