Glitter Shader Tutorial UE4

[Music] hey gamedev community this is brian venson and uh today i'm going to give you a little tutorial on how i made this glitter shader i had a game dev student approach me and asked me whether i would be willing to make a tutorial on how i did this and i never turned down someone who's interested in learning um so i wanted to make this video today so without further ado let's get started so uh make myself a new material here for the tutorial we'll just call it tutorial for that and uh we will um make a material instance of this and drag that material instance onto the mesh in the window boom so now the mesh in the window gonna look like the uh default gray box uh checkerboard material so we open up our shader here um see the base shader uh this material that i'm going to make for you today is just going to be opaque default lit there's nothing special going on over here in our our details panel just want to make sure everyone can see that there's nothing nothing fancy happening um so the first thing with this glitter shader is you need um some random noise now on my patreon recently and on my twitter and instagram i believe i posted some information about how you can generate that kind of texture in photoshop but if you're interested yeah check out my patreon and and uh you'll be able to see step by step how you can you can do that i think it's like four or five steps uh just using some filters and some different things to get you a random noise texture but that's what we're going to use today for this so i'm going to bring in a texture hold t and click and go over here to the texture panel and i'm going to go find um a sparkle noise one so just so everyone everyone can see sparkle noise one is just the texture that um has a bunch of random noise on it and uh you know each each uh channel has you know some black some variations of black white and gray to get you some tones now uh really what this is mathematically speaking is a bunch of uh vectors that are um sort of pointing randomly when you uh use that as as a three-dimensional noise um and that's what we want because what we want for the glitter is sort of some random am i am i shining am i not um kind of math so generally when you you bring in a texture you can also bring in a texture chord you can do t e x c o o and you'll bring up texture chord and um if we multiply this uh that essentially scales our texture to some scale that we use here in our multiplication um i just do that for the ability to potentially scale the texture later um and so we can parameterize this uh this value uh hold s and click you can bring up a parameter and um we'll call this sparkle scale so this will be the scale of those tiny random vectors how big or small they'll be across our mesh and if we come over here and we plug that in to our uh emissive channel you'll see on our preview mesh that um we'll get our our kind of random noise scattered across the previous sphere um oh my scale is zero let's make this one yep there you go right so a bunch of random colors uh that will be sampling uh to see whether or not we want to glow or not glow in that particular area um i found that a value of somewhere around like seven or eight uh was granular enough to feel like glitter so that's what i turned it turned it to so yeah so we're already kind of on our way to that glitter feeling right um so what we want to do with this this uh this texture is um do some math to to see whether or not any of these random vectors line up with our view direction and if so we'll sparkle it and if they don't then we we won't sparkle it and every gradient in between and that's what gives us that sort of shimmering effect so how do you figure out view direction um well the way you do that is you calculate um you get the at the world position which world position is um the position of uh each pixel in world space um and and luckily unreal engine has a little nifty node here for that so we're going to get the pixel uh on our mesh and we're going to also get the camera position i can spell camera position um and we're going to essentially uh get a a vector from one to the other right so each pixel on this mesh is represented in world position and then the camera's position to that pixel is going to give us a vector that will we can check against uh to see whether or not we're staring at one of those pixels or not head on and if we are then it will flash it white if we aren't it'll be some variation of gray or black so we're gonna we're gonna compare these with the subtract and um one of the things i like to do for camera position or i want to do for camera position here is uh transform this vector um so we'll do a vector trans transform here and we're going to transform it from uh from camera space to world space so and this will just give us a flat world space position for our camera to subtract from so we subtract our pixels position in the world from the camera's position or the camera's position in the world from our our pixel on our mesh and uh that'll give us that vector we're looking for um now we want to normalize this we're not wholly interested in the the length of that vector we're just interested in in the direction and so uh let's let's get organized a little bit here we'll just call this view direction um and yeah now it's normalized and normalized just means um it does the length of this vector uh doesn't matter to us it's just gonna be we're gonna we're gonna sort of normalize its length to be one and normally you wanna do that when you're gonna compare two vectors together and that's exactly what we're gonna do here is uh we'll grab another normalize here and we'll make all of these vectors uh have a length of one as well and um and that'll be our comparison now now here's the problem with our our current texture by the way we'll we'll just call this random noise well um random noise now here's the problem with our current texture um it only it only lives in a zero to one space because color is only zero to one and really what we want to know is am i pointing is that pixel pointing directly at our camera is it some way ways off our camera or is it completely out of our camera's view and we need we need more than a zero to one for that so um what we're going to do is take our color here and subtract 0.5 now what this is going to do is slide our color into a value range of 0.5 and negative 0.5 so that's going to give us facing and facing away and then we want to we want to now normalize that again because we're going to compare these these uh these two vectors both our u direction and the vectors that are are given to us from this random noise um and that is what's going to give us our glow or not glow one of the things we want to do here with view direction essentially what we're looking at right now is um from the camera to the pixel and we want to flip that so we'll do a one minus so we can get from the pixel to the camera and that's what we want to compare here with a dot product and that's how you compare two vectors dot product and that that dot product is just saying are these two vectors facing the same way are two normalized vectors facing the same direction and that question the answer to that question is what really gives us our our our glow or shimmer to white or not here in our shader so since we finished that dot product let's go ahead and plug that into our emissive color and see now we're getting that kind of um white dotted effect and if you sh we turn our camera we're getting some of these things that kind of blow up and shimmer and some of them that are not facing camera anymore that kind of turn away and so we're getting that kind of shimmer sparkle effect that we're looking for which is great it's a great start so we got our view direction we got our random noise uh vectors and we're comparing those uh two vectors together to see whether or not we want to glow or not glow each of these um these dots in that texture uh so the next part of the shader is going to be it's going to be sort of making some math adjustments um to what we currently have because it's nice but um too many of the dots are glowing at the same time and we want maybe a small amount or so to glow um over the surface so um i'm gonna try to do like a subtract here and i'm going to make give myself a parameter to change later to decide how much or how little of these dots i want to glow and i'm going to just call this um sparkle subtract it's really literal i know but that's that's just an easy way for me to remember now um i think a value of like uh 0.8 or so is is pretty good for this so we'll plug that in and we'll see what we get from that yeah right so less less places are sparkling which is going to give us that sort of contrast look we're looking for um and uh we're going to want to give ourselves the ability to um make this as bright as as we want and so uh we're gonna give ourselves uh sort of a strength value um we'll uh parameterize that as well give us ourselves some flexibility here so we'll call this sparkle multiply right and we'll set that to a sort of a brighter default value something like uh 8 i guess will work so we'll plug that in let's see what we get here all right so now we're we're a little bit a little bit brighter um and we'll be able to see this better in the in the level uh because there's lighting in there and that'll that'll help um uh with the the kind of the brightness and there's a post post processing volume that's helping to bloom some things out so it'll look a little better uh in the level the last thing we want to do here in this sort of um kind of math adjustments section of our shader is give ourselves power now the power node is is sort of a contrast kind of node it essentially um kind of pushes the values uh that are sort of middling the the point fives the point sevens the point point threes towards their upper and lower limits so zero and one and so what you'll get is sort of a removal of a as this exponent value here goes up a sort of a removal of those middle values so we'll get more brights and more darks and less sort of gray tones in the center and that's just like a handy control for us to create the the visual that we're looking for so we're just going to call the sparkle power and sort of the default uh power um value is one and that'll that'll essentially give us no contrast and we'll we'll kind of ramp that value up when we're ready so we'll plug that in here and we'll call this section um arithmetic or let's just call it like uh math adjustments um i really like to uh comment my shaders just so i can remember uh what the parts do um so yeah a quick review we did view direction and random noise we compare those with the dot product and then we make some simple math adjustments to to give us some flexibility on what things look like let's go ahead and save this and we'll go take a look at what the shader looks like um in in uh the level so go back to here and and we're already on our way right we're getting that kind of shimmering glittery type effect already which is great um so yeah let's go back to our shader and keep going here so the next part of the shader um is going to deal with uh color so we want to give ourselves the ability to turn our sparkles to whatever color we want right so um we can add ourselves to multiply hold m and click and uh we can give ourselves a vector three if you hold three and click um we can right click this and convert it to a parameter and call it sparkle color um and we'll make the default color a white uh so we're not changing a whole bunch yet and we'll we'll make changes to this later but um just so you can see we'll turn the default color red and uh you can see that it's working and doing what we're looking for here so we'll we'll plug our our math adjustments into this uh sparkle color and we'll plug that into emissive color and what we should get is uh red sparkles voila red sparkles right um and yeah uh some of the other stuff you've seen on that shader that's that kind of is floating around my social media is um kind of a nice kind of outer hue on the edges of the mesh and that's what's called a fresnel so let's go ahead and bring in a fresnel unreal engine has a built in fresnel which is really great to use so we'll just drop that here and what we'll do is create two um two parameters to change some of the the components of this for now so we'll call this grinnell underscore base and we'll call the other one bernell underscore exponent and the default values for this are are kind of harsh so i'll i'll i'll throw the default values here and then we'll make some quick adjustments so default exponent is five and the default base is point zero four um and we'll plug those both in to our fresnel and you know i'm about to comment this space because i always do so comment for now and uh we we'll plug this for now into our uh we'll actually add it let's add it to our emissive color so hold a and click we'll get an add and then we'll plug our fanel into our emissive color and we'll we'll plug that addition into our missive color and see what we get here and there you go right we got that kind of rimlet look um that you were seeing on on my model and um that's stark white and we obviously want to give ourselves the ability to change that color as well and so we'll hold down three and click and give ourselves a color value convert it to a parameter and we'll call this fresnel color right so we'll take our fresnel and we'll hold m and click and do a multiply against this for now and that will give us our color and and um i guess we'll stick with the theme and we'll make our fresnel color red as well here and we'll multiply this together and then add that to our um emissive chain here and we'll see what we get over there right so now our our kind of uh edge glow is is that red color which is great um it's a little harsh uh how about we make some some small visual adjustments uh sue me i'm an artist i just like to uh to have nice colors as i as i work through this stuff so i'll choose you know some nice some nice hues here to give us some color and uh okay so so what's next is um we have our fresnel and we have our uh which we can we can put our uh bernell in our our comment over here these two multiply against each other uh yeah sorry so that's our fresnel work and um so all this stuff is emissive by the way um we'll save and i'll show you what that looks like in the end editor like uh in level with the lighting and all that um so yeah so all this stuff is emissive right it's it's uh gonna be this this bright regardless of of um what's going on with the lighting um we're getting our shimmer which is great right we're pretty close to what we're looking for here um we want to add some elements of um kind of lit uh elements so that as we turn our our mesh around we get some of the light from the scene sort of bouncing off the crevices and stuff and for that we're gonna need a normal map and so let me bring in a normal texture that that i i created we'll hold t and click and we'll go down here to and stone normal and i just made this in photoshop it's just a simple cloud texture that i that i created filter render clouds that's the way you can get one of these and um we'll just put we'll put this over here about that we'll call this this section normal um not that we know what we're doing here and uh and then i threw it into xnormal and i got myself a normal map um so we want to give ourselves the ability to sort of ramp up and down uh how strong this normal map is so uh i'm just gonna jump right in and do that now you can right click and look for component mask and uh and what we're going to do is mask off our rng because those are sort of our um the the channels from a normal map which with which the light plays and so those are the the channels of our normal map we want to uh multiply against a value to give us sort of a normal map strength so if we hold hold down s and click we'll make our parameter here we'll call this normal strength uh and we'll make this value a default one and then give ourselves the ability to ramp it up later and then because it's a normal we have to bring back our blue channel so we split out red and green we're multiplying them to get a strength and then if we right click and look for append append vector we can grab our our red and green and then we can grab our blue channel and we can uh kind of reconstruct our normal here so now this this node is a normal map again uh we broke it apart we multiplied it against something and then we put it back together so we'll take this append and we'll drag it up to the normal pin and we'll see what we get here uh it doesn't look very different but what we'll do is we'll we'll go look at it in the level where we have some lighting and see what it looks like kind of hard to tell it's happening and that's fine that's why we made the parameterized version right because we can go in here to normal string and we can we can be nuts and crank this up to like five right and you see how this edge now has that kind of um texture to it that's what the normal app is giving us and we can go back to uh the world and we can see we can see that texture now a little bit right that's what we're looking for is just a little kind of um texture along the edges where the lighting can kind of play on our stone so that's great so now we got our normal map and uh uh our so all of our emissive portions of this shader are just laying across a black color um stone itself the sort of the the meshes base color is black still so um we're going to want to change that and maybe do some stuff with some of these uh sort of default uh pbr values uh so let's kind of jump into that um yeah so all we want to do here really is give ourselves the ability to change that background color from that black to something else so we'll hold down three and click and we'll uh convert this to a parameter and we'll call this base color and uh i gotta i gotta follow my convention from erotic about this stuff base underscore color um yeah and so uh just as a default color we'll change this to something um you know kind of purplish since that's the hue direction we're going here um and we'll plug this into base color and save yeah so um so yeah so right so the background's now pink um and that color is represented here in the level we still get our shimmers we still got our fresnel and the lighting is still playing on those sort of bumps uh from our normal map which is great now that color uh really kind of sucks to me so i'm gonna choose something a little bit more um representative of what we're trying to make here maybe something kind of uh darker purple and we'll hit that um so one of the things i did as well in this sort of base color section is i created uh sort of a faked um gradient look like uh faked top-down lighting the the shader is lit as well and so the lighting and the level is obviously going to help us with that but i wanted to sort of increase what that that felt like so i um i sort of uh faked to that by by taking texture cord um texture coordinates i took the the green channel so if we do component mask we can uh break off our texture cord and only use our green channel and if you look here the green channel is uh just a top down gradient essentially when you when you split it off and i wanted the dark portion on the bottom so uh to get that i i did a one minus here and uh so that'll flip our gradient and then i wanted to give myself um the ability to sort of change the height of that gradient across my my geo so i used power here um and remember we talked a little bit about power earlier powers that sort of contrast whereas the darkest darks and the brightest sprites you push those and so uh just if we wanted to sort of scale that in as a parameter make that a parameter and scale that in the world we can do that too hold s and click and we'll call this parameter ambient if i can spell ambient shadow um and we'll just make this a default value of one and we will multiply that against our base color that we just created and then we'll plug that into our base color here um now we know you know we got a comment so we can remember what this is so see we'll call this base color and we'll save this and we'll go look at that real quick yeah so this is kind of what we have now right it's looking closer to what i was showing off on the internet um and and it's so cool right the as you turn the camera we're getting some sparkles that turn on and some that turn off and that's really great that's what we want here um i know it's not nearly as bright as what i did on on mine as well uh but we'll save that part for last we'll sort of uh go through the motions here of of changing some of those values in our our material instance and and that'll get us closer to what we're looking for so one of the last things i wanted to do here was um i wanted to sort of uh add in uh some of these pbr values so we'll just make three parameters one for metallic um actually really we don't really need to do metallic so let's just do specular um and uh specular is kind of that that glistening kind of effect that reflective kind of effect that you're seeing on my stone and we'll just make this a default value of like 0.3 and we'll plug that into specular and uh we'll we'll use zero for the other two pbr values we don't want any roughness really and we don't want any metallic really so we'll just we'll just plug zero into both of those and we'll save and we'll come here and we'll go to our material instance actually and you can see kind of that that glisteny kind of effect that's happening let's turn down our normal strength to like to you can see uh kind of the reflectivity that we're getting in the middle and that's that's exactly what we want here it's just some of that that kind of uh reflectiveness happening and yeah obviously we can kind of see some of those reflections on our our uh in level stone as well which is great that's what we want um so we'll save our material instance we'll go back to our shader and uh you know i haven't saved all of this and if this crashes that's bad we'll just save all real quick and so the only other thing i did before we get to our material instance and make some kind of final changes there is i decided i wanted to add my emissive color or my sparkle color to my to my base color it's not necessary but for some reason it kind of helped my helped my uh stone look the way i wanted it to and i may actually come back and and and remove that now that i'm thinking about it you know what i'm gonna i'm not gonna do that this time we're gonna save let's see what happens because adding sparkle color to the base color is really i don't think it's necessary here um okay so let's close we don't need our texture anymore let's go to our material instance and let's change some of these values to get closer to what what you guys saw in the final product on my on my social media so um our ambient shadow we want a little bit more shadow uh showing here so we're gonna change this value to a value of two and uh we're gonna change our fresnel so it's not so so uh harsh here um let's make our our base value uh point zero one and so now we're getting some of that darkness here on the bottom as you see um and we'll change our our base uh fresnel value to six and that's kind of pushing the the for now closer to the edge um removing some of those middling values right because this fresnel is using a power uh to do that um our normal strength we're gonna keep it too i think that's uh probably pretty good um our spark will multiply um let's make it a base value of maybe seven um and that didn't seem like it did very much difference there um but that's okay uh we're gonna do our sparkle subtract and let's make this like point nine so that gives us some more or yeah some uh some more contrast on our sparkle texture and and so we're going to get more kind of flints uh which is what we want um uh let's let's crank up our sparkle power and that's gonna give us uh some more brightness here now this that's very bright right but that's that's not representative of what it'll look like in scene because this is sort of just um default lighting uh so we'll look at it here right now we're getting sort of those kind of speckly pops and that really feels like the glitter we're looking for here which is great that's what we want um so yeah uh one last thing is uh i wanted to change the sparkle scale seven feels maybe a bit big for these sparkles maybe we'll cut it down so that they're a little bit smaller and that's easier to see here in the engine right now now we're a little bit more subtle about uh which sparkles are large and which are small right and as we turn this camera we're seeing which ones kind of align and pop which is great and maybe we'll fudge with the colors just a little bit to see if we can get something a little bit uh closer to what we're looking for here um or at least what you guys saw actually i i remember i saved these colors because i wanted to make this fast so yeah so now our kind of you see our fresnel shader uh our fresnel rim has changed right so we're a little closer to what i had and then um i think i used a darker color for my sparkles so now we'll check on that in engine and that's pretty close to what um was out there on my social media and i've set up this scene to use a blueprint that'll spin this this stone around and i set up my background scene to look really pretty and so if i hit play here yeah we'll get something pretty close to um what you guys are seeing uh on social media which is great awesome so if you like this video please like and subscribe and join me on patreon at patreon.com forward slash let's make effects and follow me on social media at let's make effects on twitter and instagram thanks you

Channel: Let's Make FX

Views: 27,588

Keywords: ue4, unreal, unreal engine, unreal engine 4, shader, shaders, shadergraph, shader graph, material, materials, material graph, vfx, fx, visual effect, visual effects, visualfx, visual fx, vfxart, vfx art, vfx artist, code, coding, games, game, gamer, indie, dev, gamedev, game developement, artist, effects, engine, indie dev, glitter, glitter shader, sparkle, sparkle shader, environment art, game art, gameart, blender, b3d, photoshop, adobe, epic, 4.26, 3d, digital, gaming, digital art, digitalart, art, graphics

Id: pSRM3n14k3A

Length: 35min 34sec (2134 seconds)

Published: Sat May 01 2021