We'll go through some shader basics and then hopefully freestyle a little!
To get started on your device, fork this repo and run:
yarn && yarn startLet me know if you run into any problems and I'll help out.
This demo involves manipulating pixels on the canvas, resulting in lots of changing colours and movement. If you are sensitive to either of these then please let me know beforehand, and I can see if we can adapt the demo to tone things down.
This project is a simple Preact app bundled with Snowpack/esbuild. The WebGL renderer is adapted form another project of mine. Feel free to take a look at it to see how things work under the hood, but for the purposes of our session we only really care about the src/Scene.tsx file.
There is an issue with fast refresh that causes production builds to error. I've kept fast refresh (via prefresh) enabled to keep the feedback loop fast, since we'll only be using the dev server in our session. If you want to create a production build I reccommend you comment out the lines that I've marked in snowpack.config.js and .babelrc.
Some of my fave resources if anyone is interested in learning more about shaders:
- The Book of Shaders
- WebGL Fundamentals
- Inigo Quilez's website
- Yuri Artyukh's Ray Marching video tutorial
This repo is GNU Licensed.