# Have fog apply transparency as opposed to color?

**URL:** <https://forum.babylonjs.com/t/have-fog-apply-transparency-as-opposed-to-color/37817>\
**Category:** Questions\
**Created:** [February 1, 2023, 12:19am UTC](https://forum.babylonjs.com/t/have-fog-apply-transparency-as-opposed-to-color/37817 "2023-02-01T00:19:22Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\
**Post date:** [February 1, 2023, 12:19am UTC](https://forum.babylonjs.com/t/have-fog-apply-transparency-as-opposed-to-color/37817/1 "2023-02-01T00:19:22Z")

</div>

I have a specific setup where instead of fog fading to a color, it would be nice if I could make it subtract to the colors alpha color the farther out it goes?

I could totally do this manually in a shader, but I’m trying to make the grid material specifically have this happen. Is my only option to do modified version of the grid material shader and spin up my own version to have this happen, or is there some magic trick Im not thinking off?

Another way would be to do it would maybe be in a post pass that has the depth passed to it and just fade it out there? Hmmm actually that might be the ticket.

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [February 1, 2023, 12:28am UTC](https://forum.babylonjs.com/t/have-fog-apply-transparency-as-opposed-to-color/37817/2 "2023-02-01T00:28:39Z")

</div>

You could use the node material version of the grid material:

> **[Babylon.js Node Material Editor](https://nme.babylonjs.com/#I4DJ9Z)**
>
> Babylon.js Node material editor - shader-based materials editor for Babylon.js

You can more easily modify this version than the glsl shader one.

---

<div class="post-metadata">

**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\
**Post date:** [February 1, 2023, 12:37am UTC](https://forum.babylonjs.com/t/have-fog-apply-transparency-as-opposed-to-color/37817/3 "2023-02-01T00:37:52Z")

</div>

What does the fog node need for input?

![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/a/5/a5de445a28c23e87b798df2021a03c9a8c111a19.png)  
a red dont and “input” is not very robust of a hint XD

I tried to feed the scene depth value to it but I guess that was not it?

---

<div class="post-metadata">

**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\
**Post date:** [February 1, 2023, 12:40am UTC](https://forum.babylonjs.com/t/have-fog-apply-transparency-as-opposed-to-color/37817/4 "2023-02-01T00:40:07Z")

</div>

ahhh this helps nevermind:

> **[Available Node Material Blocks | Babylon.js Documentation](https://doc.babylonjs.com/features/featuresDeepDive/materials/node_material/availableNodeBlocks#fog)**
>
> The Node Material is a simple, highly customizable material that you can build yourself piece by piece. Combined with the powerful node-based editor,

---

<div class="post-metadata">

**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\
**Post date:** [February 1, 2023, 12:52am UTC](https://forum.babylonjs.com/t/have-fog-apply-transparency-as-opposed-to-color/37817/5 "2023-02-01T00:52:25Z")

</div>

actually I’m not able to get the fog node to work correct, do you know where can I find a setup with this node is working?

---

<div class="post-metadata">

**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\
**Post date:** [February 1, 2023, 2:48am UTC](https://forum.babylonjs.com/t/have-fog-apply-transparency-as-opposed-to-color/37817/6 "2023-02-01T02:48:07Z")

</div>

It actually ended up being easier just to extend the grid material and update the shader code to get the desired result.

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/d/d/dd3a2590638bded2d366e65263625cca490184ba.jpeg)

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [February 1, 2023, 10:42am UTC](https://forum.babylonjs.com/t/have-fog-apply-transparency-as-opposed-to-color/37817/7 "2023-02-01T10:42:07Z")

</div>

In case you want to make it work with the node material:

> **[Babylon.js Playground](https://playground.babylonjs.com/#A56A64%232)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

Node material: [https://nme.babylonjs.com/#I4DJ9Z#96](https://nme.babylonjs.com/#I4DJ9Z#96)
