Minimal setup for writing shaders, including:
✅ Live reloading dev server via npm start
from budo
✅ Export for the web / GitHub pages via npm run build
, e.g this repo's site
✅ glslify for importing packages in GLSL
✅ regl for simpler JS (check out index.js
)
✅ Ready to make shader toys!
- Javascript to setup our canvas and load the shaders, no changes needed:
index.js
- Simple vertex shader passing along its position, no changes needed:
vert.glsl
- Example fragment shader to get started:
frag.glsl
- Make a repo from this template from the link above, or here
- Clone your repo, and set the working directory there
- Install dependencies:
npm i
npm i -g browserify
npm i -g budo
- Start the development server with
npm start
- Edit
index.js
,frag.glsl
, andvert.glsl
- Use
npm run build
to export your final result to thedocs
directory - Enable GitHub pages on the main branch's
docs
directory to put your result on the web