Sign in to follow this  
DaveDavis

OpenGL Simple GLSL Image Processing

Recommended Posts

DaveDavis    100
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):
[list=1][*]Enable texturing (glEnable(GL_TEXTURE_2D), glGenTextures(...), glBindTexture(...), etc.)[*]Load vertex/frag shaders (I'm loading from a file)[*]Compile shaders[*]Create shader program[*]Link Shaders[*]Check glGetInfoLogARB for errors[/list]
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:
[list=1][*]glUseProgram(my_shader_program_id)[*]Render my frame normally[*]glFlush() (?)[*]glUseProgam(0) (stop using my shader?)[*]glCopyTexImage2d(...) (Capture rendered output to a texture)[*]Calculate texture offsets based on window size[*]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)[*]Render full screen quad (optionally changing projection matrix to make this easier...) with texture coords[*]glFlush()[/list]
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.

Share this post


Link to post
Share on other sites
karwosts    840
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.

Share this post


Link to post
Share on other sites
DaveDavis    100
[quote name='karwosts' timestamp='1302577753' post='4797364']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.
[/quote]

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.

Share this post


Link to post
Share on other sites
karwosts    840
[quote]
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.

[quote]
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:

[code]
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;
}

[/code]

Share this post


Link to post
Share on other sites
DaveDavis    100
[quote name='karwosts' timestamp='1302624380' post='4797540']
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:

[code]
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;
}

[/code]
[/quote]

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 :)




Share this post


Link to post
Share on other sites
DaveDavis    100
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:

[url="https://gist.github.com/916742"]https://gist.github.com/916742[/url]

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.

Share this post


Link to post
Share on other sites
karwosts    840
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:
[code]
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
[/code]

Share this post


Link to post
Share on other sites
DaveDavis    100
[quote name='karwosts' timestamp='1302655344' post='4797728']
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:
[code]
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
[/code]
[/quote]

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.

Share this post


Link to post
Share on other sites
DaveDavis    100
For reference, I'm reading this article on FBO's:

[url="http://www.gamedev.net/page/resources/_//feature/fprogramming/opengl-frame-buffer-object-101-r2331"]http://www.gamedev.net/page/resources/_//feature/fprogramming/opengl-frame-buffer-object-101-r2331[/url]

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...

Share this post


Link to post
Share on other sites
karwosts    840
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.

Share this post


Link to post
Share on other sites
DaveDavis    100
[quote name='karwosts' timestamp='1302657944' post='4797741']
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.
[/quote]


Is depth test enabled by default? I thought I would have to explicitly enable it with glEnable(GL_DEPTH_TEST). If I'm not doing that, should I have to worry about it?

Share this post


Link to post
Share on other sites
karwosts    840
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR_MIPMAP_LINEAR);

This is a problem if you don't build mipmaps. If you're not using them, you have to set the minfilter to not use mipmapping (GL_LINEAR for example), otherwise it won't sample the texture.

[url="http://www.opengl.org/wiki/Common_Mistakes#Creating_a_Texture"]http://www.opengl.org/wiki/Common_Mistakes#Creating_a_Texture[/url]


Also this:
glGenFramebuffers(1, &fbo_id);
glBindFramebuffer(GL_FRAMEBUFFER, 1);

You probably meant to bind fbo_id, not "1". It may work but it is prone to breaking.

[quote]
Is depth test enabled by default? I thought I would have to explicitly enable it with glEnable(GL_DEPTH_TEST). If I'm not doing that, should I have to worry about it?
[/quote]

You're right, its disabled by default. You should be fine.

Share this post


Link to post
Share on other sites
DaveDavis    100
Ok cool, I figured it out. It was partially the GL_MIN_TEXTURE_FILTER I was using as you mentioned, and partially the way I was binding/unbinding textures and FBO, etc.

This stackoverflow question helped a bit: [url="http://stackoverflow.com/questions/3466736/render-to-fbo-not-working-gdebugger-says-otherwise"]http://stackoverflow.com/questions/3466736/render-to-fbo-not-working-gdebugger-says-otherwise[/url]

And I've updated the gist new code: [url="https://gist.github.com/916742"]https://gist.github.com/916742[/url]

