Independent Capability Demonstration · Fictional Product
One case. A choice of finishes.
A fictional watch and valet case, from close-up product images to a working configurator.
I built a small product family around two sizes and four material roles. The rendered images explore the finish; the browser version lets you change the size, materials and lid position yourself.
Read the study ↓Try the configurator ↓The starting point
A consistent product.
Room for choice.
A storage case has a simple shape, but its surfaces do very different jobs. I wanted the leather or walnut exterior, soft lining and metal hardware to read as parts of one product.
The study also needed to work in two settings: detailed studio images and an interactive browser view. I kept the product structure consistent while preparing each output for its own rendering method.
This is an independent fictional product study. The dimensions and compartments describe the demonstration, not a validated manufacturing design.
What I worked on
- Built Standard and Grand versions with four and six watch positions.
- Assigned separate exterior, interior, hardware and trim roles so the finishes could change consistently.
- Created Cycles lighting and procedural leather, suede, walnut and metal treatments for the product images.
- Prepared two lightweight GLBs and the size, material and lid controls in the browser configurator.
Open and closed
The same form,
in both states.
The open view reveals the compartments and lining. Closing the lid brings the exterior surface and front hardware into focus.
The surfaces
Small details change the impression.
Leather grain, subdued suede and directional metal highlights give each part a different feel in the studio images.
These are offline Cycles images. The live viewer uses simpler real-time PBR materials, so the texture, reflections and lighting differ.
A small product system
Two sizes.
Shared material roles.
Black leather, cognac leather and walnut can be paired with two lining and two hardware finishes. The same controls apply to both sizes, while the lid can be opened or closed independently.
Model and configuration notes
- Standard GLB
- 571,328 bytes · 11,648 triangles · 19 meshes
- Grand GLB
- 695,816 bytes · 14,192 triangles · 23 meshes
- Material structure
- Four material roles · no external texture files
- Configuration scope
- 24 possible combinations; historical QA sampled four
There are 24 possible size and material combinations. Historical QA covered four selected combinations; this is not a claim that every combination was tested. This website review checks the core controls separately.
Recorded walkthrough
A quick look at the controls.
18-second recording of the original browser demonstration.
For a similar client project
From product images
to choices on screen.
A similar project could include:
- Studio product images, finish details and a material comparison set.
- Separate models for the agreed product sizes, prepared for browser delivery.
- A configurator for the approved choices, with a clear mapping between product parts and materials.
- Asset files, material-role documentation and integration notes for the developer.
Important limits
This is a fictional capability demonstration, not a client commission or brand partnership.
Offline Cycles visuals and the browser appearance are separate outputs. The browser does not reproduce every offline material effect.
Historical QA sampled four of 24 combinations. Physical phone performance has not been verified.
No Shopify backend, AR feature or manufacturing certification is represented.
Sources & credits ↗The interactive version
Try it yourself.
Turn the case around, compare the two sizes, choose the finishes and open or close the lid.
- Rotate and zoom
- Change size and material finishes
- Open the lid and reset the view
Desktop mouse or trackpad recommended. Physical phone performance has not been verified.
Live lighting and materials differ from the rendered images.
Watch the recorded demo