Fog with custom pixel perfect shader

I can’t seem to add fog to this pixel perfect custom shader:
Fog on pixel perfect shader (PG)

I tried adding the code in the documentation found here: Babylon.js docs, but I keep running into errors. Is it possible to add the fog effect to the plane while keeping the ‘pixel perfect’ effect?

The doc is terrible. Let me fix that for you…

Here we are:
Fog in custom pixel perfect shader | Babylon.js Playground

I’ll update the doc accordingly

2 Likes

Doc update: Update Fog+ShaderMat.md by deltakosh · Pull Request #1251 · BabylonJS/Documentation

3 Likes

Thanks for looking into this!
The fog works now, but the mesh seems to lose the ‘pixel perfect’ effect (you can see if when zooming out a bit and comparing to the sprite - see original thread: here).
Can the shader be edited to keep this effect and the fog?

the pixel perfect part was not changed. You can see the shader part on that front was not modified

Yes I noticed the code is still there, however the effect seems lost when the fog is added.
It’s not very easy to see, but when you zoom out a bit, the pixels on the plane are warping a bit (not keeping their ratio in respect to the image).
The sprite keeps the correct ratio.

Gosh! I must be blind:) not seeing that :smiley:

Perhaps this illustrates the problem a little better:

Check the outline of the sprite and the plane (the black pixels). They do not match - the latter’s outline pixels are not equal in all places. See the top of the head and the ears - they should be thicker (as in the sprite) but they are not. So the pixel-perfect effect is lost.

You can see the warping a little when (slowly) zooming in and out. I’m on a 1080p monitor by the way, so you may have to adjust the camera distance to see it better.

1 Like

Ah, now I see it. Do not rotate the camera - only zoom!

1 Like

Yes exactly that :smiley:

Ok lol I’m blind

so this is without fog:

And with:

ok now I see it!

1 Like

Here we are!

Fog in custom pixel perfect shader | Babylon.js Playground

To get the same result you need to enable alpha blending:

4 Likes

Nice, that works! Thanks!

1 Like