Build A Hot Tub - Interactive 3D Pool & Hot Tub Configurator

Overview

Build A Hot Tub is a real-time, browser-based 3D configurator that lets customers design a custom pool or hot tub visually, with no software to install. Users assemble a water feature from a library of 3D models — hot tubs, infinity edges, waterblades, wall waterfalls, fountains, jets, steps, and lighting — place and arrange them in an interactive 3D scene with a real WebGL water surface, then save, share, export a PDF spec, and purchase, all in one application. The hard problem was delivering convincing, performant 3D in a browser: an interactive editor with object-placement gizmos, a custom water-rendering pipeline with real reflections and refractions, persistent design state, and shareable saved designs, wrapped in a full commercial product with authentication, payments, PDF generation, and CRM integration. I delivered it end to end as the sole developer — the 3D engine, the editor, the backend, and the commerce layer.

Key Achievements

The centerpiece of the build is the interactive 3D design editor, built with React Three Fiber and Three.js, supporting real-time placement, arranging, and configuration of water-feature components in a 3D scene. Objects are manipulated through custom PivotControls gizmos for intuitive translate/position interactions directly in the viewport, drawing from a model library — hot tubs, infinity edges, waterblades, wall waterfalls, fountains, jets, multiple step styles, and lighting — loaded as GLB assets via drei’s useGLTF with preloading for responsiveness.

The most specialized achievement is the custom WebGL water-rendering pipeline: hand-written GLSL vertex and fragment shaders paired with dedicated Reflector and Refractor render passes, implementing real techniques from published graphics research — Vlachos’ SIGGRAPH water-flow animation, oblique near-plane clipping for correct planar reflections, and projective texture mapping. This is genuine real-time graphics engineering rather than an off-the-shelf water component.

Beyond the 3D engine, I built persistent, shareable design state using Redux Toolkit and redux-persist, with designs serialized and gzip-compressed via pako so they survive reloads and can be saved, restored, and shared. PDF and print export of completed designs and specifications was implemented with jsPDF, html2canvas, and react-to-print. I also developed the full authentication system on Firebase — sign-up, sign-in, password reset, and account management with protected routes — integrated Stripe for purchasing configured designs, and built Firebase Cloud Functions for backend operations and CRM integration, syncing contacts to HubSpot and Drip.

Technical Implementation

The application is a Next.js 13 (App Router) TypeScript app whose centerpiece is a React Three Fiber 3D scene. The editor composes a pool or spa from the model library, with each model loaded as a GLB asset through drei’s useGLTF, and a UI built with Mantine and Tailwind CSS, with GSAP driving animation and transitions.

The water surface is a custom pipeline rather than a flat texture: hand-written GLSL vertex/fragment shaders plus dedicated Reflector and Refractor render passes produce a believable, animated surface that reacts to the scene, drawing on flow-based surface animation, oblique near-plane clipping for correct planar reflections, and projective texture mapping. State is managed with Redux Toolkit and persisted with redux-persist, with the full design serialized and gzip-compressed with pako (pako.gzip/pako.inflate) so it can be saved to a file, restored, and shared. Output is handled with jsPDF, html2canvas, and react-to-print, turning a configured design into a downloadable PDF spec sheet.

The backend and commerce layer runs on Firebase for authentication and data, with Firebase Cloud Functions handling server-side operations: Stripe payment flows, secure user-account deletion, and CRM sync pushing contacts into HubSpot and Drip. The whole product is deployed on Vercel with analytics and speed insights.

Impact & Results

Build A Hot Tub gives customers a no-install, browser-based way to design a custom pool or hot tub visually, instead of relying on static catalogs or quotes. The finished product bundles a 3D editor, authentication, payments, PDF export, and CRM integration into a single application, with convincing real-time water rendering in WebGL achieved through a custom shader and Reflector/Refractor pipeline based on published graphics research. Save, restore, share, and PDF export let designs move smoothly from exploration to purchase to spec sheet, while automated CRM sync to HubSpot and Drip captures leads without manual entry. The entire product — 3D engine, editor UX, backend, payments, and deployment — was owned and delivered solo in four months.