GLTF Handler

Problem Statement

Product configurators (sneaker builders, furniture finishes, car colors) need to change a 3D model's appearance at runtime — swap a material, recolor a part, adjust roughness/metalness — without re-exporting a new GLTF/GLB for every variant. Doing this by hand against a raw three.js/Babylon scene graph is fiddly: you have to traverse meshes, find the right material by name, mutate it safely, and dispose old GPU resources or you leak memory. Every configurator reinvents this plumbing.

Proposed Solution

GLTF Handler is a TypeScript library that wraps a loaded 3D model and exposes a clean API for dynamic texture/material swapping: change materials by name, adjust colors and PBR properties, and discover available materials programmatically — with LRU caching of textures and memory-safe disposal built in, so configurators stay fast and don't leak.

Full Solution Details

• Swap by name — target a material/part by its name and replace its texture or color without touching the rest of the scene.
• Property adjustment — tweak color and material properties (the PBR knobs configurators expose to users) at runtime.
• Material discovery — enumerate the materials present in a model programmatically, so a UI can be generated from the asset itself rather than hard-coded.
• LRU caching — recently-used textures are cached and evicted by least-recent-use, avoiding repeated decode/upload on rapid swaps.
• Memory-safe disposal — old textures/materials are disposed correctly to prevent the classic WebGL GPU-memory leak when swapping repeatedly.

Technical Documentation

TypeScript library targeting the WebGL/3D layer (three.js / Babylon-style scene graphs and the GLTF/GLB format). The core value is correctness around two notoriously error-prone areas of browser 3D: (1) resource lifecycle — WebGL textures and materials hold GPU memory that must be explicitly disposed, and (2) caching — re-decoding/re-uploading the same texture on every swap tanks performance. GLTF Handler centralizes both behind a small API so application code stays declarative ("set part X to texture Y") while the library handles traversal, caching, and disposal.

Tech Stack

TypeScript, WebGL, three.js / GLTF-GLB model handling, LRU caching, GPU resource management.

System Design

Loaded GLTF/GLB model
        │
        ▼
  GLTF Handler (wrapper)
   ├── discover()          → list materials/parts by name
   ├── swap(name, texture) → traverse → bind new texture
   ├── setColor/props(...) → mutate PBR material
   ├── LRU texture cache   → reuse decoded textures, evict LRU
   └── dispose()           → free old GPU textures/materials (no leaks)
        │
        ▼
  Configurator UI (sneaker / furniture / car builder)

Smart Architectural Decisions

• Treat GPU memory as a managed resource. Building disposal in by default addresses the single most common WebGL bug (texture leaks on repeated swaps) — a sign the author has actually shipped real-time 3D, not just rendered a static model.
• LRU cache for textures turns rapid back-and-forth swapping (exactly what configurator users do) from janky to instant.
• Material discovery lets a configurator UI be driven by the asset (data) instead of hard-coded per model — a more scalable integration.
• Swap-by-name API keeps application code declarative and decoupled from the scene-graph traversal details.

Impacts

Makes runtime 3D product customization (configurators, builders) practical and leak-free without per-variant re-exports — directly reusable in the kind of enterprise 3D work seen in MARTECH3D.

Demonstrated Skills

Real-time 3D / WebGL engineering; GLTF/GLB material and scene-graph manipulation; GPU resource lifecycle management (disposal, leak prevention); caching strategy (LRU); TypeScript library API design for a specialized domain.