Physically Based Cel Shading

[@rexxtheawsome]

Maybe in a professional setting this is normal but for the indie dev market on youtube and those like me learning at home, this is revolutionary.

[@Cusey]

this shit is next level no matter where you are

[@shreyasjain1808]

I have to 100% agree with you on that.

[@begolu9907]

I'm agree with u

[@dani3645]

Indeed, proper outline shading is extremely tricky, and cel shading is a bit finnicky too. This is an amazing resource

[@knashki]

Fun fact! This is exactly how Breath of the Wild/Tears of the Kingdom's cel shading works! Each material is controlled through the stencil buffer, which means a limited number of materials can exist in the game - so things like rubber, metal, skin, clothes, hair, and environment assets all have different shaders, which are only applied after the deferred lighting pass. Each mesh is assigned a buffer number which corresponds to a given material type. Excellent stuff!

[@alejmc]

May I ask how would that work? For example, all of the material work in this video could be a ‘Default’ material (or maybe ‘Environment’ if you will, it has the sky and all). But it means that via stencil many other material types would take a similar approach and do custom effects to freely modify the rendering look? (I.e. say custom anisotropic or some fancy flat ‘selected’ items but that aren’t done through the ‘transparent’ queue). If I understand correctly, it would have a lot of the logic ‘repeated’ right? All the quantization and data extraction likely. (Or abstracted away in custom expression nodes)

[@defhermann]

Lmfao I found you in the wild @knashki

[@benrainwolf3856]

@@alejmc kzbin.info/www/bejne/eKqaopadltZ6f5Y a video explaining breath of the Wilds rendering system

[@TripleM24]

how do i tag Gamefreak so they can see this??

[@mopi_dev]

I don't even use unreal, but you broke down the process so well that this video is still useful for me in unity.

[@VisualTechArt]

That's the point :D math doesn't care of which engine you use :D

[@manofapocalypse]

i wish i could know how to do this. should i do this as Shader or Rendered Pass?

[@mopi_dev]

@@manofapocalypse I barely know what I'm doing when it comes to this stuff, but I would make a post-process with a fullscreen shader graph (using URP)

[@gwentarinokripperinolkjdsf683]

I am excited to see about using this in blender

[@Iridium.]

In unity , built in rendere it’s pretty difficult to expand on the standard shader ( pbr) because surface shaders do all the light calculations before you get to manipulate the shader . Usually works if you make the shader from scratch but then you lose everything else( shadows being the worst )

[@mylescasey8914]

Some might say that constantly 'restarting the tutorial' is annoying, but for someone who has *no grasp* of the material editor, this approach is fantastic!

[@Igndraw]

Coincidentally, I was the whole week trying to do a cell shading for my job and nothing was coming close to acceptable, tried all the tutorials, gathered some help from my friends more experienced than me, nothing solved the dogshit looks for the project, and then 1 day after I concluded that it wouldn't be possible for our situation, you come up with this masterpiece explaining every node and it's purposes I did on the previous tutorials without knowing why, now I need to try it too! 10min in the video and I'm mind blowing by the amount of knowledge and information, thank you very much!

[@menkerz05]

what u making

[@PrismaticaDev]

Absolute banger!

[@xylvnking]

u 2

[@Mittzys]

joe many

[@jowob]

I dont think I‘ll ever need another cel shading for unreal video after this, superb stuff down to the detail!

[@Mittzys]

You singlehandedly saved thousands of indie devs... This is astounding!

[@roukuo]

Not only is the shader extremely good looking, but how you talk about it and explain stuff, shows that you dont just copy stuff but actually understand this topic. Great Video!

[@Natedotfbx]

Woke up to an email about this, and it did not disappoint. I learned a ton, even as a professional using UE5 on a daily basis. Looking forward to the next one!

[@whyismynametaken123]

His videos are by far the easiest to understand and also give the most tech knowledge. His video on cel shading and light types are what originally got me into stylized rendering and made everything "click" enough for me to figure much more out on my own.

[@UriahGnu]

Hands down one of the best tech art videos I've seen in a while, great job!

[@YourSandbox]

I just can't compete with such genius. Hands down, hail the @VisualTechArt

[@arceyominyin]

It is so wild seeing someone who really understands what theyre doing in multiple areas bring all that information together to nail down exactly what theyre looking for. This makes every other solution feel like its just faking it. Every time I start to think I know what I'm doing some wizard comes along and just does some crazy voodoo magic and blows me away. Awesome stuff.

[@Nathan-wm3mr]

the way you did the fake light on metal was genius!

[@JaredWyns]

I can't overstate how impressed & happy I am to have received this knowledge. I've been following similar and previous tutorials for ages and doing a solid amount of testing but something was always off or wrong, constantly stuck in stacked patches due to the deferred pipeline. I'm working on implementing this now in my project & in the near future I'll be making a considerable donation to the patreon as it is well deserved. This is the PBR base I've been wanting to craft a custom style that melds well with my 2d painterly style without boxing the engine for it. Truly brilliant, easy to understand breakdown.

[@VisualTechArt]

Cheers :)

[@OutcastDevSchool]

9 minutes in and this is the best video I've seen on this topic. Your editing is top notch. I'm taking notes for my channel.

[@o.k.m2588]

With your videos on Animation, and Visual techs videos on Graphics, us artists will become unstopable

[@Conbini.]

Came for the physically accurate cel shading tut, but was stoked to finally learn how to achieve a LOG output from Unreal!! This is huge, thank you. I can now use this post process to send production renders to colorists and let them grade it. Been wondering about this forever, I knew it was somewhere in there. Amazing.

[@VisualTechArt]

Be sure to check the video I did with Eros then ;)

[@makachu4899]

This is GOD-LIKE. There aren't many best practices tutorials out there so this is an actual god-send for indie devs. Thank you so much!!!

[@BernardoReisSouza]

This video is absolutely terrific! As someone who's trying to learn unreal based on tutorials I find online, I find this approach for sharing knowledge extremelly effective. Not only dumping information, but explaning why you used each node, comparing with other approaches, explaining their downsides, etc. Not to mention how good looking the result is, showing how good of an artist you are. If you ever decide to create an Unreal course, please let us know!

[@VisualTechArt]

I'll make a proper course at some point in the future for sure :D

[@shadow_xts]

Loved and subscribed, no nonsense, no explosions, only information! Thank you!

[@ZappForThat]

Oh beautiful work! I've been messing w/ this stuff too & it's so rad to look at the same problem & compare your results against the workarounds I've found in my efforts. Isolating lighting w/ approximate HDR values & the full range of colors was something I was pretty proud of figuring out on my end, but holycow your approach takes it to the next level. Great stuff! Thanks for sharing!

[@ewsdsdffdasasdasdasd9714]

Absolutely love the video. Incredible job. I feel like I learned a lot in 36min. But I feel like there is a disclaimer to say for Cel shading enthousiasts: You would still need to change the normals of your model if you want to achieve a dragonballfighterz style. This is a nice way to do the 'ramp' effect while not fighting the lighting engine of unreal BUT it's not enough to achieve your favourite style, lot have to be done in the Model

[@VisualTechArt]

Yes :D of course there's no magic bullet, but this is the foundation, then you must build on top :)

[@shreyasjain1808]

THE FINAL OUTPUT LOOKS AMAZING!!! I would love to implement this into my game and am currently looking into a method to do so. Sadly this won't work. As I am a solo VR game dev and need as much performance as possible, it's next to impossible to use post-process effects on the Quest 2,3, pro or any mobile VR headset. So I am trying to find a method where we can do this but within the material itself and keep it as optimised as possible. As for the PC version, I might make this Physically Based Cel Shading for the game. Lastly, thank you for making this video. It's amazing and very informative. Love your work, sir.

[@VisualTechArt]

I think in your case it could be worth to follow an approach more in line with my old cel shading video then... All unlit materials and lighting calculated "manually" inside the shaders. You must have very controlled lighting tho

[@shreyasjain1808]

@@VisualTechArt Yes, all the lighting is baked and there are no movable lighting. There are a few movable lights only in the PC to save on performance. As for the current state, am able to get 450fps in the editor within the level. Am ok to lose a bit of proformace and go down to a target fps of 75fps on mobile for good visuals. Also need a strong control on the tri count as well. So that's another thing. There is a max limit of 650k...

