Stylized Anime Character Cel-Shading in UE4 [Tutorial]

[@Alpha17x]

You're the only person I've seen actually explain and show this, rather than talking about the philosophy of step shaders for 45 minutes and then showing nothing. Thanks.

[@pawprinting]

As much as I like this method (as it gives you control over shading textures), the downside is that emissive meshes cannot receive shadows at all. The same thing impacted official Guilty Gear game as the shadowing on the heads of the characters is painted on, and are not dynamic, following the movement of the hair.

[@Vector_Lotus]

@@pawprinting Normal maps? It wont require normal editing either.

[@sakattodesign9927]

@@pawprinting it almost solve the problem, the only problem is this shader shadows is horizontal but we need like genshin vertical shadow

[@pawprinting]

@@sakattodesign9927 What I meant to say back then was that if you don't use a custom shader model in UNREAL then shadows wont cast on emissive materials. The shader set he's got here is pretty good but still relies on emission for the flat color which is problematic. Shadows are essential to an NPR workflow in order to make things appear more genuine to actual Cel shading. I'm an UNREAL guy all the way and I moved from Unity a LONG time ago but one of the things that I miss so much is that with Unity you don't have to rebuild the entire engine from source code just to make a really decent custom shader. With C# or Amply shader you can simply make anything you want and just slap it on there and this is one of the things I envy about UNITY users, its mostly only this area. There are some decent custom shader models out there for UNREAL 4 (sadly no one has done a custom shader model for UE5 yet since the official version isn't out) and using them you can just plug two or 3 different textures directly into the material node. This is the same for rim light and everything else and you'll still get shadows and outlines just like that. When making the original Guilty Gear X3rd they used UNREAL 3 so its puzzling to me why after all of this time and countless amounts of stylized games up till now, that Epic hasn't considered this factor and integrated something more geared toward NPR artists to use in UE4 or 5 already. Its pretty frustrating.

[@sakattodesign9927]

@@pawprinting maybe you can check Kuwahara Filter as post processing. It something fresh here in unreal

[@Gametime05577]

Thanks For making This Awesome tutorial for free

[@matthewsteinmann891]

im adding a new comment because im amazed that you dont do more videos ( maybe you don't have time) but i think this one is great quality, straight to the point and you're great at explaining what you're doing !

[@ESgsPhysics]

Hi again, I'm also just going to reply separately to keep things organized. It's mostly dependent on whether or not I think I'm just copying what I've learned from another resource, or if I'm actually contributing something. I mostly made this out of spite because I was unhappy with the results from all the post-processing tutorials so I had to cobble together my own method. Granted, the theory is just what the Arc System Works guy says in the GDC talk but I couldn't find any resources in implementing something similar in UE4. I don't actually know UE4 very well at all, but there are some things lately I've been trying to figure out how to do that I can't find good resources on, so if I do come up with solutions I may make future videos about them.

[@n0t.Puffer]

Thank you for this tutorial. It's exactly what I'm looking for, I'm so tired of every cel shading tutorial out there relying on post process mat. You are a lifesaver!

[@verified_JC_Denton]

This is the best tutorial on the subject I've found, after extensive searching. A little tweaking for UE5, and I'm good to go! Thanks a bunch!

[@1upvscpu64]

If anyone is trying this in UE 5.4 or converts to 5.4 and breaks the shader or whatever, it's probably because 5.4 has a default "Base Color" on the material node. Just set that to pure black and it should work like when you didn't have anything plugged into it.

[@GamerFollower]

I love you

[@rainer1286]

hey ive been having trouble, i cant seem to see AtmosphericLightVector. Only see AtmostphericSunLightVector

[@elSoloLobo711]

This is exactly what I was looking for, thanks my man.

[@TorMatthews]

Great tutorial, im not making an anime cel shaded game but the atmo light vector vs vertex normal was super handy for setting some other shading i had to do. By the way, the stuff in the tutorial itself rough to read even on my 1440p monitor because you're recording a huger widescreen monitor, recording smaller boxier region of your screen for better visibility would help that.

[@juten6020]

Thank you so much for this tutorial! I knew the general material theory behind how it works, but finding the actual nodes was the hard part, so I appreciate this lol

[@gigisimpson2753]

Incredible tutorial, easy to understand, fast (straight to the point) and effective.

[@Bubblehorn]

Great intro tutorial to these shaders! People can really take this so many places.

[@injjwetrust4678]

@es As someone who is in the industry in Japan and is working with art production, I have to say that this solution really is the perfect 80/20 solution... as of it gets 80% of the result with 20% of the effort. The last 20% are the real nuances you mentioned where the pros are paid to perform, as they customize every last little area to add even more artistic flair/signatures/nuances to squeeze out as much artistic beauty out of the model/scene. This is great, but of course this takes a lot of talent and time, which ultimately means lots of money for AAA titles. I am impressed, and while I am not a developer or artist myself, I am hoping to take a similar approach for my own private project, using a more general post-processing solution for environmental objects and then a more customizable, higher quality shader solution like this for the main character. Hopefully the two will play nicely together! Very curious if you have tried combining it with other solutions or not. Thanks again for this top-notch quality tutorial + explanation!

[@PeterKLee]

this is the best cel-shading tutorial for my project :). Thank you so much for making tutorial video, ES

