MATTER
Modular material configurator and spatial staging engine for industrial design assemblies.
The configurator and 3D scenes on this site render procedural geometry and material shaders client-side using Three.js; no third-party 3D model assets are downloaded.
Backend infrastructure including distributed event queues, local CRDT synchronization, and edge validation schemas represent the proposed architectural design for this concept, rather than deployed commercial systems.
Context
- ↳Shader Performance Budget
- ↳Procedural Tessellation Spec
Traditional industrial design presentations rely on pre-rendered raster images or heavy video files that lack interactivity and dimension.
MATTER was created as an experimental study in browser-based spatial engineering, testing how procedural rendering can replace heavy asset downloads.
Challenge
Rendering complex multi-part mechanical assemblies with realistic material scattering typically taxes mobile GPUs and creates frame drops.
The technical barrier was delivering physically convincing finishes (ceramic, graphite, brushed alloy) using mathematical shaders within a compact asset envelope.
Approach
Rather than loading massive photogrammetry meshes, we wrote procedural geometry generators and mathematically defined micro-facet shaders directly in GLSL.
By calculating reflections and surface roughness algorithmically, the system achieves instant loading while supporting real-time material reconfiguration.
Design System
- ↳Industrial HUD Spec
- ↳Viewport Coordinate System
The inspection HUD borrows visual cues from precision coordinate measuring machines and laboratory instruments.
Hairline dimension callouts, orthogonal guides, and monospace metrics balance the curves of the procedural 3D geometry.
Engineering & Architecture
Built on React Three Fiber with custom GLSL materials and instanced mesh buffers to minimize draw calls.
The proposed production tier incorporates background WebAssembly tessellation pipelines, while this website demo renders an instanced procedural rail assembly.
Proposed production design incorporates client-side WebAssembly tessellation for arbitrary STEP/CAD file import.
Outcome & Verification
MATTER confirmed that procedural 3D architectures provide high visual fidelity without the payload penalties of pre-baked 3D files.
The project established the procedural assembly framework and ceramic/graphite shader language that forms the visual foundation of the XCAPE studio identity.