Thursday, 14 November 2013

Framebuffer objects in OpenGL ES 2

Maybe fully understanding framebuffer objects (FBO) is indeed difficult, as it says on the OpenGL page dedicated to the topic. But writing a basic example is quite straightforward. It almost made me bang my head on the desk though, but it was only because of a very silly mistake. Make sure you first check your FloatBuffers & IndexBuffers before worrying about what might have went wrong with your FBO.

I assume you're here because you're looking for a very basic example of how to use FBO. That's exactly what you're going to find.

Although I am far from understanding the topic, here are some basic thoughts that helped me make some initial steps:
1. The default framebuffer is your screen. This is what you use in general.
2. However, in certain situations, you may choose to first draw your stuff to an "imaginary" screen that has its own framebuffer. To set up this imaginary screen, you need to create a FBO.
3. Draw whatever you want to your custom FBO. This results in a texture. When you're done and you want to display things on your screen, switch to the default framebuffer.
4. Render the above texture just as any other texture. You need an additional program for this in which you may add whatever nice effects you want to the resulted texture.

These very simple points, no matter how primitive (or even slightly inaccurate), helped me make some progress on the topic. Let's see some code now.
FBO

Btw, you may want to use static imports in order to avoid writing GLES20 whenever you use OpenGL ES 2 methods/fields.

LE: I thought I should also include the shaders I'm using above. The basic shaders:

Basic shaders

And the texture shaders:
Basic texture shaders