OpenFrameworks Lections

Shaders

http://pixelnoizz.files.wordpress.com/2009/08/picture-54.png?w=510&h=259

Denis Perevalovperevalovds@gmail.com

See in-depth details in my book

“Mastering openFrameworks”

Book’s examples are free, see

masteringof.wordpress.com

What is a shader

1.Shaders now commonly referred to small programs that graphics card is used to change the geometry of objects and the pixels of images during rendering.

2. There are the vertex and fragment (pixel) shaders.

3. Shaders are executed on the graphics card and therefore will not load CPU. Therefore, they can be used to carry out some very interesting and complex transformations and effects.

What is a shader

Shaders are small programs written in GLSL.

They can be stored in text files. When starting your application, they will be compiled and stored in video memory.

This is convenient because it can change and customize the shaders without having to recompile the application itself.

What do you want to use shaders in OpenFrameworks

In this lecture, we discuss how to use fragment shaders to transform images into openFrameworks.

Required components:

1. Addon ofxFBOTextureDrawing in the buffer:ofxFBOTexture.h, ofxFBOTexture.cpp (see "Drawing in buffer" in a lecture at a two-dimensional graphics).

2. Addon ofxShader loading/unloading of shaders:ofxShader.h, ofxShader.cpp

You can download them, for example,http://playbat-common.googlecode.com/svn/trunk/of/

Example 1. Smoothing

http://www.youtube.com/watch?v=Nkr4JiU0sF0

Smoothing here is implemented by combining shifted images with different weights. The radius of the shift will be determined by X-coordinate of the mouse.

(The idea was taken from the example shaderBlurExamplehttp://forum.openframeworks.cc/index.php?topic=2729.0)

Text shaderCreate a file fragment shader blur.frag in folder bin/data:

# Extension GL_ARB_texture_rectangle: enable //Setupuniform sampler2DRect src_tex_unit0; //External parameteruniform float blurAmount; //External parameter - the radius of the smoothing

void main (void) // This function will be applied to each pixel{

vec2 st = gl_TexCoord [0]. st; // st - vector of input pixel coordinatesvec4 color; // accumulatorfor (float i = -4.0; i <= 4.0; i + +) {

float weight = 5.0 - abs (i); color + = weight * texture2DRect (src_tex_unit0, st + vec2 (blurAmount * i, 0));

// Get pixel color from the texture src_tex_unit0,//Coordinates x = st [0] + blurAmount * i, //Y = st [1]

}color /= 25.0;gl_FragColor = color; // Set the output pixel color

}

! Be careful: Compiler do not automatically converts float <-> int, writes warning and the shader does not run.

Text shaderCreate a file vertex shader blur.vert in folder bin/data:

void main () {gl_TexCoord [0] = gl_MultiTexCoord0;gl_Position = ftransform ();}

This vertex shader, which does not change anything. Just ofxShader for work needed and the file.

The text of the application# Include "ofxFBOTexture.h” // Draw the buffer# Include "ofxShader.h" // Shaders

ofxFBOTexture buffer; // BufferofxShader shader; // ShaderofVideoGrabber grabber; // Capture images from the camera

void testApp::setup () {

ofBackground (255,255,255); grabber.initGrabber (640, 480); // start the camera

buffer.allocate (640, 480, true); //true - auto clear background at every step

//Load the shaders from files blur.frag and blur.vert. //At startup, if there are errors in the text of the shader, they will be on display,//With the row number with an error.shader.loadShader ("blur");

}

void testApp::update () {

grabber.update (); // update the pictures with the camera}

The text of the application

void testApp::draw () {

// First harvests picture - draw it into the bufferbuffer.begin ();ofSetColor (255, 255, 255);grabber.draw (0, 0);// The output buffer frames from the camera

buffer.end ();

// Turn shadershader.setShaderActive (true);// Set the parameter shaderfloat blurAmount = mouseX/20.0; // mouseX - current coordinate mouseshader.setUniformVariable1f ("blurAmount", blurAmount); // 1f - that is, a scalar of type float

// Draw what you want on the screen, "passing" it through shaderofSetColor (255, 255, 255);buffer.draw (0, 0);

// Disable shader

shader.setShaderActive (false);}

Example 2. Magnifier

http://www.youtube.com/watch?v=H-mYdfaku90

“Magnifying glass“ effect appears at the mouse pointer.

(The idea was taken from the example shaderZoomExamplehttp://forum.openframeworks.cc/index.php?topic=2729.0)

Text shaderCreate a file fragment shader zoom.frag folder bin/data:

# Extension GL_ARB_texture_rectangle: enableuniform sampler2DRect src_tex_unit0;uniform vec2 circlePos; // Position loopuniform float circleRadius; // Radius of the loopuniform float zoom; // Magnification factor in the loop

void main (void){

vec2 st = gl_TexCoord [0]. st;float relX = st.s - circlePos.x;float relY = st.t - circlePos.y;float dist = sqrt (relX * relX + relY * relY);if (dist <= circleRadius & & dist> 0.0) { // If the pixel in the loop and not the center (as divided by dist)

float newRad = dist * (zoom * dist/circleRadius);float newX = circlePos.x + relX/dist * newRad;float newY = circlePos.y + relY/dist * newRad; gl_FragColor = texture2DRect (src_tex_unit0, vec2 (newX, newY));

}else {

gl_FragColor = texture2DRect (src_tex_unit0, st);}

}In addition, create a file vertex shader zoom.vert by copying blur.vert

The text of the applicationThe basis - the text of the previous example.

in the setup ()shader.loadShader ("zoom");

in the draw ()

//Set the parameters of the shader

shader.setUniformVariable2f ("circlePos", mouseX, 480 - mouseY);shader.setUniformVariable1f ("circleRadius", 120); shader.setUniformVariable1f ("zoom", 1.5);

Color operations

We learned how to combine colors and pixels to produce a geometric transformation of the image.

How to change the color values:Color - a type of vec4, is a vector of 4 components R, G, B, Alpha,which take values from 0 to 1.

vec4 color = vec4 (1.0, 0.0, 0, 1.0); //red color

color [0],color [1],color [2],color [3] - R, G, B, Alpha - components.

Consider another example.

Example 3. Loop with the change of colors

The modified loop from the previous example in which the flowers inside the loop swapped R, G, B components.

Text shaderFilezoom.fragfolderbin/data:

replace string

gl_FragColor = texture2DRect (src_tex_unit0, vec2 (newX, newY));

on

vec4 color = texture2DRect (src_tex_unit0, vec2 (newX, newY));

gl_FragColor = vec4 (color [1], color [2], color [0], color [3]); //Mixing color components

Homework

1. VortexMake the loop tightened inside the image.

Hint: rotate a vector, depending on the value of dist/circleRadius.

2. Water 1Shader language have sin, cos and atan functions.Make wavy distortion of the image on the screen from the center of the screen.As if dropped something in the water in the middle of the screen.Ie this should be a video, not static image.

3. Water 2With the help of mouse clicks to simulate drop something in the water in the picture.Realize this, for example, by simulating the texture oscillation amplitude waves.