UE4 Tutorial: Toon Shader (Borderlands/Jet Set Radio)

[@westcoastcaper]

You made that easy to understand! That's the first material related tutorial that I've seen someone break down the actual reason for the nodes rather than just saying "Use this here".

[@richardestes6601]

For anyone wondering, the Epic Games Cel-Shading Livestream section that covers outlines goes from 16:00 to 42:00.

[@toastpavedtheway]

the heck

[@GrumpyMunkyGameDesign]

@@toastpavedtheway yeah it just takes you to those time stamps in THIS video lol

[@BlueprintBro]

Thanks

[@billyjohnny6225]

Thank you Cel Shading and Outline are very helpful for indie developers who can't make Super cool High Poly models with great textures

[@BritsyElyse]

I am in love with this tutorial. Thank you so much! This will help me with my art environment.

[@underscore00]

Thanks! :) Glad I can help! Feel free to drop me some screencaps, I'd love to see people put the techniques to good use :)

[@Whimfoome]

Oh, I learned something today. I don't understand anything that is related to shaders :(

[@Jarmundx]

Don'd worry... i can't barely make a fricking triangle in openGL -_-

[@tatummiller2214]

i guess Im pretty randomly asking but do anyone know of a good place to stream newly released movies online?

[@tatummiller2214]

@Josue Draven thank you, I went there and it seems like a nice service :) I really appreciate it!!

[@josuedraven3070]

@Tatum Miller You are welcome =)

[@richardtoth7240]

10:40 Headphone users beware!

[@klarnorbert]

fuck you

[@richardtoth7240]

@@klarnorbert lol

[@klarnorbert]

@@richardtoth7240 :D

[@alexmarques2386]

Thanks!

[@peshangahmed2484]

thnx for the reminder

[@Erros]

for anyone who made a cel shader before following this tutorial, in the post process materials array make sure the outline shader comes first or else you won't get lines around your character when they only have the sky box behind them

[@underscore00]

Great tip! Thanks for commenting

[@Forgen427]

Its doesnt work for me. Outline shader is first, then right behind cell-shader. But when skybox behind my object theres no outlines. Update: Boundry_Line_Thikness doesnt work when skybox is behind Its looks like when skybox behind object PostOrocess using smthn like default outline parameter

[@dinomaster606]

Warn headphone users next time you use a dubstep transition :'c cool tutorial though!

[@underscore00]

hahaha I know! It hits way harder than I thought it would! :'D Sorry man, I havent done that since - but I will definitely reign it in next time

[@dinomaster606]

Don't worry about it, I'm not deaf yet ;p

[@felipeaugustomarques1725]

That was indeed extremely intense! :D

[@sxrevived1087]

i love the way it looks and that robot tiger damn looks beautifull i will try it on my own projects

[@koolkat8639]

You got my attention when you put jet set radio in the title of the video.

[@underscore00]

Great game!

[@krdmne.]

That plane is The Tornado from Sonic!

[@underscore00]

Yes it is! Good catch :)

[@cr4ftsman791]

If you want a lower quality way just press F2 and it also works

[@guilhermenaco]

Thank you! Indeed, best tutorial on this topic!

[@shurikanzzz347]

Best tutorial ive ever cleared. 10/10!!!!

[@JD-md3kx]

Yeah Man, a "Zoid"!!!! And a great tutorial as well. Thank you!

[@CultivationPath]

For anyone looking at this video, it's outdated with the current versions of UE4. This is a revisit of this video by the same user kzbin.info/www/bejne/pmnQaXlpjpKKfqM

[@hatsunemikuchannel2023]

3:17-3:30-5:30-5:40: Woah! Yeepee!! 3:17: The Entire Node Settings 5:20: Duplicating The Entire Node Process From Above 6:00: Masking The Sky 8:40: Other Node Masking Settings 9:38: Well, i'm inside Unreal Engine 5, and i csntvfind "Render CustomDepth" option

[@drewjackson3858]

Your cel shading transition reminds me of Saints Row 4.

[@OkayKirk]

i actually shat myself at 3:17

[@HelderP1337]

Why?

[@MojiiOkay]

If you're having problems with your IF node throwing an error such as "cannot force a cast between non-numeric types" during the outline section of the tutorial, pop another Mask set to RGB in between the LERP and the A < B socket of the IF node.

[@tonii0502]

