Simple GLSL Image Processing

Started by
18 comments, last by DaveDavis 13 years ago
I've been working on my first game in OpenGL and C++ for a little while now, and I'm trying my hand at GLSL for some simple image processing effects. Specifically, I'm trying to implement a simple gaussian blur. However, I'm having difficulty understanding conceptually how this is supposed to work. Here's how I think it's supposed to go from reading various forum entries/tutorials online:

Setup (one time at the beginning of my game init code):
  1. Enable texturing (glEnable(GL_TEXTURE_2D), glGenTextures(...), glBindTexture(...), etc.)
  2. Load vertex/frag shaders (I'm loading from a file)
  3. Compile shaders
  4. Create shader program
  5. Link Shaders
  6. Check glGetInfoLogARB for errors

So far, so good (at least I see no output from the info log, so I'm assuming that's good).

Then, to render each frame:
  1. glUseProgram(my_shader_program_id)
  2. Render my frame normally
  3. glFlush() (?)
  4. glUseProgam(0) (stop using my shader?)
  5. glCopyTexImage2d(...) (Capture rendered output to a texture)
  6. Calculate texture offsets based on window size
  7. Pass texture offsets to shader using glUniform2fv(...) (I think that this isn't totally necessary if my window size is always the same, then I could have the same texture offsets, but not sure, I've seen a ton of different shader code for the fragment shader that does this in seemingly different ways)
  8. Render full screen quad (optionally changing projection matrix to make this easier...) with texture coords
  9. glFlush()

Does that sound about right? I think this is what I'm doing, but I'm getting really strange output. If this general approach looks correct, I'll post some more specific code, but I wanted to make sure I wasn't wasting anybody's time if I didn't have the concept correctly.
Advertisement
You're probably close, but theres a couple changes I would make:

#1) I don't think you ever need to call glFlush. The driver should keep track of what is dependent on what else, so you won't be able to pull from a texture or framebuffer until its ready.

#2) Instead of rendering your scene normally and then copying the texels to a texture, you can render directly into a texture via framebuffers. Look into the commands:
glGenFramebuffers
glBindFramebuffer
glFramebufferTexture

This should be a lot more efficient.

#3) When you render the fullscreen quad, you definately don't want to use the same projection matrix. The easiest is to just use no matrix at all (define input coordinates in normalized device coordinates). Just draw your quad with vertices (+/-1, +/-1, 0) and that will align with the fullscreen without any transform required.
[size=2]My Projects:
[size=2]Portfolio Map for Android - Free Visual Portfolio Tracker
[size=2]Electron Flux for Android - Free Puzzle/Logic Game
You're probably close, but theres a couple changes I would make:

#1) I don't think you ever need to call glFlush. The driver should keep track of what is dependent on what else, so you won't be able to pull from a texture or framebuffer until its ready.

#2) Instead of rendering your scene normally and then copying the texels to a texture, you can render directly into a texture via framebuffers. Look into the commands:
glGenFramebuffers
glBindFramebuffer
glFramebufferTexture

This should be a lot more efficient.

#3) When you render the fullscreen quad, you definately don't want to use the same projection matrix. The easiest is to just use no matrix at all (define input coordinates in normalized device coordinates). Just draw your quad with vertices (+/-1, +/-1, 0) and that will align with the fullscreen without any transform required.


Ok, I'll give [s]that[/s] framebuffers a shot at some point, but I'm not very concerned with efficiency at this point, just want to get it working :) I've read about framebuffers though and it does seem like they are often used for this purpose, and if it makes it easier I'm all for it.

As I was re-reading my post this morning, I think I either made a mistake in my explanation above (and probably my implementation, but I'm at work so can't check my code right now), or I REALLY don't understand how the OpenGL pipeline works.

I think I need to swap steps 1 and 4 of the render portion, i.e. I need to render my normal frame WITHOUT my shaders first, then capture the screen as a texture, enable my blur shader and re-render, then map that to a quad. Otherwise, it doesn't seem to make sense to me (i.e., it seems like the only reason we need the texture is to pass the data in to the shader, since a blur shader needs to know about surrounding pixel data, and the fragment shader otherwise doesn't know about surrounding fragments...please correct me if I'm wrong about this though).

Also, I'm currently using an Orthographic projection (I'm building a Geometry Wars clone just to learn game programming so it's 2D), so would I still need to alter my projection matrix? I think I should easily be able to use my current projection matrix, but I could be wrong about this as well (all the example code for 3D does this by setting it back to normal I believe and using 0,1 (or -1,1, can never keep it straight...), but I was thinking I could skip this step since I already have an orthographic projection.

Thanks for your reply! I'll try swapping steps 1 and 4 of the render piece later when I get back, and if that doesn't work I'll try to come up with some example code to show the problem I'm having.

As I was re-reading my post this morning, I think I either made a mistake in my explanation above (and probably my implementation, but I'm at work so can't check my code right now), or I REALLY don't understand how the OpenGL pipeline works.

