Photorealistic Skydome for Babylon

[Rodrix3]

I would like Babylon Engine to have a photorealistic sky, with procedural animated volumetric clouds, time of day with moving sun / moon, night with procedural realistic stars, nightfall and sunset with realistic lightning...
..and why not add a realistic water reflection!
Something that is even better than what's found on today's AAA games.
BabylonJS deserves it

After lots of research, I found this amazing ShaderToy which meets all above requirements:
https://www.shadertoy.com/view/ltlSWB..and I was able to successfully port it to BabylonJS after lots of testing and work.
Almost.. entirely.

The issue I am having is that the shader is using a noise texture as input and I cannot make BabylonJs import it without lowering it's quality (maybe related to trilinear filtering).
if that could be fixed, we could have a SkyMaterial that is absolutely mind blowing.

See my WIP:
http://www.babylonjs-playground.com/#11GAIH#48

You will see the artifacts caused by the issue mentioned.
I also did a quick animation of sun position. Everything can be parametrized, including quality and size on the shader code itself.

Can anyone help me finish this implementation?

@Deltakosh, I think you will LOVE this ;). Let me know what you think of this idea 

P.S: The output of the shader is an equirectangular image. Right now it is being projected into a sphere.

[inteja]

Nice work @Rodrix3

I'm looking for or to do something along these lines as well. I started with a celestial star sphere and want to now add sun, moon, sky color, lens flares, clouds, time of day etc.

Your shader looks beautiful but I'm wondering if performance can be improved somehow? I was just planning on using mostly non-shader techniques for various elements then blend those elements with the BJS SkyMaterial, but I don't know if this is the best approach. It might be more performant though than a 100% shader approach. I won't know until I try.

For calculating sun position, moon position, moon phases etc I've found a few good libs like SunCalc, Astro.js and Astronomia.

[Rodrix3]

1 minute ago, inteja said:

Nice work @Rodrix3

Your rshader looks beautiful but I'm wondering if performance can be improved somehow?

Performance can be improved by changing step and stepss parameters at the beginning of shader code. Also you may change height parameter. Performance will increase greatly.

On the other hand the sky can become even more realistic by adding a second layer of clouds. This is also supported by enabling the related flag at the beginning of the shader code.

 Now I need help for fixing the issue stated initially, before we expose further parameters outside the shader code...

[inteja]

Cool, thanks for the reply @Rodrix3

Forgive my shader ignorance, but I'm wondering if there'd be anyway to blend my celestial sphere between the background sky color and the foreground clouds?

[Rodrix3]

36 minutes ago, inteja said:

Cool, thanks for the reply @Rodrix3

Forgive my shader ignorance, but I'm wondering if there'd be anyway to blend my celestial sphere between the background sky color and the foreground clouds?

I checked your demo, but I can't read the source as it is minimized, so I can't really tell. If you did it with a shader code, it is quite easy to merge both.

Anyways.. we still need to fix the above mentioned issue on my initial post, for this one to work..

[inteja]

14 minutes ago, Rodrix3 said:

If you did it with a shader code, it is quite easy to merge both

It's not shader code. The JS was generated from a Typescript class that loads star data in the form of a json file, then builds a mesh with a single triangle representing each star.

[Guest]

This looks AMAZING!!!

[Gijs]

Reading the Shadertoy comments, apparently @BitOfGold made this shader and used it in his BJS project here:

https://www.bitofgold.com/ocean/

@BitOfGold, nice work! What are your thoughts on this? And the shader code is licensed under the default Shadertoy license, right? (CC Attribution-NonCommercial-ShareAlike 3.0 Unported)

 

[Rodrix3]

2 hours ago, Gijs said:

Reading the Shadertoy comments, apparently @BitOfGold made this shader and used it in his BJS project here:

https://www.bitofgold.com/ocean/

@BitOfGold, nice work! What are your thoughts on this? And the shader code is licensed under the default Shadertoy license, right? (CC Attribution-NonCommercial-ShareAlike 3.0 Unported)

 

Correct, the shader is not of my authorship as I mentioned on the first post, and posted the original source code and comments pointing to ShaderToy, including credits of author on comments. I just ported his code to Babylon!

 

@Gijs, regarding  the link you posted I already checked that before attempting to port it to Babylon. I also tested many many different shaders until finding this one from BitOfGold, which is the most spectacular and most importantly that uses equirectangular projection. However in that link you posted he is not using the shader. He is using an image produced by the shader. So it is not useful..

In my implementation you will see I am using trilinear filtering to load the noise image. Using other types of filtering produces even more artifacts. 

There must be a better way...

Hope someone can fix this.

And @BitOfGold.. wow  are you also part of this community? That's amazing. I hope it is the same user as in ShaderToy...

[Rodrix3]

Update: I tried LINEAR filter thanks to @Deltakosh  who provided me the code for LINEAR filter  ; however, we are still having the same issue :/:

http://www.babylonjs-playground.com/#11GAIH#49

Right now it is using:

    mainTexture = new BABYLON.Texture("http://i.imgur.com/kUJBvin.png", scene, true , false, BABYLON.Texture.LINEAR_LINEAR);

What I can say is that this result provides much less artifacts than:

   mainTexture = new BABYLON.Texture("http://i.imgur.com/kUJBvin.png", scene, true , **true**, BABYLON.Texture.LINEAR_LINEAR);

OR

   mainTexture = new BABYLON.Texture("http://i.imgur.com/kUJBvin.png", scene, true , **false**, 1); //OR NEAREST FILTER

...however, we are still having the same artifacts as with trilinear filtering.

 

 

[BitOfGold]

@Rodrix3 Hi, yeah I'm the same guy here and on ShaderToy.

Technically it's my shader but I also copy-pasted it from several other shaders (tried to give credit when I could as you can see it in the shader source).
You are right, the licence is shadertoy's, I only require attributon/credit for myself and others before me, please use it any way you like it 

I planned to make this a replacement to BABYLON's sky material in the first place, so you are on the right track, only I had to abadon it because I had no time.
Sorry I cannot promise anything now , but if i have the time I'll try to find my last version, I used something like pre-generated cell (voronoi) noise, and blue noise textures.



 

[Rodrix3]

On 5/29/2018 at 4:56 AM, BitOfGold said:

@Rodrix3 Hi, yeah I'm the same guy here and on ShaderToy.

Technically it's my shader but I also copy-pasted it from several other shaders (tried to give credit when I could as you can see it in the shader source).
You are right, the licence is shadertoy's, I only require attributon/credit for myself and others before me, please use it any way you like it 

I planned to make this a replacement to BABYLON's sky material in the first place, so you are on the right track, only I had to abadon it because I had no time.
Sorry I cannot promise anything now , but if i have the time I'll try to find my last version, I used something like pre-generated cell (voronoi) noise, and blue noise textures.



 

I am so glad you are the same person @BitOfGold. It's AMAZING to have you here.

Your shader blew me away!
It would be awesome if you can help complete this. I think it would make this into SkyMaterial 10.0!

Regarding the noise, texture I grabbed the one from ShaderToy. However, there are artifacts, I believe caused by image filtering.
I am not sure how to get rid of those. No one seems to know more about image filtering and how to get rid of this, as I haven't had any replies about it.
Maybe Raw texture would help, I am not sure? Anyone have  an idea about this?

I hope you have some time so we can complete this implementaiton. Thanks so much!

[MackeyK24]

So @BitOfGold and or @Rodrix3

 

So any progress on this ???

[jacobf]

Using LINEAR_NEAREST on mainTexture makes the line artifacts go away:

https://www.babylonjs-playground.com/#11GAIH#110

[BitOfGold]

This looks way better this way. Even with lower resolution.