<table width="650" style="margin-top: 0px;">

<tr>

<td>

<p class="license">If you see any errors in this tutorial or have comments, please <a href="https://github.com/processing/processing-docs/issues?state=open">let us know</a>. This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License</a>.</p>

<h1 style="line-height: 0.7em;">Shaders</h1>

<h3 style="line-height: 0.7em;"><em>Andres Colubri</em></h3>

<p><em>(The code for this tutorial is <a href="https://github.com/codeanticode/pshader-tutorials">available here.</a>)</em></p>

<p class="txt">

Everything that Processing draws on the screen with the <a href="http://processing.org/reference/size_.html">P2D and P3D renderers</a> is the output of an appropriate "default shader" running behind the scenes. Processing handles these default shaders transparently so that the user doesn't need to worry about them, and she or he can continue to use the well-known <a href="http://processing.org/reference/">drawing functions</a> and expect the same visual results as with previous versions of Processing. However, Processing 2 incorporates a new set of functions and variables that allows advanced users to replace the default shaders with her or his own. This opens up many exciting possibilities: rendering 3D scenes using more sophisticated lighting and texturing algorithms, applying image post-processing effects in real-time, creating complex procedural objects that would be very hard or impossible to generate with other techniques, and sharing shader effects between desktop, mobile, and web platforms with minimal code changes.

</p>

<p>

In order to understand how shaders work and how they can be used to extend the drawing capabilities of Processing, it is necessary to have an overview of the key concepts of shader programming, first in general and then from the "point of view" of a Processing sketch. So, get ready and grab a beverage of your preference, because this is going to be a very long tutorial.

</p>

<p>

Answering the question alluded by the title of this section, a shader is basically a program that runs on the Graphics Processing Unit (GPU) of the computer, and generates the visual output we see on the screen given the information that defines a 2D or 3D scene: vertices, colors, textures, lights, etc. The term "shader" itself might be slightly misleading, since the word <em>shading</em> in the context of drawing implies the process of representing different levels of darkness on the surface of an object due to the surrounding lights in order to create the illusion of depth. The <a href="http://renderman.pixar.com/view/brief-introduction-to-renderman">first computer shaders</a> were mainly concerned with the synthetic calculation of these shading levels given the mathematical representation of a three-dimensional scene and the material properties of the objects in it, and attempted to create photorealistic renderings of such scenes. Nowadays, the shaders are not only used to calculate the shading or lighting levels in a virtual scene, but they are responsible of all the rendering stages, starting with camera transformations that are applied on the raw geometry, and ending at the evaluation of the final color of each visible pixel in the screen.

</p>

<p>

There are several languages that can be used to write shaders, such as <a href="https://developer.nvidia.com/cg-toolkit">Cg</a>, <a href="http://msdn.microsoft.com/en-us/library/windows/desktop/bb509561(v=vs.85).aspx">HLSL</a> and <a href="http://www.opengl.org/documentation/glsl/">GLSL</a>. The latter is the shader language included in <a href="http://www.opengl.org/">OpenGL</a>, the standard rendering library and API used across a wide variety of computing devices, ranging from high-end desktop computers to smartphones. GLSL simply stands for OpenGL Shading Language. Since Processing uses OpenGL as the basis for its P2D and P3D renderers, GLSL is the shader language that one has to use to write custom shaders to include in Processing sketches.

</p>

<p>

Writing shaders requires an understanding of the individual stages involved in the rendering a scene with the GPU, and how we can use GLSL to program them. The sequence of these stages is called the "graphical pipeline" in the technical parlance of computer graphics, and we will now take a look at the main stages in the pipeline from the perspective of a Processing sketch.

</p>

The most basic building block for programming motion is the <em><strong>vector</strong></em>. And so this is where we begin. Now, the word <em><strong>vector</strong></em> can mean a lot of different things. Vector is the name of a new wave rock band formed in Sacramento, CA in the early 1980s. It's the name of a breakfast cereal manufactured by Kellogg's Canada. In the field of epidemiology, a vector is used to describe an organism that transmits infection from one host to another. In the C++ programming language, a Vector (std::vector) is an implementation of a dynamically resizable array data structure. While all interesting, these are not the definitions we are looking for. Rather, what we want is this <em><strong>vector</strong></em>: