Fire Simulation

This is my original project for propose to 2110594 Computer Graphics and Physics Simulation class in Chulalongkorn University.

Fire simulation base on WebGL using THREE.JS library. Using volumetric fire technique for this implementation. Fully customizing on fire color and particle system in real-time. The simulator are run smoothly with 60 fps frame rate, optmized by object pooling method.

Demo

👉 Available demo : https://neungkl.github.io/fire-simulation/

Report

📄 You can read full PDF report in fire_simulation_report.pdf

Works

I starting with building a volumetric fire called flame ball, with customize vertex shader and fragment shader, the result look similar to below figure.

The flame ball part I using Perlin Noise algorithm for making the randomize texture of flame ball and apply the color depends on the deep of surface.
Combine each flame ball to a large fire using Interpolation for animation each frame of flame ball.
Add particle system for spark system.
Fully customization for fire color and spark color.
Renderer time scale included.
Optimized by using object pooling approach.

Usage

Run the simulator

Enter following command.

$ npm install -g typescript grunt
$ npm install

Run build script

$ grunt

Change code in index.html

<!-- Change this -->
<script src="dist_github/app.js"></script>

<!-- To this -->
<script src="dist/app.js"></script>

Open file index.html

Developement

$ grunt watch

Thanks

Reference

Palin Noise https://en.wikipedia.org/wiki/Perlin_noise
Vertex Displacement with a noise function using GLSL and three.js https://www.clicktorelease.com/blog/vertex-displacement-noise-3d-webgl-glsl-three-js
Easing Equation by Robert Penner http://gizma.com/easing/
Object Pool Pattern https://en.wikipedia.org/wiki/Object_pool_pattern

Tools

THREE.js — https://threejs.org/
Dat GUI — https://github.com/dataarts/dat.gui
Stats.js — https://github.com/mrdoob/stats.js/
TypeScript — https://www.typescriptlang.org/