# Matching fog color with the sky shader

**URL:** <https://discourse.threejs.org/t/matching-fog-color-with-the-sky-shader/52018>\
**Category:** Questions\
**Tags:** sky, fog\
**Created:** [May 25, 2023, 3:56pm UTC](https://discourse.threejs.org/t/matching-fog-color-with-the-sky-shader/52018 "2023-05-25T15:56:26Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Bleach](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/bleach/32/36428_2.png) [@Bleach](https://discourse.threejs.org/u/Bleach)\
**Post date:** [May 25, 2023, 3:56pm UTC](https://discourse.threejs.org/t/matching-fog-color-with-the-sky-shader/52018/1 "2023-05-25T15:56:26Z")

</div>

Hello, I’m creating a scene with a [Sky](https://github.com/mrdoob/three.js/blob/7dd56153b51c7477a7166bbd28538167a8265980/examples/jsm/objects/Sky.js) and Fog and wondering how or if its even possible to match the color of the fog to the color of the sky shader behind it, With the default fog far away objects just look like a solid color instead of blending into the background.

This seems to be the same problem as [this](https://discourse.threejs.org/t/the-best-way-to-match-fog-color-with-sky-shader-example/32789) and [this](https://discourse.threejs.org/t/fog-color-from-the-skybox-environment/40670) user had but there weren’t any answers or help on either of the questions.

---

<div class="post-metadata">

**Author:** ![makc3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/makc3d/32/10452_2.png) [@makc3d](https://discourse.threejs.org/u/makc3d)\
**Post date:** [May 25, 2023, 4:16pm UTC](https://discourse.threejs.org/t/matching-fog-color-with-the-sky-shader/52018/2 "2023-05-25T16:16:33Z")

</div>

well it is obvious, no? you need to repeat the sky shader logic in the [fog chunk](https://github.com/mrdoob/three.js/blob/7dd56153b51c7477a7166bbd28538167a8265980/src/renderers/shaders/ShaderChunk/fog_fragment.glsl.js) - either rebuild 3js with it or change THREE.ShaderChunk.fog\_fragment before doing anything else at runtime.

---

<div class="post-metadata">

**Author:** ![DanteXD](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dantexd/32/57386_2.png) [@DanteXD](https://discourse.threejs.org/u/DanteXD)\
**Post date:** [May 26, 2023, 2:42am UTC](https://discourse.threejs.org/t/matching-fog-color-with-the-sky-shader/52018/3 "2023-05-26T02:42:44Z")

</div>

You sweet sweet summer child, alas you can’t just add uniforms to materials without breaking everyone’s materials. That said, you can cheat a bit and reuse the existing variables outside of their normal purposes. I did this below in A-Starry-Sky and then injected things like Turbidity into the code as string constants.

36-38 of

> <https://github.com/Dante83/A-Starry-Sky/blob/514df4ee9827097618fd054cb870703e080f1607/src/js/renderers/FogRenderer.js>

If you don’t have anything moving, you’ll have an easier time of it, you might not even need to abuse the variable names at all. Alternatively, in earlier versions, I just took the average color of the sky and used that and I didn’t hate it, really. So you could do that.

That said, most of my problems were because I used VR and… some people at that time believed VR people didn’t deserve a post-processing pipeline. Monsters. BUT! If you’re not trapped to VR, I recommend using post processing to achieve this. Just grab the image you have, combined with the depth image and pass them into the output pass, then add in the lighting you want for your own fog without having to modify the fog shader in every material.

---

<div class="post-metadata">

**Author:** ![makc3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/makc3d/32/10452_2.png) [@makc3d](https://discourse.threejs.org/u/makc3d)\
**Post date:** [May 26, 2023, 2:45pm UTC](https://discourse.threejs.org/t/matching-fog-color-with-the-sky-shader/52018/4 "2023-05-26T14:45:02Z")

</div>

> [@DanteXD](#):
>
> you can’t just add uniforms to materials without breaking everyone’s materials.

maybe speak for yourself here, ~~[lol](https://jsfiddle.net/7u84j6kp/)~~ ahaha I did not save my edit 😅 gotta redo it now, damn it

**edit:** [saved](https://jsfiddle.net/jp9tskmh/) now

---

<div class="post-metadata">

**Author:** ![DanteXD](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dantexd/32/57386_2.png) [@DanteXD](https://discourse.threejs.org/u/DanteXD)\
**Post date:** [May 27, 2023, 5:11am UTC](https://discourse.threejs.org/t/matching-fog-color-with-the-sky-shader/52018/5 "2023-05-27T05:11:46Z")

</div>

You are actually right, I just recalled. You can inject it into the material. And OMG, it would be awesome if we had better ways today and it made it’s way into A-Frame. I wanted to add a full blown shader instead of splitting the difference between Preetham and Elok :/. Not trying to be mean above, I’m just recalling my own suffering for a month or more on that problem XD. If it can be solved easier today, I am nothing but elated!

---

<div class="post-metadata">

**Author:** ![makc3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/makc3d/32/10452_2.png) [@makc3d](https://discourse.threejs.org/u/makc3d)\
**Post date:** [May 27, 2023, 8:44am UTC](https://discourse.threejs.org/t/matching-fog-color-with-the-sky-shader/52018/6 "2023-05-27T08:44:55Z")

</div>

there is onBeforeCompile to do that with only specific materials, but other than that nothing else, I recall. any way, for your double pleasure - more [fog, epileptic edition](https://jsfiddle.net/bc6o7h0j/1)