8 ms·
Voronoi Diagrams on the GPU
- lmeyerov 11y agoWe use a weak approximation of this for hit testing. So awesome!
- rjkaplan 11y agoCool! 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 11y agoIt'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 :)
- uptownfunk 11y agoWhat are these used for?
- a3n 11y agohttps://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 11y agoThe wikipedia page has a nice section on what these are used for.
- rjkaplan 11y agoI mostly just think they look cool :) In the post there's a demo on how to use the same algorithm that generates Voronoi diagrams to render 2D drop shadows with a spread radius. You may also be interested in Alan Zucconi's article on Voronoi diagrams where he outlines a few use-cases in games: http://www.alanzucconi.com/2015/02/24/to-voronoi-and-beyond/2/#acp_wrapper http://www.alanzucconi.com/2015/02/24/to-voronoi-and-beyond/...
- privong 11y agoIn astrophysics, voronoi tessellation is used for adaptively smoothing data to reach a desired signal-to-noise ratio while trying to preserve as much spatial/angular resolution as possible [0]. It is also used in numerical hydrodynamic simulations to dynamically construct the mesh of cells for the hydro calculations[1, 2]. [0] http://www-astro.physics.ox.ac.uk/~mxc/software/#binning http://www-astro.physics.ox.ac.uk/~mxc/software/#binning [1] http://wwwmpa.mpa-garching.mpg.de/~volker/arepo/ http://wwwmpa.mpa-garching.mpg.de/~volker/arepo/ [2] http://www.tapir.caltech.edu/~phopkins/Site/GIZMO.html http://www.tapir.caltech.edu/~phopkins/Site/GIZMO.html
- flashman 11y agoA little bit non-standard, but I used them to generate a map of the nearest vehicle spawn points for the game DayZ: http://i.imgur.com/GryW1fz.jpg http://i.imgur.com/GryW1fz.jpg In the attached map, the red dots indicate a place where a truck might spawn. The polygons show the places nearest each truck. If a player wants to obtain a truck to drive, this map shows them which direction to run. This was more a proof of concept than anything else, and is sadly outdated. In any case, it never took into account the steepness of terrain, which influences player running speed.
- tribe 11y agoI have used Voronoi diagrams (and their corresponding Delaunay triangulations) for interpolation routines.
- Jack000 11y agohttp://www.cosy.sbg.ac.at/~held/projects/vroni/vroni.html http://www.cosy.sbg.ac.at/~held/projects/vroni/vroni.html when generalized to line segments, voronoi diagrams can be used to efficiently compute offset contours. Offsets are used for CNC operations, slicing 3d print models, robotic path planning etc.
- fvargas 11y agoOne use is in AI path planning algorithms. When you have a continuous space with obstacles, you can discretize the space by constructing a Voronoi diagram where the nodes are at the maximal distance away from obstacles.
- gregschlom 11y agoI 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/voronoilines.htm http://www.iquilezles.org/www/articles/voronoilines/voronoil... Edit: shadertoy link: https://www.shadertoy.com/view/ldl3W8 https://www.shadertoy.com/view/ldl3W8
- adriand 11y agoThat is wild! Wow, what an incredible installation! Do you have video of this at night? It looks fantastic.
- bladecatcher 11y agoThat's an inspiring project. Thanks for sharing
- runeb 11y agoGreat project! Would also love to see a video of this.
- Rhapso 11y agoaha, finally a chance to post my only meaningful contribution to computer science: http://ieeexplore.ieee.org/xpl/articleDetails.jsp?reload=true&arnumber=7284430 http://ieeexplore.ieee.org/xpl/articleDetails.jsp?reload=tru... draft here (because I can't give away the final version): https://github.com/BrendanBenshoof/pyVHASH/raw/master/Paper/workshop.pdf https://github.com/BrendanBenshoof/pyVHASH/raw/master/Paper/... 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 11y agoSorry 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?
- flashman 11y agoIf 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 11y agoCan'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/
- nathancahill 11y agoAny 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 11y agoI 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/
- mattdesl 11y agoUsually I recommend PIXI or ThreeJS, but here's some links for low level WebGL/GLSL things. :) https://github.com/stackgl/shader-school https://github.com/stackgl/shader-school https://github.com/stackgl/webgl-workshop https://github.com/stackgl/webgl-workshop https://github.com/stackgl/learning-webgl-01 https://github.com/stackgl/learning-webgl-01 https://github.com/stackgl/learning-webgl-02 https://github.com/stackgl/learning-webgl-02 http://patriciogonzalezvivo.com/2015/thebookofshaders/ http://patriciogonzalezvivo.com/2015/thebookofshaders/
- Zecc 11y ago> http://patriciogonzalezvivo.com/2015/thebookofshaders/ http://patriciogonzalezvivo.com/2015/thebookofshaders/ is also available as the more memorable: http://thebookofshaders.com/ http://thebookofshaders.com/
- 33a 11y agoThis 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 11y agoThe 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 11y agoTo 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 11y agoWould it be fair to say this is a fast rasterization algorithm?
- raverbashing 11y agoWorked on my mobile browser, apparently without major issues
- desdiv 11y agoIronically, 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 11y agoI'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 11y agoYep, 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.
- riebschlager 11y agoRyan! 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 11y agoThanks - I'm glad you found it interesting!
- ewencp 11y agoIt'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 11y agoYeah! 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 11y agoYes, this is similar to what I and others described! Underneath, similar stuff going on in the HW :)
- boredatnight12 11y agohttp://mappable.com http://mappable.com made an incredible music product out of these kinds of layouts. Pity more people don't know about it.
- swayvil 11y agoThis 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
- exDM69 11y agoThere'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.
- shultays 11y agoArticle just does logn (n is dimension of input texture) passes on the render target and that is it. complexity is independent of number of seeds.
- nraynaud 11y agowell, if you're doing that, then just use the distance function, at least you've got a perfectly circular cone, and you don't get tricked by the maximum distance of the cone. the complexity is num pixels*num entities. implementation here: https://github.com/nraynaud/webgcode/blob/gh-pages/webapp/shaders/distance.frag https://github.com/nraynaud/webgcode/blob/gh-pages/webapp/sh... I would gladly show the result here: http://nraynaud.github.io/webgcode/various_tests/test_voronoi.html http://nraynaud.github.io/webgcode/various_tests/test_vorono... but it looks like Chrome removed PathSegList that the SVG library was using internally edit: it still works in firefox, it extracts the voronoi diagram, the medial axis, then does a subtraction on the medial axis (internal offset of the original polygon), then a minimum threshold (mickey ears for pocketting in milling), then a reconstruction of the polygon from the altered medial axis.
- exDM69 11y ago
- bhickey 11y agoHere'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.