How to use blur shaders

Hello,

I was reading a bit about shaders last night and saw that there is “built in” blur shader in the shader lab. Is this intended to be used like blur(img,width,height) straight in my code, or do I have to copy and paste the shader lab code into my own code before i can use it?

I cover all this in the ebook I linked you to in your other thread

also see this recent thread

http://codea.io/talk/discussion/6531/blur-shader-needed

@ignatz oh , i read the ebook, maybe I missed something, will go through again.

I also read all the blur posts that existed haha. But I couldn’t yet figure out how the gaussian work in codea. I know that its just a mass addition of pixels around a certain pixel, and I could recognise some of it, but its in a very unfamiliar form to me. i’ll keep looking at it.

Copy the code in the thread linked above and run it, play around with it, pull it apart (I think the last one has a comparison with the builtin blur shader). Also, in my code, I link to two of the articles I adapted it from, the discussions there are interesting too

The basics are set context the screen to an image, set that image as a meshes texture with a Gaussian blur shader with the x value set to a small amount, then write that image to another shader with the y value set to a small amount, and draw that to an image and sprite it. That’s the basic. If you put that in a loop for 5 or 6 times, the blur starts to look really good, downscaling helps too.

Starting to make sense now, there is a u and v shader function in the void main(), somehow the shader code is in another language (C?) but still works in the codea platform. That is so cool.

Im going to start attending random CS classes at university, it feels like ive missed a big chunk of knowledge and just prodding in the dark whenever I program lol

@yojimbo2000 I’ve copied a few different gaussian functions into codea, but it seems the part

vs = {[[

blanks out everything below it, is this intended?

Everything below it should be shaded in red. You can also hand copy the vertex shader and the fragment shader and paste them. Into the shader lab, then you can see a live result and mess around with it.

@mr_ninja Oh I think that is the part that is confusing me, So lets say I have copied all the gaussian code goes into the shader lab, I couldnt find how I can reference this in the main lua code?

@mr_ninja Oh wait I found it in ignatz’ pdf. just have to reference document:shader. Just for clarification though, does the shaders all export out to xcode ?

Ya, they export to xcode

@archistudent Copy this to the vertex shader


uniform mat4 modelViewProjection;
uniform vec2 blurRadius;
attribute vec4 position;
attribute vec2 texCoord;

varying vec2 vBlurCoords[5];

void main()
{
    gl_Position = modelViewProjection * position;
     vBlurCoords[0] = texCoord;
     vBlurCoords[1] = texCoord + blurRadius * 1.407333;
     vBlurCoords[2] = texCoord - blurRadius * 1.407333;
    vBlurCoords[3] = texCoord + blurRadius * 3.294215;
    vBlurCoords[4] = texCoord - blurRadius * 3.294215;

}

Copy this to the fragment shader


precision mediump float;

uniform lowp sampler2D texture;

varying vec2 vBlurCoords[5];

void main()
{
 //gl_FragColor = vec4(0.0);

    gl_FragColor = texture2D(texture, vBlurCoords[ 0]) * 0.304005; 
    gl_FragColor += texture2D(texture, vBlurCoords[ 1])* 0.204164; 
    gl_FragColor += texture2D(texture, vBlurCoords[ 2])* 0.204164; 
    gl_FragColor += texture2D(texture, vBlurCoords[ 3])* 0.093913; 
    gl_FragColor += texture2D(texture, vBlurCoords[ 4])* 0.093913; 
 
    }

@mr_ninja Cool thanks ninja, I am just trying it out now with shaderlab as well as in the main lua

Don’t thank me, thank @yojimbo2000 for making the shaders :wink:

@mr_ninja @yojimbo2000 yep I see his name everywhere lol thanks guys, nevertheless ive have another million questions or so to ask…

@archistudent I’m not sure why you’re having problems copying the code from the other thread. The examples there are fully functioning Codea projects. Ignore the shader lab, just run them as regular Codea projects. You do know about using the in-app “Codea Talk” browser (gives you a very handy copy button for all code snippets), and then “paste into project” for getting all the code with its tab structure intact, back into Codea?

Shaders are written in OpenGL Shader Language. It does look a bit like C. It shows up in red in Codea projects. But you already know that, because you read the shader e-book!

@yojimbo2000 Ah yes, I generally work in air-code so was momentarily confused when it didnt show up as red. When i checked it in the native code app, alas it did!

Everything is working now as it should, I appreciate the help :slight_smile: