Simple GPU Physics with WebGL 1.0

Here’s a particle demo that performs Verlet integration in the fragment shader and avoids any transfers to the GPU.

There are two passes:

  • The physics pass samples from one floating-point FBO and writes to another. Draws one big quad.
  • The graphics pass samples the FBO in the vertex shader to determine position. Draws point sprites.

There will be smarter ways of doing this in WebGL 2.0 so I thought I’d post this before it becomes passé. It smoothly handles a quarter-million particles with the lackluster Intel Iris GPU that’s in my 13” MacBook.

Unfortunately this fails to run correctly on my iPhone – maybe vertex textures aren’t working?


There are three gravity sources, and each particle is randomly assigned to only one of the gravity sources. So it’s a bit unrealistic, but could easily be extended.

Here’s the sketch I made before coding this up:

Here’s the source:

Incidentally, the following astrodynamics libraries look cool. They are quite different from typical physics engines, and might be fun to use for accurate simulation of orbital mechanics on the CPU.

Simplicity is a great virtue but it requires hard work to achieve it and education to appreciate it. And to make matters worse: complexity sells better. – Dijkstra