Cel Shading and Light Types (UE4, valid for UE5)

[@lihu636]

It's really great! This is the most accessible stylized material tutorial I've ever seen, and it works for what I need so far. I hope to see more of your thoughts in the future. Thank you so much!

[@thegreendude2086]

I appreciate the calm atmosphere tone to the video, great job

[@VinoVenitas]

This is really useful. Thank you for this. I didn't understand everything but the result is undeniable.

[@MartKart8]

This material works really well, apart from when it's on the floor, I like how it makes my characters pop out.

[@fernandodiaz5867]

Thanks for your work, sharing your knowledge with us!

[@LaParodiaSV1]

It would be nice to show an example on a model, to see it working properly.

[@remlezar2693]

Absolutely fantastic! The only problem I'm running into is having the scene light reflecting off the object I used the material on so it looks like the highlight of the material is painted on but I'm getting there. Thank you so much for such a comprehensive and to the point video!

[@remlezar2693]

Scratch that, I literally just fumbled with it and fixed it lol! Thanks again for the great video!

[@InitialStates]

Love the music and the tutorial 🎉lounge feel …

[@joepeatfield9420]

I absolutely love this tutorial, it is a shame there has been no follow up on reflections and other features I can find on the channel. Great content though, your channel is great at getting an insight into many areas of Tech Art.

[@alwayscoding]

best tutorial on this topic by far

[@VisualTechArt]

Too kind :D

[@KaitheArtGuy]

Been looking forever for a cel shader like this, thank you! My game looks much closer to it's original concept :D

[@itsN31L]

Thank you so much! This was the only method that worked for me

[@XxKherxX]

For the Directional Light Material, if you use an Atmosphere Sun Light Vector (UE5.4) rather than a float 4 color parameter at the start -- then you'll have the cells actually following the directional light's rotation.

[@VisualTechArt]

When I made this video that node didn't exist xD

[@cook0413]

Thank you for your explanation and sharing Benefited me a lot！

[@VisualTechArt]

Nice to read that, thanks!

[@deever92]

I was missing your videos, thank you for sharing!

[@RwanLink]

How would you make a transparent cel shaded material with only the outline and a highlight?

[@VisualTechArt]

It could be interesting to try, but thinking about that on the fly I'd say that the shader would be essentially the same, with the addition of an opacity value, that would be higher on the highlight :)

[@RwanLink]

@@VisualTechArt Could you make a video explaining how you would do something like that? and also how to add reflexions? If you have time of course.

[@VisualTechArt]

@@RwanLink It will definitely come at some point, I'm very interested in non realistic rendering :) I'll have to experiment quite a lot for that though, never done such thing before!

[@nintenjo64]

Great video and super handy, problem i have is um using your cel-shaded effect for the material surface, but a pos-process effect for the outlines, but the issue is that unlit materials dont have any world normals which my post process effect needs in order to do the Normal Edge Detection.. so im a bit stuck :P and my brain cant compute a way around it that.

[@VisualTechArt]

I guess you could make it Default Lit with Base Colour 0, Specular 0 and Roughness 1 xD

[@nintenjo64]

@@VisualTechArt yeah ive done that for now.. the simplest solutions often the best :P thanks.

[@Jacobee1101]

Awesome video, helped me a lot! Is there a simple way to make this same kind of toon shading but for glass? (I'm making an astronaut-ish helmet)

[@VisualTechArt]

Well I guess you can use the exact same approach but with a translucent material? :)

[@Nernage]

Thanks, best method I’ve seen.

[@injjwetrust4678]

First, great video! Love the overall style! Curiously, as someone who is a beginner I am not sure if this is easy to do, but wouldn't it be possible/best to make this a general-use ("master material"(?)) by adding a node to work based on the base-color map, and then simply change the brightness of each tone/band by x% (ex. base: 1.0, highlight +20%, shadow1 -10%, shadow2 -20%... etc. etc.) to make it automatically work with any mesh? Looking forward to your reply!

[@VisualTechArt]

Thank you and yes! It would definitely make sense doing that :) In general I wanted to focus just on the logic, but you can build up on top of that as you prefer. One problem that I would see with just adjusting the brightness is that in a stylized context you usually don't want only that, it would probably make more sense to find some nice HSL rule to keep shadows and highlights to a good level of saturation and hue :D

[@Sacred6T4]

I really like this material. Is there a way to have more than 3 colors? And, can I change the color of the outline?

[@VisualTechArt]

You can nest more lerps with more colour bands and yes, you can use a colour for the outline :)

[@tomwolinitz]

Genius

