# Threejs Horizon Fog - Atmosphere Effect by customizing the fog node

> Not everyone knows this, but provides a very convenient node for customizing the fog in WebGPU effortlessly using . This allows you to create much more…

Canonical page: https://andersonmancini.dev/videos/threejs-horizon-fog-atmosphere-effect-by-customizing-the

Published: 2025-12-10 · Duration: 0:41 · Category: Projects · Tags: three.js, react-three-fiber, webgpu, tsl, tutorial, webgpu_custom_fog

Watch: [YouTube](https://www.youtube.com/watch?v=wO72lVKQadc) · [Subscribe to the channel](https://www.youtube.com/@AndersonMancini?sub_confirmation=1)

Not everyone knows this, but provides a very convenient node for customizing the fog in WebGPU effortlessly using . This allows you to create much more realistic atmospheric effects, since simply changing the light color isn't enough for a convincing effect.

I modified my project and am using a Custom Fog along with the Environment component's intensity control in React Three Fiber, and the cycle changes are much better now. The sunset changes the scene colors, the environment, and the custom fog settings on demand.

You can learn more about it here:

## Links from the video

- [Live demo](https://planpoint-webgpu.vercel.app)
- [threejs.org](https://threejs.org/examples/?q=fog#webgpu_custom_fog)

## Related projects

- [WebGPU Archiviz](https://andersonmancini.dev/projects/webgpu-archiviz.md) — 6MB Architecture Visualization