[@ZackMathissa]

@@VisualTechArt Hello, can you share the link?

[@flameofthephoenix8395]

@@shreyasjain1808 Not super helpful for your particular problem, but for cut scenes you could have a loading screen to render the cut scene ahead of time with more rendering time given to the cut scene since it is in a loading screen and thus doesn't have to worry about reaching a specific frame rate, though it may be obnoxious for the player to wait on a loading screen every time a cutscene plays it may be worth it to help achieve better looking graphics for the cut scenes without the cut scenes running at 10 FPS, if you have a large amount of RAM to store temporary data you could even render all the cutscenes in the title screen storing them away for later use.

[@Shadowstorm5400]

This is the best tutorial to explain how a cell shader works that I’ve come across thank you so much, I’m going to be rewatching this over and over to learn what is really going on in the shaders.

[@zaidkiwan5168]

this is the most in-depth technical look into the material editor in unreal engine that i found!

[@mhplayg4568]

I really appreciate it! It's a great and extraordinary tutorial that you made. Thanks for covering all the tips in this tutorial all clean and pro. Thank you

[@TheCrimsonSeven]

A true goldmine of a video, addresses every headache I've ever had with PP shading nonsense. Seems like understanding the tonemapper really unlocked it all for you. Thank you very much for sharing!

[@snufftbunz]

Bro you are genuinely one of if not the most helpful tech art channel I've found on youtube.

[@AltoAutismmo]

Dude this is like a master level course. Most tutorials end up with a shitty end product for the "sake of simplicity" but I suspect they just don't know how to make it truly great. What you produced is AAA level cel shading

[@dawesign_]

Mate, the value and quality of this video is beyond anything I've consumed in regards to UE learning videos on KZbin! The editing is so incredibly well done as well. I started watching this in bed last night while doing research for my project and usually when I find stuff this late I just bookmark it and go through it in my next session but the start of the video and every single minute until the end was so captivating that I ended up watching the entire thing immediatly anyways. Spectacular job!

[@VisualTechArt]

Cheers! :D

[@robinj6997]

Superbly done! Best cel shading I have seen. And I feel the frustration of lack of documentation, it really drags the workflow down.

[@whyismynametaken123]

Good job! This is an improvement over what I had worked extensively on. I was ripping apart the g-buffer and modifying / rebuilding it piece by piece in a post process material. I even custom coded colored lights via a combination of HLSL/blueprints/material parameter collections. In case anyone was wondering material parameter collections are just an array that can be iterated through with HLSL. I should also add one of the benefits of ripping apart the g-buffer and rebuilding the final image is you can stylize your ambient occlusion.

[@Saporling]

Fantastic video, and im not just talking about the information, just a really good, pedagogic/approachable, entertaining and well made explanation.

[@AyushBakshi]

I don't even use UE often but the breakdown will help me in blender. Kudos!

[@NinoMesarina]

On behalf of everyone here, thank you so much, you are a GOD.

[@unrealcreation07]

This really is the mother of all Materials tutorials

[@fleity]

Fantastic video! Thank you so much. I work a lot on stylized lighting shaders for unity in forward rendering and still this video is so helpful! I agree that 90 percent of tutorials all do the same and don't go far enough. If you want a true stylized picture you absolutely have to go into the lighting code itself and start customizing that instead of just re-interpreting the output (but that's much easier in forward than in deferred). I enjoy seeing how you normalize / linearize the values to make the math correct and logical. Really nice job.

[@swisspunker94]

this is GOLD. thank you so much for your info, high quality stuff like this from people who actually know what they are doing is so rare on youtube. Btw. a good companion piece to this, the people who made high fi rush (made in UE4) gave a talk at GDC about their rendering pipeline (they heavily altered the default UE4 pipeline). It was uploaded to youtube about a week ago :) Just goes to show you how much work you need to put in to get a good toon shaded look in unreal.

[@andrewpavlov9128]

This looks really nice, better than the most cell shading implementations i've seen

[@SpikeTheSpiker]

