Glow effect

We’ve got a pretty good animation up and running now. It looks pretty cool, but not half as good as the current new games. That’s why we’re going to add some cool looking effects. In this first of three tutorials we’re going to add a glow effect. This will make the bright spots stand out a bit more, because they fade out a little instead of making hard edges.

How does the glow effect work?

The glow effect is pretty hard to understand if you’ve never programmed 3D stuff before, but I’ll try to explain it. First of all the objects that should be glowing are being rendered to a temporary screen like object. It’s called a render surface or render target. The render surface or target then gets blurred. The blur will make the edges less hard and make some pixels that are not on the objects colored as well. This makes objects look like they are glowing, just like the sun. The sun isn’t a ball when you look at it, it’s a ball that fades on the edges. That’s exactly what we’re trying to imitate as well.
After this everything gets rendered normally. Then the texture from the render target gets overlayed on the screen. This makes the bright spots stand out.

What do we need?

- To get a glow effect, we need something that can make the effect. You could do it with a glow shader from nVidia for example, but there’s a build in glow effect in TV already. That’s why we’ll use that one. The effect can be found in the TVGraphicEffect class. So we need that.

- As mentioned above, we need a render target/surface. In TV it’s called a TVRenderSurface.

How do we set things up?

-First of all we need to instantiate the graphic effects and the render surface. This is done by

and

The instantiation of the render surface has a couple parameters that i want to explain.
The first and second parameter are the width and height of the render surface (in pixels).
The third one specifies if the depth buffer should be used. This is important when you have objects behind others etc.
The fourth one specifies the format of the render surface. This is quite important. Making changes to this parameter can make you have to change a shader, but i won’t go into depth about this right now. A8R8G8B8 is about the most used format.
The fifth one specifies the name of the render surface so you can search it with TVGlobals. But you should generally keep track of the render surfaces yourself.

- Next thing we need to do is tell the TVGraphicsEffect class what TVRendersurface to render to, otherwise there’s nothing being displayed at all. We do that by calling:

- Now we can set some cool parameters for the glow effect. This isn’t necessary, but it can give your game an extrordinary feel. We’re calling this method:

The first parameter is pretty straight forward, it’s the color of the glow. If you set it to 1,1,1 the glow will be in the same color as the object. If you set it like this, it’ll have slightly more red than blue and green, so the glow will look somewhat red.
The second parameter defines the intensity of the glow. The higher the intensity, the more glow.
The third parameter defines the offset that has to be used during the blur passes. When a blur pass in a blur shader calculates the color of a pixel, it’ll take some neighboring pixels and take the average color. With this offset you can tell the shader which pixels it should take.

How do we render this?

- In this case, it’s a bit different than you’d expect, sorry for the confusion. We’re calling UpdateScene() after the normal render, while you’d normally do that before the render. So what’s happening now is that the glow is the glow of the previous frame. Even with 30 fps this isn’t even noticable, unless the object is moving really fast (in our case it isn’t, so there’s no problem.

- In the UpdateScene() method, we’re now rendering the objects that should glow.
We first put the render target in render state, with

Then we render our 2 objects. Note that we’re calling

so that it won’t progress in the animation (due to the parameter).
We then stop the render process of the render surface, by calling

Now we just need to tell the TVGraphicsEffects object that the glow has been updated. We do it by calling

Note that you should always! render to a render surface outside the TV.Clear and TV.RenderToScreen block. This is because of the limitations of DX.

- There’s a change in the normal render block as well. To draw the glow on top of the two objects, we’re calling

after rendering the 2 objects. After that we put everything on the screen. FX.DrawGlow will overlay the blurred version on the already rendered stuff.

Things you can add/change yourself

- If you didn’t really understand the blurring pass stuff, you should really try this: comment out the Rancor.Render(true) in the TV.Clear – TV.RenderToScreen block. This way you’ll be able to see just the glow. Of course the rancor isn’t animating that way, so you can enable the animation in the UpdateScene() block by rendering with a true parameter.

- To make things look better, try playing with the glow parameters. Try increasing the intensity, offset and color. Especially when you’re doing offset and color, you should do the step above this one as well.