[@alan_ars]

Worked perfectly!! Thank you!!

[@zxc801127]

Thanks a lot for this tutorial. The custom color of highlight and shade is the best part that make it like real 2D anime. I wonder how to do this shading on a character model whit many color. One material for one color ? Or any better way to do.

[@VisualTechArt]

You could go for one material per colour, but it wouldn't be optimized :) You can have an ID map and blend together multiple colourizations in one material... Or also have just a main b&w cel shaded gradient that you apply on top of a Base Color texture

[@EvanSisson]

My Directional Light - Direction parameter didn't look right when I followed your steps, I had to input the values 0.5,-1,-1,0 to get it to match this.

[@VisualTechArt]

Maybe you just had a different camera angle?

[@EvanSisson]

@@VisualTechArt I made sure to match the camera angle and that the highlight was on the opposite side of the shadow. It might have been an issue with using UE5? Using those inputs seems to be working though. Thank you for the great video!

[@VisualTechArt]

@@EvanSisson Ah maybe UE5 has a different default light angle

[@MultiAndrew6]

In case anybody else has this issue just be sure that your multiply is set to -1 and not 1. Solved it for me at least!

[@studiotouge]

Life saver!

[@victorwillerandrade]

good video man Can this material be used in the post process?

[@VisualTechArt]

You can approach it with a similar logic, but you would have to make significant changes to the nodes

[@Drakuba]

im 1/3 in the vid and i must say its getting rather frustrating guessing on how and where you pulling some of those nodes. I have to guess quite a lot... 2:33 no idea what that little bugger is called (edit: its Constant upgraded to Parameter?) 3:19 those are Constants as well right?

[@VisualTechArt]

Thanks for your feedback, I tried to improve with my latest videos :)

[@olalukie3489]

That's extremely helpful! I wonder, is there a way to add a slight textured "gradient" blending on the edges between these cell thresholds? E.g. if we wanted to imitate brush strokes ect

[@VisualTechArt]

Sure it is! If you just want to deform a bit the straight line of the cell but still keep the colour change sharp, you can just add a noise to the gradient, before the saturate node. If you want the transition between the colours to be smooth too, you also have to swap the IFs with LERPs and do a bit more rework to make the blending operate with gradients :)

[@k-9375]

Where do you plug in the Multiply node? The Base color? Or Emission? Is this meant to be a post process material or normal material? I'm not getting any results so far

[@VisualTechArt]

Emissive I'd say :) This specific stuff is for having a specific cel shaded asset, so no, not a PostProcess Material. Anyway, here I show a way to get the look, how to integrate it within your project it's up to you ;)

[@k-9375]

@@VisualTechArt Thanks!

[@thegreendude2086]

I am not sure hot to actually pass the point light position into the material. Especially if they are multiple ones, how do I go about that? Are you running some sort of code that gets the nearest pointlight?

[@VisualTechArt]

That's up to you how to setup, you could create a Material Parameter Collection holding all the light data you need and updated by BP, and add code in the shader for all the lights, for example

[@ryanpatton1795]

This definitely has its place, but fair warning to anyone wanting to put this on Low Poly style stuff - it probably wont work as intended. Looks terrible on hard edges and flat faces. Also realize that the directional light AKA your sun doesn't control the shading, that is done in the material, which could be problematic. Just an FYI for those just trying to implement it into their project.

[@VisualTechArt]

True :) I showed this just because is kind of the only approach you can take from an asset material. At the time wasn't a thing yet, but now the directional could work with the dedicated node they added at some point!

[@CarisTheGypsy]

I'm not sure where I went wrong, or it something just doesn't work the same now, but the point light doesn't work, the top gradient to the saturate node just comes out black, which just erases the value at the multiply. Naturally the spot light has the same issue. Any idea how to fix?

[@VisualTechArt]

One thing that comes to my mind is to check if the light is not inside the mesh (or too far), if you copied everything correctly

[@olaufr]

This is a great tutorial, but I had a problem to apply the outline to a tree mesh (with leaves). I'd like to have the same outline effect as when selecting an object in the editor (orange outline). I think there is a way using post-process materials and stencils, but what I have seen is not totally convincing: some examples highlight some of the inside geometry of the mesh instead of only the outline. Also some make the outline visible through other objects, which is not always desirable. A tutorial about this would be great!

[@VisualTechArt]

I totally get the problem :D There are ways to get a "signed" line in Post Process, so that you have a "negative line" on the inside and a "positive line" on the outside. So you can separately decide what to do with them!

[@shokew2241]