Holy shit the succinctness of your explanations is fantastic, thank you so much I've always struggled to understand materials and shaders.

[@evilyamii]

I never been this hyped since YEARS I want to learn something new, you the GOATTT!!

[@Rhyff]

Your tutorials are some of the best on KZbin, absolutely incredible stuff!

[@ArtAmplified]

Great tut! Proper workflow starts at 8:00

[@LollyPoppi]

So clean! We're gonna use it for sure!

[@Sam_The_Game_Dev]

HOW ARE YOU THIS GOOD WTH!!!!!!!! You've just completely transformed my pitiful attempts of cell shading in UE, seriously! I may be just a minuscule passionate game dev, but geniuses like you inspire me to keep pushing at it. Here's my subscription and my eternal gratitude, CHEERS!

[@claudiosalvatico58]

Omg!...You finally found the holy grail. It's what I always wanted but could never fully achieve, something was always missing. Thank you, now I can die in peace. my life is complete, thank you!

[@ArcanaTheory-8]

Exactly the video I was looking for. Will be trying this out this week.

[@Foxyzier]

I didn't even need to know any of this but still a very fun watch, the explanations are perfect

[@erichocean8746]

Loved this! I know it's a lot of work to explain everything in video format, but it's really appreciated and makes a big difference.

[@SuperLordee]

This is my first video I watch from you and I instantly sub. Very well explained and really usefull information you share for free. Thank you!

[@cosmotect]

Well man, you rock. What generosity to share all this knowledge and insight!!! I am going to need to watch this several time to fully absorb the power stored here

[@Toxijuice]

Fantastic video, you did a great job explaining the pitfalls of commonly-taught methods and how to circumvent them. I do, however, have a minor correction for your comment at 20:15 In many applications HSL stands for Hue, Saturation, Lightness and is different from HSV or HSB. With HSL, the output will always be white when L is 1.0, where with HSV white can only be achieved if V is at 1.0 and S is at 0.0. That application of HSL is not very relevant here, but distinguishing between the two might help someone coming from a CSS background or something similar.

[@VisualTechArt]

Yep, that was an oversight :)

[@activemotionpictures]

11:26 OMG!! YES! IT WORKS! TSM for breaking this down! I kid you not, I jumped out of my chair when you did 11:26. Thank you!

[@activemotionpictures]

@Visual Tech Art I watched this video the entire week. Step by step, little by little to really understand the underlying concept. Thank you for sharing the distance to camera outline trick and the sky correction. Flawless!

[@SierraofTerra]

god i really picked the perfect time to start learning ue5 because this is exactly what I dreamed of learning.

[@OrangeJambo]

Oh shoot, stumbled on this so quickly. Already hooked in the intro!!

[@ZappForThat]

Wow, beautiful & concise -- great video! Thanks for the exposure trick ✨✨

[@dwsel]

This is such a fine job. I wish I had more time to follow all the steps.

[@HedgehogGolf]

20:20 HSB and HSV are the same colourspace, but HSL is different. (0, 255, 255) in HSV results in full saturation red, while (0, 255, 255) in HSL yields full white instead. Full saturation in HSL would actually be (0, 255, 127). Really cool video though!

[@VisualTechArt]

Yes, I didn't recall that when I was writing the video down :) Thanks for taking the time to add the why is wrong and not just drop a line without any explanation, it helps people :)

[@HedgehogGolf]

@@VisualTechArt The only reason I know this is that it's a pet peeve of mine that every art program under the sun defaults to HSV, and then the default colour picker in Windows uses HSL 😅😭

[@DavysArtCorner]

This is actually huge! I did a cell-shading project in Unreal 5 last year and while PrismaticaDev's tutorial was fantastic, it was a huge pain in the ass. I managed and the project came out great, but I learned the hard way that Unreal's not that great for stylized rendering. I didn't know why though because I'm not that great with graphical programming. This video cleared it up so much for me and I'm only a 3D character artist!

[@andrewdowns2449]

Truly some next level stuff you're doing for the community. Thank you for sharing all your knowledge!

[@IstyManame]

Thank you so much, I don't think that I could grasp evey concept you were showing on myself. This is insanely valuable

[@WhipsterCZ]

