06 / WebGL tool · Personal project
Viewport
Open a model. Inspect it. Keep it local.
A glTF 2.0 viewer for checking models, materials and lighting in the browser. Open a local GLB or self-contained glTF file, orbit the model and adjust the render without uploading the file.
- My role
- Viewer architecture, 3D rendering & interface development
- Technology
- Next.js / React / TypeScript / Three.js / React Three Fiber / Drei
The problem
Inspecting a 3D export should not require a desktop editor or a server upload. A useful browser viewer also needs to explain unsupported files and stay usable when loading or rendering fails.
What I built
I built a React and TypeScript interface around a React Three Fiber scene. Local files load through browser object URLs; camera fitting, orbit controls, animation playback and lighting presets make models easier to inspect.
The challenge
Models vary in scale, materials and file structure. Invalid exports, missing external textures and WebGL context loss need clear feedback rather than an unexplained blank canvas.
Implementation approach
I validate GLB headers and size limits before loading, and reject JSON glTF files that need separate resources. Model and environment error boundaries isolate failures; context monitoring supports recovery. Draco decoders are served locally, and object URLs and cloned materials are released when no longer needed.
Workflow overview
Open a model. Inspect it. Keep it local.
- 01Choose & validate file
- 02Decode & fit camera
- 03Inspect materials & lighting
- 04Recover & release resources
A simplified view of the product workflow.
The result