Good job! Can you please make tutorial with a gumroad download and show how to put this effect on a whole world/characters?? maybe something like Studio Ghibli anime look?!

[@VisualTechArt]

That's a lot of work man! :D Maybe one day I'll be able to spend more time on this channel and do something bigger for every video. Anyways, I have the studio Ghibli look on my list of the things to try to develop, that will come for sure ;)

[@darieuslegg]

Praying for the Ghibli tutorial you wizard! 🙏🏽🙏🏽

[@lauriannepchn8371]

Hi ! thanks for this tutorial, did you find a way to add some glossyness to make the mesh more shiny ? I looked into the comments but I did'nt find anything about this (maybe I searched wrong)

[@VisualTechArt]

When you do the dot between light direction and normal, try to use instead of the first one a vector that is halfway through the light and camera vector ;)

[@Bak.R]

Hello, Just a little question. Cel Shading, is good but a little bit old. Do you think a game like Genshin Impact is Cel Shading? Do you think we could improve the Cel Shading to create something more modern and more beautiful?

[@VisualTechArt]

Well Genshin is more "anime", which actually is cel shading on the characters, while more stylized towards a sort of watercolour for the environment. Like Legend of Zelda for switch, like Ghibli movies and in general Japanese animation :) You can use cel shading to create something new, of course. At the end of the day it's just a tool, a painting technique, to put it in drawing terms. What you do with it is then up to you and your creativity and artistic taste :D

[@Bak.R]

@@VisualTechArt todays everyone talk about ‘stylised’ but it doesn’t mean anything! Is there more a specific word to talk about those kind of graphic? Before it was Cel Shading for cartoon style. But today they use stylised for everything sooo it’s difficult to find some good info regarding those technic. I don’t know if you know the game Archeland but it looks amazing. I need to know what is the style behind that.

[@VisualTechArt]

Well stylized simply encapsulates everything that is not a pure representation of realism xD Not everything has a specific name, you can study a bit of art and learn which are the artists you'd like to "copy" and start from there

[@Bak.R]

@@VisualTechArt I will not do myself, but i'm looking for people able to do it, or market place close to what i need. but Stylised provide like non existing result :D. But if i can't name what i need, it's difficult to find people able to do what i need :D

[@VisualTechArt]

I can't help you I'm afraid :( Not everything has a specific name, you just need to have very clear what you want and put it down to some concepts and art direction document, let's say. Then you'll need to find a Technical Artist that is more into shader programming like me, or a graphics programmer maybe, since "stylized" stuff is a real pain in the ass with UE, given the use of the deferred rendering pipeline :)

[@RevolverPicturesYT]

Without knowing the shortcuts you used to make half the nodes in this tutorial it's impossible to follow along unfortunately. I made it to the 2:35 and didn't know how to create that node so I'm stuck now :\

[@VisualTechArt]

Are you talking about the component mask?

[@Jukerlaw]

Can you try applying it on different mesh? because using fresnel for outlining doesn't seem always a good way.

[@VisualTechArt]

The fresnel effect is not the best way to create an outline, but is the only one that I can think of if you want to create it in a material that you apply directly to a mesh :) Of course that will introduce few restrictions on how you model the assets (for example you need to have always rounded shapes and soft edges) and it won't create a consistent outline thickness all across the scene unless you spend some time tuning that up. A better approach could be using kernels in a PostProcess material, but that will be the subject of a future video I'm planning to do ;)

[@BarakaGameDev]

How about toon water with refraction?

[@VisualTechArt]

I would take the same approach for the realistic one and stylize colors and waves shape, probably. It can definitely be a topic for a future video ;)

[@studiotouge]

Is there a way to update the light direction from directional sunlight as it changes in game? I can only seem to set the direction within parameters

[@VisualTechArt]

At the time I did the tutorial there wasn't, but now you can use the SkyAtmosphereDirectionalLightVector node (the node name is either that or similar, don't remember exactly) :)

[@studiotouge]

@@VisualTechArt thanks for the reply. I will give it a try today and see how I get on. I’m assuming it just replacing the first directional light vector node but that seems to simple haha. Edit: it was that easy and worked perfectly 👌🏻

[@verimation]

The outline gets very thick when camera gets under a big object with this outline applies to it, and it makes the mesh black, please is there is a way to avoid it let me know ❤

[@VisualTechArt]

You can change the threshold for the thickness relative to distance from the camera, maybe :)

[@daviddelayat-dnapictures]

Thanks a lot ! Could this be applied to a postprocess volume ?

[@VisualTechArt]

