Build a WebGL Product Configurator for an E-Commerce Brand
Overview
What this challenge is about.
Take the 3D model (provided as glTF 2.0, around 220K triangles after decimation), a 3-color and 2-hardware texture matrix, and the monogram font (provided). Build a Three.js scene with orbit controls, physically-based rendering (PBR) materials reflecting the leather + metal surfaces, and a small UI panel for the three customization axes. Ship under a 2-second Largest Contentful Paint budget on a mid-range Android device. Wire the chosen configuration into the existing add-to-cart payload (REST endpoint provided). Deliver source, a Lighthouse performance report, and 4 demo recordings (desktop + mobile).
The Brief
What you'll do, and what you'll demonstrate.
Build a WebGL product configurator with color, hardware, and monogram customization that hits a 2-second mobile load budget and wires into the existing cart.
Earning criteria — what you'll demonstrate
- Build a non-trivial Three.js scene with PBR materials
- Manage the WebGL load and runtime budget on mobile hardware
- Wire 3D interaction into an existing e-commerce checkout flow
- Measure and report graphics performance honestly
Program Fit
Where this fits in your program.
Sharpens the same skills your degree expects you to demonstrate.
Skills
Skills you'll demonstrate.
Each one shows up on your verified credential.
Careers
Roles this prepares you for.
Real titles. Real skill bridges. Pick the one closest to your trajectory.
Product Manager
PMs in e-commerce who understand the performance + craft trade-offs of 3D configurators scope features that ship instead of stalling at the GPU-budget conversation.
This challenge sharpens
- performance-optimization
- frontend-development
- shading-and-lighting