Skip to content

added compute shader fire code #105

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

added compute shader fire code #105

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e7e58e9
added compute shader fire code
ghsoares Jun 12, 2020
06abc8e
added insert fire from mouse and fire gradient change on page
ghsoares Jun 13, 2020
b066e50
added variable length mouse fire using scroll wheel
ghsoares Jun 13, 2020
e94d6a4
added vertex and fragment shader to render fire
ghsoares Jun 14, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 37 additions & 0 deletions playground/compute-shader-fire/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
# Doom Fire Compute Shader
The classic Doom Fire experiment but with OpenGL Compute Shader!

## What's a Compute Shader?
Firstly, you need to know what's a shader:
A shader is a type of computer program to create post-processing effects in a 3D or 2D scene.
Basically, in any game have some kind of shader, from color manipulation to very complex effects like water
reflections, scene lightning, ray-tracing, etc.
There's three types of shader:
- Vertex shader (this type of shader processes individually every vertice to form a primitive shape (3D or 2D));
- Fragment shader (this type of shader samples every pixel of the image and outputs (shows) an processed pixel);
- Compute shader (this type of shader computes arbitrary information into GPU and outputs the data into buffers);
So the Compute Shader makes mathematic calculations in GPU and can output the data into CPU with buffers.

## Why use Compute Shader?
The main advantage to make mathematic calculations into GPU is that GPU processes more tasks and processes faster than CPU.
Originally the GPU is used only for render a application and throw the result at your monitor, but nowadays the GPU is being
used to make other tasks than render. One example is Neural Networks that inputs data into GPU, makes Matrix calculation
and outputs the result to CPU, this whole process without render anything to screen. Other example being used in this
experiment is to use the GPU to calculate fire propagation and render the result to a texture that latter is rendered
into html5 canvas in CPU.

## TODO
There's many things that I want to implement like:
- Heat Gradient change option;
- Cooling map noise options;
- Change fire dimensions in runtime;
- Change simulation FPS in runtime;
- Add the capability to output the fire animation to a sprite-sheet so can be used into game engines.
- Fix some graphical bugs:
- Cooling map not being generated seamlesly so that appears a line into screen;
- Wind speed to the left appears a bit faster than wind speed to the right.

## Author

| [<img align="center" src="https://github.com/ghsoares.png?size=128"><br><sub>@ghsoares</sub>](https://github.com/ghsoares) |
| :---: |
164 changes: 164 additions & 0 deletions playground/compute-shader-fire/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,164 @@
body, html, #contents {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}

body {
font-family: sans-serif;
background-color: #54391B;
color: white;
user-select: none;
}

a {
color: white;
}

#experiment {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

#fps {
margin-top: 8px;
}

.option {
margin-top: 16px;
display: flex;
width: 256px;
flex-direction: row;
align-items: center;
justify-content: space-between;
}

table {
border-spacing: 0;
}

td {
width: 2px;
height: 2px;
}

#canvas {
image-rendering: pixelated;
width: 512px;
height: 512px;
}

#error {
margin: 32px;
}

.hidden {
display: none !important;
}

h2 {
margin: 0;
}

#wrapper {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}

#color-picker {
display: flex;
flex-direction: column;
margin-right: 64px;
background-color: white;
color: black;
padding: 16px;
border-radius: 8px;
justify-content: space-between
}

#color {
height: 32px;
background-color: black;
border-radius: 6px;
margin: 16px 0;
}

.color-option {
width: 224px;
display: flex;
flex-direction: row;
justify-content: space-between;
}

.color-option:not(:last-child) {
margin-bottom: 12px;
}

#gradient-slider {
display: block;
position: relative;
height: 256px;
width: 8px;
background: white;
margin-right: 16px;
}

.gradient-step {
outline: none;
position: absolute;
height: 16px;
width: 256px;
margin: 0;
-webkit-appearance: none;
pointer-events: none;
background: transparent;
bottom: 0;
left: 150%;
transform-origin: 0% 100%;
transform: rotate(-90deg) translateY(-1%);
z-index: 2;
}

.gradient-step::-webkit-slider-thumb {
-webkit-appearance: none;
width: 10px;
height: 16px;
border-radius: 1px;
background-color: white;
pointer-events: all;
cursor: pointer;
border: 1px solid black;
}

.gradient-step.focused::-webkit-slider-thumb {
width: 14px;
height: 20px;
}

.gradient-step::-webkit-slider-runnable-track {
background: transparent;
}

#update {
font-size: 24px;
padding: 4px 8px;
border-radius: 4px;
border: 0;
background-color: rgb(145, 255, 191);
margin-top: 16px;
outline: none;
cursor: pointer;
}

#update:hover {
background-color: rgb(177, 255, 225);
}

#update:active {
background-color: rgb(48, 114, 100);
}
66 changes: 66 additions & 0 deletions playground/compute-shader-fire/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
<!DOCTYPE html>
<html lang="pt-br">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<meta name="google" content="notranslate" />
<title>Compute Shaders</title>
<link rel="stylesheet" href="css/style.css" />
<script src="./js/perlin.js"></script>
</head>

<body>
<div id="contents">
<div id="error" class="hidden">
<h2>WebGL 2.0 Compute not available</h2>
<p>
Make sure you are on a system with WebGL 2.0 Compute enabled.
Windows Google Chrome Canary or <a
href="https://www.microsoftedgeinsider.com/en-us/download/?platform=win10">Microsoft Edge Insider
Channels</a> with Command Line Switches:
"--enable-webgl2-compute-context", "--use-angle=gl" and "--use-cmd-decoder=passthrough". Be aware that
Compute Shader is an experimental feature.
</p>
</div>
<div id="experiment" class="hidden">
<h1>Compute Shader Doom Fire</h1>
<a href="https://github.com/filipedeschamps/doom-fire-algorithm">https://github.com/filipedeschamps/doom-fire-algorithm</a>
<div id="wrapper">
<div id="picker-submit">
<span id="color-picker">
<span id="offset">offset: 0%</span>
<div id="color"></div>
<span class="color-option" id="color-r">
<label>Red: </label><input type="range"min="0" max="255" step="1"><span>0</span>
</span>
<span class="color-option" id="color-g">
<label>Green: </label><input type="range" min="0" max="255" step="1"><span>0</span>
</span>
<span class="color-option" id="color-b">
<label>Blue: </label><input type="range" min="0" max="255" step="1"><span>0</span>
</span>
</span>
<button id="update">Update Fire Gradient</button>
</div>
<span id="gradient-slider">
</span>
<canvas id="canvas"></canvas>
</div>
<h2 id="fps">elapsed computation time: </h2>
<span class="option">
<span>Base heat:</span><input type="range" id="base-heat" min="0" max="2" step="0.01">
</span>
<span class="option">
<span>Cool factor:</span><input type="range" id="cool-factor" min="0.01" max="0.9" step="0.01">
</span>
<span class="option">
<span>Wind speed:</span><input type="range" id="wind-speed" min="-4" max="4" step="0.1">
</span>
<table id="teste-table"></table>
</div>
</div>
<script src="./js/script.js"></script>
</body>

</html>
Loading