Thursday, February 18, 2010

How to make bloom effect without shaders

The "bloom light" effect will give this kind of result :


What we would like, it's to make it run on a device that does not support any shaders. The following method has been done using OpenGL ES 1.1 and a framebuffer object.

First you need to create a framebuffer object using glBindFramebufferOES() and co. (glBindFramebufferEXT for OpenGL). In my case, the framebuffer have the same size of the screen. (I have tried with smaller Framebuffer with no really gain of performances)
When you create this framebuffer, you must use the following parameter :

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);


Then, bind your framebuffer and set the viewport to 0,0,ScreenWidth>>1,ScreenHeight>>1 (Green square on picture).
Render all your objects that will be affected by bloom light and other objects in black color with no texture.
After that, reset the viewport to  0,0,ScreenWidth,ScreenHeight. Render a rectangle that will use this Framebuffer as texture. (Yes It works). This rectangle should have this size : ScreenWidth>>2,ScreenHeight>>2 and can be rendered at the top left of the framebuffer. Repeat the operation with rectangle size of ScreenWidth>>3,ScreenHeight>>3 and ScreenWidth>>4,ScreenHeight>>4.
Your framebuffer content should be as following :


Ok, now unbind your framebuffer to render on the screen. Render your scene as usual on the screen buffer.
Once, it's done, bind your framebuffer as a texture and render 4 rectangles of the screen size. Make texture coordinates match with each 4 thumbnails from framebuffer.
Use additive color blend while you render your square: glBlendFunc(GL_SRC_ALPHA, GL_ONE_BLEND);

Here the rendering process :


Note : 
Texture of ScreenWidth>>1,ScreenHeight>>1 = 1:2
Texture of ScreenWidth>>2,ScreenHeight>>2 = 1:4
Texture of ScreenWidth>>3,ScreenHeight>>3 = 1:8
Texture of ScreenWidth>>4,ScreenHeight>>4 = 1:16

First, render rectangle of 1:2 using alpha value of  10% over your final scene.
Repeat the operation for rectangles :

  • 1:4 with alpha 15%
  • 1:8 with alpha 34%
  • 1:16 with alpha 60%

That's done your bloom light effect is completed.
NOTE : This implementation depend on OpenGL ES driver implementation. On Acer liquid, if bloom is enable I get about 15 fps and if it's disabled I get 55-60 fps. On PC, I do not detect such performances fall.
If I found a way to improve performances, I will update this post.

Sources : http://developer.amd.com/media/gpu_assets/GDC06-GLES_Tutorial_Day-Ginsburg-Advanced_Rendering.pdf

Tuesday, February 16, 2010

Poseidon ported on Android.

Here a short video of an application that use Poseidon on Android.
The phone used is an Acer liquid.