regl-fire

Cheap-looking fire particle system implemented with regl.

Demo here

Implementation Details

The fire is rendered as a particle system of about 300 particles. It turns out that only 300 particles can result in a significant amount of overdraw, and this will cause poor performance on lower-end graphics cards.

But I solved this problem by rendering the particle system to an FBO that is about one-fifth the size of the screen, and then upscaling and rendering it to the actual screen. Since then less fragments are processed, the overhead from all the overdraw for the fragments is significantly reduced.

This technique is called off-screen particles, and you can read more about it in this article

Build

First install all dependencies by doing

npm install

To then run the demo, do

npm run start