
Voronoi Diagrams on the GPU - rjkaplan
http://rykap.com/graphics/skew/2016/02/25/voronoi-diagrams/
======
Rhapso
aha, finally a chance to post my only meaningful contribution to computer
science:

[http://ieeexplore.ieee.org/xpl/articleDetails.jsp?reload=tru...](http://ieeexplore.ieee.org/xpl/articleDetails.jsp?reload=true&arnumber=7284430)

draft here (because I can't give away the final version):
[https://github.com/BrendanBenshoof/pyVHASH/raw/master/Paper/...](https://github.com/BrendanBenshoof/pyVHASH/raw/master/Paper/workshop.pdf)

Nifty because it is distributed, works in any metric space where voronoi
regions make sense (XOR and non-euclidian ones as a start!) and easy to make
into an online algorithim that updates as nodes join and exit.

basically:

    
    
       given a center point $center$
       given a list of candidate points $candidate$
       to output a list $peers$
       
       sort $candidates$ by distance from $center$
       remove the closest candidate and add to $peers$ (it will always be a delaunay peer)
       for $c$ in candidates:
          if any member of $peers$ is closer to $c$ than $center$ then reject $c$
          else add $c$ to $peers$
    

essentially this generates most of a delaunay triangulation, and you can
quickly find the voronoi generator of a given point by greedily traversing the
resulting graph.

~~~
faitswulff
Sorry if this is only tangential to your comment and naive to boot, but why is
it that you can't give away the final version of your paper?

~~~
Rhapso
Essentially to get published you have to give away all the publishing rights
for the work you submitted. I'd prefer open access journals, but the people
who decide if I get my phd don't value those like I do.

~~~
bobdo
The IEEE actually has a reasonable policy
[https://www.ieee.org/documents/author_faq.pdf(see](https://www.ieee.org/documents/author_faq.pdf\(see)
section 2). Essentially authors are allowed to post the version of the paper
that they submitted for final publication.

------
gregschlom
I love Voronoi diagrams, and especially Centroidal Voronoi Tesselations. They
relate to many natural phenomena such as honeycombs and soap bubbles. I used
that as the basis for an art installation I did for Burning Man:
[http://www.flowandwonder.com](http://www.flowandwonder.com).

Another technique for computing them on the GPU, not sure how related it is to
OP's technique:
[http://www.iquilezles.org/www/articles/voronoilines/voronoil...](http://www.iquilezles.org/www/articles/voronoilines/voronoilines.htm)

Edit: shadertoy link:
[https://www.shadertoy.com/view/ldl3W8](https://www.shadertoy.com/view/ldl3W8)

~~~
adriand
That is wild! Wow, what an incredible installation! Do you have video of this
at night? It looks fantastic.

------
exDM69
There's a much faster O(n) method for doing Voronoi diagrams on the GPU by
taking advantage of the depth buffer. It's so simple that it gives you one of
those "why didn't I think of this earlier" moments. I learned it from the old
school demoscene guys at work...

    
    
        0. Set up orthographic projection
        1. Enable depth testing
        2. For each "seed" point, draw an "infinite" cone all the way from the near to the far clipping plane
        3. Shade with solid colors.
    

That's it.

The depth testing will only leave fragments of the cone that the corresponding
pixel is closest to. If you need better precision, draw the "cone" by making a
full screen quad and use the fragment shader to set depth (gl_FragDepth)
according to distance from seed point (or just use enough vertices in the
cones).

If you change the circular cone to a rectangular-based pyramid shape, you'll
get Voronoi-type diagrams but with a different metric (manhattan distance?).
Turn the rectangle 45 degrees to make a diamond shaped base and you have yet
another metric.

~~~
mrec
Heh, I remember this technique from the OpenGL Red Book, at least 15-20 years
ago.

[http://www.glprogramming.com/red/chapter14.html#name19](http://www.glprogramming.com/red/chapter14.html#name19)

~~~
exDM69
Cool! I've of course read the Redbook back in the day (I think I still have it
printed out in my shelf) but for some reason I've missed that chapter.

I didn't quite get what you need the stencil buffer for in that technique.

~~~
mrec
The stencil buffer provides a boolean mask for the regions you care about,
making it easy to draw them in flat color with a subsequent pass. I can't see
a way to do that easily with depth information only.

(Plus, it was traditional to combine 24-bit depth with 8-bit stencil in the
same buffer, so stencil writes were basically free if you're writing depth
anyway.)

~~~
exDM69
Yeah, that's pretty similar to the stenil-then-cover technique used in vector
graphics.

But what advantage does a two pass stencil technique have over just writing to
the color buffer in the first pass?

~~~
mrec
Oh, I see what you mean. Good question. I suppose it might have been more
efficient to avoid multiple colour buffer overdraws (since you're drawing a
fullscreen quad for each seed point, albeit a depth-tested one). And you could
render the depth+stencil buffer once then reuse it to highlight different
regions, e.g. on mouseover.

But you're right, it doesn't sound massively compelling. And the traditional
24depth+8stencil buffer format would limit you to a maximum of 256 regions,
which could easily cramp your style.

------
33a
This isn't actually a voronoi diagram, it is an (approximate) distance
transform - though it is still pretty cool!

If you are working on a grid, there are lots of ways to compute distance
transforms exactly. An exact and optimal serial algorithm which works for any
metric is due to Meijster, and it runs in O(n) time in the number of pixels:

[http://parmanoir.com/distance/](http://parmanoir.com/distance/)

Distance transforms are a special kind of (max, +) convolution, and have lots
of interesting algebraic properties

~~~
vanderZwan
The linked paper specifically says "Jump Flooding in GPU with Applications to
_Voronoi Diagram_ and Distance Transform," so are you sure it's not both in
this case?

~~~
33a
To compute a voronoi diagram, you also need to reconstruct the boundary and
topology of all the cells, which is not being done here. Also most algorithms
for computing voronoi diagrams do not snap the vertices to integer lattice
coordinates.

~~~
vanderZwan
Would it be fair to say this is a fast _rasterization_ algorithm?

------
nathancahill
Any good resources for getting started with WebGL? I'm going to start
transitioning a large amount of slow <canvas> drawing to WebGL, and I'd love
any pointers for someone getting started without any experience in graphics
and gaming (which seems to be the starting point most tutorials use).

~~~
rjkaplan
I recently got started with WebGL so I hope that others post more/better
resources, but...

\- I found this to be a good starting point for WebGL as a whole:
[https://webglfundamentals.org/](https://webglfundamentals.org/)

\- This is a great resource for learning about GLSL and shaders (writing code
that runs on the GPU):
[http://patriciogonzalezvivo.com/2015/thebookofshaders/](http://patriciogonzalezvivo.com/2015/thebookofshaders/)

\- As a starting point for implementing the Jump Flood Algorithm (which is
what I used to implement the Voronoi Diagram demos) I found it helpful to read
Chris Wellon's articles on GPGPU programming. Here's the first one:
[http://nullprogram.com/blog/2014/06/10/](http://nullprogram.com/blog/2014/06/10/)

------
riebschlager
Ryan! Thanks for writing this post. I had messed around with Voronoi diagrams
in Processing and D3 without really understanding the intricacies behind it.
This is a great explanation of what's going on.

I'd love to see more stuff like this on HN.

~~~
rjkaplan
Thanks - I'm glad you found it interesting!

------
ewencp
It's not particularly efficient, but probably the easiest way to draw Voronoi
diagrams on the GPU doesn't require a shader at all. Instead, use an
orthographic projection and draw cones for each vertex with the cone's apex at
the vertex and its axis oriented into the screen. Then the GPU's z-buffer
takes care of choosing which vertex is closes to the given pixel.

~~~
rjkaplan
Yeah! It's a pretty big omission in my post that I don't talk about other
methods of generating Voronoi diagrams, but I wanted to keep it relatively
short.

Chris Wellons has a great article on the method that you mention:
[http://nullprogram.com/blog/2014/06/01/](http://nullprogram.com/blog/2014/06/01/)

It's also mentioned in the OpenGL red book:
[http://www.glprogramming.com/red/chapter14.html#name19](http://www.glprogramming.com/red/chapter14.html#name19)

------
lmeyerov
We use a weak approximation of this for hit testing. So awesome!

~~~
rjkaplan
Cool! If you're willing to share, I'm interested to hear how your
approximation works. Do you just do fewer rounds? Do you use bigger step
sizes?

~~~
lmeyerov
It's point picking for ~svg, where we draw a wider region than the actual
elements and just go with that. The goal is not having to precisley click on
small objects in a big scene. This generates a reverse index for knowing which
element each pixel fuzzily refers to, and if far, if better described as
blankspace. So, just 1 step, and we can cover a huge scene :)

------
flashman
If you use a grid of regularly-spaced points, you end up with a
pixelated/mosaic image. Here's a (sadly Flash based) tool for applying a
quadrilateral/triangular/hexagonal mosaic effect to a photo:
[http://damienclarke.me/code/mosaic-maker](http://damienclarke.me/code/mosaic-
maker)

~~~
Franciscouzo
Can't see your link because I don't have flash, but I made a similar thing
with HTML5
[https://franciscouzo.github.io/voronoi/](https://franciscouzo.github.io/voronoi/)

------
bhickey
Here's an implementation of 2d Worley noise using a hexagonal grid with one-
point per cell:
[https://www.shadertoy.com/view/ltjXz1](https://www.shadertoy.com/view/ltjXz1)

This version may still have artifacts when the points fall too close to a cell
boundary.

------
swayvil
This guy is all about voronoi diagram based animation.

[https://vimeo.com/159319784](https://vimeo.com/159319784)

Also this guy, maybe more so. (There seems to be a connection).

[https://vimeo.com/155733402](https://vimeo.com/155733402)

------
boredatnight12
[http://mappable.com](http://mappable.com) made an incredible music product
out of these kinds of layouts. Pity more people don't know about it.

------
raverbashing
Worked on my mobile browser, apparently without major issues

~~~
desdiv
Ironically, it's not working on my desktop browser.

I'm getting "DEMO DISABLED. COULDN'T START WEBGL." on my Chrome on Windows 10
on Intel integrated graphics setup, literally the most common browser on the
most common OS on the most common graphics stack.

~~~
rjkaplan
I'm sorry that you're running into issues - I just got started with WebGL and
I don't have a Windows machine to test on. I'd be interested to know if other
WebGL demos work on your machine. Do you see a triangle and square when you
visit this page?
[http://learningwebgl.com/lessons/lesson01/index.html](http://learningwebgl.com/lessons/lesson01/index.html)

~~~
desdiv
Yep, the demo is working fine on both Firefox 45.0.2 and Chrome 49.0.2623.112.
Both browsers are failing on your site for some reason.

~~~
rjkaplan
I fixed an issue that I was able to repro on a Windows machine. It'd be great
if you could try again and let me know if it now works for you!

~~~
desdiv
It's working perfectly now. Thanks!

------
uptownfunk
What are these used for?

~~~
a3n
[https://duckduckgo.com/?t=lm&q=Voronoi+diagrams&ia=about](https://duckduckgo.com/?t=lm&q=Voronoi+diagrams&ia=about)

[https://en.wikipedia.org/wiki/Voronoi_diagram](https://en.wikipedia.org/wiki/Voronoi_diagram)

~~~
a3n
The wikipedia page has a nice section on what these are used for.

