Fragment Shader Gallery

WebGL shaders give you the power to manipulate pixels freely in real-time. The code you write for processing one pixel is executed for every single one of them. Shaders give possibilities far beyond anything else known to web browsers so far.

However, everything comes at a price. You have to use a C-like shader language, instead of the friendly old JavaScript. Writing shaders can be a bit—a lot—scary, but fortunately the number of lines you have to write to produce sweet results is negligible.

Lastly, while most modern real browsers do support WebGL, there is a chance that it will never work on Internet Explorer. Or mobile.

Starting point

This is the image we will use.

For all shaders here, we use a simple vertex shader that does not do much. Normally a vertex shader could be used to transform the vertices of the underlying 3D model. This would include, for instance, scaling or rotating them.

Since we only want to render 2D images, we use a simple plane that covers the whole canvas. We save the coordinate of the plane we are processing in texturePos.


                    

Negative


                    

Black and white (linear)


                    
jquery.gl_shaderer@Github