Tuesday, May 5, 2009

Programming: Multipass rendering using GLSL and OpenGL (part 1)

In one of my previous assignment, I needed to build a multipass image processing using GLSL and then render it as a texture to a sphere. Applying one image processing filter such as blur is not that hard. But doing it 3 times need a little trick. In this assignment, I was asked to build a 3 times filtered texture (an earth texture) and then apply it to a sphere. In the first part, I will only explain the overall method of doing it. I will put the details in part 2. So this is how I do it:

To make it easier, I only applied blur 3 times as I wont have to much details on GLSL. I used frame buffer object to do this. Frame buffer object is a buffer where you can keep the rendered image and print it as a texture. So for example you want to do a dynamic texture, instead of using lots of images, you can render the texture to the frame buffer object, do the modification you want to do(in this case, using GLSL, bluring the image), and put it on a texture. 


Now imagine doing this 3 times before you use the texture. I use 3 frame buffer object(fbo1, fbo2, fbo3), each with their own depth buffer and texture. First, I bind the first frame buffer, draw the texture to the screen, do the blurring, and from here you got your first texture blurred one time. Now this frame buffer object, will keep the result image in  its texture(I put tex1 as fbo1's texture). Now to do the second blur effect, I draw tex1 to the screen, do the blurring, and fbo2 will draw it to tex2. The same thing happen to the last frame buffer object.

So now I have the texture blurred 3 times. The last thing is to easily apply the texture to the object.  Its that easy. The only thing that you need to concern is the image you render on the viewport, will be written in the texture, so make sure you set the viewport exactly the same size as the image. If you dont do this, you will have unwanted blank space surrounding the texture. 

So there you go. Multipass rendering using frame buffer object. For details in how I do it, stay tune for part 2 ;)

2 comments:

Anonymous said...

Where is part 2 :(

I still can't find how to do this in OpenGL ES >_<

Jos Timanta said...

sorry i'll work on it asap. cant do OpenGL es though :)