Wet Dry Digital
When I began this project in June ‘24, my initial goal was to photogrammetrize my physical studio space into a 3D object and embed it on a webpage, complete with joystick controls for navigation. I wanted to invite viewers to explore my artworks in the context of their creative environment—all at their fingertips. However, my focus shifted as I encountered technical challenges. Not only was I unsure where to start with building a web app, but even after prompting my way through GPT, I opened a Pandora’s box of performance issues.
The first major hurdle was file size. Playing games like Black Myth: Wukong or Final Fantasy, I understand why downloading hundreds of gigabytes is necessary—they’re packed with hours of breathtaking content. But when my simple web app crashed repeatedly while attempting to load an 800 MB .glb file, I was humbled. This experience taught me about the limitations of file sizes on the web and led me to rethink my approach. Ultimately, I decided to scrap the photogrammetry idea in favor of a simpler, more efficient concept, which evolved into the project you see today: a stylized 3D model of a gallery space with interactive elements.
This shift toward simplicity and a desire for faster, more stable loading times required me to focus heavily on backend development. While I had some familiarity with JavaScript and Blender, tools like Three.js, Vite, and AWS were entirely new to me. Thankfully, I found guidance in accessible documentation and code snippets, and an incredibly generous community of coders, alongside the support of tools like Claude AI and ChatGPT. As a hands-on learner that relies on trial and error and constant questioning, these resources were invaluable.
In the end, I called the project complete in December ‘24. I not only achieved my goal but also developed the skills to deploy my own server and host a web app that’s easy to update. While this project stands as a completed work (mobile app treated separately,) it also serves as a proof of concept for future worlds and exhibitions.
Tech Stack
Blender - to create and export 3D models
Vite - build tool for a lightweight dev experience
React.js - used for the user interface
Three.js - for rendering 3D scene
AWS S3 - for hosting static assets
AWS Cloudfront - for fast loading time with CDN
AWS Route 53 - to manage custom web domain






