three-vite-tweakpane-shader-template

A template to quickly prototype full-screen shaders with UI using Tweakpane, Three.js and Vite 🎉

Live Demo

Features

• Define your uniforms 1 time in state.js and use them in both the shader and the UI without needing to update them in your render loop.

• Easily add UI for your uniforms in ui.js.

• Uses a single triangle to render the shader to the screen for optimization instead of a Quad.

• There's a nifty helper function createMeshWithUniforms that handles updating all your uniforms from your state every frame so you don't need to update them in your render loop.

Setup

yarn install

Dev

yarn dev

Build

yarn build