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

In this video I illustrate what Voronoi is and how it works in depth. Then I walk you through its most basic implementation from scratch.
Voronoi is a powerful tool to simulate an infinite variety of natural materials, create sci-fi looking surfaces and much more!
Discord: / discord
Patreon: / visualtechart

[@frankerzed973]

Amazing videos as usual, we are super lucky to have you uploading these amazing videos. Keep it up with the great work my man!

[@VisualTechArt]

Too kind :D

[@OmidGhajar]

Thanks much for sharing, this is very interesting topic and definitely looking forward to experiment more as well as see more of your videos, great job buddy, keep up the great work.

[@mysfeori6510]

this is the first unreal tutorial i have tried to follow, came across a problem with weird artifacting of the shapes not fitting together entirely, and it partially showing a second grid of colors behind the voronoi, took me about 2 days too fix, in the end i made a 5 by 5 grid at 6:01 instead of 3 by 3 and that seemed too fix it, i assume it was something too do with the voronoi stretching outwards more then they were able too render,

[@jibiaoxin]

Amazing video, thanks so much!

[@ChristineDaniels1341]

This was great and i got the intended result at the end! For animating the offset, did you just multiply the offset parameter with a time node?

[@VisualTechArt]

To go from square grid to voronoi, yes :)

[@lcxlursyi6]

Great Video!

[@ooorc46]

Great ！！！ I mean you and the tutor.😃

[@mysfeori6510]

is there any way too randomise the colors of each voronoi to a different hex code

[@VisualTechArt]

What do you mean? What would be the purpose of the hex code?

[@jason_skillman]

Greate video! What's the name of that neat trick at 6:45 where you duplicated the variables to each have their own node? I would love to use that trick in my materials as well.

[@VisualTechArt]

Thank you! It's just that the ones connected to the Material Functions are the "declaration" nodes, the ones I add later with the min nodes are the "getters". No fancy trick :D

[@Levelonesucks]

@@VisualTechArt All this time, and it's the first time I'm seeing them lol, wow. Could've been keeping my graphs much cleaner.

[@essuthecat]

@@VisualTechArt hello, how exactly can you do that?? would you explain the details? im new in ue5 and only know the basic math operations in material, i just found out there is material function today.... 💀

[@ransombot]

@@essuthecat Easy way: 1) double click a link 2) Right click the created re-route 3) Top of the list is Convert To Named Reroute There's a few ways to do it though not all are as easy and intuitive for me. I had to look it up after I saw him do it.

[@essuthecat]

@@ransombot yeah thanks for the reply. already figured that out, I really didn't have 3D background life and was doing for fun back then. so unreal is like the first time for me to focus in haha. glad the community still helping those very beginner questions

[@crazytorny]

Fantastic video, really helpful! I was wondering if there is a way to select/highlight only one cell, let's say making it white and other ones black?

[@VisualTechArt]

Thank you! Interesting question... Definitely yes, it depends a bit on how you want to go about that and what you need that for, but if instead of using the random colour you change that bit of code with something like "if the cell has these coords make it white, otherwise make it black", that should work

[@crazytorny]

@@VisualTechArt That's exactly what I was trying to achieve and it seemed to be straightforward. However, I wasn't able to determine cells coords, after the offset, it only worked as grid square (before voronoi cells were formed). Mind to point me in direction where cell coords should be tested if they are X,Y or not? I feel like I am missing something simple. Thanks!

[@VisualTechArt]

@@crazytorny I can't look in Engine now sadly, but have you tried to give to the if statement a range of values, instead of the exact coords? The voronoi point is moving no more than plus or minus the cell half size, so if you account for that you should be able to make it work :)

[@crazytorny]

@@VisualTechArt I will give it another try later today, will see if I manage to make it work. Thanks again, I appreciate your help :)

[@cosmotect]

At 2:35, how come we get this result from dot product? If each pixel is sampling itself, shouldn't the whole thing be white?

[@VisualTechArt]

The dot product is an operation, the result depends on the pixel starting value! Like if you add the pixel value to itself, you don't get the same result for any starting value, right? :)

[@zdspider6778]