[@caelinhobbs7647]

best tutorial for this on youtube honestly

[@grahamulax]

Thank you mannnnnn. This is awesome. I was hoping to see someone actually put it together! Gonna learn a lot from this so thank you so much!

[@shreyasjain1808]

Thankyou sir, this was really helpful. I was looking for a tutorial for a while but now I understand properly.

[@hponeuser]

Thanks i am planning a manga and i am gonna render scenes in unreal this tut will help me alot for cell shading thnx dude

[@colmantrasscinniro2901]

Thanks, it replaced my cursed looking cel-shader. Finally my game looks like I want it

[@Antosha_Bazovichok]

would be glad to see how to do it with point lights, not only global lighting, cause now this shader completely ignores additional light sources

[@slackamacgaming6721]

👍

[@doudar41]

you are savior, thank you.

[@EthanolChan]

Dude, you are my savior ! Thanks you so muuch

[@quiskeya]

Hello, Awesome tutorial! thanks. But I'm wondering how to disable the effect when the character goes in a shadow area? In the Genshin Impact, when the character goes to a shadow area, the effect fade and reappear when it move to a lit area again. I've been trying to do that but can't. I know it posible because game like Spellbreak and Genshin, etc, manage to pull it off. If someone have a solution tho this, It would be very helpfull.

[@activemotionpictures]

Awesome video!

[@JeanLucMG]

What an absolute chad, thanks man!

[@MrYoungfly1]

My Goodness! Finally someone who understands me. Thanks for sharing.

[@natifice]

That's some really cool knowledge, I'm going to play around with it and see what I can get Thanks for sharing

[@ktmochiii]

lol that actually looks amazing. i know jack sh** about shaders but I actually understood the gist of this. Awesome stuff. Excited to see more like this. edit: just finished the vid and when u said "i'm never gonna upload stuff like this again", pain uwu.

[@TheRealFinalOne]

Really good tutorial!

[@ofr2779]

great method of doing it, thanks very much!!

[@丁淳一]

Thanks for sharing! It's a convenient way to archieve Celshading. But I belive it would be more powerful to control the shadow with UE4's curve editor.

[@myndo8141]

You're a life saver

[@PIPOXO]

thank you! this was very useful for doing 2D stylized assets to merge with 2D animations.

[@StephenHarperRaptagon]

You can multiple the atmospheric lighting with the end result of the if statements to change with the lighting. You may not want this in the end though

[@galaxymemer]

THANK YOU!!!! I needed this!

