Cel Shading Tone?

16bit

I'm having a hard time trying to grasp the tones of cel shading, they are so random and appear to have no continuity with each other.

This is either a technical question or an artistic one, it's over udk, but not on how to implement it in udk, so I chose the parent folder.

My cel shader in udk looks like this.



Its a light vector split into 4 bands basically. First one being 1, second one being .75, and so on. At first I thought this would probably be the hardest thing to implement into udk instead of being the easiest, but as I started using color things started to look differently from the source material. My models skin would divide the light evenly, while the real characters skin would darken less in the red and more in the blue and green.



Take for example Link
His first band is 255 - 235 - 167
His 2nd band is 204 - 176 - 103
Difference of 51 - 59 - 64
But mine would be 60 - 60 - 60
Or something like that, but all colors would decrease evenly.

In this example the blue channeled darkened the most and the red channel darkened the least.



This guy, I don't know who he is, but I know he's from that Dreamcast game.

The orange shirt

251-180-20
183-115-14

---

68 - 65 - 6

Is there some formula for the way a color shades? Cause no matter how many colors I sample, nothing really follows some pattern. I mean it has to be done in the shader right? They wouldn't have a second texture or something that says how something would shade? Cause I've sampled eyes which are pure white that shade differently than a pure white shirt. It's maddening.

pior

A few points from an artistic/illustrative perspective :

- This kind of shading works best with two tonal values (and sometimes three, but with the third one being very thin). At the moment you have too many of them on your car.

- It might be better to hand pick the two colors (light and shadow) manually per material, in order to avoid a "greyed out" look.

-Overall, the values in the shadow shouldnt be too dark - as a matter of fact, if you have 3 diffuse colors (yellow hair, pink skin, and green shirt) it can be helpful to correct the values of the shadow regions so that their values are close to the shadowed part of the brighter element (in the case of link, the yellow hair)

Hope this helps!

16bit

I understand about the tonal values. I was studying a car the other day and saw that it was only majorly 2 shades. The 4 slices is mainly for humans, but since that's the master material and changing even one thing takes forever to save I just left it as 4 until I got an instance going.

Now the 2 colors for light and shadow? I'm not following exactly. But I have a 6% Gooch shader added to it which makes it warm to cool.

I understand all your points, which are very useful.

I have noticed a small pattern.

The first band is pure color, while the second band is the shading. The farther away each channel is from black, the bigger the leap in darkness it will be in the 2nd band. The closer the color is, the smaller the jump.

Though sometimes its the exact opposite.

pior

Ha! Just lost my post.

Anyways, here are a few good ressource on light theory. These should help you when it comes to picking the right color and value for the tones of your shading algorithm.

http://www.itchstudios.com/psg/art_tut.htm

http://www.thegnomonworkshop.com/store/product/185/Practical-Light-and-Color

larolaro

Are you clamping values? Seems like a tough way to go about doing a ramp shader.

Im not sure what you are asking exactly, but from the images you are referring to, the shaded tone is just a single multiplied colour over the original, usually its often to see it being a soft purple colour in cel shaded games.

This is something I worked on in UDK. I used procedural ramps made from dot products to achieve the shade, including a saturated terminator between the light and shade.

Kawe

larolaro wrote: »

Are you clamping values? Seems like a tough way to go about doing a ramp shader.

Im not sure what you are asking exactly, but from the images you are referring to, the shaded tone is just a single multiplied colour over the original, usually its often to see it being a soft purple colour in cel shaded games.

This is something I worked on in UDK. I used a procedural ramps made from a dot products to achieve the shade, including a saturated terminator between the light and shade.

Can you post your shader network?

16bit

I guess the only way I'll be able to explain this is with a picture. Hold on let me make an example.

On a unrelated matter. How did you get shadows to work that way? Where they weren't pitch black and interacted with the cel shades.

Ok i'm going to try to explain this as best I can because It's almost time for me to leave for school.



Here is a picture from Tenkaichi 2 or 3 for the wii, this is when I noticed that my colors where off and their shading wasn't linear.
I posted the tones at the top of the screen, their samples at the top, mine at the bottom.
Now I am using the same model as theirs so I could get rid of any variables

-edit-
Also thank you for the links, I will look at them when I get back home.

PhattyEwok

Um this could be a really dumb suggestion but have you tried cranking up the self illumination

16bit

Self Illumination? Isn't that a setting in for materials in 3ds max? What's the equivalent to that in udk?

DOG-GY

16bit wrote: »

Self Illumination? Isn't that a setting in for materials in 3ds max? What's the equivalent to that in udk?

emmisive

16bit

Should have been obvious. But yea. My cel shader uses custom lighting, would emissive still work or will I just have to build it into the custom lighting.

haiddasalami

Since you're doing custom lighting couldnt you do a constant 3 and add to your resulting light function stuff (Diff + Spec) * lightcolor ? Dont have UDK on here (mac) to check but should work as this is how ambient works in fx shaders

16bit

I know this isn't how emissive works, but I think that multiplying a constant 3 (or 1) by the diffuse and inputting it into the custom lighting would work. Or If I had an emissive map. I would use a constant 1 multiplied by a texture sample, then multiplied by the diffuse.

haiddasalami

Did glow for my hlsl shader doing (texture * Constant 1) and adding to the light so you're o nthe right track

pior

Again I think the answer lies in an artistic tweak, rather than sticking to a formula.
Skintones are very special for numerous reasons - and for Budokai they simply had a reference that they had no choice but match (that is to say, the colors used for skintones in the DBZ anime)

This is why I think you should establish your target look first, then work your way to it. If skin requires a hack (different material altogether) then so be it!

16bit

Problem being its a car game. Where you can pick what color your car is from a color wheel. so the shading would have to be procedural. But my problem is trying to imitate the styles of others. When I should be creating my own.

Vailias

What Pior says...
and further

Don't assume that the lighting calculations are a simple multiply. They could be using image based ramp lighting in the screenshots you've posted, or the lighting calculations could be something other than a simple multiply by a scalar. There's no reason you can't mathematically bias the shadow color to be whatever you need it to be.
You could even have a second diffuse map for shadowed areas only, then lerp between the main and the shadow one useing the main light's dot product.

There are dozens of ways to achieve a "cell shaded" effect, but the desired end result determines the implemention to a large degree.

edit to take your post into account:
If the player is picking the color of their car, then have a section in your shader network that creates the shade of shadow you want based on the input color.
Like compare the input color's red and blue values, and selectively desaturate channels to make the shadow color, then lerp between the player color and shadow color via the dot product from the lighting, then add your other effects on top of that base diffuse color.

16bit

I thought about the second diffuse map method as well, but wouldn't work because I have the car color multiplied by a AO texture.

16bit

Of course! It's so simple. Light changes a colors value AND saturation.

I only thought of light as value, I never considered saturation. Well it's working now. Once I implement this into the main parent I'll post a picture.



Before



Looks ten times better. It needs tweaking to find the perfect saturation depending on color and light.

ikken

you may like this one as a reference -
http://youtu.be/-2YgZm6ZqjU
http://youtu.be/rKgA7LFNC0A

16bit

Yea, I actually love the art style of Auto Modellista. But I wasn't inspired by it. I had only found it by searching for cel shaded cars for a reference of what a game would look like with them. I was pleasantly surprised.

Actually seeing it in motion, it looks like the cel shading is baked into the texture.