WOW.... I did not understand much, but it is joy to look at :).. great job!

[@IIStaffyII]

Wow, I'm blown away. Great video, Gonna take a while for me to digest all the info. But I'm going to have have fun playing with the new knowledge once it settles.

[@LadySaytenn]

This video was extremely helpful to me. I don't use Unreal but I implemented something similar through Blender's compositior, and it works really well! It's the low-maintenance accurate toon shader I've been searching out for years!

[@VisualTechArt]

Glad to see there's someone able to extrapolate concepts outside the specific software :D

[@Frtc-Pokemon]

The visual is really insane! I tried it and it works great! The video with the explanations is just as amazing too haha! I've subscribed, can't wait to see the next videos, whatever the subject!

[@robadc]

When I was in university I struggled for years (literal years) to try and make a toon shader in Unreal. Eventually I just gave up as the resources available and my own capabilities made me feel like I'd wasted a not insignificant part of my life. It's too late for me, but thank you so much for providing something so that the next batch of bright eyed kids don't give up on NPR.

[@DeeKej]

I've been on the lookout for a cel-shaded solution for almost a year now, and this finally explains a lot of why the solutions out there never worked for my purposes. Ultimately, I'm not sure I could use your suggested solution either as I'm targeting Forward rendering and mobile VR platforms. But thanks to your explanations, now I think I can understand more of what I should work towards when trying to achieve my final result, thank you! Also, I definitely felt that comment on Epic not explaining things enough in their documentation in my core, haha

[@VisualTechArt]

Well the forward pipeline is even better for stylization :D you can decide what to do with light info directly in the asset material

[@DeeKej]

@@VisualTechArt Well then! I've mostly done gameplay design things before, so still learning about most lighting- and material-related, but I will have that in mind as I take a new stab at it the coming days. Thanks!

[@neo-giu]

This is the best video you've made so far! Absolutely love it

[@ProxiedRoadblock]

wowow, I only work in sim code not rendering, but I could not take my eyes off this video. Such cool tech and you explained it all so well

[@valuerie]

Man the end result is fantastic. Awesome work

[@juanmilanese]

love your no-nonsense approach to technical art. keep it up

[@jiratrello]

I love ur channel. There's a lot of videos for entry level unreal but it's hard to find stuff that isn't full of bad practices and misinformation. Thanks for the videos !

[@siulino]

All your videos are a work of art and a guaranteed source of knowledge, thank you for that!

[@jamaalsineke2405]

God bless you mate...I really appreciate your selfless tutorials.

[@albinekb]

Great tutorial! Super easy to follow even with the compelxity.

[@MikolajF]

Damn. There are few VERY good tricks in this one. kudos from one TA to another.

[@666nevermore]

Finally not the average KZbinr. You are in my list of 3 now, and thank you for the accent, easily recognizable fratello

[@VisualTechArt]

:D

[@666nevermore]

@@VisualTechArt can I ask you where are you working? All colleagues I found in this job are rarely at this level

[@VisualTechArt]

Since July I've gone full time on this, my last job was at Underdog (CI Games), before that I worked at Splash Damage, even before in Milestone (as every Italian that works in video games, I think xD)

[@666nevermore]

@@VisualTechArt btw if you didn't know it already exist a method in the shading language to do "2 to x the power of x" or "e to the power of x" - exp(float x exponent), which is e^x; or - exp2(float x exponent) which is is 2^x.

[@shadowzain]

Bro, you are the Hero!

[@QWERTYCommander]

Thank god, a banded cel shader that responds properly to light and isn't just gradient mapping. Gonna recreate this in Blender for sure.

[@zarblitz]

I don’t even care about the cell shading, this was an excellent intro into UE’s post process settings.

[@Helgrind44]

Hi-Fi Rush was made in Unreal and they made a really interesting GDC talk about how they did it (it's quite recent). Would love to see tutorials based on that talk.

[@VisualTechArt]

They also heavily modified the engine to get some of those things working :)

[@thothdj]

bro this is a banger, thanks for the detailed explanations of the all the maths

[@rahulujjal8245]

Impressive, Insightful and Innovative! great job!!

[@Fxnarji]

