Intro To Procedural Shapes and Patterns - Episode 1
HTML-код
- Опубликовано: 4 окт 2024
- Today, we're starting a brand new series of tutorial videos. In this series we'll be discussing procedural shapes and patterns. We'll be creating signed distance fields, tiling patterns, compound shapes, user interface elements, and more - all using shader math. We'll also be creating a library of nodes - Subgraphs in Shader Graph and Material Functions in Unreal - to help with the creation process. In today's video, we go over the creation of a Linear Gradient node and an Anti-Aliasing node. The Anti-Aliasing node uses derivatives to resolve a gradient or signed distance field into a perfectly sharp and anti-aliased line, regardless of resolution or camera distance.
------------------------------------
Here's last week's tutorial that shows how to create particle billboards for VR.
• Adapting the Particle ...
Here's the playlist for the whole series:
• Procedural Shapes and ...
Shader Book Recommendations
www.bencloward...
------------------------------
Theme Music
Peace in the Circuitry - Glitch Hop
teknoaxe.com/Li...
Background Music
Speo - The Little Things
• Speo - The Little Things
#UnrealEngine #shadergraph #Unity
![Intro to Flow Maps [UE5]](http://i.ytimg.com/vi/FvbPnndigL4/mqdefault.jpg)
![BabyChiefDoit - Too Slow (feat. STAR BANDZ) [Official Music Video]](http://i.ytimg.com/vi/zayaxws7RPg/mqdefault.jpg)
im a bit late to the party for this one ..but the ben clower party never stops being useful! lets gooo
May I ask, is there a preview of what the end result will be? I ask because it help me understand the steps to walk towards the goal. Ben, YOU ARE AN AMAZING TEACHER>>>THANK YOU!
That's a very good point. I'll try to include some examples of what our end results will look like in next week's video. Thank you!
@@BenCloward BEN, YOU ARE THE BEST!!!!
@@BenClowardthank you! This would be super helpful! For longer multi part tutorials where the end may not have been done/recorded yet, it helps showing examples from existing games too. Just so we know what kind of thing we're working towards. Always appreciate your work and sharing expertise with us! Thank you!
best shaders channel
I love that series so much I decided to watch it a second time! Thank you so much!
Woww this is next level, Uncle Ben did it again!!
Let's goo on one more series 🚀
One of my favorite topics!
Awesome!
Im not new to unreal and yet im learning a lot from you
Yesssss perfect timing!
Excellent tutorial with good clear instructions and explanation!
Pure gold, Ben.
Can't wait for more! I've been wanting to learn how to do this kind of thing for a while. Great vids as always.
thank you so much ben. youre literally the only instructor who taught every single thing with industry standard. after these can you do some cubemap based reflection detailed videos too?
Take a look at this one and let me know what else you'd like to know about the topic: ruclips.net/video/HA0xXiqxA54/видео.html
@@BenCloward awesome , damn I missed this video I guess. I will work with it a bit and see how it works for me thanks. you're awesome.
Uncle Ben is the Best！
New series wohooo. Let's go.
This lends itself great to emergent programming imo, when nice stuff just happens by fiddling around. I always look for something magic when doing stuff like this (but not always reach it). This will be interesting. I hope you can cover a bit more than later on than just basic shapes, patterns that are very hard to draw manually (idk electrical traces etc.) :)
That's something I always wanted to try! Let's gooooo!
It looks like another series of great videos is coming up! Keep it up, Ben!
Such a great channel and super clear explanation, thank you!!!
@BenCloward. Thank you for sharing all this knowledge. Currently putting together my forst indie game and your experiences with shaders is the best ive found paid or free. I worried a bit with virtual textures and nanite foilage being a new thing, so im glad to see you starting a new series! LETS GO!
early on in my shader career, discovering that uv's were just gradients was a pivotal moment.
Really looking forward to this. Hope you cover more on the Blender side.
Very cool tips ! Their is a good optional alternative to " length( float2( ddx(a), ddy(a)) ", it's possible to use directly in the divide " fwidth(a) " but I think it's not exposed in Unreal nodes
This is awesome!
Amazing!!!
I think using the "smooth step" node also allow for masking out a gradient.
🔥🔥🔥
You could have provided a simple explanation of the derivative nodes and why this approach is superior to the step function. Otherwise great video and looking forward to the next in the series.
That's true. Although I already did a video on derivatives awhile back: ruclips.net/video/1HTMoCaY0xw/видео.html It's sometimes hard to decided when I should cover material again.
Awesome!
Super stoked for you doing an SDF series, Ben. I have some kind of allergy to using textures in my game so this seems like it might be a great option. Great video as always! Do you know if it's possible to integrate this approach with Unity's newer UIToolkit (as opposed to the old UGUI)?
UIToolkit does not yet have support for Shader Graph, unfortunately.
@@BenCloward ☹️ do you know if that is on the roadmap for anytime soon?
@@JoeTheis There are a lot of really big, amazing things in Unity's future that's I'm super excited to talk about, but it's probably best if I keep my mouth shut for now. :0)
@@BenCloward I'm glad to hear that, I'll keep my fingers crossed. I come from a web background so UIToolkit is a very valuable workflow to me.
🎉
Hi @Ben, amazing tutorials, I watching (and practing) each one of them! Amazing stuff.
I have a question. You used (DDX/DDY) but could be used the STEP node to achieve the same result?
Step could produce a similar result but with aliasing. The method I'm showing produces an antialiased edge.
@@BenCloward ohh... got it, thanks!
LOOOVE this series. I was just going down this road! QUESTION: In UE is there a reason not to use Ceil instead of the DDX, DDY method? Is it just another way to do the same thing or is there a reason we should be aware of to not to use Ceil? THANKS!
There are lots of ways of resolving a gradient or SDF to a line. The method I have demonstrated creates a perfectly anti-aliased line - regardless of camera distance or screen resolution. Using Ceil, Floor, or Step would also create a line, but it would not be anti-aliased. This will be more clear once we create the circle SDF in next week's video.
@@BenCloward k good to know thank you!
Hi Ben, thanks so much for making these!
I have a question; what are the advantages of using DDX DDY compared to something like smoothstep? Are there usecases where one is more interesting than the other? I've always used smoothstep for AA but never thought about using derivatives
Thanks a lot!
The DDX/DDY approach gives you a hard line with perfect anti-aliasing. It's resolution independent so the line is hard regardless of camera distance or screen resolution. With smoothstep, you can control the hardness of the line - so you could create a blurry line if that's what you wanted. Using smoothstep, you could also make a hard line, based on the values you use, but that hard line will become soft if you zoom in on it - and it will become aliased if you're too far away.
@@BenCloward thanks so much for the detailed reply!! Sorry for replying late, i didn't get a notification
Dear Ben.. Do you know why are you substracting by 0.5? What is the reason sir?
Uhh the anti aliasing part is interesting! I've gained a bit of knowledge about this from the alpha to coverage article on medium by bgolus (incredibly recommend that one). Is there a good reason to not use ddxy directly?
How many.. pixels of anti aliasing does this create? The technique in that article used a divide by fwdith (which is ddxy?) and got smoother with higher levels of msaa, is this true / controllable here somehow?
hey Ben, I'm curious about the anti aliasing section. Why not just using the `step` function?
This is such a great question that you’re about the fourth person who has asked it. 😀 It’s because Step doesn’t do anti-aliasing. We step every pixel would either be black or white. It’s hard to tell in this example I showed because it’s a perfectly vertical line, but it will be more clear next week when I show how to use it with a circle.
@@BenCloward I will be waiting to follow along 😄
i could be wrong, but i think i could achive exactly the same effect bby usimg step node. Connect any gradient to y and scalar parameter to x (or the other way round). This would reduce computation, instructions, etc, better for performance. Please correct me if i am wrong
You're not wrong, and your not the first to suggest using Step in the the comments here. Step will give you a sharp edge and it will be a bit cheaper. However, the disadvantage of using step is aliasing. The method that I show gives you a perfectly smooth, anti-aliased edge regardless of camera distance or resolution.
@@BenCloward Oh, i see, thank you for replying, i did notice some quality loss, i will do some research on that
I'm only sad it took so long to get to this as a topic. Unity isnt too bad but I've been banging my head against this kind of stuff for Unreal for longer than I'd like.
In blender we can create a smooth transition of black an white lines by splitting axis of UVs, multiply it by a number, ping pong it and then fraction it.
This set up is the base for almost any texture but I haven't found how to do that in unreal engine, do you have an idea of how could we do that?
Why do you have to subtract 0.5 from the AA subnode?
Detailed PCG tut series when?😅
PCG is pretty specific to Unreal right now. I'm trying to keep my channel fairly engine independent. Although I recognize what a powerful feature it can be.
Why didnt you use step instead of ddx ddy?
Step would also work and it might be a little cheaper, but it wouldn't be anti-aliased.
@@BenCloward ooooh thats true... Thanks!!
is it necessary to use Pascal Case when naming Sub Graphs and Properties?
No - you can format your names however you want.
I wanted to replicate the setup in Blender. I managed to create the Linear gradient, but for the Anti aliasing I'm stuck at the DDX/DDY operation. I do not find any equivalent.
Those derivative nodes are very specific to real-time graphics. You can probably get by with using a Step node or Inverse Lerp node instead.
@@BenCloward Thanks for the answer. I'm just not sure I will continue in Blender. I'm afraid later shaders will use other specific nodes like those. Maybe I will try in Godot.
Hi Ben, I really appreciate the fantastic tutorial! However, I suggest splitting the video into chapters for the Unity and Unreal parts. It would make it more organized.
Furthermore, I don't understand the part where you divide the length and use it as a subtrahend of 0.5 Could you explain it for me?
do you think you will ever include godot visual shaders to your videos to?
I've never used Godot, but assuming it has a decent node-based editor, you should be able to do everything I'm presenting here in that engine too. The goal of my channel is to be as engine-independent as possible. I'm trying to present techniques and principles that work in any engine. The reason I'm showing things in both Unreal and Unity is not because I want people to use those engines, but rather to demonstrate that the principles I'm sharing are not specific to one engine.
@@BenCloward godot visual shaders are probably closer to what unity have to offer with minor differences based on it's editor specifics. I do enjoy seeing multiple engine examples and how it's done in each one I also feel like it could help others and your channel to see godot content as the engine is increasing in popularity
Also I find godot lacking a bit on youtube videos and your channel is great when it comes to explaining.