https://github.com/Erkaman/regl-fire

Fire particle system made with regl
https://github.com/Erkaman/regl-fire

animation demo fire glsl java javascript particles regl webgl

Last synced: 27 days ago
JSON representation

Fire particle system made with regl

• Host: GitHub
• URL: https://github.com/Erkaman/regl-fire
• Owner: Erkaman
• License: mit
• Created: 2016-09-10T19:18:10.000Z (over 8 years ago)
• Default Branch: gh-pages
• Last Pushed: 2016-09-11T06:55:41.000Z (over 8 years ago)
• Last Synced: 2024-11-22T02:22:53.085Z (about 1 month ago)
• Topics: animation, demo, fire, glsl, java, javascript, particles, regl, webgl
• Language: JavaScript
• Homepage: https://erkaman.github.io/regl-fire/fire.html
• Size: 2.85 MB
• Stars: 18
• Watchers: 4
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# regl-fire

Cheap-looking fire particle system implemented with [regl](https://github.com/mikolalysenko/regl).

[Demo here](https://erkaman.github.io/regl-fire/fire.html)

![Animated](images/fire.gif)

# 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](http://http.developer.nvidia.com/GPUGems3/gpugems3_ch23.html)

# Build

First install all dependencies by doing

```bash

npm install

```

To then run the demo, do

```bash

npm run start

```