What are shaders? In the field of computer graphics, a shader is a computer program that runs on the graphics processing unit(GPU) and is used to do shading - the production of appropriate levels of light and darkness within an image.

Type of shaders Vertex shaders Geometry shaders Pixel shaders

Vertex shaders Vertex shaders are run once for each vertex given to the graphics processor. The purpose is to transform each vertex's 3D position in virtual space to the 2D coordinate at which it appears on the screen. Vertex shaders can manipulate properties such as position, color, and texture coordinate, but cannot create new vertices. The output of the vertex shader goes to the next stage in the pipeline, which is either a geometry shader if present or the rasterizer otherwise.

Geometry shaders Geometry shaders are a relatively new type of shader. It can generate new graphics primitives, such as points, lines, and triangles, from those primitives that were sent to the beginning of the graphics pipeline. Geometry shader programs are executed after vertex shaders.

Pixel shaders Pixel shaders, also known as fragment shaders, compute color and other attributes of each fragment. Pixel shaders range from always outputting the same color, to applying a lighting value, to doing bump mapping, shadows, specular highlights, translucency and other phenomena. They can alter the depth of the fragment (for Z-buffering), or output more than one color if multiple render targets are active. In 3D graphics, a pixel shader alone cannot produce very complex effects, because it operates only on a single fragment, without knowledge of a scene's geometry

Fixed Functionality Pipeline

Per-Vertex Operations

The geometry processor runs a vertex shader program for each vertex. This shader program performs: lighting transforms viewport transformation perspective transformation vertex assembly of graphics primitives polygon list builds for the pixel processor.

Primitive Assembly

Receives Vertex data from Per-Vertex operations Vertex data combined into complete primitives  Points, lines, triangles

Clip/Project/Viewport Cull

Receives primitives from Primitives Assembly Clips the primitives against the view volume  Removing portions outside of the view Perspective projection Transformed by the viewport definition Polygons culled based on facing

Rasterize

Rasterization Receives Primitives from Clip/Project/Viewport cull Primitives deconstructed to the pixel coverage they should have in the frame buffer Each unit produces is a fragment

Fragment Processing

Fragment processing Fragment processing is a term in computer graphics referring to a collection of operations applied to fragments generated by the rasterization operation in the rendering pipeline. During the rendering of computer graphics, the rasterization step takes a primitive, described by its vertex coordinates with associated color and texture information, and converts it into a set of fragments.

Per-fragment operations

fragments undergo a series of processing steps: Pixel ownership test Alpha test Stencil test Depth test Blending

Frame Buffer Operations

Frame buffer operations Control region of the buffers in the Frame buffer that are drawn(written) to

Programmable locations in pipeline Programmable Location Vertex Shader Programmable Location Fragment Shader

Three types of function Data handling functions State settings functions Rendering functions

Data handling functions Persistent OpenGL data such as frame buffers, textures and VBOs (vertex buffer object) require basic memory management in the form of their provided creation/deletion functions glGenTextures( size, names); // generates one or more textures, size is number of textures // and names is an array in which to store the texture names (numeric IDs) glDeleteTextures( size, names); // deletes one or more textures, size is number of textures // and names is an array of existing texture names (numeric IDs)

OpenGL settings functions OpenGL provides lots of built in capabilities that can be enabled/disabled as needed. Expose settings through specific functions, for example to customize the various light's individual settings you can use the glLight() functions. glEnable( capability); // enable an OpenGL capability glDisable( capability); // disable an OpenGL capability glTranslate( x, y, z); // translates (offsets) the current matrix by x/y/z glRotate( angle, x, y, z); // rotates the current matrix: angle around x/y/z

Rendering functions There are only two functions that perform actual rendering in OpenGL, both render the current vertex data in a variety of modes using the current OpenGL settings. The difference between the two functions is that one expects vertex data to be explicitly ordered while the other uses an array of indices into the vertex data to specify order.

Rendering functions cont … glDrawArrays(); glDrawElements(); Using vertex arrays reduces the number of function calls and redundant usage of shared vertices. Therefore, you may increase the performance of rendering.

One program, two shaders Nothing in OpenGL can be rendered without using a custom program A program is made up of two shaders; the vertex shader and the fragment shader the vertex shader processes every vertex that has been passed to OpenGL, transforming the positions into clip space and setting up any values that should be interpolated across connected vertices such as colors or texture coordinates OpenGL then performs some magic and calls the fragment shader for every visible fragment providing the interpolated values for that fragment.

One program, two shaders The following diagram illustrates the roles of the vertex and fragment shaders, what they can read and what they should write. \

The vertex shader attribute vec4 position; // vertex position attribute attribute vec2 texCoord; // vertex texture coordinate attribute uniform mat4 modelView; // shader modelview matrix uniform uniform mat4 projection; // shader projection matrix uniform varying vec2 texCoordVar; // vertex texture coordinate varying void main() { vec4 p = modelView * position; // transform vertex position with modelview matrix gl_Position = projection * p; // project the transformed position and write it to gl_Position texCoordVar = texCoord; // assign the texture coordinate attribute to its varying

The fragment shader precision mediump float; // set default precision for floats to medium uniform sampler2D texture; // shader texture uniform varying vec2 texCoordVar; // fragment texture coordinate varying void main() { // sample the texture at the interpolated texture coordinate // and write it to gl_FragColor gl_FragColor = texture2D( texture, texCoordVar);