Welcome to Part 2 of the lightburst tutorial.

Yesterday in Part 1, I laid out some simple steps in Photoshop to create a nice texture for our lightburst. Today, I’m going to load that texture in the 4GE game engine and apply some different blending modes to get glowing results. Tomorrow in Part 3, I will use some nice shader and scripting techniques to really make this tutorial shine.

Blending Modes

Like tons of noob graphics programmers, I was really happy with the standard SRC_ALPHA, ONE_MINUS_SRC_ALPHA blending operations for all my blending needs. Blending, it turned out, was key to creating the “glow” look I was after for my lightburst effect, so I had to go back and learn me some different blending operations.

Since 4GE uses OpenGL for its rendering, the samples here are in OpenGL. If you’re working with a DirectX renderer, you should be able to find equivalent operations to match these here.

First, a little background on how blending operations work. When blending is enabled in OpenGL, the color of each incoming pixel (the “source”) is blended with the color already present at that pixel’s spot on the screen (actually, the frambuffer, or “destination”). The way in which these colors are blended is controled through the glBlendFunc() function.

For example, assume during the initialization of my OpenGL application, I’ve called:

glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

This will turn on blending and set up some “typical” blending operations. The first parameter to glBlendFunc() tells OpenGL what to multiply the color of all incoming (source) pixels by, and the second paramater tells OpenGL what to multiply the color already on the screen by. Those 2 color values are then ADDED together to get the new color to show on the screen.

In pseudo-English, the above call to glBlendFunc() would say something like:

“Multiply the new pixel’s color by that pixel’s {alpha value}, then multiply the old pixel’s color by {1 - that alpha value}, then add those two things together and that’s your new color”

Imagine that the new pixel’s color is “Red”, and its alpha value is 0.6 (60%). Pretend the old pixel’s color is “Blue”. When we multiply Red by 0.6, we get “Dark Red”. Then, we multiply Blue by 0.4 (which is 1 - 0.6) we get “Deep Blue”. Now, when we add together Dark Red and Deep Blue, we get exactly the color you would expect to see when you look through Red glass at a Blue object - a Deep Dark Purple color. Thus our Red pixel translucent. Do this same thing for every pixel in the scene and you get a very accurate translucency effect.

As nice as these operations are for general transparency, they don’t work well at all for our lightburst texture. Here’s what the lightburst texture looks like at an alpha value of 0.6:

GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA

We end up with a grey square with a faded lightburst in the center. Not cool >:E

Let’s try something else:

GL_SRC_COLOR, GL_ONE

Now this is cool; squaring the new pixel’s color with GL_SRC_COLOR will make it darker, so our lightburst looks a little smaller than it really is. The black background of our texture will stay black, an RGB value of 0, 0, 0. However, the black parts are now invisible! This is because adding 0 to the old pixel’s color (unchanged, thanks to GL_ONE), the old pixel’s color won’t change, meaning that any new pixels that are colored black disappear. Very nice, but we can do even better:

GL_ONE, GL_ONE

Now things are starting to look good. GL_ONE for the old pixel color still gives the nice effect of making black pixels transparent, but these operations don’t “dim” the lightburst texture like the previous example, instead they leave them alone. The net result of all this is any non-black color values in our texture are directly added to the old pixel color, causing it to become lighter, just what we would expect to see from a burst of light.

There are a lot of blending combinations that produce a variety of different results, however, I think GL_ONE, GL_ONE generally looks the best; it gets rid of our texture’s black background and makes the texture behind it look “burned out”, like a very bright light might do.

You can find the full documentation on glBlendFunc() here. It’s a fairly boring and technical read, hopefully this tutorial will help make it more palpabale. Tomorrow, we make this effect look really dope!