Interactive 3D tooling / Material iteration system
Material Explorer
Material authoring workspace
The product workspace combines a searchable material library, typed editor controls, and a live 3D preview so authors can inspect the system before committing a material.
An interactive material studio for exploring light, texture, and surface in real time, with side-by-side comparison and shareable presets that support visual iteration.
- My role
- Independent designer and developer — 3D authoring interaction, comparison workflows, material visualization, and frontend implementation
- Engagement
- Personal Project
- Period
- 2026 (active beta)
- Resources
- 5 reviewed artifacts
01 / Context
Creative challenge
•Material iteration was split across expert tools
3D material creation and customization typically requires specialized knowledge and software, creating barriers for designers and developers who want to experiment with materials for their web-based 3D projects. Existing tools often lack real-time feedback or are too complex for quick iterations.
•Feedback needed to be immediate
The browser product needed to keep material values, lighting, model choice, and rendered appearance in one loop so authors could judge changes without switching tools or rebuilding a scene.
•Browser constraints shaped persistence and export
The active beta stores materials locally by default, can fall back to local state when optional API sync fails, and must keep texture size, share-link length, and preview-geometry export limits visible.
02 / Mandate
Direction and intent
•Make PBR controls approachable
Expose physical material properties, textures, lighting, models, and preview controls in a product interface that designers and developers can operate directly.
•Support rapid comparison and recovery
Give authors presets, autosave, draft history, undo and redo, A/B comparison, duplication, and randomization without interrupting the live preview.
•Keep materials portable
Support library and single-material JSON, shareable material URLs, PNG snapshots, and GLB preview export while explaining which formats include textures or preview geometry.
03 / Build
Creative decisions and execution
1.Built a live React Three Fiber lab
Implemented real-time controls for color, metalness, roughness, emissive, clearcoat, transmission and IOR, opacity, seven texture-map channels, tiling, models, environments, and preview behavior.
2.Added compare and iteration controls
Shipped quick presets, draft autosave and restore, undo and redo history, dual-canvas A/B comparison, duplicate and randomize tools, section resets, and draft JSON transfer.
3.Implemented local-first library workflows
Added favorites, tags, search and sort, bulk actions, manual ordering, local persistence, optional API sync with local fallback, shareable URLs, JSON import and export, and GLB preview export.
4.Hardened release quality
Set up format, lint, type-check, Vitest, production build, bundle-budget, Playwright accessibility and smoke, and security-audit gates, with best-effort telemetry and a local mock sync backend for integration work.
Live PBR material lab
The deployed lab renders a React Three Fiber preview alongside quick presets, environment and camera controls, and a starter library of editable materials.
Texture-map workflow
The working editor exposes base-color, normal, roughness, metalness, AO, emissive, and alpha map inputs while preserving the live preview and library context.
04 / Outcomes
Outcomes
•One browser workflow from authoring to export
The public beta combines a live PBR editor, starter library, dual-canvas comparison, texture controls, draft recovery, sharing, and export in one inspectable browser product.
•Local-first resilience with explicit limits
Materials remain usable through local storage when optional API sync is absent or unavailable. Embedded textures can exceed browser quotas, texture-rich share URLs can be rejected for size, and GLB output contains preview geometry rather than an imported user mesh.
•A tested public beta, not a DCC replacement
The deployed GitHub Pages app and public repository demonstrate shipped React, TypeScript, and Three.js product engineering with automated quality gates. The project remains an active browser-material beta rather than claiming parity with production digital-content-creation suites.
Dual-canvas A/B comparison
The comparison state renders two live canvases side by side, keeping the material library visible while authors evaluate a saved reference against the current draft.
Draft history and power tools
Draft recovery, undo and redo, duplicate, randomize, texture clearing, JSON transfer, and save controls make rapid iteration explicit instead of hiding it behind the renderer.
Tools
Tools and implementation
Continue the evidence trail
From proof to role fit
Compare Material Explorer with adjacent systems, or carry its reviewed capabilities into an Adaptive Focus brief.