real time circle packing - animated edition!

Let’s make one final version of the circle packing code and verify that it works in a real time loop!


While I thought the previous post had good performance, when I tried to run it in a loop, it would take 500ms between calls! This was absolutely ridiculous and it was due to a couple things - computing the radius for every pixel serially was super slow, but computing it in parallel on the gpu and then reading it back to memory was even slower! This is partly because the gpu/cpu bandwidth isn’t great and partly because readPixels is blocking and acts as a synchronization point between the gpu pipeline and the js runtime (as far as I understand)

The new version takes 10ms (on my weaker laptop), and it can be run in a loop as shown in the demo below!

Note that while the box below displays the initial render time, the code does not use the previous rendered state to speed up future renders - the only difference between the first and following renders is time spent allocating framebuffers, which is negligible.

I don't know if this is "flashy" enough to be a problem for some users, but please use caution before pressing "Start Animation!"

TODO - add some description of the new approach

Written on June 23, 2022