In this project, I’ll show you how to use fog, and then i’ll show you how to improve it to get something a bit more like Unity’s.

Follow me on:
Patreon: https://www.patreon.com/simondevyt
Twitter: https://twitter.com/iced_coffee_dev
Github: https://github.com/simondevyoutube/

We'll be looking at fog support in three.js, and JavaScript. This tutorial covers the API in Three.js, what modes of fog it supports, and how to extend this by hacking on the shader internals to inject our own code. From there, we can look at Unity's height for for inspiration and add in Wenzel's height fog, with some animated perlin noise using fractal brownian motion for some extra detail.

This tutorial uses three.js, which is a library in JavaScript for cross-browser 3d graphics using webgl. It makes high level functionality and advanced graphics available on the web.

In the video, we cover:
* Linear and Exponential Fog
* WebGL and glFog
* Three.js API's, Fog and FogExp
* Wenzel's Height Fog
* Domain warping using fractal brownian motion

Links:
https://developer.amd.com/wordpress/media/2012/10/Wenzel-Real-time_Atmospheric_Effects_in_Games.pdf
https://www.iquilezles.org/www/articles/warp/warp.htm
https://www.iquilezles.org/www/articles/fog/fog.htm
https://www.shadertoy.com/view/4s23zz
https://www.shadertoy.com/view/lsl3RH
https://www.khronos.org/registry/OpenGL/specs/gl/glspec10.pdf
https://www.khronos.org/opengl/wiki/Fixed_Function_Pipeline
https://docs.unity3d.com/540/Documentation/Manual/script-GlobalFog.html
https://threejs.org/docs/#api/en/scenes/Fog
https://threejs.org/docs/#api/en/scenes/FogExp2

Fog, Basic Fog, and Better Fog (Three.js Tutorial)