Shader Lab
A powerful toolkit to create, stack and animate shaders
Three.js Marketplace
Three.js Marketplace
Kickstart your Three.js and React Three Fiber (R3F) projects with our free and premium components themes and tools. Designed for freelancers, developers, and agencies, each product includes essential features to get you up and running quickly.
Links
Featured Badge
Add this badge to your website to show you are featured on Three.js Resources.
Description
The Shader Lab webapp (available at eng.basement.studio/tools/shader-lab) serves as a live, Photoshop-like editor for shaders. It allows users to build compositions visually by stacking layers, defining timelines, adding animations, and applying effects. Users can experiment with presets, preview results in real time, and export compositions as a ShaderLabConfig object (JSON-like structure) that the runtime can consume. This editor lowers the barrier for creative coders and designers who want to craft sophisticated GPU-accelerated visuals without diving straight into low-level code.
The companion npm package (@basementstudio/shader-lab) provides a portable React runtime that renders and animates these exported compositions. It leverages Three.js's WebGPU capabilities (via Three Shading Language - TSL) for high-performance execution and works client-side only (WebGPU support required in the browser). It also comes with several hooks that allow you to use your Shader Lab composition directly in your own scene, either as a texture, or even postprocessing.
Sponsors
Related Resources
goact
A super easy tool to create stunning 3D video in the browser
Gsap
GSAP is a powerful animation library for creating smooth animations, perfect for three.js resources.
Mixamo
Mixamo offers free 3D character models and animations, ideal for enhancing three.js resources.
