Morioh
Login
Nicolas Butet

Nicolas Butet

3 years ago

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.

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

Subscribe: https://www.youtube.com/channel/UCEwhtpXrg5MmwlH04ANpL8A

#javascript

Fog, Basic Fog, and Better Fog in Three.js

youtube.com

Fog, Basic Fog, and Better Fog in Three.js

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.

4.50 GEEK