You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
thebookofshaders/12
Patricio Gonzalez Vivo 8517e5c4a1 voro 9 years ago
..
tmp voro 9 years ago
2d-cnoise-00.frag moving things around 9 years ago
2d-cnoise-2x2.frag moving things around 9 years ago
2d-cnoise-2x2x2.frag moving things around 9 years ago
2d-cnoise.frag moving things around 9 years ago
2d-vnoise.frag moving things around 9 years ago
2d-voronoi-01.frag moving things around 9 years ago
2d-voronoi-02.frag moving things around 9 years ago
2d-voronoi.frag voro 9 years ago
2d-voronoise.frag voro 9 years ago
3d-cnoise.frag moving things around 9 years ago
NOTES.md moving things around 9 years ago
README.md voro 9 years ago
TITLE.md voro 9 years ago
cellnoise-00.frag voro 9 years ago
cellnoise-01.frag voro 9 years ago
index.php moving things around 9 years ago
metaballs.frag voro 9 years ago
particle-radar.frag moving things around 9 years ago
vorono-00.frag voro 9 years ago
vorono-01.frag voro 9 years ago
voronoi-radar.frag moving things around 9 years ago

README.md

Celluar Noise

In 1996, sixting years after Perlin's Noise and five years before his Simplex Noise, Steven Worley wrote a paper call “A Cellular Texture Basis Function”. In it he describes a procedural texturing tecnique now extensively use by the graphics community.

Later in 2011, Stefan Gustavson optimized for GPU becoming a powerfull tools to produce textures that looks and feel like organic tissue.

To learn more about this technique we need to be confortable working with iterations.

A distance field for some points

Let's say we want to make a distance field of 4 points. What we need to do? in a nutshell, for each pixel we want to calculate the distance to the closest point. That means that we need to iterate throught all the points and store the value to the most close one. Something like this

    float m_dist = 1.;  // minimun distance
    for (int i = 0; i < TOTAL_POINTS; i++) {
        float dist = distance(st, points[i]);
        m_dist = min(m_dist, dist);
    }

To do that we can use a for loop to iterate through an array of points and keep track of the minimum distance using a min() function. Here a brief implementation of that:

Note in the above code, that one of the points is the mouse position. Play with it so you can get a more intuitive idea of how this code behaves. Then try this:

  • How can you animate the rest of the points?
  • After reading the chapter about shapes, imagine interesting ways to use this distance field?
  • What if you want to add more points to this distance field? What if we want to dynamically add/substract points?

Tiling and iterating

You probably notice that for loops and arrays are not so friendly in GLSL. Loops don't accept dynamic limits on their condition. Also iterating through a lot of instances reduce the performance of your shader significantly. We need another stratergy.

One way to aproach this problem is to divide the space in tiles. Not every pixel need to check every single points, right? They just need to check the points that are close to them. Thats was the original approach of Steven Worley's paper. Let's start subdivide the space into cells like we did before in the patterns, random and noise chapters, hopefully by now you are familiarize with this technique.

    // Scale 
    st *= 3.;
    
    // Tile the space
    vec2 i_st = floor(st);
    vec2 f_st = fract(st);

In the above code we subdivide the space in a 3x3 grid.

Well if you have to scale the previus example with a bigger set of points you will discover that is actually very hard to do that in an efficient way. The solution involves tiling the space like we have done before.

    ...
    m_dist = min(m_dist, m_dist*dist);
    ...

Inigo Quilez voronoi borders article

"Before continuing, it might be worth noting that there's a nice trick in this code above. Most implementations out there suffer from precission issues, because they generate their random points in "domain" space (like "world" or "object" space), which can be arbitrarily far from the origin. One can solve the issue moving all the code to higher precission data types, or by being a bit clever. My implementation does not generate the points in "domain" space, but in "cell" space: once the integer and fractioanl parts of the shading point are extracted and therefore the cell in which we are working identified, all we care about is what happens around this cell, meaning we can drop all the integer part of our coordinates away all together, saving many precision bits. In fact, in a regular voronoi implementation the integer parts of the point coordinates simply cancel out when the random per cell feature points are substracted from the shading point. In the implementation above, we don't even let that cancelation happen, cause we are moving all the computations to "cell" space. This trick also allows one to handle the case where you want to voronoi-shade a whole planet - one could simply replace the input to be double precission, perform the floor() and fract() computations, and go floating point with the rest of the computations without paying the cost of changing the whole implementation to double precission. Of course, same trick applies to Perlin Noise patterns (but i've never seen it implemented nor documented anywhere)."

Voronoi Algorithm

This is not scalable

Inigo Quilez voronoi borders article

Inigo Quilez article about voronoise