1
ConfiguratorSplitting the modelA main bike file plus one file per part, bound by part name
(Case study) Folding bicycles・Polish 3D
Configurations outgrew the catalog, so customers finish the build before visiting a store
An online 3D configurator for a folding bicycle. Customers complete the build before entering a store, check dimensions and rider fit, then carry the configuration to a dealer.
The same approach suits high-priced customizable products: bicycles, electric motorcycles, furniture, luxury accessories and outdoor gear.
15swappable parts
15frame colors
2live sites
6languages
(Challenge)
More combinations than a catalog can show
The H6 model offers 15 swappable parts and 15 frame colors, in two grades, Pro and Ultra, and four styles. Any catalog photo shows just one combination.
Before ordering, customers most often want to confirm three things: how the bike looks after changes, how small it folds, and how well it fits the rider. These were settled in the store, and the project aimed to let customers settle all three online before visiting a store.
(Approach)
A persistent 3D full-bike scene with a transparent configuration layer
A complete 3D bike scene stays on screen, with a transparent selection layer above it. Every option change appears on the bike immediately.
Mobile performance came first. Common compression methods leave a 3D model's geometry data taking nearly twice the display memory once decoded. The pipeline slims the data first and compresses it second: downloads are about one-fifth smaller than the original format, with no added memory use.
Desktop
Styles switch in one tap, and the backdrop follows the style
The style bar lists the Pro and Ultra grades and several styles. Selecting one changes the frame, wheels and backdrop together, and color mode repaints the frame one color at a time.
Each layer is written up as a full article.
Layer 1
Layer 2
Layer 3
Layer 4
Configurator
2
ConfiguratorBlocking invalid combinationsExplain why a combination cannot be built, then switch to one that can
3
ConfiguratorSourcing the dataSpecs come from the backend database; the front end hardcodes none
4
ConfiguratorHanding off the configurationConfiguration card, QR code, spec PDF
Phone performance comes first, so the files are quantized and then compressed, which balances download size and memory.
Download sizeDecoded GPU geometry
- 26.32MBmeshopt52.18MB
- 21.18MBqdracoChosenabout 52MB
- 16.31MBplain Draco96.86MB
First-screen 7 model files. GPU geometry is estimated from the file contents and excludes textures.
(Key design)
Three key designs
Swap
Each option shows a reference weight beside it. Combinations that cannot be installed come with an explanation and switch automatically, so the configurator never produces a bike that cannot be built.
Keeps an unbuildable bike from being configured.
Tap
Block
Explain
Confirm
Switch
Customer
Configurator
1
CustomerTaps a conflicting part
2
ConfiguratorRules table blocksThe combination cannot be built
3
ConfiguratorScreen explains why
4
CustomerConfirms
5
ConfiguratorAuto-switchE.g. E-Bike fits only on Pro
Fit
A 3D rider driven by height, leg length and arm length shows knee and hip angles and the weight split between front and rear wheels. Photos are processed on the device only, never uploaded or stored.
Desktop
Fit analysis, updating as the slider moves
Fit analysis shows a 3D rider with knee and hip angles, seat height and front and rear wheel weight distribution. Dragging the height slider reshapes the rider and updates every figure at once.
Take home
The finished build becomes a personal configuration card: three-view renders, per-part specifications and weights, a QR code and a spec PDF. The card also searches by location for nearby authorized dealers.
For high-value products with complex options, bring the models and a spec sheet to the first meeting.
(Mobile)
Fully working in a phone browser, with no app to download.
Phone
Fully operable on a phone, with nothing to download
The same configurator runs completely in a phone browser, with no app to download. The style bar scrolls sideways, and color mode repaints the frame one color at a time.
Phone
The same live fit analysis on a phone
Fit analysis appears on a phone as the same 3D rider. Dragging the height slider updates the joint angles and the front and rear wheel weight distribution.
(Result)
Two production sites and six languages from one codebase
The international and China sites are built from one codebase, with interfaces in Traditional Chinese, Simplified Chinese, English, German, Japanese and Korean. The China site gets separate handling: self-hosted fonts, adjusted tracking, images served on-site and a CDN for 3D models.
Six languages and two live sites share one set of spec data.
Data source
- Backend databaseSource of truth; six-language columns
- Static fallbackA separate copy
Specs
Front end
- One codebaseInterface in six languages
Built from the data
Sites and customer documents
- International site
- China site
- Configuration card
- Spec PDF
Missing valuesThe configuration card shows a dash for missing speeds or teeth.
(Field notes)
Methods and measurements, open each one
Building a 3D Configurator for a Folding Bike
Dropping derivable prefixes shrinks the URL from over 1,000 characters to about 120
- JSON plus base64over 1,000 charactersToo dense for a phone to scan
- Drop derivable prefixes
- Compact stringabout 120 characters
GLB Optimization, Before and After: Download Size vs GPU Memory in Real Projects
Lowering the pixel ratio helps only when pixels are the bottleneck Related method
- Consider lowering itTemporarily, during interaction
- Measure the bottleneckPixels, draw calls, triangles
- Pixels are the limitLower itLowering helps
- Pixels are notLeave itSwitching is an extra cost
Before and after, row by row
| Metric | Before | After | How measured |
|---|---|---|---|
| Download size | meshopt 26.32MB | qdraco 21.18MB (19.5% smaller) | All three encodings re-compressed from the original files. Plain Draco is 16.31MB |
| GPU geometry (after decoding, excluding textures) | meshopt 52.18MB | qdraco about 52MB; plain Draco 96.86MB | Estimated by parsing GLB contents |
Web 3D Performance Engineering: Measurement, Budgets, and Acceptance
Two rounds of inventory cut the first-screen download from about 57 MB to about 37 MB, each round touching only data never used at runtime
- Before the inventoryabout 57 MBFirst-screen download
- Round oneabout 14 MBThree adjustments, all to data never used at runtime
- After round oneabout 43 MBFirst-screen download
- Round twoabout 6 MBThree adjustments on the asset side
- After round twoabout 37 MBFirst-screen download
Same model throughout; after each build, a headless browser reads the resource requests and classifies requests by file extension
When a GLB Is Too Large: Start With Textures, Not Geometry
Scaling down the body-color textures removed about 150 MB of GPU usage, and verification afterward changes nothing further Related method
- Original texturesAbout 160 MB14 textures at 4096, 12 of those solid color
- Pixels dropped by the scale-downAbout 150 MBNo loss in the image
- Scale down to 1024About 10 MBTwo-color textures scaled back up differ from the original by 0
- Decode back and compare in fullAbout 10 MBAll 14 checked one by one, no sampling
One batch of 14 body-color textures. Figures are approximate.
A solid-color texture of about 1 KB wastes about 43 MB of GPU memory across 8 GLB files
File sizeGPU footprint
- About 1 KBSolid-color texture, originally 2048²Wasted GPU memoryAbout 43 MB
- File size unchangedThe same texture shrunk to 4×4Image unchangedNear zero
The same 2048² solid-color texture placed in 8 GLB files; GPU usage is the total for all 8. Shrinking to 4×4 is an in-place rewrite, so the file size of each GLB stays the same.
Decide by the standard deviation after decoding: shrink to 4×4, or compress into KTX2
- Decode at full resolutionRead RGBA32, every channel including alpha
- Compute the standard deviation
- Standard deviation is 0Shrink to 4×4Solid color, image unchanged
- Standard deviation is high, with transparencyHigh quality UASTCKeeps cutout edges intact
- Standard deviation is high, no transparencyLow bit rate ETC1SDecode and compare; re-encode any gray one with UASTC
From Modeler to Production: Intake, Reproducibility, and Acceptance for Outsourced 3D Models
Rewriting a whole GLB through a library grew the file to about 1.4 to 2.9 times its original size Related method
Original sizeSize after whole-file rewrite
- about 5.0 MBModel oneWhole-file rewriteabout 9.1 MB
- about 4.8 MBModel twoWhole-file rewriteabout 14.1 MB
- about 6.6 MBModel threeWhole-file rewriteabout 9.3 MB
File sizes of three GLB files before and after a whole-file read and write through a graphics library, rounded to approximate values
Elimination sorts a visual defect onto either the asset side or the pipeline side Related method
- View the compressed and the full versionIf both show the defect, compression encoding is not the cause
- Show textures alone, then switch textures offRules out the textures
- Switch to back-face displayIf the far side is visible, the surface is missing there: a hole in the geometry
- Open the source file directly in BlenderRules out the development team's own processing
- Compare the same-named part across two colors of one modelShows whether the defect appears in only one color
- The defect appears when the source file is read directlyJudge it an asset problemReturn it to the modeler with the position and the count
- The source file is clean and only the production file is wrongJudge it a pipeline problemThe development team regenerates from source and compares again
- Colors after compression differ from the sourceCheck compression first, not the assetDecode back and compare with the source, texture by texture
Defects in the asset belong to the modeler; reproducing and accepting the production file belong to the development team
Intake
Reproduce and repair
Acceptance
Modeler
Development team
Client
1
ModelerSupply source files and export settingsSource files are what make the production file reproducible
2
ModelerResupply or re-exportFor the missing faces, duplicates, and extra nodes on the return list
3
Development teamCompare item by itemMissing faces, duplicates, extra nodes; asset or pipeline when the picture is wrong
4
Development teamReproduce the production fileRecord source, output, and parameters; no second quantization of skinned parts
5
Development teamAccept with numbers attachedWorld-coordinate offset, visible mesh count, bone displacement
6
ClientProvide the existing model or CADWith the list of parts to change
7
ClientDecide whether to rebuildWhen the modeler does not provide source files
8
ClientConfirm against the acceptance tableEvery line has visible evidence
Division of work in the process described here
What Drives the Cost of a 3D Product Website: Reading a Quote and Its Scope
Intake results and interaction depth split one request into different quote routes
- Confirm the model sourceIs there a source file that can reproduce the live version
- Eliminate causes at intakeTell broken assets from broken processing
- Confirm interaction depthInspect, configure, step through disassembly
- Complete source, no missing faces, interaction limited to inspect and configureMain items: lightweight optimization, going live, device tuningThe simplest route
- Complete source, plus a client-supplied CAD exploded sequenceAdd sequence mapping and list what will not carry over before work startsHow far it goes is calculated
- Intake finds missing faces, duplicates, or stray nodesRepair gets its own line; other items stay conditionalSettle first whether the asset is at fault
- Source cannot be explained, or damage is too large to repairRebuild is priced separately; other items wait for the final modelA rebuild is separate modeling work
Scope, ceilings, and lists are all settled in the specification phase
Specification
Production
Acceptance
Client
Development team
1
ClientSet the phone ceiling, confirm the scope statementMemory ceiling and texture tiers are the owner's call
2
Development teamEliminate causes at intake, list what will not carry overAnd convert the phone budget item by item
3
ClientRaise new requests separatelyAnything out of scope is priced separately, not folded in
4
Development teamLive files reproducible from sourcePhone or desktop-only decided by measurement
5
ClientCheck item by item against the scope statementWhat is listed is the complete scope
6
Development teamExplain differences against the advance listWhat will not carry over does not first appear at acceptance
Division of work only; no periods implied
The first meeting takes 15 to 30 minutes and gives a direction, a budget range and a draft timeline.
Polish 3DNext case: Signage previewed on the real storefront before payment, so clients see the finished sign first
(Contact)
Start a project.
Three steps to a clear direction and budget range.
- 01Book the first meeting: choose a time. A full specification is not required.
- 02A 15 to 30 minute online consultation: direction, budget range, and draft timeline.
- 03After materials are reviewed, a quote and delivery specification follows in about 3 to 5 working days.
- hello@polish-design.com.tw
- Mailing address
- 3F, No. 191-1, Zhifu Rd., Zhongshan Dist., Taipei 104, Taiwan
Book the first meeting
Monday to Friday, 16:00–18:0030 minutes online
Choose a time, then confirm with a Google account or an email address. A confirmed booking can be added to the calendar.
Choose a time
