Demo

Examples and use cases, including custom shaders prepared for those of you who :

• pink —
• demo — the same effect as on this page, showing the potential of the whole library, relays directly on the JS sources, therefore it is used during development.
• minimal — very basic shader background without any uniforms. It is using embedded minimized version of the library instead.
• feedback — simple feedback loop example.
• shadertoy-default — the template Shadertoy shader showing how to include the upstream code.
• shadertoy-warping-procedural-2 — beautiful work by the co-author of Shadertoy Inigo Quilez.
• shadertoy-reaction-diffusion-2-pass — multipass example.
• mouse — simple example with mouse input, compatible with Shadertoy conventions.
• mouse normalized — slight modification of the mouse example to avoid normalization of the same mouse coordinates for each pixel.
• texture: Blue Marble to Flat Earth mapping — how to load a texture.
• multiple shaders — how to use multiple shaders with multiple canvases?
• parallax scrolling — a simple trick to achieve Parallax scrolling effect.
• Hydra Demo — feedback effect from Hydra Book by Naoto Hiéda
• errors — test cases for misconfiguration.

Missing your favorite shader? - create pull request and add it to this list. The best way to learn how shader-web-background works.