Yes, but you would be acting on the whole scene at the same time, so everything would end up having the same colour palette, for example. Usually the way to do cel shading via post process is a bit different from this, but you can definitely try and see what comes out :)

[@daviddelayat-dnapictures]

@@VisualTechArt thanks a lot for your answer! And would it be possible to have non opaque colors? Only 3 shades of grey but the original colors goes through?

[@VisualTechArt]

@@daviddelayat-dnapictures Yes, you can multiply your grayscale by the Base Color pass

[@zeekindustries]

One quick question about the angle of the spotlight. I am not really following what is the value in for the angle. Is it in radians? Turns? Is it already a cosine result? I would like to be able to give an angle in degrees (a 0-180 range for example), I understand I will need to convert in order to feed it to the cosine, but it is not clear what is the conversion that I would need to do that. Any help will be very much appreciated!

[@VisualTechArt]

The angle is in turns because I just use UE's cosine node, which by default is set to be in 0-1 range. If you want to be in degrees 0 to 180 you can just change its parameter in the detail panel :)

[@zeekindustries]

@@VisualTechArt Man, thanks a lot for the clarification, this definitely helped me to move forward!

[@crisrocha3819]

Hi! Is there any way that I could change the color of the Outline?

[@VisualTechArt]

You have to create a similar set up like the colour bands, with a lerp and a colour parameter

[@CYPHERNATURE]

Is there a way to combine all of them so they would work whenever a certain light hit, or in combination of the different lights? Or would this be more manual.

[@VisualTechArt]

Since you're manually implementing lights, it requires you to do the job :)

[@geekpotion]

I'm not sure if I'm stupid and missed something or If I just misunderstood the point of the tutorial, Shouldn't the highlight and shadow change with the light, tried to change the direction of my light but I get no reaction from the materials

[@VisualTechArt]

If you were moving the "normal" light actor in the scene it doesn't work. As I say in the tutorial, for this cel shading method to work you have to re-create the light models inside the shader, because with the deferred rendering you can't access the light data in the materials. To make them reactive to the light in the scene, you should use a Material Parameter Collection to pass the light direction, intensity etc to the material, and set its parameters from a Blueprint, which can inherit from a light actor, which set the MPC parameters at Construction/BeginPlay scripts.

[@IceBurg420]

how might I change the colour of the outline? edit: sorry for the notification, I figured it out, I was overcomplicating things lol edit 2: now I'm stuck on changing the centre colour to black without changing the outline colour to black

[@VisualTechArt]

Ahahahha no worries :) If you want that type of control I think you could just swap the final MULT for a LERP, use the Outline IF as Alpha and interpolate between the outline colour and the fill :D

[@IceBurg420]

@@VisualTechArt thank you!!

[@polarnyne]

Can I ask you how can I change the color of the outline?

[@AntrygJones]

Do you know of a way to make the radius of the spotlight dynamic? Let's say I have a radius of 2000, and the bottom of the SL cone is just contacting the floor which is using the material. Works perfectly. But now let's say I shift the SL down a few feet, where the cone goes through the floor and out the bottom, thus making the area on the floor that the cone covers smaller. The material is now still displaying the same, now incorrect radius. Any ideas on how to get around that? EDIT: I should mention that I'm using a parameter collection to get the radius of the light.

[@VisualTechArt]

Not sure I understood to be honest, are you finding that the spotlight model keeps illuminating the same area regardless of distance from surface?

[@AntrygJones]

@@VisualTechArt Here's an Imgur link of my results [REDACTED] EDIT: also yes to your question.

[@baorichard4345]

i am not sure if i did somtthing wrong, but the point light and spot light doesn't work on the sphere mesh, is it only prepared for the plane?

[@VisualTechArt]

Check if you didn't place the light inside the sphere as first thing, then adjust light intensity to see if maybe it's too dull :) It works on any surface

[@clarebear2]

@@VisualTechArt same thing is happening to me. Directional works perfect (thank you!), but point and spot don't show any cels, just a smooth gradient like a standard shader.

[@VisualTechArt]

@@clarebear2 Did you hook them up to the rest of the shader that does the banded colouring? Weird though, I should have a look at the nodes to understand what's going on

[@gilbert-finglebottom]

what keyt did you use to add that first node. the vector 3 node

[@VisualTechArt]

Hold down 'V' and click

[@Grimsikk]

I'm confused, I'm following your tutorial but I don't understand how I'm supposed to use this for my characters, models, etc. None of them are just one flat color, they have multiple colors. How do I make this an all-purpose material that I can apply to my game so that everything retains their textures/materials but is cel-shaded like this? also this doesn't seem affected by any of my lights in my level. I don't understand how this is supposed to be used in a game?