this YT channel is such a goldmine. Here i am with my 5+ yrs of experience in the 3D Games field, thinking i know roughly what im talking about, and about 2 minutes into the actual explaination i dont understand SHIT xD Shows how much more there is to learn around every corner! What / How do you recommend to learn all this stuff the most efficiently? I copying / changing / applying your tutorials just feels like im walking on rails across a sea of knowledge

[@VisualTechArt]

Bang your head on the keyboard until you manage to do the stuff you want to do xD that's how I do it ahahah Copying tutorials like this is good, but only if you then go and mess around with every single component trying to understand them your way and create something different by applying the same concepts

[@Fxnarji]

@@VisualTechArt fair enough haha aight, time to bang this wall too

[@TinfoilxD]

excellent video - I really like all the diagrams to explain the math

[@-jxvi]

Underrated tutorial, underrated youtuber

[@MithosKuu]

Easily the best video on this topic for Unreal that I've seen. I do have a couple of questions though; 1. Is there a way to control the amount of light banding? I've tried playing around with the numbers associated with the V channel but all I can manage is to alter the contrast and intensity of the banding. 2. Is there a way to get emissive materials to work with this post process? With this setup it looks like the emissive channel is completely ignored

[@VisualTechArt]

1. You can control the amount of bands with the stuff I do, yes they have more difference in value between each other if you reduce them as bigger bands must do bigger EV jumps :) If you know what you're doing you can play with lighting to mitigate that. 2. Emissives should just be considered as light, as they're not contained in the BaseColor pass and already composited in the Scene :)

[@MithosKuu]

@@VisualTechArt For 2. I must be doing something wrong then, as a test I made a material whose only property was an emissive set to 5 in the red channel, when I put it in the scene on a cube it just appears grey and doesnt emit any light into the scene

[@3DWithLairdWT]

I re-wrote the Unreal 5 *mobile* deferred rendering shader to do outline and quantized light (cell shading, more or less) Since you have access to the GBuffer there (mobile doesnt keep those available to the host, so you cant use them in Post) Works really well if you're comfortable working in HLSL

[@Thegoosa]

This is incredible. Best video about the topic hands down

[@radivarig]

Really enjoyed watching, so many good explanations and the results are amazing.

[@KandyBrainz47]

The results look amazing, but id like to see it in a scene with more building props/details as well as on a character that's more complete. Seeing the effect on solid color character doesn't give me enough data information to understand what it would look like on a finished character. if its possible could you do a video showcasing what the shaders look like in different environment styles or props.. and on different Characters of different style. Id like to see how the shader looks and behaves.

[@SellusionStar]

So great insights and work by you! Thank you!

[@thomaswalsh7311]

This is such a great video and what I've been looking for for a long time, subscribed!

[@estherrobertsson5837]

First of love the tutorial. Second thing is that I'm currently working on a project where I need a cel shader where I can freely change the shadow AND highlight colour. These objects will have image textures on them as well. From a quick google search, changing the shadow colour seems to be doable, but I dont get much information on how you would change the colour of the highlight.

[@VisualTechArt]

Can't you use the section where I colourize highlights and shadows?

[@DimiArt]

i don't even use unreal engine, but i clicked the video because the thumbnail was so cool looking and colorful.

[@VisualTechArt]

Math doesn't care of which engine you're on ;)

[@DimiArt]

Yeah, too bad i suck at math 😂​@@VisualTechArt

[@lucota90]

Most useful video I've seen on the topic hands down!

[@theminecraft4202]

this is a great example of why game devs should take the time to properly learn the graphics pipeline of their engine. So they don't have to compromise visuals when they have a specific style in mind.

[@BrutalMagik]

So excited to put this in my game and customize it!

[@DarthBiomech]

This is such a fantastic video! But IMO the biggest obstacle I faced with trying to make stylization is that we're limited to what we can show on screen. Even with one addfitional render channel one could be doing so much more to push stylization even further... Artistically changing the outline width for example, or adding UV-based crosshatching, or... I've tried to sacrifice the specular channel for that information, but it didn't behave like I expected.

[@sarahlynn7807]

This is the quality I wish every unreal video had.