BarthPaleologue / volumetric-atmospheric-scattering

A simple implementation of volumetric atmospheric scattering using babylonjs.
https://barthpaleologue.github.io/volumetric-atmospheric-scattering/dist
Apache License 2.0
23 stars 6 forks source link

Squares in atmosphere #2

Closed AJamesPhillips closed 2 years ago

AJamesPhillips commented 2 years ago

This is a fantastic library / demo / starter. Thank you very much.

The demo at https://barthpaleologue.github.io/volumetric-atmospheric-scattering/demo/ works fine for me. However running the starter/index.html code I see the atmosphere with squares on it.

This is present on Firefox, Brave, and Safari browsers. Any advice on how to fix this / where to look?

image
AJamesPhillips commented 2 years ago

Ah, I now see the demo/index.html has it as well

image
BarthPaleologue commented 2 years ago

Hello there ! Thank you for your interest in this fun project. I know what causes this problem and I have a solution for you !

The Problem:

So basically the earth in the demo is a Sphere Mesh of BabylonJS, that is to say it is made out of polygons and is not perfectly round. As I use the depth buffer in the shader code to compute the atmosphere, the polygons of the mesh produce these squared irregularities in the atmosphere.

Yet we can't just not use the depth buffer because we need it for the occlusion with other meshes (You can use the sphere intersection function without the depth buffer if you have only one mesh though).

The Solution:

If you plan on using the shader on irregular meshes, the problem will go away by itself (You can take a look at https://barth.paleologue.fr/planetEngine/planetDemo.html where the planet has an irregular shape and there are no squares in sight).

Otherwise, you have to go to ./shaders/atmosphericScattering.fragment.fx and modify the shader in the scatter function. The relevant line is at line 153 :

escapePoint = min(maximumDistance, escapePoint); // occlusion with other scene objects

What you want to do is not take maximumDistance (which comes from the depth buffer and is the distance to your sphere mesh full of polygons) as your escape point when your actual escape point (which is the true distance to the round sphere) is very close to the value given by the depth buffer (For example, about the radius of the atmosphere)

I hope it helps, if you have any issues do not hesitate :)

AJamesPhillips commented 2 years ago

Hey thanks very much for you reply! And yes that makes perfect sense :) Sorry I didn't see this until I had submitted the PR, so I'm happy to close this issue and I'll let you close the PR.