AI-Powered 3D Avatars & Immersive Experiences
The web front end for a generative-AI product — real-time 3D asset rendering and avatar generation in the browser.
- Frontend Engineer
- Next.js · TypeScript · React Redux · Three.js
Overview
The web client for a generative-AI SaaS product that renders 3D assets and generates avatars directly in the browser, backed by a Django API.
Problem
Generative 3D and avatar output has to feel immediate in the browser, despite large assets to load and model-backed generation steps that take time.
My Role
- Built the front end for the SaaS product.
- Implemented real-time asset loading and 3D rendering with Three.js.
- Integrated avatar generation and audio (WaveSurfer.js) against the Django backend.
- Managed client state with React Redux.
Architecture
Next.js + React application with Redux for client state.
Three.js scene for 3D asset and avatar display.
WaveSurfer.js for audio waveform handling.
Django API serving generation and asset endpoints.
Technology
- Next.js
- TypeScript
- TailwindCSS
- React Redux
- Three.js
- WaveSurfer.js
- Django
Engineering Challenges
Real-time loading of large 3D assets
Immersive assets are heavy, and a blank screen while they arrive breaks the sense of a live product.
Keeping 3D rendering smooth in the browser
A long-lived WebGL scene leaks memory and drops frames without careful lifecycle management.
Coordinating async generation with the UI
Avatar and asset generation is asynchronous and multi-step on the Django side.
Solution
Real-time loading of large 3D assets
Progressive loading states around the Three.js scene so it stays interactive while assets stream in.
Keeping 3D rendering smooth in the browser
Disciplined Three.js scene setup and disposal so the render loop stays predictable across sessions.
Coordinating async generation with the UI
Modelled the workflow in Redux so the interface could reflect each stage without blocking.
Performance
- Work centred on perceived performance — progressive asset loading and rendering so the interface never blocks on a generation step.
Product Experience