Feeding the same input into a dot product raises each component to the power of 2 and adds them. Think of it like this: tex coordinates are a float2. So that's .x and .y (or .u and .v). So the dot product with the same float2 is like saying: x*x + y*y. Or in other words: x^2 + y^2. And then immediately after there's the sqrt. This is Pythagoras' theorem. The hypothenuse is the distance. And distance is key in this situation. Subtracting "0.5" moves the "0, 0" point from the corner of each tile to the center. And the distance is taken from each pixel in the tile to the center, which causes it to be black in the center (because that's where there zero point is, since 0*0 + 0*0 in that dot product is still zero) and increasingly white towards the edge of the tile.

[@cosmotect]

@@zdspider6778 It seems that I was unaware of the actual operation carried out by the dot product. I believed that it measured the degree of alignment of two vectors. Following this line of logic, in my mind, plugging the same pixel's value into each input of the dot product should have produced "perfect alignment" as its the same vector, and output a 1

[@zdspider6778]

@@cosmotect Let's say there are two vectors: _a_ and _b._ There are two formulas for the dot product: 1) a.x * b.x + a.y * b.y 2) |a| * |b| * cos(theta) ...where "|x|" means length (magnitude) and theta is the angle between the two vectors. If the vectors are normalized, the formula would be: 1 * 1 * cos(theta), and the 1s here are useless, so it's just cos(theta). The first formula is faster than using any trig function like sin/cos/atan.

[@cosmotect]

@@zdspider6778 I see, thank you for the information :)

[@Jarrek33]

So i love the video - been trying to figure out how to implement Voronoi for a while this has been helpful. I get to about 6 min mark and i notice you create a grid UV that i just cant figure out. is it something easy im just overlooking?

[@VisualTechArt]

Are you talking about the way I position the nodes?

[@Jarrek33]

@VisualTechArt no the way you take the text coor and seem to put it into a variable that you seem to be able to call in 9 places. I have been trying to find anything on that and nowhere in any documentation of tutorials can I find anyone doing what you have done. It's probably much easier then I'm thinking but I just don't see how your doing it. You have 4 of them not just the grid uv node. I'm probably just missing something simple

[@Jarrek33]

At 5:54 min mark you go from connecting the parameters to the material function. Then the video cuts to a scene where your parameters are now no longer directly connecting to the material function. You have somehow created something that you later use in multiple locations in the blueprint and I can not figure out what you did to make what looks like custom nodes that take inputs from your parameters you created.

[@VisualTechArt]

Ah, that's just a Named Reroute Node :)

[@Jarrek33]

@VisualTechArt thank you so much. I looked for reroute but not for named reroute. That clears things up for me.

[@IskandarAlex2]

I am having trouble trying to follow this and my result did not match what you showed nor anywhere enough to be acceptable, can you provide some more clear information of the nodes? my result became haywire at the color cell output, the distance field output works fine

[@IskandarAlex2]

never mind I fixed it

[@Lose-Yourself-To-Dance]

Cool video! I was wondering, is there a way to "apply" voronoi celling to a texture via material? So any texture can be transformed into voronoi with each cell colour taken based on the position this sell occupies relative to a texture (lets say, the average colour of a texture under certain cell is yellow, so the cell should be yellow)? In Photoshop there is a "Crystallize" effect that basically does this.

[@VisualTechArt]

Sure there is! Just grab the cells position and remap it in 0-1 range :D

[@riptor4532]

@@VisualTechArt I wish there was an example of this somewhere because I built all of this out but I'm also struggling to figure out how to apply textures to different cell spaces. Any help would be greatly appreciated!

[@deever92]

Figata

[@VisualTechArt]

🫀

[@smurrdog5364]

so much work just for a simple function every 3d program has by default

[@VisualTechArt]

There are many things we don't correctly perceive how complex they are because of that :) But if you know how to make them yourself you can start to customize them without hoping for someone else to give you a ready made function! You can have a look at my other video about voronoi to have an example, if you wish

[@Bitcoin_Baron]

Bruh you fast forwarded and didnt explain half of what you did. Tutorial should be step by step, not timelapse. Impossible to follow

[@braija]

I succeeded, must be my 1000+ IQ