Explore the live editor deployed on Vercel :
👉 ShaderLab Live
ShaderLab is an interactive 3D scene editor powered by WebGPU.
It allows you to create, edit, and manipulate ray-marched 3D primitives in real time, with an intuitive UI panel and a fully functional 3D transformation gizmo.
No shader recompilation required — everything updates live.
- Real-time shader-based rendering of 3D primitives
- Interactive scene editor (sliders, color pickers, dynamic object list)
- Add, remove, and select objects
- Click-to-select system via ID-based picking
- 3D translation gizmo (X, Y, Z axes) with drag-based movement
- Live updates to the scene without reloading or recompiling the shader
- Multiple primitive types (spheres, boxes, etc.)
- Black screen during picking render pass (to avoid visible flicker when clicking)
- Lock camera while dragging the gizmo
- Fix auto-rotate jitter / prevent camera jump
- Object transparency when selected
- Selectable gizmo even through overlapping objects
- Reimplement CSG operations with a fixed UI selector (removed due to selection bugs during union operations: see commit
29391d3) - Resizable right-side editor panel
- WebGPU for GPU-accelerated rendering
- WGSL for ray marching shaders
- JavaScript for scene management & UI logic
- HTML/CSS + Tailwind for layout and styling
- A browser with WebGPU support (Chrome, Edge, Firefox Nightly…)
- Python 3 (or any static server)
- Clone the repository:
git clone https://github.com/yourusername/shaderlab.git cd shaderlab - Start a local server:
python -m http.server
- Open your browser and navigate to
http://localhost:8000
Feature requests, issues and pull requests are always welcome! Feel free to contribute improvements, especially on UI/UX or planned features.
This project is licensed under the MIT License.