I think I need to swap steps 1 and 4 of the render portion, i.e. I need to render my normal frame WITHOUT my shaders first, then capture the screen as a texture, enable my blur shader and re-render, then map that to a quad. Otherwise, it doesn't seem to make sense to me (i.e., it seems like the only reason we need the texture is to pass the data in to the shader, since a blur shader needs to know about surrounding pixel data, and the fragment shader otherwise doesn't know about surrounding fragments...please correct me if I'm wrong about this though).
[/quote]

Yeah, this sounds right. I'm used to using a shader for everything, so it looked right to me to have a shader bound to render your scene. If thats your blur shader you want it active during step 8.


Also, I'm currently using an Orthographic projection (I'm building a Geometry Wars clone just to learn game programming so it's 2D), so would I still need to alter my projection matrix? I think I should easily be able to use my current projection matrix, but I could be wrong about this as well (all the example code for 3D does this by setting it back to normal I believe and using 0,1 (or -1,1, can never keep it straight...), but I was thinking I could skip this step since I already have an orthographic projection.
[/quote]
You could make it work with an orthographic projection matrix, but my point was that you don't have to use a matrix at all. If you define your quad's input coordinates in NDC, than you can just let this be your vertex shader:


in vec2 vertex;
out vec2 texcoord;

main () {
gl_Position = vec4(vertex,0,1); //no matrix multiplies necessary
texcoord = vertex*0.5 + 0.5; //scale -1/1 range to 0/1;
}

[size=2]My Projects:
[size=2]Portfolio Map for Android - Free Visual Portfolio Tracker
[size=2]Electron Flux for Android - Free Puzzle/Logic Game

You could make it work with an orthographic projection matrix, but my point was that you don't have to use a matrix at all. If you define your quad's input coordinates in NDC, than you can just let this be your vertex shader:


in vec2 vertex;
out vec2 texcoord;

main () {
gl_Position = vec4(vertex,0,1); //no matrix multiplies necessary
texcoord = vertex*0.5 + 0.5; //scale -1/1 range to 0/1;
}




Awesome, yeah that would be ideal. I think I'll take your suggestions and try to implement them in a simple example (FBO + your simple vertex shader above) and then see if I can port it over to my game code. I need to move away from using glBegin()/glEnd() eventually anyway and move to vertex arrays or VBO's at some point too, but want to avoid a total re-write :)




Ok, I took a quick shot at using an FBO instead of drawing and then copying it to a texture. I must be doing something wrong, because all I get is a white screen, but I don't get any errors, so I feel like I'm close. I haven't implemented shader stuff yet, but that's next.

Here's the code:

https://gist.github.com/916742

You can comment out the FBO binding in the draw method as well as the "drawTexturedQuad" function call, and you'll see the normal frame.
There may be other issues as well, but for one thing you're not allowed to have a texture bound to a sampler at the same time you are writing to it, you'll get undefined behaviour. Unbind the texture from the sampler when you're writing to the framebuffer, and unbind the framebuffer when you're reading from the texture.

Once you start working with offscreen rendertargets, it's probably a good idea to go pick up a free copy of gdebugger, it will make your life a lot easier.

EDIT:

Also you have to bind the framebuffer to attach a texture to it:

glGenFramebuffers(1, &fbo_id);
glBindFramebuffer(GL_FRAMEBUFFER,fbo_id); //NEW
glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, tex_id, 0);
glBindFramebuffer(GL_FRAMEBUFFER, 0); //NEW
[size=2]My Projects:
[size=2]Portfolio Map for Android - Free Visual Portfolio Tracker
[size=2]Electron Flux for Android - Free Puzzle/Logic Game

There may be other issues as well, but for one thing you're not allowed to have a texture bound to a sampler at the same time you are writing to it, you'll get undefined behaviour. Unbind the texture from the sampler when you're writing to the framebuffer, and unbind the framebuffer when you're reading from the texture.

Once you start working with offscreen rendertargets, it's probably a good idea to go pick up a free copy of gdebugger, it will make your life a lot easier.

EDIT:

Also you have to bind the framebuffer to attach a texture to it:

glGenFramebuffers(1, &fbo_id);
glBindFramebuffer(GL_FRAMEBUFFER,fbo_id); //NEW
glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, tex_id, 0);
glBindFramebuffer(GL_FRAMEBUFFER, 0); //NEW



Hmmm, I added that code, and added two lines to the draw method (to try not to have texture/fbo bound at the same time per your suggestion), but still same all-white screen. Perhaps I'm not doing it correctly though? I updated the gist with the new code in the draw method.
For reference, I'm reading this article on FBO's:

http://www.gamedev.net/page/resources/_//feature/fprogramming/opengl-frame-buffer-object-101-r2331

The first thing they do in the article is create a renderbuffer for use as a depth buffer. Is this something I need to do as well? I would think I don't need depth information considering I'm doing everything in 2d...but then again I don't fully understand FBO's yet so...
I'm pretty sure you don't need a depth attachment if you don't want one, you should be able to render fine to just a color attachment. Be sure to disable depth test and depth write though when drawing to the FB.
[size=2]My Projects:
[size=2]Portfolio Map for Android - Free Visual Portfolio Tracker
[size=2]Electron Flux for Android - Free Puzzle/Logic Game

This topic is closed to new replies.

Advertisement