Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/neungkl/fire-simulation

:fire: WebGL fire simulator using THREE.js library, with customize shader on volumetric object.
https://github.com/neungkl/fire-simulation

fire-simulation threejs

Last synced: 3 months ago
JSON representation

:fire: WebGL fire simulator using THREE.js library, with customize shader on volumetric object.

Host: GitHub
URL: https://github.com/neungkl/fire-simulation
Owner: neungkl
License: mit
Archived: true
Created: 2016-12-03T12:20:50.000Z (about 8 years ago)
Default Branch: master
Last Pushed: 2016-12-19T20:06:06.000Z (about 8 years ago)
Last Synced: 2024-08-01T08:16:33.140Z (6 months ago)
Topics: fire-simulation, threejs
Language: TypeScript
Homepage: https://neungkl.github.io/fire-simulation/
Size: 2.81 MB
Stars: 58
Watchers: 2
Forks: 12
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

awesome - neungkl/fire-simulation - :fire: WebGL fire simulator using THREE.js library, with customize shader on volumetric object. (TypeScript)

README

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

:point_right: Available demo : [https://neungkl.github.io/fire-simulation/](https://neungkl.github.io/fire-simulation/)

## Report

:page_facing_up: You can read full PDF report in [fire_simulation_report.pdf](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](https://en.wikipedia.org/wiki/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](https://en.wikipedia.org/wiki/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

1. Enter following command.

```sh
$ npm install -g typescript grunt
$ npm install
```
2. Run build script

```
$ grunt
```
3. Change code in `index.html`

```html

```
4. Open file `index.html`

### Developement

```
$ grunt watch
```

## Thanks

**Reference**

- Palin Noise [https://en.wikipedia.org/wiki/Perlin_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](https://www.clicktorelease.com/blog/vertex-displacement-noise-3d-webgl-glsl-three-js)
- Easing Equation by Robert Penner [http://gizma.com/easing/](http://gizma.com/easing/)
- Object Pool Pattern [https://en.wikipedia.org/wiki/Object_pool_pattern](https://en.wikipedia.org/wiki/Object_pool_pattern)

**Tools**

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

## License