ADVANCED VORONOI fixes problems you didn't know about (UE4, valid for UE5)

has it ever happened to you while having a walk to just turn around at some point and see a material like this or this or this and thinking huh this would look pretty neat in my project i'll recreate them procedurally so you start analyzing their main structure and you quickly notice that they can all be based on a voronoi pattern given that first step may be doing a mask for the edges of the cells and that should be quite straightforward let's grab the voronoi distance gradient apply a threshold to it and we get circles wait we need the mask to be the same shape as the cells there might be some work to do here and sure if we were on substance designer we could work around that quite easily we would just need to grab the cells three nodes set the hardness to max invert the colors append the distance node and auto levels 1 and then threshold it and yes this might be enough for you but you're still not getting the best result even putting aside the fact that we are now working to make a texture which is different from having the pattern generated procedurally in real time so prone to tiling issues for example we don't have full control yet in fact you can clearly see that as the edge becomes thicker and thicker smaller shapes start to disappear which may or may not be something that we want but the point here is that if we don't we can't avoid it so the question is can we create a voronoi pattern with a distance gradient that fits the cell's shape the answer of course is yes because otherwise i wouldn't have made a video about it so let's start just in case you need a refresher here is a super quick recap of how the usual voronoi implementation works the space is divided in a grid and a point is placed at each cell center each one of these points is then offsetted in a random direction by a random distance but still kept inside their cells then a random color is assigned to each point and finally each screen pixel takes the color of the nearest point and that's it if you're interested in a deeper explanation or how such thing is converted to material notes you can follow the video i already did about this from now on i'll assume you have a good understanding of what we're dealing with anyways even from this simple explanation where the issue lies can be easily understood since the decision of to which cell the pixel belongs to is made by using the euclidean distance from a point we can easily see why the distance gradient creates circles when thresholded it would be handy to have instead a distance gradient that's linear from point to point for every point in every neighbor cell for each cell that will generate exactly the same cell shape and the distance gradient will be exact to it essentially the implementation of the voronoi will stay the same we're gonna add a fancier way of calculating the pixel point distance so let's understand how to create a normalized gradient from point to point first let's imagine that this is the current cell point this is the network cell point and this is the pixel we are currently rendering by subtracting from the current point position the neighbors we get this vector now since we want the gradient to be linear from point to point it means that all the pixels sitting on an orthogonal line to this vector will have the same value so let's try to work out which value this pixel should have actually which value would you intuitively assign to it i'd say 0.5 if your guess is close to death you probably had a very similar thought process to mine i personally try to eyeball at which point on the nc vector my pixel position would have hit it if translated along a line perpendicular to it this exact operation translates to a dot product in math language in fact if we consider the pixel position to be another vector with the same origin of the other one you can clearly see that this is a case of a vector projected on top of another one but be careful the dot product result is actually the length of the first vector times the second vector 1 times the cosine of the angle between the two that means that doing the dot product as it is would give us a result way higher than what we need to do a proper vector projection we have to eliminate the length of the vector we are projecting on which means that that length has to be equal to 1 which by extension means that such vector needs to be normalized first all right this operation now will tell us how long is the projected vector it isn't in 0 1 range to make it so we have to divide it once again by that vector length which is amazing because that means that we are now avoiding the square root in the normalization since now we are effectively dividing by the squared vector length [Music] let's now make a material function out of it since we'll need to repeat this operation for each of the eight neighbors of each cell now that we have it we can use it to build our exact distance field which will be another material function since we'll need to combine these distance fields with neighbors at the end so remember this whole function is basically replacing the basic distance we will normally calculate what's happening is that i am evaluating the point-to-point gradient of the current cell i'm evaluating the distance field off against the point of each of its neighbors and to combine all these linear gradients to obtain the cell 1 we just need to keep for each pixel the maximum value if you're wondering what's in the function that spits out the cell locations here it is it is a slight different implementation of what we built together in my first video about voronoi and now that we got all the distance fields we carry on as usual by mixing them all together by keeping per pixel the one with the smallest value hook everything up and we get this it may seem a bit weird at first but if we compare it with the usual bernoulli gradient we can clearly see that the cells still have exactly the same shape and now let's go back to the reason why we did all of this will this work to mask out the edges of the cells definitely yes but why stop here don't you think that this pattern would also benefit a lot if it had the possibility to smooth these shapes corners well that's actually easier done that said incredibly we just have to go back in the distance gradient function we just created and swap all the max operation with a smooth max function look at that i'd say that now the versatility of this pattern has extended quite dramatically if you want to implement this last bit yourself too you can follow this video i did about smooth minimum and maximum functions they're very handy in the meantime as far the war no is concerned what are your thoughts about this version will you be interested on seeing it implemented in substance designer 2 for what would you use it and do you think it would be improved even more let me know in the comments below and maybe you'll give me a nice tip for a future video [Music]

Channel: Visual Tech Art

Views: 10,069

Keywords: voronoi, pattern, procedural, generative art, shader, material editor, unreal engine, UE4, UE5, tech art, material, texture, substance designer, natural pattern

Id: pxouMOxGi6E

Length: 7min 56sec (476 seconds)

Published: Wed Aug 10 2022