Back to selected engineering work

Case study

GLB Mesh Inspector

A browser-based tool to upload, view, and inspect individual meshes of a 3D model from a GLB file. Toggle mesh visibility, designate pieces with presets (e.g., chess sets), and export selected meshes as separate GLB files.

GLB Mesh Inspector showing a 3D chess set with mesh list and visibility toggles

Role

I designed and built this tool to solve a specific problem: isolating chess pieces from a single generated GLB mesh, then extended it with configurable presets for any piece set.

Context

I was experimenting with online image-to-3D tools and generated a 3D GLB mesh of a full Staunton chess set as a single combined mesh. I needed a tool to isolate each piece individually and save them separately, then extended it to support customizable piece sets with presets.

Constraints

  • Must run entirely in the browser with no backend dependency.
  • Must handle GLB files with multiple meshes and extract individual components.
  • Must provide visual feedback for mesh selection and visibility toggling.
  • Must support configurable piece presets (e.g., chess) with auto-completion logic.
  • Must export selected meshes as valid GLB files.
  • Coded only to the point where it did the job with no more requirements.

Decisions

  • React 19 with TypeScript and Vite for a lightweight, fast development experience.
  • Three.js with React Three Fiber and React Three Drei for 3D rendering and mesh manipulation.
  • Tailwind CSS for a utility-first, responsive UI.
  • Object URLs for client-side file handling without server uploads.
  • Configurable preset system (chess default) with custom designation support and auto-completion.
  • GLTFExporter from Three.js for exporting selected meshes as GLB files.

Trade-offs

  • Client-only architecture limits maximum file size to browser memory constraints.
  • No server-side processing means no persistent storage or sharing of annotated models.
  • Auto-completion logic assumes a fixed preset size; flexible sets require manual designation.

Outcome

A working, deployable tool at glb-mesh-inspector.vercel.app that uploads GLB files, extracts and lists meshes, toggles visibility, assigns designations with chess presets, and exports selected pieces as individual GLB files.