welcome guest   Maphart

Using UV’s to simulate a Stripe Glow Gradient effect

by admin on Sep.08, 2009, under Freebies

This is a short tutorial I wrote a while back on game-artisans on how to achieve a scrolling glow gradient effect that goes from top to bottom on rigid objects, characters, or whatever you can think of.

When applied to a character, you can simulate your character getting scanned, have glowing animated parts. Cheap simulations of running water and smoke/gas/fumes FX can be done using this method as well.
The possibilities are endless imho, and I tend to use this technique a lot at work for simulating all sorts of specialized FX that can’t be done with particles, or that are not important enough to do with particles.

Keep in mind though, that is just one of many techniques to achieve a SGG-effect. It may, or may not not suit your needs at all. :)

But, let’s get this show on the road. Below is what the effect looks like with a top to bottom scroll on a simple ring shaped object. And we can also see that the glow is masked out by the vents.


First, let’s dissect the ring. This object is a simple ring made out of polygons, with each seperate polygon mapped from 0 to 1¬† in it’s UV’s (fig 1.). That way we create overlapping UV’s, but by doing so we can use one small tileable texture to color the entire ring.
The texture I’m using for this is a very simple vent with an alpha channel (fig 2.a and fig 2.b) representing the holes in the vent. As you could see from the image above, the animated bar is masked out by these vents. So you guessed it, we’ll be using this alpha to mask out our animation, but first we need to have our bar moving!

(fig 1. UV set used for the diffuse color)

(fig 2.a diffuse color image)

(fig 2.b diffuse alpha image)

So let’s get it moving then! To have a glowing bar scroll from top to bottom, we need two things.
First, a texture that is black with a single colored bar on it. You can make this as thick or thin as you want. This is where artistic freedom comes to play. ;)
Why black? Because in the end we will add (and add is the key-word here) the scrolling texture over our diffuse texture.
Because something + black = something and something+ somethingElse = aWholeNewWorldOfFun. ;)

And second, we need another set of UV’s that we will use to scroll the texture over.

In our case, we want to scroll from top to bottom, so our object needs to be projected as such in the new UV set. And since we’re dealing with a very simple shape, we can just do a front planar projection of our ring (fig 3).
This way when we scroll from top to bottom, the first UV coordinates we’ll encounter are those of the most top vertices of the ring.

(fig 3. UV set used by the glowing bar)

But how do we animate our bar-texture using these UV’s? Well, this is where a bit of black magic is needed.

In this particular example I’ve writting a short realtime shader to use inside of XSI (which you can find at the bottom of the post) that offsets the second set of UV coordinates using an input value. Other software may have built in features to do this, but I haven’t found one in XSI. If you do know a way on how to do this in XSI without specialized shaders and UV projection handles, please let me know! I’d love to know about it. :)

If you do have an option to animate the UV coordinates (because that’s what you actually need to do) be sure to animate in the negative V direction so our bar moves from top to bottom (fig 4).

(fig 4.  Glowing bar scroll direction)

And that’s a moving bar! Hoozah!

The only thing that is left is to add the sample from our bar texture on the scrolling UV’s to our result from sampling the diffuse texture using the first UV set.

If you want to mask out the scrolling bar by the vents, all you need to do is to multiply the sampled color from the bar texture (using UV set 2) with the sampled alpha value from the diffuse texture (using UV set 1) before you add the two colors together. :)

And there’s nothing more to it than that!

Here you can see the same effect applied as a scanning line to a character. The second UV set I used for this is just a front projection from the character.


I hope you enjoyed this little tut, and be sure let me know if you don’t understand something. I’ll try my best to answer.

For all you XSI users, here’s the GLSL shader to use in the OpenGL viewport.

//vertex program
varying vec2 diffuse_uv; //UV SET 1
varying vec2 glow_uv; //UV SET 2

void main(void){

diffuse_uv = gl_MultiTexCoord0.xy; //diffuse texture coordinates
glow_uv = gl_MultiTexCoord1.xy; //glow texture coordinates
gl_Vertex = ftransform(); //transform the vertex to screen space


//fragment program

varying vec2 diffuse_uv; //UV SET 1
varying vec2 glow_uv; //UV SET 2
uniform sampler2D diffuse; //DIFFUSE MAP WITH ALPHA CHANNEL
uniform sampler2D glow; //GLOW MAP
uniform float glow_anim; //SCROLLING PARAMETER

void main(void){

vec4 diffuse = texture2D(diffuse, diffuse_uv); //sample diffuse texture

//first offset the UV coordinates from the glowmap in Y (scrolling effect)
glow_uv.y = glow_uv.y + glow_anim;
//use this offsetted UV for sampling the glow texture
vec4 glow = texture2D(glow, glow_uv); //sample glow texture
vec4 FinalColor = diffuse; //final color mixdown

glow = glow * diffuse.a; //Multiply every channel (r, g, b, a) with the alpha value from the diffuse map

//final color mixdown, add the glowmap to the diffuse color
FinalColor = FinalColor + glow;

gl_FragColor = FinalColor; //Output pixel color and alpha



1 Comment for this entry

Leave a Reply