On to implementing my blur shader... :)

Share this post


Link to post
Share on other sites
DaveDavis    100
Alright, I've tried to implement a blur shader with some gaussian blur code I found, but no luck.

I've updated the gist at [url="https://gist.github.com/916742"]https://gist.github.com/916742[/url], but the main problem is at line 274. The program always fails here with the message "linking with uncompiled shader". I can't seem to find much helpful online about this error, so if anyone has any ideas I'm all ears. I've included the shader source files at the bottom of the gist as well for reference.

Share this post


Link to post
Share on other sites
kiwibonga    183
I'm still learning and using copy-pasted code from tutorials, so I have no idea if this is your problem, but here's the code I'm using to accomplish something similar:


[code]
myShader = glCreateProgramObjectARB();

myFragShader = glCreateShaderObjectARB(GL_FRAGMENT_SHADER_ARB);
glShaderSourceARB(myFragShader,1,&myFragShaderSource,0);
glCompileShaderARB(myFragShader);
glAttachObjectARB(myShader, myFragShader);

glLinkProgramARB(myShader);[/code]


I notice that you create your vert and frag shaders using glCreateShader, whereas I use glCreateShader[b]Object[/b], and then attach that to the main shader program... Maybe this is it?

Share this post


Link to post
Share on other sites
karwosts    840
I'm pretty sure glCreateShader is the right code. I've never even heard of glCreateShaderObject, and I can't find any documentation on it except for a couple blurbs from some powerpoint presentations from like 2002.

I'm going to guess that that's some extension that was around in the very early days of shading languages, but glCreateShader should be the correct way.

Share this post


Link to post
Share on other sites
DaveDavis    100
[quote name='karwosts' timestamp='1302809812' post='4798523']
I'm pretty sure glCreateShader is the right code. I've never even heard of glCreateShaderObject, and I can't find any documentation on it except for a couple blurbs from some powerpoint presentations from like 2002.

I'm going to guess that that's some extension that was around in the very early days of shading languages, but glCreateShader should be the correct way.
[/quote]

I think you're right, a quick google for glCreateShaderObject doesn't seem to return anything useful. I'm still trying to figure out when to use the "*ARB" methods; it seems like you have to use some of them still, but most of the time I'm using the non-ARB methods.

I have a feeling it has something to do with the shader code, since I don't get that method if I change the fragment shader to a simple pass-through frag shader, but the results from the compile log for the gauss2.fs shader don't report anything wrong, so I'm kind of lost at this point.


Share this post


Link to post
Share on other sites
kiwibonga    183
Oh yeah, should have tested... glCreateShaderObject isn't even defined in my environment.

glCreateShaderObjectARB is provided by GLEW I believe, and there's no glCreateShaderARB.

Replacing the call with plain "glCreateShader" produces the exact same result.

Share this post


Link to post
Share on other sites
DaveDavis    100
Ok, so I've updated my gist with the working code: [url="https://gist.github.com/916742"]https://gist.github.com/916742[/url]

The main thing to notice is that the fragment shader has changed quite a bit: no more use of the "const" keyword, and no more initializing the offsets and gaussian kernel weights during the declaration (or even in loops). I'm not sure why I can't do that, but I'm guessing it's because my laptop is using an intel integrated graphics chip that doesn't support the most current GLSL language. That's the only thing I can guess, I've yet to test the old frag shader code on my desktop (which is nvidia).

Anyway, hopefully this helps someone else in the future.

Share this post