[@kiomy_music]

Hey bro, the video is so useful and i already did everything, looks cool, i did it at ue5, the only problem its that Emisive color actually glows. Maybe its cz of Lumen, not sure. I'll search a fix for that problem. Thanks man

[@Reaubocop]

Thank you for this!

[@Cat_trot2333]

THANK you dalao

[@ImOnGearSoWhat]

Thank you for this helpful video!!! 🙇🏻‍♂️

[@drgnak5677]

thanks so much for the tutorial

[@dirwir1705]

Great video! Very inspiring. Thx!

[@GamerFollower]

I found a way for the shader to interact with lights and shadows, it isn't perfect but better than nothin imo. Take the output of the last "If" node and put it into the "Base" color output to have shadows/colored lights.

[@FromNowhereProd]

Very informative tutorial, thanks for sharing :)

[@henbree8836]

works fine for the most part, but my character dosnt recieve shadows. It might be because i used atmosphere sun light vector but in ue5 there is no atmosphere light vector

[@libreroelgram4823]

Amazing video

[@Xeyner13]

Awesome, thanks a lot man. The only problem I see is having that much emissive all the time. When you're in a dark area, the character is glowing so much. How do you think this could be fixed?

[@tianyizhou5050]

Really good tutorial ty

[@anastasiak125]

Thank you! ☀

[@IzikDigitalArt]

Bro thank you

[@sthJuniorPK]

Great tut. Thanks

[@hendrixgreengilmour]

Awesome! Thank you! 🙂

[@viciousvndta]

How to do self shadowing?

[@__dINe__]

Just subscribed, well done and do more please!

[@SRYimWithU]

thank you so much!!!!

[@hatsunemikuchannel2023]

15:42: Final Result! 🤔🤔😲😲😄😄 Es, Is it possible to get outlines with this method, pls ? 🤔🤔😯😯

[@hellgame8107]

can anyone tell me how can i give a little saturation to the shading so it's more blended with the skin color

[@miguelangelhuamanibenites1460]

Gracias, al fin funciona

[@gordongroth4674]

I have been searching for this, consider me Subscribed

[@sjb8178]

This is a mindblowing video…

[@HuskDanny]

Hi es, Do you know how to create that highlight band on the hair? I loved this video but i'm really trying to get an anime hair band like in guilty gear now. Cheers

[@swordsmancity]

Thanks alot mate.

[@mrb6913]

thanks a lot!

[@sunria3408]

thanks for the vid but some advice would be to not make the node screen too small because its hard to see what nodes your using this might not be an issue for more knowledgeable users but for beginners like me, its makes things a lot more difficult

[@ESgsPhysics]

I see what you mean. Here's an image of the blueprint if that helps. i.imgur.com/r0QS0vo.jpg

[@sunria3408]

@@ESgsPhysics thanks mate

[@kinggore5229]

Good stuff.

[@xxerbexx]

no contact shadows, only one light, no light color, there is much problematic with this setup. not a critique on you. just a general notice. you could probably work around the light color but like... haveing more then one light will always be problematic with that setup

[@PoorRoleModel]

Yeah, I spent a month writing mine, getting everything from dynamic lighting, color banding, vertices, etc working. This only works in a VERY specific environment style, and isn't really applicable to anything you could actually use in game. It looks nice for a wallpaper image or something, though.

[@aqlord]

face doesn't shade in chunks, if you go slower, you can actually see the in-between areas being shaded, maybe fast due to the angle of light hitting the angle of skin but they are being shaded smoothely.

[@HFDbananafana]

i love the video.but is there something i can do to the shader so the character can receive shadows from other objects?

[@BrainFood-ev2jc]

Where can I find this guy right now??? No insta no nothing ???

[@rohanmandke1920]

Hi es, Thanks for the shader, Just wanted to check if there any updation done for smooth blend on the hard shadow lines. or can we achieve something like that

[@kiaraspencer3474]

