Shader-web-background - creative coding in the browser


It’s not directly related to OPENRNDR, but thanks to this project I’ve learned enough WebGL to be able to start building OPENRNDR web target, hopefully, if I will have enough time for that.

This project is doing exactly what the name suggests - allows to use shaders on the web. It doesn’t sound much different than shadertoy and glslCanvas. However when I had been evaluating each of the libraries abstracting WebGL, I was also finding limitations making them unsuitable for my vision. And my vision is to treat the web browser as a tool of my expression, in a declarative way, and forget about technicalities. There are solutions for building responsive websites. I wanted something similar for shaders, where they can become part of web development workflow also suitable for Progressive Web Applications:

So now I can start rendering shaders immediately before any other web resources are loaded, while reacting to mobile device orientation sensors, and presenting already GPU accelerated CSS animatons on another layer, while benefiting from high quality SVG and font rendering of engines like WebKit. And all of this while being compatible with most of the browsers and hardware.

It was much more work than I expected, but it will be also a base for many of my future projects, especially in the times when I cannot make physical installations on top of OPENRNDR, because there is no audience allowed to experience them. Maybe it will be also useful for you as an additional channel for sharing your work. And I am getting more and more serious about OPENRNDR web target, with kotlin JS + WebGL.


Congratulations for 1.0! :slight_smile:

I would be very happy if it was possible to run OPENRNDR programs in the browser. There are two related issues a, b. I wonder what direction this may take, how will the new JS compiler from JetBrains look like and if it will be useful in this case, if Kotlin will be compilable to WebAssembly, what role will Zink and WebGPU play… lots of questions :slight_smile: