Design a Real-Time 3D Bag Configurator for Milan Brand
Overview
What this challenge is about.
Design a real-time 3D bag configurator for a Milan fashion brand and justify your rendering choices. Earn a verifiable certificate.
The scenario
The brand is a Milan-based direct-to-consumer leather goods maker (around 90 staff, roughly EUR 24M annual revenue) whose customizable bags are currently sold through static product photography that converts at 2.1 percent. Leadership wants an interactive 3D configurator to make personalization tangible and recover conversion lost to flat imagery.
The Brief
What you'll do, and what you'll demonstrate.
Design how to build a Three.js bag configurator that renders convincing leather and metal, loads in under 2 seconds on mid-range mobile, and wires color, hardware, and monogram choices into the existing cart.
Earning criteria — what you'll demonstrate
- Specify a physically-based rendering setup that reproduces leather and metal surfaces from a defined material matrix.
- Budget and defend a sub-2-second mobile load target across asset, decode, and first-render stages.
- Design state management that maps interactive 3D customization choices to a backend cart contract reliably.
- Structure a configurator so adding a new material or finish is a trivial, low-risk change.
- Communicate technical rendering and performance decisions clearly enough for another engineer to implement.
Program Fit
Where this fits in your program.
Sharpens the same skills your degree expects you to demonstrate.
Aligned coursework coming soon.
Skills
Skills you'll demonstrate.
Each one shows up on your verified credential.
- Webgl
Apply webgl to solve real industry problems and demonstrate production-level capability.
- 3d Rendering
Apply 3d rendering to solve real industry problems and demonstrate production-level capability.
- Shading And Lighting
Apply shading and lighting to solve real industry problems and demonstrate production-level capability.
- Gpu Pipeline
Apply gpu pipeline to solve real industry problems and demonstrate production-level capability.
- Frontend Development
Apply frontend development to solve real industry problems and demonstrate production-level capability.
- Performance Optimization
Apply performance optimization to solve real industry problems and demonstrate production-level capability.
Careers
Career paths this challenge builds toward
Completing this challenge demonstrates skills that transfer directly to these roles:
Frontend Engineer (3D / WebGL)
Designing a real-time configurator end to end mirrors the day-to-day of a WebGL frontend engineer: building interactive 3D experiences, tuning shading and lighting for product fidelity, and shipping them inside a live commerce funnel under hard performance budgets.
This challenge sharpens
- webgl
- 3d-rendering
- shading-and-lighting
Frontend Performance Engineer
Committing to a sub-2-second mobile load budget and defending every allocation across the asset and render pipeline is the core craft of a performance engineer, who owns load-time budgets and GPU efficiency for heavy interactive pages.
This challenge sharpens
- performance-optimization
- gpu-pipeline
- frontend-development
Creative Technologist
Translating a brand's personalization vision into a feasible, well-rendered interactive design bridges to a creative technologist role, blending realistic 3D rendering with frontend delivery to turn marketing concepts into shippable experiences.
This challenge sharpens
- 3d-rendering
- shading-and-lighting
- frontend-development