Matching fog color with the sky shader


Hello, I’m creating a scene with a Sky 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 and this user had but there weren’t any answers or help on either of the questions.

well it is obvious, no? you need to repeat the sky shader logic in the fog chunk - either rebuild 3js with it or change THREE.ShaderChunk.fog_fragment before doing anything else at runtime.

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

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.

maybe speak for yourself here, lol ahaha I did not save my edit :sweat_smile: gotta redo it now, damn it

edit: saved now

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!

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