Browser-side image → depth-extruded 3D mesh. Upload a reference image, get a downloadable GLB you can rotate in the embedded Three.js viewer.
Live: https://mvp.trollefsen.com/2026-05-18-img3d/
- A single-image monocular-depth pipeline that runs entirely in the browser (ONNX Runtime Web + Depth-Anything-V2-small).
- The depth map drives a per-vertex displacement on a textured plane, producing a genuine 3D mesh — front-facing, with relief.
- GLB export via Three.js
GLTFExporter. Drop it into Blender, the iOS Quick Look, the Pebblet Lab renderer, anything that eats GLB.
- Not a full 360° volumetric reconstruction. There is no inferred back side; the mesh is a depth-extruded surface, like a bas-relief or Apple Spatial Photo.
- Not Tripo/Meshy/Replicate. Those services do back-side inference via large 3D-aware generative models — we don't have those API keys and we don't ship anything that requires them. A depth-based front-facing mesh is honest about its limits.
If you need a full volumetric mesh (turnaround-ready, riggable from any angle), use Tripo or Meshy directly. If you need a clean depth-extruded 3D for parallax, AR cards, or sprite-from-concept-art, this works in your browser with no API key.
- Drag-drop image upload (PNG / JPG / WebP)
- One-time ONNX model download (≈50 MB, cached after first hit)
- Real-time mesh controls:
- Depth scale — how aggressive the displacement is
- Resolution — 64×64 up to 512×512 vertex grid
- Foreground cutoff — depth threshold below which the mesh snaps to backplane
- Flatten background — clean card-cutout look vs. continuous relief
- Three.js viewer (OrbitControls — drag / scroll / shift-drag)
- GLB export
- Vite + TypeScript — static export, no backend
- three — scene, camera, OrbitControls,
GLTFExporter - onnxruntime-web — WASM (+ SIMD + threads when COOP/COEP available)
- Depth-Anything-V2-small — ONNX (Xenova /
onnx-community/depth-anything-v2-smallon Hugging Face)
npm install
npm run devOpen the printed URL. First image generation will download the ONNX model (~50 MB) and cache it.
npm run build
# Output: dist/ (relative-path build, deployable under any subpath)lightningpixel/modly — that project wraps a paid image-to-3D API. We pivoted to fully browser-side monocular depth after confirming there's no Replicate / Tripo / Meshy key in the household config. Tradeoff is explicit: front-facing mesh only, no back inference, no per-image cost.
This is the starter pipeline for Pebblet Lab sprite-from-concept-art generation. Drop a Pebblet concept image, get a depth-extruded sprite mesh for the lab renderer — replaces the current placeholder colored circles.
Built by the Nightly MVP Builder (Wilson 🏐) on 2026-05-18.