Need Help: How to apply a Stripe-Glow-Gradient effect?

[Ace-Angel]

Hey GA, how you all doing?

Anyway, to make it short I need some help. Both for a render and real-time shader set.

I've been going through a bag of old games, and lo'behold, I find ZOE (Zone of the Enders) and it hits me, how do I create the SGG effect in it?

For those who don't know, SGG is essentially this: http://fc01.deviantart.com/fs9/f/2006/068/c/d/Jehuty_head.gif

Basically, it's when the light map follows a certain path from one point to another in an orderly fashion. I have been trying to create this effect for the past month, but haven't really come up with an idea on how to do it. I used RTS-Shaders (dA account) of Imrod, while the light thing does work in Max in terms of shaders, they're chaotic and not orderly as the ones in ZOE.

So here is the deal. I am armed with ShaderFX and Mental Ray right now, and need help from the pro's here in being able to create the SGG effect. Been hitting myself on how to do this, and even quit DW for it.

So anyone mind helping me or at least pointing me in right direction. Please take care as I am slow-learner sometimes, so please bear with me.

Cheers to all, and ciao.

[Kickflipkid687]

I can't really help much, but the first thing that popped into my head that might work, at least for a game, would be to unwrap those pieces all in a 0,1 space, with the parts at the head at one side and the other parts on the other side (right side), then have a scrolling self-illum texture?

[Mrpearlzildjian]

Not sure how you would do it in Maya, the same theory may apply, but in an engine(Like UE3) you would probably just apply the map where you want the glow(on the lines in the mech), and have a layered texture over it, masking out certain parts, and then just animate the mask. That sounds like it would work on paper, but again, I don't know how you would do that in Maya, I would have to try it before I gave you a solid explanation. Sorry bout that.

Good luck finding a solid answer!

[Ace-Angel]

@Kickflipkid687: As I said, I might be a little slow here, so please bear with me, but how do you create the self scrolling Self-Illum? (BTW, am Using Max).

@Mrpearlzildjian: Great idea! But I'm confused as to how I would go about to do that? Must I have 1 frame per mask degrade, or what? Once again, sorry here, please, bear with me.

===

Thanks guys for the answers, but to round out more about the problem, here is what I tried to do (before I posted this topic).

I created a Model with a texture map.

I created a Alpha map along, and basically baked it in the DDS texture file.

From there, by the Alpha map, I chose the specific area's I want to animate the shift of glowing.

Till here it was OK and simple.

Now here were it gets tricky.

I DL'ed the following shader: http://rtshaders.deviantart.com/art/Imrod-Shader-Demo-Shadowmap-112736816

It's already comes precondition with a Glow-Animation slot, so it's a matter of drag and dropping the file you want to glow (incase you didn't figure it out by now, I'm not good at Shader programming at all).

However, the glow is chaotic, meaning while it's does 'flow', it's flows in many direction at once, it's not exactly orderly.

I tried using Mental Ray, but I was getting to ahead of myself self.

I tried using Shaders, but since I lack the skills here, I have to relay on prebuilt items.

So well...let the discussion continue! *Drum rolls*

[Maph]

It's actually really easy to do this, but there's a catch. You need two UV sets, and a shader capable of doing this (realtime usage), in Maya you just need to expand your shading network a tad to accomodate the second UV set.
I'm guessing the shader you downloaded only uses one UV channel for texture sampling, while you need two for this effect.

It all boils down to this: One UV set for all of your standard maps: diffuse, spec, alpha, normal, etc... and one UV set dedicated for the glowing effect. And ofcourse the glow image (which is a black image with a glowing bar in it).


But, I can't explain this properly without pictures, so if you can wait a tad, I'll be happy to post a more in depth solution when I get off work. :paper:

[Ace-Angel]

Take AAAAAALLLLLLL the time you need. Just don't make me wait as long as DNF did, hehe...

But no, really, take the time you need, and thanks in advance for the help.

PS: Don't be surprised if I ask some stupid question even after the depth guide.

[Maph]

No problem mate. I hope this helps. ;)

Right, here we go.

I assume this is the effect you're after:
http://www.maphart.com/uploads/files/GlowMapTut/GlowMapAnimation.gif

Albeit not exactely the same thing you're thinking of, the technique used is exactely the same.
What you're seeing here is a ring where each segment of that ring is mapped from 0..1 in UV space (fig 1). Meaning, every segment overlaps the others. This way I can use a single square image (fig 2a) as my diffuse image with an alpha channel (fig 2b).

http://www.maphart.com/uploads/files/GlowMapTut/UVSET1.jpg
fig 1. UV set used for the diffuse color.

