Ue3 Shader( to mimic sf4)

Hi Im a first time poster on here! So please go easy on me Im not the greatest of technical artists but I want to learn for the future!

Ok So I had posted this only polycount, and ive been working on this for some time, but I dont think the people there can really instruct me as well as the people here possibly (no offense from any one at polycount but I just think this forum fits the question a bit more )

anywho excuse the copy and paste but…

ok Ive been dealing with this on my off time for a while now and I cant take it anymore, ive asked alot of people personal questions online (and thank you for all your support and sorry for being a hassel to you!) But I cant take this anymore

so let me cut to the chase, many of you saw me working on a street fighter character next gen not to long ago.

on my off time between freelances ive been working on him on and off in unreal 3.

my goal was to achieve a faked Street fighter 4 look, which was mostly a flatisky style somewhat semi desaturated look.

A example of it is here

now I was directed to neox’s shader tutorial to recreate team fortress style characters in unreal 3 which was in a direction I wanted to go( And neox thanks man that tutorial helped ALOT!)

so After many tests my current shader looks something like this (I tried going backwards and making this as simple as possible.)

but right now I got it to work in the engine through alot of trial and error and such.

Im still really new with shader work and unreal, so at this point im taking open suggestions on where to start// do. Ive been learning alot but I just really have been lost and the guidance I have with this has been rather confusing to me :no:

So at this point what would one of you guys say I should do? Or how should I approach doing this?

Thanks alot guys!

You need cell shading with soft contour lines.
Check out the latest “Prince of Persia”.

This is an interesting project. My first guess is that they’re using a variation of toon shading - sort of like TF2, but not exactly. From the single picture that you posted, it looks like they’re using different gradients for each material. I’m seeing that the skin has different colored shading than the cloth, for example. Doing this would require that you break your character up into different material groups. Each group would use a toon gradient specifically painted for that color and material type. Those are just a couple of thoughts off the top of my head. Anyone else want to pitch in here?

I recently talked with a level designer/ newbie tech artist ( Im green while this guy is new to it I guess is the best way to explain it) at my job, He said something in the manner of using a rim light (like team fortress) but having the normals be multiplied on top of the rim light while having a constant light attached to the character//object?

And as alien as it sounds to me I tried to mimic the TF’ shader not to long ago but I kinda failed at mimicing it, it was alot of nodes for rim light rim spec etc, that attached but I couldnt even get a single one to work.

So I just kinda wanted to start basic and fresh and see what you guys would suggest.

Im thinking a possible constant light (like I have above) and a rimlight might be the best approach for right now?

I really dont know if this will work ? I seek the knowledge of you shader guys INSTRUCT ME AND THY WILL BE DONE (haha sorry Im working on a knight character at the moment so im in chivalry mode!)

I dont know if this helps but I just recently played the new sonic unleashed (I know im a dork) and all there models have a similar system where its normal mapped things but it looks more toony / flat colors but still is effected by lighting and such, if anyone has played// seen maybe thats another example I can give?

edit::

sebddd: Not to sound rude but the new prince of persia game looks pratically like 2d concepts / drawings and no real normal maps pop out of it? Im not really looking to mimic the contour black lines as oppose to making it have a flat gradient but the normals still pop without looking as gritty// detailed as unreal loves to do. But just for the sake of asking are there any white papers or such for there shader out? …and wasnt that game to my knowledge the naruto engine developed not to long ago being used for that game?

Well I haven’t tried yet in UT3 Material editor but by combining one of the Rendermonkey samples (NPR.rfx has lots of toon shading examples) with some basic phong+bump shading inserted in a first pass : it seems to be fairly straight forward.

The model is the ninja head from AMD, there’s not much details, sorry about that but there’s clearly a normal map :


As you can see : I wasn’t talking about an ugly thick cartoony line but just a very thin one : this will give you the subtle little touch to break it out of the realistic-wannabe feel of full phong lighting + normal map.

Have a look really close, especially the feet, of your Street Fighter character : there IS a contour line (it’s even actually the job of “Inkers” after “Pencilers” and before “Colorists” on comic books)

As for Pop4 : “it’s just” some 2D work if you say so, but as far as I can see, I’m afraid your graphical style target (which is great idea by the way) has to be based on a quite similar approach : this is why I made the analogy and I believe you’ll need a good 2D artist to produce the maps of this sf guy.

Team Fortress and Sonic Unleashed looks like a well working but different style to me : no contour line and more plastic flat gradient looking like Pixar’s “Incredibles” : and I don’t see where the normal maps you’re talking about are playing any major role in these, I would more bet on nice ambient occlusion (for Sonic).

So what you want is an hybrid between the 2 perhaps ?

sebdd: Yes I think I want to kinda achieve a look of the 2 styles kinda more of that pixars incredibles flat gradient but with the normal maps poping out for the chizzled muscles and wraps and ropes etc on the character…

