I want this magic on my website!

And you can have it! The shader-web-background open source project is here for you to provide an immersive experience on the web.

or sponsor xemantic on GitHub, If you enjoy interacting with this creature behind.

If you are familiar with web development, then you can just use shader-web-background as a library. Otherwise don't worry — xemantic can make this magic happen for you with custom shaders and generative artwork tailored to your needs.

It's not just an effect, but rather a generative creature which emerged out of my Kabbalistic meditation with numbers, coefficients of life and beauty, the phenomenon of autopoiesis — the capacity of a system to reproduce and maintain itself. Therefore it's highly conceptual experience prepared to be displayed on the web, but far away from typical net art aesthetics. Interactive feedback loop of video synthesis merged with generative design bring synaesthetic pixel–perfect experience and naturally perceived fluidity of mesmerizing motion. Evolution of negentropic homeostasis emerges new artificial life forms of light. I believe that mapping natural light dispersion spectrum to RGB values can evoke special emotions. Check out my article — Not so discreet charm of machine colors.

What makes this magic?

If you are here, probably you have already learned about shaders. This is the technology rendering in real time the background behind this text. The shader-web-background makes it easy to include complex, interactive and portable shaders as a part of your web design.

The documentation on project's GitHub repository will guide you. Take a look at Demo section to see what's possible.

Features

• simplicity: it is just rendering canvas background as fragment shader.
• speed: designed to be embedded in HTML and start rendering before other page resources are downloaded.
• extensibility: adding own interaction and controls is trivial.
• convenience: straightforward API, specific errors will inform you about mistakes which are otherwise hard to debug.
• minimal footprint: transpiled from JavaScript to JavaScript with Google Closure Compiler.
• pixel feedback loops: preserving movement in time on offscreen buffers with floating–point precision.
• shadertoy support: including multipass shaders
• cross browser / cross device: on Chrome, Safari, Firefox or Edge, either with WebGL 1 or 2, on Linux, Windows, Mac, iPhone or Samsung phone — it will use optimal strategy to squeeze out what's possible from the browser and the hardware.

Why is it fast?

This website starts in milliseconds because there are no additional resources to be loaded — no extra code, no images. All the artwork and style is provided in the source code of this HTML page.

The shader will run on the GPU, not CPU, and modern devices, including our mobiles, already have one. Surprisingly rich visual effects can be achieved with very efficient code.

Real time interactive shader offers a different perspective on compression — pure mathematics has orders of magnitude higher compression rate comparing to MPEG video. In contrary to video–loops, generatively synthesized video signal can be also interactive and it has no artifacts rather letting one perceive the maximal quality of the display device.

Demo

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

• 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.

Projects using shader-web-background

• xemantic — author's website
• Fuck the AI which is abusing your reptilian brain to make you addicted to movies instead of art — a hybrid of Netflix / game console like interface for building artistic projects focused on visual content.
• Industria - a fully immersive seaborn Industrial Revolution experience onboard Illutron boat (Copenhagen)

If you want to add your project to the list, then create a pull request, or send a message to xemantic.

Alternatives

This project is not focused on providing complete abstraction over WebGL, but rather on providing the experience — high quality visuals as a part of web design, which will work wherever it is technically possible.

I designed and coded shader-web-background because all the other projects doing similar things have slightly different focus, therefore it was neither possible to achieve the aesthetics I desire, nor to make it work consistently on platforms like iOS. It is worth mentioning these projects here because, they brought the inspiration and they might be still more useful for your purposes:

• glslCanvas by Patricio Gonzalez Vivo, the author of The Book of Shaders, our Bible ;) It also supports vertex shaders, but does not support WebGL 2 and floating-point texture precision.
• Shadertoy by Pol Jeremias and Inigo Quilez, the YouTube for nerds where every movie is synthesized with pure mathematics. It was my ambition to make this project compatible with Shadertoy. I am happy to discover that some of the shadertoy shaders, which does not work with iOS devices, will be displayed well by this library.
• Hydra by Olivia Jack, a perfect tool for connecting the generative and the performative in the form of browser based live–coding environment. It is possible to export Hydra shaders and use them with this library, see Hydra demo.
• three.js, probably the most comprehensive abstraction over WebGL.
• regl, fast functional WebGL.

License

The shader-web-background is released under GNU General Public License version 3 which makes it suitable for Open Source and personal projects. I would like to provide separate commercial license similar to the one offered by Flickity project.

This software is open and free. (I don't like coffee) or sponsor xemantic on GitHub, if you want to express your support.