<p>There is good glsl source of noise (simplex noise) <a href="https://github.com/ashima/webgl-noise/tree/master/src" rel="noreferrer">online</a> to make real time noise. In addition to this, to make effect of moving fog/smoke like in this video you can make 3D FBM function. This is my function:</p>

<pre><code>float default3DFbm(vec3 P, float frequency, float lacunarity, int octaves, float addition)
{
    float t = 0.0f;
    float amplitude = 1.0;
    float amplitudeSum = 0.0;
    for(int k = 0; k &lt; octaves; ++k)
    {
        t += min(snoise(P * frequency)+addition, 1.0) * amplitude;
        amplitudeSum += amplitude;
        amplitude *= 0.5;
        frequency *= lacunarity;
    }
    return t/amplitudeSum;
}
</code></pre>

<p>Where <code>snoise</code> is 3D noise function from link and <code>P</code> is used to seed noise, for example</p>

<pre><code>P = vec3(texcoord, uniform_speed)
</code></pre>

<p>Where <code>uniform_speed</code> is uniform variable incremented each frame with some value.</p>

CC BY-SA 3.0
2017-02-12T11:57:50.093Z
Thank you for the guidance. The codebase you linked and the sample you provided helped me understand and implement my own function.
Simon Kirsten
CC BY-SA 3.0
2017-02-09T16:31:17.233Z
2017-02-09T16:31:17.233Z
mdkdy
<p>Noise functions are definitely your friend here—<a href="https://code.google.com/archive/p/fractalterraingeneration/wikis/Fractional_Brownian_Motion.wiki" rel="nofollow noreferrer">FBM</a> would be one good candidate. You’re right that it can look too uniform on its own, but if you blend multiple layers of it together, using different speeds / directions for each and maybe distorting their domains a bit, you should be able to get very close to the look of that footage. There’s lots of clever uses of noise functions on <a href="https://www.shadertoy.com/results?query=tag=noise&amp;sort=popular" rel="nofollow noreferrer">Shadertoy</a>; for an example of something like the approach described above, check out <a href="https://www.shadertoy.com/view/Mtd3W7" rel="nofollow noreferrer">this one</a>.</p>

CC BY-SA 3.0
2017-02-12T11:55:14.707Z
Thank you for the guidance. FBM seems like a suitable noise function to recreate the footage.
Simon Kirsten
CC BY-SA 3.0
2017-02-08T23:45:46.797Z
2017-05-02T15:40:07.213Z
2017-05-02T15:40:07.213Z
Noah Witherspoon
<p>I want to recreate this smoke/cloud effect which is used in the Arrival (2016) movie end credits.</p>

<p>I uploaded a sped up version of the credits to see the smoke dynamics.</p>

<p><a href="http://streamable.com/n3309" rel="noreferrer"><img src="https://i.sstatic.net/9eaAH.jpg" alt="thumbnail">
</a></p>

<p><em><a href="http://streamable.com/n3309" rel="noreferrer">http://streamable.com/n3309</a> 49s x6 sped up video of the credits</em></p>

<p>I know how shaders work and can comfortably implement simple GLSL fragment shaders, but looking at this I can't seem to find a way to get started.</p>

<p>Starting points I considered:</p>

<ul>
<li><em>Using a noise function:</em> Every noise function I could find looks unnatural and unsmooth. Not what I need.</li>
<li><em>Creating 2D/3D particle simulation:</em> This seems a bit overkill and even then I need functions that do not look calculated.</li>
<li><em>Just use some sprites and transform them randomly around:</em> That's lame and still looks 'fake'.</li>
</ul>

<p>If you could guide me to a starting point on how to accomplish a somewhat similar looking GLSL shader implementation that would be great!</p>

<shader><pixel-shader><fragment-shader>
Advice on how to create GLSL 2D soft smoke/cloud shader
Simon Kirsten
# Advice on how to create GLSL 2D soft smoke/cloud shader

(Asked by: username_0 on 2017-02-08)

I want to recreate this smoke/cloud effect which is used in the Arrival (2016) movie end credits.

I uploaded a sped up version of the credits to see the smoke dynamics.

[![thumbnail](https://i.sstatic.net/9eaAH.jpg)](http://streamable.com/n3309)

*<http://streamable.com/n3309> 49s x6 sped up video of the credits*

I know how shaders work and can comfortably implement simple GLSL fragment shaders, but looking at this I can't seem to find a way to get started.

Starting points I considered:

* *Using a noise function:* Every noise function I could find looks unnatural and unsmooth. Not what I need.
* *Creating 2D/3D particle simulation:* This seems a bit overkill and even then I need functions that do not look calculated.
* *Just use some sprites and transform them randomly around:* That's lame and still looks 'fake'.

If you could guide me to a starting point on how to accomplish a somewhat similar looking GLSL shader implementation that would be great!

**Tags:** shader, pixel-shader, fragment-shader


---

## 2 answers

### Answer by username_2 on 2017-02-08. Score: 5 | Accepted answer

Noise functions are definitely your friend here—[FBM](https://code.google.com/archive/p/fractalterraingeneration/wikis/Fractional_Brownian_Motion.wiki) would be one good candidate. You’re right that it can look too uniform on its own, but if you blend multiple layers of it together, using different speeds / directions for each and maybe distorting their domains a bit, you should be able to get very close to the look of that footage. There’s lots of clever uses of noise functions on [Shadertoy](https://www.shadertoy.com/results?query=tag=noise&sort=popular); for an example of something like the approach described above, check out [this one](https://www.shadertoy.com/view/Mtd3W7).

> **Comments:**
> **username_0**: Thank you for the guidance. FBM seems like a suitable noise function to recreate the footage.  

---

### Answer by username_1 on 2017-02-09. Score: 5

There is good glsl source of noise (simplex noise) [online](https://github.com/ashima/webgl-noise/tree/master/src) to make real time noise. In addition to this, to make effect of moving fog/smoke like in this video you can make 3D FBM function. This is my function:

```
float default3DFbm(vec3 P, float frequency, float lacunarity, int octaves, float addition)
{
    float t = 0.0f;
    float amplitude = 1.0;
    float amplitudeSum = 0.0;
    for(int k = 0; k < octaves; ++k)
    {
        t += min(snoise(P * frequency)+addition, 1.0) * amplitude;
        amplitudeSum += amplitude;
        amplitude *= 0.5;
        frequency *= lacunarity;
    }
    return t/amplitudeSum;
}

```

Where `snoise` is 3D noise function from link and `P` is used to seed noise, for example

```
P = vec3(texcoord, uniform_speed)

```

Where `uniform_speed` is uniform variable incremented each frame with some value.

> **Comments:**
> **username_0**: Thank you for the guidance. The codebase you linked and the sample you provided helped me understand and implement my own function.  

---

