glslify-big-triangle-boilerplate

This is an opinionated starter repo for writing fragment shader code with the aid of the glslify ecosystem.

(Want to get started right away in your browser? Consider glslb.in. )

npm run start to start the devserver.

Annotated dependency list:

• regl: Declarative wrapper over WebGL state machine. A regl command is analogous to a react component. We have a single command, drawTriangle.

• glslify: Enables importing libraries from node_modules, aka #pragma glslify: hsv2rgb = require('glsl-hsv2rgb'). Makes GLSL fun.

• glsl-hsv2rgb: An example of a glslify library. Does some fancy math to convert between color spaces, and does it with branchless logic.

• webpack: Handles packing index.js and it's dependencies into bundle.js, suitable for the browser.

• webpack-dev-server: Runs webpack in a mode that auto-reloads in your browser.

• glslify-loader: Runs glslify for webpack and resolves .glsl files to javascript strings.

• raw-loader: Sidekick for glslify-loader. Resolves and loads raw text files for webpack, in this case fragment.glsl

glslify libraries to consider (adapted from the stackgl wiki)

• glsl-specular-beckmann
• glsl-specular-cook-torrance
• glsl-diffuse-oren-nayar
• glsl-diffuse-lambert
• glsl-specular-ward
• glsl-specular-gaussian
• glsl-specular-phong
• glsl-specular-blinn-phong
• glsl-perturb-normal
• glsl-face-normal
• glsl-checker
• glsl-earth
• glsl-easings
• matcap
• glsl-inverse
• glsl-determinant
• glsl-transpose
• glsl-frobenius
• glsl-look-at
• glsl-camera-ray
• glsl-raytrace
• glsl-sdf-normal
• glsl-sdf-sphere
• glsl-sdf-box
• glsl-sdf-primitives
• glsl-sdf-ops
• glsl-ruler
• glsl-turntable-camera
• glsl-combine-smooth
• glsl-luma
• glsl-gamma
• glsl-aastep
• glsl-dither
• glsl-noise
• glsl-fractal-brownian-noise
• glsl-worley
• glsl-random
• glsl-fog
• glsl-fxaa
• glsl-lut
• glsl-range
• glsl-scale-linear
• glsl-scale-log
• glsl-square-frame
• glsl-cornell-box
• glsl-read-float
• glsl-smooth-min
• glsl-film-grain
• glsl-hash-blur
• glsl-fast-gaussian-blur
• glsl-halftone
• glsl-crosshatch-filter
• glsl-ascii-filter
• glsl-hsv2rgb
• glsl-hsl2rgb
• glsl-blend-overlay
• glsl-blend-soft-light
• glsl-map
• glsl-edge-detection
• glsl-atmosphere
• glsl-godrays
• glsl-cos-palette
• glsl-gradient-palette
• glsl-vignette
• glsl-solid-wireframe
• glsl-domain-coloring
• glsl-sat
• glsl-numerify
• glsl-quad
• glsl-gaussian
• glsl-zoom
• screen-projected-lines
• glsl-fft
• glsl-rfft