Bloom effect

Hi, I hope someone can help me with this:) I am trying to create the famous bloom effect, something like this:



The problem is that I have no idea how I could do in wii, I have experiment with the tev, but I got nothing : (. Does anyone have any idea how something like this could be implemented in wii?

thanks :)

Here's the super-simple software way to do it:

1) Make a copy of the framebuffer into a new texture. To speed up the following steps, you can make this copied texture a smaller size than the actual framebuffer. i.e. 160x120 pixels
2) Apply some kind of threshold filter to the new texture. A contrast filter works well.
3) Blur the texture
4) Render the texture over the scene with an additive blend.

You can experiment with this effect in a paint program like GIMP. Load an image, duplicate the layer, crank up the contrast, Gaussian blur it, and set the layer blend mode to 'addition'.



Edited 1 time(s). Last edit at 02/04/2010 10:35PM by DrTwox.

DrTwox Hi, thanks for answering my problem is I can not do what you've explained :D, I mean more or less I know the theory, in opengl could implement it, but do not know how to do it on wii XD, for example,

How do I make a copy of the frame buffer in another texture?
How do I apply some kind of threshold filter to the new texture?
etc ... XD

Could you show me some simple example or something? I'd be very grateful :)

thanks! ;)

Have a look at the GRRLIB sources; in there you will find Screen2Texture, a blur function and how to change the blend mode when drawing. Here is a small app with a contrast function you could adapt to suit your needs.

i think you're referring to models in 2d, (sorry if I get confused), but I want to use it, in to a 3D model, like this:





Edited 1 time(s). Last edit at 02/05/2010 02:54AM by copete23.

I'm certain Twilight Princess uses the method I described. It's not a 3d effect, it's an effect you apply to the rendered scene before sending it to the display device. For example, in the picture below, imagine that the first picture is your 3d scene, rendered and ready to send to the display device. The second picture has a threshhold filter applied for the bloom. The third picture uses a contrast filter for a different bloom effect.




Edited 1 time(s). Last edit at 02/05/2010 08:14AM by DrTwox.

Ok, ok, I think I understand, :D, for example I use Screen2Texture to capture a screenshoot of the scene, updated frame by frame, then draw the captured picture (like a 2d image) , and apply the effects in that picture (blur, blending, contrast ... .); Is that right?

Yes, that's correct. You might find this article helpful too: http://www.gamasutra.com/features/20040526/james_01.shtml

Thank you very much for the help DrTwox, I've been doing some tests, and I managed to add the blur effect, and works well, but at 0.5 fps XDD consumes much cpu.
for the blur I used one of the functions of grrlib, GRRLIB_BMFX_Blur, but to work I put this function into the main loop, and that makes it consumes many resources : ( I have no idea how to do it to run well.

This is how I'm doing:

main(){
create a empty texture
tex_screen = GRRLIB_CreateEmptyTexture (rmode-> fbWidth, rmode-> efbHeight);

blur_tex = GRRLIB_CreateEmptyTexture(tex_screen.w, tex_screen.h);


While(1){

Screen2Texture(0, 0, tex_screen, 0);
GRRLIB_BMFX_Blur(tex_screen, blur_tex, 5);

Draw2d();
GRRLIB_DrawImg(0, 0,blur_tex, 0, 1, 1, -100);
GRRLIB_FlushTex(blur_tex);
......
....
}
}


Of course this works very badly, but I can think of no other way to send the screen data to blur_tex : ( ¿?

You will need to write a function that scales the tex_screen texture down to a smaller size before blurring it. Presuming the screen is 640x480 pixels, and you are applying a blur factor of 5, that's approx 1536000 calculations per frame to create the blur texture. If you can scale the tex_screen image down, you can reduce the number of computations in the blur function. To further optimize the process, you can write a faster blur function; the GRRLIB blur function is very slow!



Edited 1 time(s). Last edit at 02/06/2010 04:54AM by DrTwox.

It's true the blur function of grrlib is very bad for this, but I do not have enough knowledge to make my own blur system :( . I've tried to rescaling the image but I've only got 8fps (64X64 pixels) XD ..... perhaps this is too complicated for me.

This might do the trick:
-Draw your scene
-Copy it to an texture (T1)
-Draw the texture T1 to the screen, but with a smaller size (64x64)
-Copy the 64x64 to a different texture T2
-Draw T1 back to the screen, fullsize
-Draw T2 on top of it with the blending/contrast you need for it.

Blur without doing blur in software.

I modified one of the GRRLIB examples to render with a bloom/glow effect. The following link has the .dol and source. It's very hackish, and any competent programmer would probably find dozens of problems... but it does work. The texture blur is probably the smelliest part, and begs to be cleaned up and written properly, but I'll leave that exercise to someone else. The #defines in the source code are to remove some magic-number voodoo; I wouldn't go adjusting the values and expect things to still work!

Bloom/glow example

Let me know if you do anything with it!

Wow, thank you very much, that's great, I will study carefully this example, I'm sure it will be very instructive for me : D really thank you very much for your attempt DrTwox.

you are the best. Ok, I'll tell you if i do anything with it


PD: sorry for my horrible English.



Edited 1 time(s). Last edit at 02/07/2010 04:22PM by copete23.

copete23,

I updated the bloom code/demo in the above link. The blur code is much neater and faster now. Plus, there are now five constants you can tweak to adjust the bloom effect: width and height of the bloom texture, blur radius, threshold and alpha. Have fun!

Thank you very much again DrTwox, I was modifying the previous version to adjust the effect, but your new version is much better :D but, I think something is wrong with _Getpixel function, because the image of the game, is with a red tone (as I can I put you a screenshot), I'm not sure, why this happens, at first it appeared an error message,

looking at the code of the function _Getpixel, I saw that there was a missing piece of information:
rgbaPixel_u pixel = (?. rgba = (r <<24) | (((u32 )(*(( u16 *) (bp + offs +32)))) <<8) | (r>> 8));

I put this:
rgbaPixel_u pixel = (pixel.rgba = (r <<24) | (((u32 )(*(( u16 *) (bp + offs +32)))) <<8) | (r>> 8));

Putting this fact, it works, but you see everything with a reddish tone.

Maybe I have something wrong XD

Does the spinning cube demo app run okay? It compiles with no warnings for me. What version of DevkitPPC are you using? Did you perhaps remove the __attribute__ ((packed)) tag from the comp_s struct?

yes, the demo works fine, but when compiling the source appeared to me an error message:
error: expected primary-expression before '. " token

looking the source, i observed:
rgbaPixel_u pixel = (. rgba = (r <<24) | (((u32 )(*(( u16 *) (bp + offs +32)))) <<8) | (r>> 8));

I assumed it was missing "pixel.rgba", with that, the error disappeared, but it appeared a warning:
warning: missing braces around initializer for 'comp_s'.

The version which I have of devkitPPC, is before the current version.





Edited 1 time(s). Last edit at 02/22/2010 01:39AM by copete23.

Are you using the latest GRRLIB or something else? Try change the order of the colour components in the comp_s structure.

struct comp_s {
 u8 r,g,b,a; // Try reversing the order of these
} __attribute__ ((packed));

I think that the reason may be is the version of grrlib, I use the version 4.0.0 XD, and is very old, perhaps GRRLIB_SetPixelTotexImg function is different in the latest version, i have tried to change the order of the color components and works better, but the glow continues to have a reddish hue, so it must be the version from grrlib.

I will review the latest version of grrlib to see what the problem.

Thanks for the help ;)