This is awesome thank you so much! I am testing this out right now, but I was wondering if there is a way to add an emission map to this method? I have a sword that is partially glowing and I was hoping to do this instead of the post process method.

[@Drunken_Hamster]

What would it look like if you kept the gradient and skipped the hard shadows section, but perhaps made it a sharper gradient and maybe with a couple stages or something, idk?

[@jamesmarcus2043]

I do not see AtmosphericLightVector node in UE5. I am thinking that it is no longer?

[@user-mudong]

The node changed it`s name to "SkyAtmoshpereLightDirection" in UE5

[@侯炜杰]

How to correctly affect the bright and dark side of Atmospheric light color

[@ezekielhabegger]

How do you correctly hook up the atmospheric light color node? Thanks for such an amazing tutorial!

[@matthewsteinmann891]

hello, great video, could you do a video on the outlines you mentioned ?

[@ESgsPhysics]

Hey, I appreciate that. I probably shouldn't since I don't understand how the method interacts with animations/rigging which is an area I don't know much about. I know that it is used in those applications and works in theory, but I only know how to use it when it comes to static models. The method is called "inverted hull" though, and there's plenty of resources on it. If I did make a video on it, it would be very basic and more 3D rendering theory than how to actually do it in a real game/application because of my limited experience with it. This video kzbin.info/www/bejne/eIjSh56Hn76hmbs between like 1:30 and 4:00 covers what seems like a pretty easy way to do it strictly in UE4. The comments bring up some discussions about the rigging/animations issues I mentioned (again, it is used in those applications, I just don't know how), but the comments mentioning doubling the polygon count are blowing that issue out of proportion in my opinion (even though it does technically double the polycount).

[@ESgsPhysics]

Okay, I take it back. I found a good way to at least test it on animated models that seems to work, all done in UE4. So maybe I'll put together a video this weekend on how to do quick outlines.

[@melancholicookie7703]

@@ESgsPhysics hello!) For some reason, my shadows may not depend on Light Source?

[@Phili-mation]

Sorry could someone help me,. I don't know how you create your static mesh or blueprint for the character. My character isn't seperated like yours. so i can't apply do the first step of this video ;-;

[@shahmaarbaba]

how to apply this material on post process material to effect whole world

[@thecohort3459]

thanks :)))

[@dylandesban9506]

Is it normal that is doesn't catch shadows casted by other objects ? Is there a way to fix it ?

[@ethanwasme4307]

yes and nope, for my project having a blob shadow under the character is good enough

[@izzy-mew]

@help My material tab isnt showing up with atmosphere anything other then fog. do I need to import something for it to work?

[@hex9318]

Putting the AtmosphericLightVector and VertexNormalWS into a dot product just gives me a completely black material with no white half. What did I do wrong?

[@LiArtful]

Looks good however this model wont take shadows from other objects.

[@DrGameTazo]

HI~ can it recieve shadow from static Mesh??

[@demonstaves2671]

Thanks

[@ianxy9797]

at what point do you show the outline? when you talk about the "bands"? I followed those steps but it gives me some lights and shadows in the model...

[@milo20060]

Interesting interesting... In short *This is absolutely

[@추인덕]

Wow. can you make for us how to create materials texture(albedo)..? i m really want to know it,..

[@reasonboykang]

question the model itself is separated when you import?

[@thedarkprince3344]

why the shading doesn't change its position when I move my sun

[@prinzpablo527]

Surprised you didn't mention Honkai Impact. By Mihoyo as well.

[@LastLynxSRS]

Where do you even get these models?

[@warzerdelta6496]

Hi, it seems like my texture colors are automatically lightened since the map is inserted in the emissive color channel. I would like my color to keep their original value just like in your case. Do you know why that happens ? Thanks

[@ESgsPhysics]

I was having a similar problem too at some point. I don't remember what I did to get around it off the top of my head though. I'll see if I can't reproduce the issue again over the weekend when I get a chance. I don't think it was because of the emissive color itself though. Make sure that you don't have emissive color AND base color though in the meantime, that rings a bell as causing issues.

[@warzerdelta6496]

@@ESgsPhysics thank you, just so you know i didn't link any texture to the diffuse

[@ESgsPhysics]

@@warzerdelta6496 Okay, assuming you've got the same issues I was having, the problem is the default Tonemapper. It wasn't making everything brighter in general, but it was messing with the colours (I gather the purpose for this is something like trying to make things look nicer on HDR displays). I tried to replace the tonemapper with a mostly blank PostProcessing material/volume, but for reasons I don't understand that makes the whole scene way too dark, but that in theory that could work as a fix. The good fix I found is to just disable tonemapping entirely, which you can do with a console command, so "~" and then type "ShowFlag.Tonemapper 0". You can also hook up an "Execute Console Command" node to the "Event BeginPlay" node in the Level Blueprint with the same command. Also I think you can change it with an ini setting. The way you can be sure if you're having the same issue (aside from disabling tonemapping fixing it) is that the texture colour will look similarly wrong if you just apply them to the model in other ways, like diffuse or unlit with emissive. but will go back to looking correct if you set the viewport scene to "unlit".

[@davehansan]

How would I soften the edge using this method?

[@Justathereptile]

I cant find the atmospheric light color. How did you find it?

[@aisyiput]

It's like blender's node but for gamemaker

[@ironmeme7340]

Where did you get the Amber model?

[@TheGreatResist]

I'm curious as well.

[@ironmeme7340]

@@TheGreatResist I found out how, but you need a chinese ID to get it from the chinese website. Big suck. There were other sources but they were janky as shit.

[@IBubblesTV]

Is there a reason why when I plug the textures in, they are emissive x1000? Your amber isnt glowing to all hell here, and you never explain that

[@midnattbeats]

Could the hard shadows be applied to post processing as well? I'm using your shader as a material on both my characters and the ground, and the shadows are removed. If anyone has any solution it'd be appreciated.

[@ESgsPhysics]

I can't recall exactly right now, but a vague direction in which to look: try some other scene inputs into the post process node, I don't remember which ones (if any) this shows up in. There was 1 where the character appears entirely black (I think due to disabling lighting in the shader), so you can probably use that to mask your post processing. Though you may have to figure out a different way to do the same idea though, it's possible that it won't play well with other post processes.

[@sleepymolegames]

Very good video. But one big disadvantage vs Post process cel shading: Receiving cel shadows seems to be almost impossible in ue4, except if you modify the engine code or something. With Post process cel shading it's included already

[@JohnSmith-tk2wp]

Where to get Beidou ?

[@hugin9876]

This is awesome! Share model source?

[@ESgsPhysics]

You can download the models from mihoyo at genshin.mihoyo.com/ja/news/detail/5885 They are in a format you might need to fool around with though, I converted them on a website called anyconv, you can just google 'pmx to obj', but I think there is a blender plugin to import them too.

[@lektex5160]

@@ESgsPhysics With me only single parts are imported and not a whole object can tell me help? (Have Translate it with Google Translate because my English is bad.)

[@ESgsPhysics]

@@lektex5160 I am not sure. If you're importing into Unreal try using the "Import All" option. If you're opening it in a 3D application like Blender and then exporting it, make sure that you are selecting all of the elements of the model when you export it, but it will depend on which application you're using. The models are broken into pieces for (I think) shading reasons that I'm not dealing with in this video, Before importing them into Unreal I combined the pieces into 3-parts matched to their texture maps for simplicity. You'll have to look up a tutorial on how to do it in whatever 3D application. Blender is totally free and good, but I don't personally use it, so I don't know what the steps are.

[@lektex5160]

@@ESgsPhysics Thank you! I imported the model into UE4 and it is whole now. Now just have to see how I do it with the textures.