ShirtLab is a real-time 3D apparel customization engine built on React Three Fiber and WebGL. Design, texture, and export custom shirts directly in the browser — no plugins, no installs, no compromises on performance.

Design in 3D. Export in seconds. Run anywhere.

How It Works

The app renders a photorealistic 3D shirt model in the browser using a full WebGL pipeline. Pick a color with the HSL picker and the shader updates instantly. Upload a logo or texture and it's projected onto the model via a dual-layer decal system with automatic UV mapping. Switch environments, adjust lighting, and download your design — all client-side, all GPU-accelerated.

Features

• 🎨 Real-Time Material System — HSL color space manipulation with instant PBR shader updates, configurable roughness and metalness
• 🖼️ Dual-Layer Decal System — Logo and full-texture modes with automatic UV mapping and depth sorting
• 📁 Custom Uploads — Client-side FileReader API for instant texture preview with no server round-trip
• 🌐 18+ Textures & 20+ Logos — Curated design library across procedural patterns and categorized vector graphics
• ⚡ Optimized Rendering — Selective re-renders via Valtio, texture caching, frustum culling, sub-500KB gzipped bundle
• 🎥 Smooth Camera — Adaptive orbital rig with three-point lighting and configurable environment maps

Tech Stack

React 18 · Three.js · React Three Fiber · Valtio · Framer Motion · Tailwind CSS · Vite