I did some work with the shader with help from a programming buddy

ok a few updates before this evening is done, along with a few fuck ups I thought were funny I had to share :stuck_out_tongue:

heres the current shader…I still have yet to add in the spec or anything …I kept running into the issue that every time I tried to deepen the normals enough, I would lose my nice soft ambient/diffuse look, but every time I darkened it the normals would either artifact with weird black spots or just literally make BLACK points on the normal maps (way to harsh) so I dunno, heres where im at right now suggestions at this point are appreciated…



and the cool mess ups :stuck_out_tongue:


Im still a long way from gettin it to how I want but maybe after seeing this you guys can guide me in a better direction? I still have yet to to anything with phong lights or the black contour line (BUT I WANT TO!)

Hey you’ve got yourself a pretty good start now.
It’s looking not bad at all : quite close to Team Fortress now.

I still do believe you’d get on quite nicely with a thin contour line on top of it but let’s consider this optional for now.

I think you just need some soft specular color with a low exponent just to make slightly shinier… if you look at the Street Fighter guy he’s got white on clothes and yeallow-ish good light reflectivity on skin (but not glossy).

Ben Cloward’s idea to split into multiple materials is one solution but you could also use a specular color map (not the Specular Power : the actual spec color given by a map), or you could perhaps use vertex color information ? (hey : could be quite efficient to use this good old one maybe?). But just have a go with the default standard UE3 Material slots first.

From what I see it looks you have something like a nice ambient occlusion effect more than anything : but this is baked in the diffuse, right ? (fair enough)

Which block is controlling your normal map depth on your graph ?
If you want to do that : you need to mutliply the blue component (or z) slightly by something like 0.9 or 0.8 but not too much : the best is to provide the right normal map at the bump depth you want from photoshop or whatever tool you use (reducing number of constant registers and variables in shaders is always good)

You seem to have too many unecessary things happening in your graph here : if you multiply/add to x and y of the normal map as well it changes your light direction on the surface, but if you really want to do that then you need to normalize it before doing the dot product with light vector.

One question : why don’t you just plug your normal map in the standard UT3 material slot for a start ? does it work? does it produce any good? (maybe it would be good enough for your purposes and also efficiently using the default path provided by UE3 : perhaps there are some optimizations applied afterwards which you couldn’t benefit by doing the same with a complex network of nodes )

I don’t understand how and why the bloom is present here : you should get rid of it for now to fix you normal map first and then add it later properly once you’re happy (one thing at a time :D:)

I appologise for the lack of updates but ive been rather busy lately with some projects at work and in the process of looking for new work

but thankfully I had my friend come and help me first hand with the shaders and explain alot of things I Was doing backwards I believe this is getting closer to the effect need be but right now I need to go back and touch up the diffuse of my character alot more but this is current progress!

I saw this on Polycount. I have an idea, asking a friend to send over a model for me to mess around with.

Alright my friend, here is a stab at getting the rough shadows on the character. I just need to spend more time to mask out the high-lighted areas and have it multiply better. Don’t ask to see shader network, messy as hell. Brain no work good now. Must go to sleep… 7am…

Thanks for the challenge. I will work on it more later today. I think once I mask out the middle bits with decent falloff (with controls for said falloff) , get a better cross hatching source, better texture to use (maybe a better model) and get the rim of the character done it will be damn near close.

Character was created by a friend of mine. I’m more of a weapons expert.

Funny that I started this, it kinda ties into my other task of making an Ah-Ha-ish shader.

I have been looking at a higher res image than above, and I think to get this technique, you’re going to have to paint your textures different.

Look at Ken’s leg, no way that is going to come across in shader alone. Those are BIG strokes of color going through there.

It is always hard to tell without seeing these things in motion… so much of it can indeed be shader-driven with ramp textures and different lookups (diffuse, specular, and fresnel could all use unique ramps). Anything that changes is shader-driven, and anything that is static is in the diffuse texture. The more that is shader driven, the harder, because you need to figure out the shader math/network AND how the textures work within it at the same time.

[QUOTE=Rob Galanakis;2218]It is always hard to tell without seeing these things in motion… so much of it can indeed be shader-driven with ramp textures and different lookups (diffuse, specular, and fresnel could all use unique ramps). Anything that changes is shader-driven, and anything that is static is in the diffuse texture. The more that is shader driven, the harder, because you need to figure out the shader math/network AND how the textures work within it at the same time.[/QUOTE]Very true. I think any progress he makes will be well worth it.

I got the OP to kindly send me his model which has a more finalized texture than above (deadpool). This is what I have so far… still need to bring down the hot spots and bring up an etched/cross-hatch to the borders…

Kinda a little progress… I need to get this over on the specular and hook up the normal map.

Changed the method of attack…