http://www.maphart.com/uploads/files/GlowMapTut/vent_c.jpg
fig 2a. diffuse color image

http://www.maphart.com/uploads/files/GlowMapTut/vent_a.jpg
fig 2a. alpha image


But, independant from these overlapping segments, you see this glowing bar scroll from top to bottom.
To do that I needed to create another UV set for the glow texture to scroll over. This second uv set is a XZ plane projection of the ring (fig 3).
Using this second set, I have the glow-image scroll from Top to Bottom (fig 4). How you make this scroll is completely dependant on your toolset.
UT3 has a 'panner' (or something similar) node that does just that. Lightwave has UV anim, for an XSI/Max/Maya solution you probably need to edit an existing shader, or write your own (see the bottom part for this btw).

http://www.maphart.com/uploads/files/GlowMapTut/UVSET2.jpg
fig 3. UV set used for the glow image

http://www.maphart.com/uploads/files/GlowMapTut/GlowMapDirection.jpg
fig 4. glow image scroll

But, how do we put this together, and even worse, how do we mask out the glowbar?
Quite easy actually. In a nutshell, you need to multiply the scrolling texture with the alpha value of the diffuse map.
And this result you ADD on top of the diffuse color. This will hopefully make a bit more sense in the short shader I've listed below.

But there's nothing more to it than what I listed above, and how do we expand that to your example? Simple, just make sure you have a good second UV set of your character with it's head on top, and it's feet on the bottom. It just takes time and practice to set up a good UV map for this and you can't do it in 5 minutes.
Creating this second UV set is actually the hardest part. It requires a bit of thinking before hand and good understanding on how texture coordinates work, but this comes naturally. :)

Try doing this with just a planar projection from one of your characters. You will see the glow bar is still a bit chaotic at some points, but it does go from top to bottom, which is what you want. If you want the SGG effect like the example you provided, just multiply that scrolling texture with the alpha map from the diffuse color. :)

You can do a lot of cool and übercheap stuff using this technique. A lot cheaper than using some super sophisticated shader. The only downfall is, that you loose an extra texture coordinate you can use in the shader pipeline (but that's another much more advanced topic. ;))



----------------------------------------------------------------------
Ok, a bit more technical.
To make this effect work, I quickly whipped up a really simple GLSL shader to use in the XSI viewport, nothing fancy, but I'll list it anyway.
I think if you understand this shader, the technique will make a lot more sense. Although, If you can't read code, this is probably Chinese for you. :D


//vertex shader
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 shader
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

}

A little note: You need to think in terms of pixels here.
vec4 diffuse = texture2D(diffuse, diffuse_uv); //sample diffuse texture
This line for example samples an area of the diffuse texture and stores it in a variable called diffuse.
The same for the glow map.
But, the magic happens when we multiply this glow map with the alpha value from the diffuse map. If the alpha value at the rendering pixel is 0, the result from the multiplication with the glow map will also be 0.
0 * something = 0. :p
Which means, you won't see the glow on that given pixel. Because 0 + something = something. :p


I really hope this makes sense, because I have this really, really, and I mean really bad tendency to overcomplicate things. :o

And now, I need a beer. :beer:

[Ace-Angel]

Thanks alot, just thought of saying that.

Still didn't get around to fully understanding it, so I'll read it slowly and carefully before posting any question (and testing it of course), so don't be surprised if I ask something 1 week after, or even a month later, hehe.

Once again thanks mate, much appreciated, must been really hurdle for you =D

[Maph]

No worries, I just hope it makes sense. :)

It wasn't a hurdle. There was DnB music, beer and a relaxed state of mind; so it was all good. :D

[BigJohn]

Got a quick question over this. You're defining this variable:
uniform float glow_anim;

And then use it later on to offset the UV coords. But where does it get its value from?

[Maph]

Got a quick question over this. You're defining this variable:
uniform float glow_anim;

And then use it later on to offset the UV coords. But where does it get its value from?

Inside XSI, this is a node in the render tree I plugged into the GLSL program node.
XSI has a node called 'GLSL uniform' where you can define a GLSL uniform variable to use in your GLSL program.
Depending on the data type you pick, you get a value slider, entry box, color selector, etc... :)
These nodes can be given 'variables names' that you can refer to in your GLSL program.

Ex. I put down a GLSL uniform node, give it a float datatype, and fill in the variable name as 'foo'; I can then acces this value inside the GLSL program by using the "uniform float foo" definition outside the vertex/fragment program.


In the case of the glow effect, this is a float slider that I animated using a linear spline from 0..30 and going from 0 to 1 in value. And that spline, I cycle, so you get a continues increase in the value; thus the scrolling effect. :)

[BigJohn]

Ahh I see. Thanks :)