Flow Field WebGL

This is a General Purpose GPU (GPGPU) implementation of a flow field particle animation using three.js and WebGL. Sadly WebGL has no native support for compute shaders so you need to use workarounds for GPGPU, the most direct method being frame buffer objects (FBOs). Thankfully three.js provides a WebGLRenderTarget class which acts as a convenience class for using frame buffer objects. On top of that it also provides a (undocumented) GPUComputationRenderer class which is very useful for abstracting away a lot of the oddities of performing GPGPU computations in WebGL such as setting up ping pong buffers for reading/writing FBO data.

The effect itself is focused on moving particles using a flow field, to make them look as if they're almost being taken by the wind. I think the effect looks quite ethereal so I applied it to a very majestic looking husky model available from here. The texture for the original model is being ignored and instead I've just applied random/rainbow colours to the particles in keeping with the etheral vibe.

As you might be able to tell from the mentions of "WebGL" in the title and text, there are alternative methods for this! WebGPU is very nearly available on the latest release of all major browsers, and it includes native support for compute shaders so next up will be creating a similar effect in WebGPU.

Source code available here.