Link to post
Share on other sites
DaveDavis    100
Just updated the [url="https://gist.github.com/916742#comments"]gist[/url] so that the texture offsets and kernel weights are calculated in the main program and then passed into the shader, since we should only have to calculate those once at the beginning of the program.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Similar Content

    • By Arulbabu Donbosco
      There are studios selling applications which is just copying any 3Dgraphic content and regenerating into another new window. especially for CAVE Virtual reality experience. so that the user opens REvite or CAD or any other 3D applications and opens a model. then when the user selects the rendered window the VR application copies the 3D model information from the OpenGL window. 
      I got the clue that the VR application replaces the windows opengl32.dll file. how this is possible ... how can we copy the 3d content from the current OpenGL window.
      anyone, please help me .. how to go further... to create an application like VR CAVE. 
       
      Thanks
    • By cebugdev
      hi all,

      i am trying to build an OpenGL 2D GUI system, (yeah yeah, i know i should not be re inventing the wheel, but this is for educational and some other purpose only),
      i have built GUI system before using 2D systems such as that of HTML/JS canvas, but in 2D system, i can directly match a mouse coordinates to the actual graphic coordinates with additional computation for screen size/ratio/scale ofcourse.
      now i want to port it to OpenGL, i know that to render a 2D object in OpenGL we specify coordiantes in Clip space or use the orthographic projection, now heres what i need help about.
      1. what is the right way of rendering the GUI? is it thru drawing in clip space or switching to ortho projection?
      2. from screen coordinates (top left is 0,0 nd bottom right is width height), how can i map the mouse coordinates to OpenGL 2D so that mouse events such as button click works? In consideration ofcourse to the current screen/size dimension.
      3. when let say if the screen size/dimension is different, how to handle this? in my previous javascript 2D engine using canvas, i just have my working coordinates and then just perform the bitblk or copying my working canvas to screen canvas and scale the mouse coordinates from there, in OpenGL how to work on a multiple screen sizes (more like an OpenGL ES question).
      lastly, if you guys know any books, resources, links or tutorials that handle or discuss this, i found one with marekknows opengl game engine website but its not free,
      Just let me know. Did not have any luck finding resource in google for writing our own OpenGL GUI framework.
      IF there are no any available online, just let me know, what things do i need to look into for OpenGL and i will study them one by one to make it work.
      thank you, and looking forward to positive replies.
    • By fllwr0491
      I have a few beginner questions about tesselation that I really have no clue.
      The opengl wiki doesn't seem to talk anything about the details.
       
      What is the relationship between TCS layout out and TES layout in?
      How does the tesselator know how control points are organized?
          e.g. If TES input requests triangles, but TCS can output N vertices.
             What happens in this case?
      In this article,
      http://www.informit.com/articles/article.aspx?p=2120983
      the isoline example TCS out=4, but TES in=isoline.
      And gl_TessCoord is only a single one.
      So which ones are the control points?
      How are tesselator building primitives?
    • By Orella
      I've been developing a 2D Engine using SFML + ImGui.
      Here you can see an image
      The editor is rendered using ImGui and the scene window is a sf::RenderTexture where I draw the GameObjects and then is converted to ImGui::Image to render it in the editor.
      Now I need to create a 3D Engine during this year in my Bachelor Degree but using SDL2 + ImGui and I want to recreate what I did with the 2D Engine. 
      I've managed to render the editor like I did in the 2D Engine using this example that comes with ImGui. 
      3D Editor preview
      But I don't know how to create an equivalent of sf::RenderTexture in SDL2, so I can draw the 3D scene there and convert it to ImGui::Image to show it in the editor.
      If you can provide code will be better. And if you want me to provide any specific code tell me.
      Thanks!
    • By Picpenguin
      Hi
      I'm new to learning OpenGL and still learning C. I'm using SDL2, glew, OpenGL 3.3, linmath and stb_image.
      I started following through learnopengl.com and got through it until I had to load models. The problem is, it uses Assimp for loading models. Assimp is C++ and uses things I don't want in my program (boost for example) and C support doesn't seem that good.
      Things like glVertexAttribPointer and shaders are still confusing to me, but I have to start somewhere right?
      I can't seem to find any good loading/rendering tutorials or source code that is simple to use and easy to understand.
      I have tried this for over a week by myself, searching for solutions but so far no luck. With tinyobjloader-c and project that uses it, FantasyGolfSimulator, I was able to actually load the model with plain color (always the same color no matter what I do) on screen and move it around, but cannot figure out how to use textures or use its multiple textures with it.
      I don't ask much: I just want to load models with textures in them, maybe have lights affect them (directional spotlight etc). Also, some models have multiple parts and multiple textures in them, how can I handle those?
      Are there solutions anywhere?
      Thank you for your time. Sorry if this is a bit confusing, English isn't my native language
  • Popular Now