How to use "Shaders" on your Website

In the computer world, the word "shaders" has nothing to do with window blinds or fancy sunglasses. Most people familiar with the word know if from video gaming graphics, where the word is used to describe special effects that overlay textures.

But what about the web design world? As it turns out, shaders can now be used on images on the web, thanks to curtains.js, an easy-to-use WebGL tool used in animation. The software is available on this website where one of the usages is immediately demonstrated. Visitors to the site are immediately greeted with a clever, animated curtain that serves as a background for the site's title. When users move their mouse cursor (or swipe their finger on mobile devices) over the curtain, it sways and moves as if it is being affected by wind.

This, of course, is just one of the many applications of curtains.js, but it adds a visual that makes the software's capabilities easy to visualize and remember, which probably works well for the notoriety of the developer, Martin Laxenaire.

Other examples of the usage of curtains.js can be seen by clicking some of the other links on the site. Going to the vertex coordinates helper link leads to a page with a similar, somewhat rainbow colored texture like the one that made up the curtain on the home page, except more circular with a white outline. This time, however, moving the cursor across the image causes the image to center itself on a set of coordinates generated by the cursor's location.

Another example, multiple textures, demonstrates how the curtains Javascript library can cause two separate images to blend together in a fancy sort of fade effect, like one might see in a dream sequence in a movie.

The simple plane example is similar to the movement of the curtains on the home page, except demonstrated with a single instance, instead of the four or so separate moving pains that make up the curtains.

Other examples shown are for asynchronous textures, AJAX navigation and multiple planes, each one showing more fancy possibilities courtesy of curtains.js. For more information click here https://www.martin-laxenaire.fr/libs/curtainsjs/index.html.