Published

Retail Materials Test

A browser-parity experiment for a dense retail GLB: atlas-backed textile variation, material-class tuning, and flythrough QA in Three.js.

This note documents what the test was built to prove, what constraints shaped it, and which implementation choices actually held up under browser QA.

Overview

This experiment was built to answer a practical question: can a materially dense retail scene survive the trip from authoring tools into a browser-delivered GLB without losing visual variety, shipping an oversized payload, or turning every surface into fake gloss?

The scene intentionally mixes repeated garments, folded stacks, paper bags, metal racks, storefront glass, sidewalk materials, and an adjacent restaurant so the test covers the real failure modes that show up when many material classes share the same frame.

Overview render of the retail materials test showing the storefront, clothing displays, sidewalk, and adjacent restaurant.
The test scene combines repeated soft goods, architectural surfaces, and mixed lighting so browser QA can catch both texture and performance regressions.

What This Was For

  • Validate that one shared textile atlas can preserve variety across many repeated garments and folded stacks.
  • Check browser parity between Blender export choices and Three.js material response under real lighting.
  • Prove that an external GLB plus a small viewer page is a safer delivery pattern than embedding everything into one HTML file.
  • Establish viewer-side material rules for cloth, wood, floors, glass, screens, and metal instead of one global tweak that breaks everything.

Experiment Snapshot

515 Total authored objects in the scene
398 Mesh objects carried into the browser pass
96 Atlas-backed textile material assignments
1 atlas Shared textile map used across repeated clothing assets
24 Overhead retail light fixtures included in the scene
145 Restaurant-side parts used to stress mixed-material readability

Approach

The working pattern was deliberately conservative. Repeated soft goods were mapped into a shared atlas, while broad architectural materials such as floors, walls, shelves, asphalt, and sidewalk surfaces stayed on their own stable UV layouts. The viewer then loaded the GLB as an external asset so the page stayed small, cacheable, and easy to audit.

On the rendering side, the browser pass used a light-touch PMREM environment, low-energy bounce lights, soft direct shadows, and per-material overrides. Cloth stayed rough and low-specular, wood kept only a slight environment response, and glass, screens, and metal were treated as explicit exceptions rather than the default behavior.

Findings

  • Albedo atlases carried most of the win: they preserved garment variety without the size and stability problems that come from shipping one full material set per repeated object.
  • Broad surfaces needed their own treatment: floors, walls, wood shelves, and sidewalk materials behaved better when they kept stable UV scale and low-frequency detail instead of getting forced into tiny atlas tiles.
  • Global gloss was the wrong answer: a uniform specular boost made the whole scene read as synthetic, while class-specific overrides kept materials believable.
  • Lighting and material QA are inseparable: direct lights alone flattened the scene, but subtle environment contribution and bounce lights helped textures read as grounded.
  • Tiny shadow casters were expensive noise: disabling shadows on small decorative props improved flythrough behavior without meaningfully hurting the look.
"This was not a hero render exercise. It was a pipeline test for whether material variety, browser parity, and interactive performance could all survive the same scene."

Why It Matters

The value of this experiment is operational. It establishes a repeatable pattern for browser-delivered environments that need lots of repeated soft goods without turning the asset bundle into a mess. That makes it useful for future scene prototyping, storefront simulations, synthetic environments, and any flythrough where material credibility matters more than cinematic one-off rendering tricks.

Reuse this pattern when the problem is "many repeated textile-like assets in one interactive scene." Skip it when a few hero assets need unique, close-up material treatment and bundle discipline is less important than maximum per-object fidelity.

Open the Experiment

The public-facing note lives here so the research hub has context first. The raw flythrough viewer remains available as the executable artifact for material QA, lighting checks, and camera-path inspection.