# Shader-web-background - creative coding in the browser

**URL:** <https://openrndr.discourse.group/t/shader-web-background-creative-coding-in-the-browser/186>\
**Category:** Announcements\
**Created:** [January 7, 2021, 2:03pm UTC](https://openrndr.discourse.group/t/shader-web-background-creative-coding-in-the-browser/186 "2021-01-07T14:03:32Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![kazik](https://yyz2.discourse-cdn.com/free1/user_avatar/openrndr.discourse.group/kazik/32/7_2.png) [@kazik](https://openrndr.discourse.group/u/kazik)\
**Post date:** [January 7, 2021, 2:03pm UTC](https://openrndr.discourse.group/t/shader-web-background-creative-coding-in-the-browser/186/1 "2021-01-07T14:03:32Z")

</div>

Hi,

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.

> **[shader web background](https://xemantic.github.io/shader-web-background/)**
>
> A library displaying GLSL fragment shaders as a website background

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:

> **[Progressive web application](https://en.wikipedia.org/wiki/Progressive_web_application)**
>
> A progressive web application (PWA) is a type of application software delivered through the web, built using common web technologies including HTML, CSS and JavaScript. It is intended to work on any platform that uses a standards-compliant browser, including both desktop and mobile devices. 
> While web applications have been available for mobile devices from the start, they have generally been slower, have had fewer features, and have been less used than native apps. PWA features narrow the gap b...

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.

---

<div class="post-metadata">

**Author:** ![abe](https://yyz2.discourse-cdn.com/free1/user_avatar/openrndr.discourse.group/abe/32/700_2.png) [@abe](https://openrndr.discourse.group/u/abe)\
**Post date:** [January 11, 2021, 4:44pm UTC](https://openrndr.discourse.group/t/shader-web-background-creative-coding-in-the-browser/186/2 "2021-01-11T16:44:11Z")

</div>

Congratulations for 1.0! 🙂

I would be very happy if it was possible to run OPENRNDR programs in the browser. There are two related issues [a](https://github.com/openrndr/openrndr/issues/103), [b](https://github.com/openrndr/openrndr/issues/110). 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 🙂
