Understand Voronoi and its Implementation (UE4, valid for UE5)

hi guys in this video i'll walk you through the realization of a voronoi pattern an incredibly versatile instrument that must be known by every digital artist the reason for that is very simple with this pattern is extremely easy to simulate many structures that form spontaneously in nature in fact this pattern can be found literally everywhere in the giraffe fur in the turtle shell in leaves in dragonfly wings in the way dry soil breaks up in garlic's love in soap bubbles in corn cobs in the way trees share space in red albumulation in the anime skin and much more hexagonal grids can be obtained with voronoi too they're just a special case and these allow us to include things such as the honeycomb and the fly eyes into the list the reason behind voronoi omnipresence in nature is due to the fact that it is based on an extremely simple rule of spatial subdivision in fact this pattern emerges automatically when in a cluster of individual entities of equal strength each element competes to share a finite amount of space each individual fights to expand as much as it can but its neighbors which are doing the same exert resistance to generate the pattern as first thing we have to subdivide the space with a grid such space in this tutorial will be represented by the uvs to visualize the grid we can add a fract node [Music] each one of these cells will hold a point at its center which will be offsetted in a random direction this will cause the distortion of this regular grid into a voronoi pattern such points i'm talking about are practically the origin coordinate of each cell let me visualize them [Music] [Music] to offset them we need to generate a random value per cell we can use the cell noise after transforming the grid space to 3d we can use the third coordinate otherwise useless as a random seed if you want [Music] we can use the first two channels of this noise as 2d vector to operate the offset after remapping them to -5 2.5 range the range is not from -1 to 1 because the points are in the middle of a one by one cell so they only need to offset 0.5 to reach its edge these offsets can be added to the grid cells and we can use the result into the debug nodes to visualize the offsetted points we can also add some control over the max amount of offset we apply [Music] now to generate the pattern we have to for each cell calculate the distance gradient and confront it with the neighbors then for each pixel we'll keep the one that has the minimum value so let's start by calculating the gradient of the single cell we are actually already doing that to draw our debug points to obtain them we are subtracting from the offsetted grid space the cell position to obtain the uvs local to the offsetted cell which we then center on 0.5 then is just a matter of calculating the distance of each cell pixel from the local origin as you can see though each cell is just considering its own distance field now it has no visibility on its neighbors the only way we can make it do so is in each cell repeat the calculation eight more times for the neighbors which translates to repeating 8 more times this chunk of code we wrote but each time adding an offset in the direction of the neighbor we want to sample to add the possibility for each cell to evaluate the distance field of another one we just need to add to the coordinates of vector 2 for the offset be careful to not connect the neighbor's cell data to the final odd otherwise you will be shifting the entire grid since we now need to replicate these nodes 8 more times i think we should put them into a material function to keep things tidy and readable [Music] [Music] the positioning i chose for these nine note blocks is not random this disposition will help us to visualize what we're about to do and make it easier let's say that this node placed at the center is our current cell then all the other ones represent its neighbors at their exact relative position so we can set their offsets accordingly to their position and now each one of these nodes correctly samples a different neighbor of the central one [Music] let's store the value of each cell distance field in a named reroute node after doing that we just need to calculate the minimum value among all the distance fields and finally our voronoi is starting to pop out with a little change to what we already wrote we can colorize the voronoi cells too let's expose the cell random color in the material function as first thing and save all those values to more name it root nodes now the process to colorize the cells will be a bit tricky to follow in a node-based environment but the logic is very simple we will calculate the difference between distance fields in pairs and we'll use the sign of the result to decide which one of the two corresponding side colors we're going to keep and then we'll do another round of comparisons between each pair of each result and so on until we will remain with just one value let's position all our getters in the graph and now let's do the comparison between the first two by subtracting their distance fields if the result of this operation is negative we have to pick the color of the first element otherwise the second one to do that we just need to contrast the gradient created from this subtraction to a binary mask and center it if we really want to be finicky before saturating it doing this operation instead of simply using the sign node can be useful in eventuality we decide to have blurred transitions between the cells now just add the alert node to use this mask to interpolate between the two colors and that's the first one we have to repeat the same operation for every other pair of named roots as you can see there's one cell that remains out of these comparisons don't worry it will be added at the end now we have to repeat the same comparisons with the results we got in pairs to do so though we first need to combine the distance fields [Music] [Music] and we are ready to do the second wave of comparisons [Music] and that's it we now got our colored voronoi cells with the distance field that we actually calculated again so we can delete the previous main operation series we did and now you're ready to implement into your shaders some fancy effect that uses paranoid if you know a bit the options available into the vector noise node you may be wondering why should they go over all this trouble of implementing voronoi from scratch instead of just using the one the engine already provides me well if you just need to use a voronoi pattern without any special requirement you're definitely good to go with a built-in one but the fun part about self-implementing it is the amount of control you have over it and incredible number of different ways you can play with it one thing that you can't usually do for example is to control the maximum offset of the points as we already have done and what about controlling it with the texture for example or animating the cell as i'm doing right now there's also the possibility of creating a much more fancy implementation of this wonderful pattern of course which will be discussed in future videos [Music] you

Channel: Visual Tech Art

Views: 11,531

Keywords: voronoi, shader, pattern, generative, procedural, ue4, ue5, material, tutorial, nature, simulate, sci-fi, sci fi, hexagon, spatial subdivision, honeycomb, grid

Id: muUAks1i8BI

Length: 11min 11sec (671 seconds)

Published: Thu Mar 24 2022