8:02 Pfff Yea.. obviously! I totally understand what I'm doing \( ಥ ‿ ಥ Thank you for the tutorial though, didn't think I'd come this far.. please do something about that dubstep part!

[@ВикторГорбачев-р4ф]

the best lesson I've ever seen

[@NicolasSilvaVasault]

amazing, with shadows interaction and all, but it feels a little bit performance impactful

[@underscore00]

It's not too bad, really! Are you getting frame rate drops while using this effect?

[@NicolasSilvaVasault]

underscore with high polygon assets yeah kinda

[@AntonioArnoldoLimadaSilva]

Yll me kill with this transitions 😂😂😂😂😂😂

[@DJL3G3ND]

I agree, this IS cool

[@alexboychuk3057]

Music transition is awesome! thank`s)

[@cigvipe0794]

You just got yourself a subscriber! way to go man! thanks for this content

[@SAHDNICO]

Hi can you help me on this after I tried masking the sky which you started to explain in 6:00. The borders seems to be lessened to no effect, I tried doing what you did however I couldn't make the same effect as yours I'm working on 4.24.3 thanks. Hope you can help me on this.

[@sitansusahoo5534]

Thanks man you saved a quit a huge amount of time. Real great work mate...keep going.

[@underscore00]

Thanks so much, pleasure to help! :)

[@madmer]

Awesome upgrade!

[@alkalys1]

wow, nice transitions!

[@dodgyyy]

It doesn't work in 4.25. Can you update the shader? Is anything I can do to make it work?

[@SuperQuwertz]

Awesome transitions. Thank you, made me laugh :D

[@lamourixgames601]

This Is very Awesome, I will see If i will reach out to you.

[@bagr565]

Hi!! When I apply my Cel shading instance in the post process it just turns really bright with no self shadows. Do you know whats is happening?

[@JaizJose]

will come here when my game is at a post prcessing stage, thanks for the videos and I just think unreal should have a option to turn it on rather than going through all these steps.

[@geoffrey3668]

Great tutorial! Thank you!

[@elocnat]

Fantastic tutorial, thank you.

[@mooseyman06]

@underscore Love the look you get from this but I'm curious about one thing. For the outlines it seems the size of the line is relative to the screen and not the object. So for example if you set a line thickness you like up close when you zoom out the outline becomes very thick relative to the model. Do you know of a way to make it so the outline thickness is relative to the size of each object instead?

[@hypercortical7772]

Beautiful mech.

[@Pandan3D]

Hey this is awesome! What if you want the opposite effect for custom depth? Like I want everything to be outlined, EXCEPT specific objects? Because with how it's setup now, you'd have to manually set every mesh's custom depth.

[@underscore00]

Youd use it in the same way, just switch the A and B values in the custom depth mask :)

[@underscore00]

@Solar Cypse The A and B values in the 'if' node during the section about masking custom depth. It should be at around 7:50

[@OfficialAdarkstoryAdarkstory]

When I added the custom depth blueprints, all the lines dissapeared and the shader wasn't working anymore (yes, I already had the material hooked up to the post processing volume)

[@elegmant]

I have the same problem too Do you find an answer?

[@sazoneh821]

my outlines only show up inside the mesh. when there is a background which doesnt have custom depth on for example the sky there are no line between the sky and the character.

[@luisdavidlobo]

You are amazing. Thank you so much

[@akhon]

Fantastic tutorials! Thank you for sharing.

[@domagojbogdan22]

How could I make this work in UE5? The toon shader in particular, everything is connected as it's supposed to be but it's not displaying...

[@bryansoler6506]

you are THE BEST!

[@Incenpilz]

At 10:40 Neerly got a Heart attack xD

[@spicymemeboi2646]

Thanks! you earned a sub!

[@AfterHoursDevchannel]

CustomDepthStencil doesnt seem to work fully,properly-boundary lines still are drawn no matter if customdepth stencil is checked-unchecked. Normals9inner lines)disappear but ouer,boundary lines remains ,refuse to vanish (like normals)

[@AddGaming.]

I just hear you say dubstep and I'm like: I know whats gonna happen... Rip ears

[@99Kap]

the shader no longer works unless (in the custom depth section) i reverse the "PostProcessInput0", and the "if" (from the distance filter section) into the "if" for the custom depth. i have it working but i wonder if it has to be the way you set it up to work. i personally can tell no difference atm with custom depth applied.

[@elegmant]

I have same problem...

[@goggo9]

Great tut, thanks. Any advice on how to expose instances parameters so they can be controlled via DMX/OSC?

[@hanswesker8455]

Hopefully someone could come up with a way to make the stepping (transition from shaded to lit) super clean. The way PP-based toon shaders transition from lit to shaded isn't good. That is, depending on the camera viewing angle the line between lit and shaded area will get trashed - where you can see the shadow bleed into the lit area or the lit area bleeding into the shaded area. Frame skip back/forward via , and . between 18:00 to 18:02 to see how the shadow gets butchered. Other than that, this is a really good step by step on how to set up PP-based toon shaders. But imho, PP looks like sheit. This may be because the mesh face and vector normals aren't modified though? I'd spent months looking at most all the techniques out there and just haven't really been satisfied with the result of PP toon shaders.

[@underscore00]

Part of the issue you describe is due to mesh density. Higher poly models are going to look better because there are more verts to calculate lighting information. This is the best and most versatile PP method I've found, and all the not-PP methods I've used are very clunky and have to be set on a per-asset basis. This affects the entire scene, so you dont have to add anything to your materials.

[@RA-lw5gp]

Great tutorial, really. Subcribed! Quick question, though. I followed everything to the letter and I have this one small issue.. Once the cel shader is implemented... I have no shadows on/in my characters meshes. I did see one difference.. "Clamp UVs" checkbox on the SceneTexture Nodes does not exist anymore in my version of UE4. EDIT: Shade Depth parameter (just like the line thickness from phase 1) does not seem to behave like a float. When I change Shade Depth from 0.0 to 1 the effect stays the same. Also from 1.1 to "infinite" makes my whole shading darker with no difference in between either). Would you have any idea how come I'm not getting shadows? My Meshes cast shadows but they have none on/in them.

[@bagr565]

I have the same issue... did you find the answer?

[@ChrisEllerby]

Quick question, what if you don't want to affect the world or other characters, but have just a couple models you want to have the effect on? Ideally you could use the tag system so only models that have the "toon" tag have the effect applied. Is something like that possible?

[@ethanwasme4307]

instead of doing this in a scene wide post processing shader you'll want to recreate it on a per-shader instance, more expesnive though... tech art aid has a video on a material approach, it could potentially clash with any project idea you had in mind since it simulates a directional light in the shader so you'll have two sources of light if you included a directional light actor in your scene. *comment for future people

[@bakastep3107]

Nice, can you apply this to the world map on a global scale? instead of having to individually assign it to things you want? Maybe a cell shading LUT?

[@salvadormilanesbraniff3511]

my ears were not prepared for the dubstep transition ;(

[@itsglobe]

I dont Understand, why the last part of the BP in Both texture (before connect it to the Emissive Color, and after the first If or the Second depends the Material) is usefull? It is just useless, just make everything normal, please someone explain, Im new

[@Xperto_]

Great video!

[@HelolicalShockwave]

Any advice on getting rid of the jitter that the cell shading causes I tried all blendable location settings but then it just jitters elsewhere?🤔

[@stabbedbyapanda]

Yeah I would also like to know if theres a way to make the Cel Shading more crisp and smooth vs the kind of blotchiness it makes

[@aphelandraful]

Hello ! I've tried you're tutorial, works really good ! But if I use the forward rendering it will broke everithing, juste don't support the Scene Texture nodes, have you an idea why ?

[@javierfernandez3727]

This is so sick. I'm wondering if something similar can be used for a "regular" material, not a postprocess; I need to do something of the like to an object mimicking a blueprint texture. Gotta try that. Thanks for the wisdom :)

[@R_Didsy]

Hi there, just trying to get to grips with the post process volume. Mine doesn't seem to have any of the Rendering Features options when I drag it in to my scene. Any idea how to get them to show? Cheers.

[@willcarattini]

Hello! The shader works great for me, but just one issue that I am currently stuck on. It seems the shader will only render within a small radius around the camera, anyone happen to know if there is a way to push this border out?

[@banana9494]

Did you set infinite extend unbound in the postprocessvolume

[@HapZungLam]

What does the CustomDepth do of an object and what does it do in this case?

[@darry3dart878]

Thank you!

[@AlmondChocolateMilk]

Genshin Impact: Look what the have to do to mimic a whole of our work

[@StrayZero]

Guilty Gear Xrd: Really...?...

[@DrGameTazo]

How can I get the Outline basic Shader? any screenshot??

[@jayclio7627]

Hi , I'm a beginner in UE, I don't know all nodes and I don't understand speaking english well ; can you please give me names of all nodes you used ? I can't follow with all shortcut you used in the video

[@shanethompson9562]

Hey this is fantastic thanks man! Just wondering how expensive this shader is in the engine

[@pelodofonseca6106]

Does it work on UE5?

[@caiburrows4317]

Hello!, i need help. When i apply my Cel shading inst in the post process it just turns everything white : (! whats going on! >__

[@MrTot117]

Same for me ='D

[@bagr565]

Same here!

[@XacinoDuck]

heart attack sim with that music

[@underscore00]

I wasn't very good at leveling audio back then XD

[@measurableharmstudio1064]

Thanks for this! Really close to what I'm looking for, but hoping to get the cel shading to affect reflections as well. Any thoughts on how to adapt it to do that?

[@mineboom7377]

10:45 ayy hell yeah #plur

[@psd.3144]

thank you very much kind sir

[@Garridoxlepe]

is it possible to have 3 colours for the cel shading? like, color 1 for normal tint, color 2 for shadow tint, and color 3 for light tint? this could be something like anime characters

[@underscore00]

Yes! You'd just blend another light color tree with your cel-shading post-process material! In theory you could have as many different shading 'levels' as you'd like :)

[@tomasmarquez2434]

@@underscore00 I'm not sure where exactly you would plug in the 3rd Color Tree? Currently the two color trees are plugged into the IF statement, where do I go from here to add more bands?

[@zup.studio]

@underscore Yeah, I'd be pleased to get an explanation on that topic, too. I really like your Shader (downloaded it) but would like toenhance it by adding more colors to the shadow side of things. :)

[@glend4321]

The outliner in the official video makes my cubes back side full black why ? Even if i rotate light directly there surface is solid black

[@macekane]

What button combination did you use to get the light tint node at 13:33? Edit: And what about the append 0 thing afterwards???

[@henrylee8984]

Cool. Thank you for the tutorial. I was almost there after watching the whole video. But I found the custom depth code block works like no post-processing effect. I have no idea to do with that. Do you have any suggestion?

[@SirSimon-xu4ik]

Cool bro

[@SACHINKUMAR-bw1cs]

Can you please tell me , If I want Toon shading on some props or character or other BG as a default 3d Look .Is it possible …??

[@MrBaumTV]

That probably doesn't work with lightsources like a torch am I right?

[@badrequest5596]

cant get the shading to work. won't let me use diffuse color [SM5] (Node SceneTexture) GBuffer scene textures not available with forward shading. Am i missing something here? using 4.19

[@underscore00]

Yeah, the problem is in the default renderer settings of your material - select the base material node (the big one you plug everything into) and in the details pane there'll be a setting to change the renderer from forward to deferred. That should fix the issue!

[@LaszloIvanyi]

I got my hand on the dislike button a bit when we added the mask to remove the sky grid from there and didn't work when you saved it by changing the scene texture to scene depth.. :D I was fairly disappointed in the unreal tutorial though, how come they didn't have this gridded sky in their scene?

[@underscore00]

hehe Im glad I redeemed myself! Im really not sure why Epic didn't get the gridded sky, because I sure did when I recreated their material XD So yeah, I dont know about that, but Im pleased I can offer a fix for it here :) Thanks for the comment! :)

[@stabbedbyapanda]

is there a way to make the Cel Shading/Lighting more crisp and smooth vs the kind of blotchiness it makes. I'm going for a more Windwaker style

[@underscore00]

The short answer is to just use high-poly meshes in your game. The 'blotchiness' occurs because lighting data is stored in vertices, so the more verts there are, the better the result. Hope that helps!

[@stabbedbyapanda]

@@underscore00 Yeah but windwaker isn't high poly and if this is intended for a game, making everything high poly to have nice crisp lighting, doesn't make sense, also that would be a huge drain on resources i'd imagine making everything high poly, where "High poly games" Arent even high poly usually.

[@underscore00]

Unreal Engine 4 can handle millions and and millions of polygons on screen at one time, and drawing geometry is a far lower cost to overhead than drawing textures - so if you're going for flat colored, stylized, non-reflective materials like in Windwaker then the impact of some extra geo is going to be negligible. Here's an example of how the lighting changes with poly count: i.imgur.com/3zkj5kH.jpg In the above image, the sphere on the left has 10 axis subdivisions, the middle sphere has 20, and the right sphere has 64. You can also model in a way where objects look low-poly while having the extra faces to tighten up your lighting - in 3D modeling they're called 'supporting verts'. Here's a pyramid I just made to show what I mean: i.imgur.com/t36ToAJ.png So you can still have a low-poly look and keep sharp edges and flat faces using edge normals, while also including a few more verts to improve the way the object is lit. I hope that makes sense!

[@stabbedbyapanda]

@@underscore00 Thank you

[@lebebebarbu]

Hey, I wondering if this shader taking a lot of performance?

[@Forgen427]

Is there a way to make 2 different post process volumes that dont affecting each other with different setup of PPmaterials? And each postProcessVolume affect only one group of objects or single object in scene.

[@chetankoti]

Hi Underscore, I just bought this asset on gumroad.. would you mind updating it to 4.21, It is not working, when I add it to post process volume(NO EFFECT) Thanks for the awesome work..

[@underscore00]

Thanks for letting me know! I'll update it as soon as I can :) One thing to look at with the materials is the custom depth mask (the chunk closest to the material attributes node) - See if the materials work when you skip that section or double check that you have customDepth enabled on your meshes. Thanks for watching!

[@chetankoti]

@@underscore00 Thanks for the quick reply, never mind the asset works fine in 4.21, it was my mistake, I forgot to check custom depth mask, apologies for the inconvenience

[@underscore00]

Not at all! Thanks for dropping by and leaving a message - glad you got it working! :)

[@beatrizduarte5126]

Hey, It still doesnt work for me. But if dont use custom depth it works. Or kinda. It makes the meshes darker. So yeah idk what to do

[@waomae4411]

do i need to buy the toon post processing material on your gumroad to get this result?

[@underscore00]

No, you can achieve the result just by following along with the video :) buying it on gumroad gets you all the materials pre-made, and you get the biplane model - plus it supports the channel!

[@danharbor1752]

@@underscore00 yeah but thats the plane from sonic u cant sell that

[@underscore00]

@@danharbor1752 It only looks like the plane from sonic. I modeled and textured it entirely myself.

[@danharbor1752]

@@underscore00 isnt that still illegal tho lol basically still replicated

[@danharbor1752]

@@underscore00 god will sue u for replicating a rock

[@Aa10111]

How can i use this outline with objects that have a translucent material?

[@Xperto_]

Applying the shader only on objects with custom depth masks out the skybox aswell. Is there a pointin keeping those nodes specifically to avoid apply the shader on the skybox?

[@underscore00]

The point was to show the two masking methods and how to use them. There are some things here that can be streamlined, and that's one of them - but I wanted to cover everything I knew :)

[@Xperto_]

underscore cool, thanks

[@TK-11538]

13:30 I don't know what node you added

[@leandrogamedev]

hi! i bought the gumroad pack. Any way to have working this in mobile (hi-end)? thanks!

[@Klartraumprofi]

THANK YOU DANKESCHÖN :D

[@Klartraumprofi]

is there a way to import assets without setting specular from every material to 0? because i get so weird white dots popping up when i am moving through my level and it is a real pain to set specular to 0 for every single material :(((

[@TheTreanePlay]

does it affect performance? for example for mobile devices

[@underscore00]

I haven't tested it on a mobile platform, but it does have a very low impact on PC performance. If you give it a go with a mobile project, please let me see the results! I think it could look really cool.

[@TheTreanePlay]

okey!

[@hanswesker8455]

Afaik, this is THE least resource intensive way of doing toon effects in UE4. Very nice tutorial btw!

[@HigashiBashi]

Just got the gumroad version you put up. Does this work in 4.23?

[@underscore00]

Thanks! Much appreciated :) As far as I know it works perfectly in 4.23, but I'll have to double check. I can say for certainty that it works exactly like in the video in 4.22

[@HigashiBashi]

Awesome going to try this later.

[@CG_Sens_Eng]

Cool!

[@MrPangahas]

Can that light extraction nodes be used to say if I want to have 2 different textures on the same model,one appearing only on the lit side and the other on the shadowed areas?Will it work if I just plug in diffuse textures on the tint node you have?

[@underscore00]

By the sound of it, yeah! The 'if' node will be your friend. Set your values for A and B and you can perform different operations based on which value is present.

[@MrPangahas]

Thanks I will try it.What version did you do this?I don't have any installed right now and will be downloading the latest,I suppose this will work regardless.

[@underscore00]

This was done in 4.19, the latest version. Thanks again!