OpenFrameworks Lections

Shaders

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

Denis Perevalov perevalovds@gmail.com

See in-depth details in my book Mastering openFrameworks Books 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 shaderBlurExample http://forum.openframeworks.cc/index.php?topic=2729.0)

Text shader
Create a file fragment shader blur.frag in folder bin/data:
# Extension GL_ARB_texture_rectangle: enable //Setup uniform sampler2DRect src_tex_unit0; //External parameter uniform 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 coordinates vec4 color; // accumulator for (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 shader
Create 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 # Include "ofxShader.h" // Draw the buffer // Shaders ofxFBOTexture buffer; ofxShader shader; ofVideoGrabber grabber; // Buffer // Shader // 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 buffer buffer.begin (); ofSetColor (255, 255, 255); grabber.draw (0, 0);// The output buffer frames from the camera buffer.end (); // Turn shader shader.setShaderActive (true); // Set the parameter shader float blurAmount = mouseX/20.0; // mouseX - current coordinate mouse shader.setUniformVariable1f ("blurAmount", blurAmount); // 1f - that is, a scalar of type float

// Draw what you want on the screen, "passing" it through shader ofSetColor (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 shaderZoomExample http://forum.openframeworks.cc/index.php?topic=2729.0)

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

# Extension GL_ARB_texture_rectangle: enable uniform sampler2DRect src_tex_unit0; uniform vec2 circlePos; // Position loop uniform float circleRadius; // Radius of the loop uniform 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 application

The 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 shader
Filezoom.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. Vortex Make the loop tightened inside the image. Hint: rotate a vector, depending on the value of dist/circleRadius. 2. Water 1 Shader 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 2 With 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.