This is a small runner and build system for ShaderToy-style multibuffer shaders. See src/shaders for an example shader (the buffer_x.glsl -ones), see src/runner.ts for the runner script.

The build script uses esbuild, spglsl and html-minifier to do fast builds (~1 second) and has a watch mode for creating dev builds on file changes (these run in <1s).

The build output is a single HTML file based on the template in static/index.html. The build script inlines css/style.css and src/runner.ts into the HTML after compiling and minifying them. The resulting HTML is further minified with html-minifier.

You can import shaders into runner.ts like below:

const myVertexSource = require('./shaders/foo.vert.glsl');
const myFragmentSource = require('./shaders/foo.frag.glsl');

The shaders are minified and inlined to the compiled script as strings. The minifying step uses spglsl to compile the shaders in optimize mode, which does error checking and minification.

The HTML template and runner.ts use the fxhash generative seed template for generating reproducible random outputs.

# Install dependencies
yarn

# Start watch mode -- the generated files go to `watch/` and you can serve them with `serve watch`
yarn watch

# Do a build in `build/`. Test with `serve build`
yarn build

MIT

Ilmari Heikkinen 2022