Physically Based Cel Shading
HTML-код
- Опубликовано: 26 авг 2024
- In this video we go through the break-down of the most common approach to create toon looking images in Unreal Engine, we'll see what works and what doesn't.
Then we'll build up to a new Cel Shading approach that doesn't break physically based rules. Following with few sample tricks to improve the image and re-purposing elements as the outlines to work better with this new concept.
__________________________________________
Videos mentioned:
Substrate Intro Breakdown: • Dissecting Substrate -...
Outline Shader 1: • Outline Stylized Mater...
Outline Shader 2: • Outline Stylized Mater...
Intro to PB Lighting: • Intro to Physically Ba...
Intro to PB Lighing - Follow-up: • Follow-up of Physicall...
__________________________________________
Download Sample Project:
Physically Based Cel Shader: jumpeter.gumro...
Outlines Filter: jumpeter.gumro...
__________________________________________
Join Discord: / discord
Support me on Patreon: / visualtechart
__________________________________________
Gimli and Legolas models have been made by Gianluca Squillace: www.artstation...
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.
this shit is next level no matter where you are
I have to 100% agree with you on that.
I'm agree with u
Indeed, proper outline shading is extremely tricky, and cel shading is a bit finnicky too. This is an amazing resource
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!
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)
Lmfao I found you in the wild @knashki
@@alejmc ruclips.net/video/By7qcgaqGI4/видео.html a video explaining breath of the Wilds rendering system
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!
what u making
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!
I don't even use unreal, but you broke down the process so well that this video is still useful for me in unity.
That's the point :D math doesn't care of which engine you use :D
i wish i could know how to do this. should i do this as Shader or Rendered Pass?
@@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)
I am excited to see about using this in blender
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 )
Absolute banger!
u 2
joe many
I dont think I‘ll ever need another cel shading for unreal video after this, superb stuff down to the detail!
You singlehandedly saved thousands of indie devs... This is astounding!
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!
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!
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.
Hands down one of the best tech art videos I've seen in a while, great job!
I just can't compete with such genius. Hands down, hail the @VisualTechArt
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.
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.
With your videos on Animation, and Visual techs videos on Graphics, us artists will become unstopable
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.
the way you did the fake light on metal was genius!
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!
Mate, the value and quality of this video is beyond anything I've consumed in regards to UE learning videos on RUclips! 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!
Cheers! :D
Fantastic video, and im not just talking about the information, just a really good, pedagogic/approachable, entertaining and well made explanation.
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.
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
@@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...
@@VisualTechArt Hello, can you share the link?
@@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.
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
Yes :D of course there's no magic bullet, but this is the foundation, then you must build on top :)
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!
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.
Cheers :)
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!!!
Finally not the average RUclipsr. You are in my list of 3 now, and thank you for the accent, easily recognizable fratello
:D
@@VisualTechArt can I ask you where are you working? All colleagues I found in this job are rarely at this level
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)
@@VisualTechArt yeah I was dodging the idea of working at Milestone, I’ve heard not very good comments from colleagues, but I think it depends. I was offered to join at Massive but they want you to located there and I don’t know if it is a thing for me to go live in Sweden ahaha kinda scary for me for some reason
Loved and subscribed, no nonsense, no explosions, only information! Thank you!
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.
Be sure to check the video I did with Eros then ;)
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!
wow man, im not even working on anything cel shaded but youtube decided to shove this in my face regardless. god i ended up learning a lot, amazing stuff
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!
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 :)
@@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 😅😭
Bro you are genuinely one of if not the most helpful tech art channel I've found on youtube.
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.
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!
I'll make a proper course at some point in the future for sure :D
I never been this hyped since YEARS I want to learn something new, you the GOATTT!!
I don't even use UE often but the breakdown will help me in blender. Kudos!
On behalf of everyone here, thank you so much, you are a GOD.
Your tutorials are some of the best on RUclips, absolutely incredible stuff!
Superbly done! Best cel shading I have seen. And I feel the frustration of lack of documentation, it really drags the workflow down.
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!
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.
This looks really nice, better than the most cell shading implementations i've seen
god i really picked the perfect time to start learning ue5 because this is exactly what I dreamed of learning.
This is the best video you've made so far! Absolutely love it
Holy shit the succinctness of your explanations is fantastic, thank you so much I've always struggled to understand materials and shaders.
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.
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.
This is the quality I wish every unreal video had.
excellent video - I really like all the diagrams to explain the math
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!
Oh shoot, stumbled on this so quickly. Already hooked in the intro!!
Man the end result is fantastic. Awesome work
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!
I didn't even need to know any of this but still a very fun watch, the explanations are perfect
love your no-nonsense approach to technical art. keep it up
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.
I was really hoping you'd come out with a method for reducing the line's thickness based on distance, so this was great. There's only one problem now: a given object's line thickness will change based on what is visible behind that object and how far away it is. With that one wrinkle gone, it'll probably be perfect.
bro this is a banger, thanks for the detailed explanations of the all the maths
Thank god, a banded cel shader that responds properly to light and isn't just gradient mapping. Gonna recreate this in Blender for sure.
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 !
I don’t even care about the cell shading, this was an excellent intro into UE’s post process settings.
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
Truly some next level stuff you're doing for the community. Thank you for sharing all your knowledge!
Thank you so much, I don't think that I could grasp evey concept you were showing on myself. This is insanely valuable
Wow, beautiful & concise -- great video! Thanks for the exposure trick ✨✨
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!
Glad to see there's someone able to extrapolate concepts outside the specific software :D
A really fantastic explanation.
All your videos are a work of art and a guaranteed source of knowledge, thank you for that!
my head hurts
but im thankful for this tut
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
Well the forward pipeline is even better for stylization :D you can decide what to do with light info directly in the asset material
@@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!
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.
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
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
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
@@VisualTechArt
fair enough haha
aight, time to bang this wall too
God bless you mate...I really appreciate your selfless tutorials.
I'm glad they finally caught up to some of the other softwares that already have this. I guess everyone's leapfrogging everyone else.
Damn. There are few VERY good tricks in this one. kudos from one TA to another.
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.
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.
Yep, that was an oversight :)
Impressive, Insightful and Innovative! great job!!
This is incredible. Best video about the topic hands down
Really enjoyed watching, so many good explanations and the results are amazing.
So great insights and work by you! Thank you!
Holy Shit this is oooo damn good! Great job at not only making it look good but also super logical to follow along!
Most useful video I've seen on the topic hands down!
yeah baby this is what i've been waiting for
This is such a great video and what I've been looking for for a long time, subscribed!
Legend for sharing this
This video is great! Awesome work!
Great tutorial! Super easy to follow even with the compelxity.
You truly deserve all the praise given to you in the comments, what a well explained and helpful video with an impressive result for any to recreate in there own projects for free
5/5 Stars
The background music is nice and at the perfect volume what is the song used if you don't mind telling me
I've generated it with Udio xD
Really cool video ! Have you an idea how to have these outline work with DOF ?
Plus it will be really cool to have some chapter inside your video !
Big thanks for all your stuff !
I was planning to add chapters and I forgot xD
For the DOF, I think a place to start from would be to make the PostProcess run before it :)
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!
@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!
i don't even use unreal engine, but i clicked the video because the thumbnail was so cool looking and colorful.
Math doesn't care of which engine you're on ;)
Yeah, too bad i suck at math 😂@@VisualTechArt
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
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 :)
@@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
Idk about anyone else but this video makes me want to be your intern lol. Although I would clearly need to re-learn calculus so I could follow along. But nonetheless, seeing cel shading being represented through a physically appropriate viewpoint makes the entire style seem formulaic, which is baffling. An art style beginning as hand drawn and then being created in an engine as sophisticated as UE is genius work. I want to try these ideas out myself for an indie game I’m working on. All credits for the shader will absolutely go towards this channel and expect a fat donation if it makes money haha 🙏🏽
I used to have a trainee tier on Patreon, actually, but I stopped it for the time being :D
@@VisualTechArt I am actually starting my journey at the Academy of Arts Uni in San Francisco. I’ll be networking as much as I can, but definitely would hope to someday meet. I appreciate the amount of resources on your channel as said by others in the comments; this information is great for indie devs.
It’s a breath of fresh air for me as I don’t just want to follow the node system verbatim, I would need to know the WHAT, WHY, WHEN, WHERE, and HOW of game development standards. Your tutorials do just that and when further detail is needed, you mention so as to communicate that the professional pipeline has more to teach which I haven’t seen from other channels I’ve found. Also from watching your video with Eros, I’m going to take it upon myself to ensure I pickup some forms of coding along the way. And LIGHTING FUNDAMENTALS BEFORE STARTING! lol. Much appreciated!!
Awesome work as usual, the end result is stellar, keep it up!
I learned so much! Thank you for making this!
Looks great honestly
I wanna start with saying that i love the video. It's really in depth, goes over some unexplored ideas for PP cel shading (on yt at least) and the results look stunning.
However it still doesn't really "fix" any of the shortcomings and compatibility issues of post process based cel shading and other than some enhancements to make it cleaner, this IMO doesn't offer anything that e.g. prismaticadevs shader offers.
That unfortunately means the solution still keeps being "accept the shortcomings and do everything material based" or "build a custom source engine version".
Thanks for putting this out though. It was very informative to see your thought process and i enjoyed watching despite not really loving the idea of the end result too much.
Fair enough :)
Im not exactly looking to do cel shading for my game but this does help learning the System.
Last time i did something like this (a kuwahara filter) i did it as a post processing filter specifically because i wanted to keep reflections since its applying the kuwahara math (via HLSL through 2 nodes one to get data for the other)
So many bits of great knowledge as always!