[@VisualTechArt]

I think you're the one that I just answered to on Discord, aren't you? :D

[@Grimsikk]

@@VisualTechArt Yea haha XD

[@stanislavvakulich1378]

I have the same problem. Could you help me with that too, please:) I don't understand how to make this material an all-purpose one, without any relation to a particular color and also how to apply it to characters and the environment:) Nice video, btw@@VisualTechArt

[@swrcPATCH]

The dot product of the vertexnormals and the cameravector is equal towhat you get using the fresnel function and does only look like an outline using a spehere. If you try a cube or any other not spherical mesh it wont look like an outline at all. Not so nice.

[@VisualTechArt]

Yes indeed, the fresnel effect is obtained by doing dot(CameraNormal, VertexNormal) and then remapping the gradient based on the physical properties of the material you want to simulate. By doing manually the dot product you skip the remappings included in the Fresnel node (less instructions). And yes, using it to make outlines is far from a optimal solution, since it doesn't work very well on hard edges and very flat surfaces. It's the only way I'm aware of you can simulate an outline directly into a material applied directly to an asset though. That said, if used in conjunction with other stuff, it can have its role, I mean, look at Borderlands ;)

[@swrcPATCH]

@@VisualTechArt Do they actually do it like this in Borderlands? And I did not know about having less instructions when not using fresnel but using the dotproduct in stead. I might change that in my shaders.

[@VisualTechArt]

​@@swrcPATCH Yeah, they use that (or something very similar, at least) in conjunction with other ements, I found a video some time ago that was showing that very clearly, don't remember the title though.

[@lenkasailerova8615]

How can I add the parameter you're adding at 2:34 ? What is the name of it? Where can I find it? *Edit: It's scalar parameter if anyone wonders.

[@VisualTechArt]

It's a Scalar Parameter, you can right click and type it, hold 'S' and left click in the graph, or right click on a constant scalar and convert it to a parameter

[@lenkasailerova8615]

@@VisualTechArt I didn't know there was so many ways to do this. Thank you! :)

[@alfonshedstrom9859]

Isn't it very poorly performant to use an if-else in this case?

[@VisualTechArt]

I used that instead of making masks for code clarity, but the IF node doesn't get compiled as an actual branch anyways, so no harm :)

[@alfonshedstrom9859]

@@VisualTechArt Ohh thats super good to know. That will help a lot in the future

[@sudhendramondal1226]

What about shadows from other objects?

[@VisualTechArt]

Smart question :) To make it simple... you don't get them, unless you build some other system on top of it to calculate them.

[@w3xyz]

what is 1-x 5:43?

[@VisualTechArt]

It subtracts the value you plug in from 1. It's very useful when working with values ranging only between 0 and 1, since it "inverts" them. For example 0.0 -> 1.0, 0.2 -> 0.8, 0.5 ->0.5, 0.7 -> 0.3 and so on.

[@analuizalamas9761]

@@VisualTechArt how can i get this node? I can't find it

[@VisualTechArt]

@@analuizalamas9761 search for "One Minus" or keep the 'O' key down and left click of the mouse on the graph ;)

[@VisualTechArt]

@@analuizalamas9761 alternatevely, you don't really need that node, just subtract your value from 1

[@pabloa4672]

Will it work for mobile? I'll try it just in case

[@VisualTechArt]

Can't see why not! :)

[@bkm1104]

Nice cell shading tutorial

[@Nernage]

Is there a way to use this method with textures?

[@VisualTechArt]

Of course, just use them as colour base with the Vector Parameters :) To give you a very simple example, you could do something like TextureRGB for the midtones, TextureRGB*ShadowTint for shadows, 1-((1-TextureRGB)*(1-HighlightTint)) for highlights.

[@Nernage]

@@VisualTechArt I’ll try this out, and thanks for the quick response. Btw do you have any issues with me using your wise teaching in my game?

[@VisualTechArt]

@@Nernage Of course not, I wouldn't be making free videos here otherwise ahahaha

[@Nernage]

@@VisualTechArt just double checking I guess, and I love the look of the cel shade, thanks again man.

[@Shilin_GG]

wow

[@zonian8782]

is it safe for mobile?

[@VisualTechArt]

Yes

[@thatnerdpunkdev]

i love you please marry me

[@ABaumstumpf]

Would just be nice if you did not call Toon-shading cel-shading - those are 2 very different things.

[@jmr3325]

fresnel ....

[@浪人-s1d]

wow