Tasharen Entertainment Forum

Games => Dev Blog => Topic started by: ArenMook on April 02, 2016, 11:55:36 AM

Title: Apr 2, 2016 - In pursuit of better skies
Post by: ArenMook on April 02, 2016, 11:55:36 AM

In my previous post (http://www.tasharen.com/forum/index.php?topic=14093.0) I mentioned that the atmosphere was "good enough" to move on to other tasks. But... the transition from day to night really bugged me... Simply put, I thought the transition looked too washed out, and I wanted to fix that.

My solution involved restarting from scratch and redoing the shaders, paying closer attention to the scattering process. The finalized effect proved to be much better than my first attempt, although with the downside of being limited to the 2.5% atmosphere height again. The visual thickness of 2.5% using the new shader was actually thicker than my first attempt set to 5% though, so I just left it like that. The visual benefit was well worth it:

(http://www.tasharen.com/misc/dev50.jpg)

The next step was fixing the clouds... The cylindrical texture I used before was not only low quality, but it looked like crap around the poles. I needed something that not only looked good, but was capable of zooming in all the way down to the ground level without looking seriously blurred out. Of course this isn't something that's possible using higher resolution textures. Some basic math: the circumference of Earth is 40,075 km. Max texture size in Unity is 8192. This gives the equatorial resolution of 4.89 km per pixel. That's pretty terrible. Another approach was needed.

After some thought, I decided to turn the cylindrical cloud map texture into a tileable square with the base size of 4096x4096. I used the basic projection logic (same one I used for the quad sphere) to calculate the UV coordinates both horizontally, and at the poles. This gave me better per-km resolution than using a 8192 texture with the added benefit of looking great both at the equator and at the poles:

(http://www.tasharen.com/misc/dev51.jpg)

If only it would still look great when zoomed in, right? Well... the most obvious way of adding detail at zoomed levels is to use detail textures. But... we're dealing with clouds, so what would the detail texture be? Why... the same exact texture! Instead of adding detail to an existing blurred texture, I decided to blend between the same exact texture, but sampled at two different resolutions (1x zoom and 4x zoom). The result was just denser clouds that could be zoomed in farther, but eventually still looked washed out when zoomed in enough.

That's when I thought to myself: why not do this continuously? Use the camera's height to determine the 2 closest zoom levels and feed these values to the shader. The shader will then use the 2 UVs to sample the cloud texture, then blend between them using the height-based blending value. I can basically continuously blend between 2 textures in an ever-increasing zoom level based on the camera's height:

1.                 if (heightFactor < 0.5f)
2.                 {
3.                         atmosphericBlending.x = 16f;    // Tex0 UV coordinate multiplier
4.                         atmosphericBlending.y = 1f;     // Tex 0 blending weight
5.                         atmosphericBlending.z = 8f;     // Tex1 UV coordinate multiplier
6.                         atmosphericBlending.w = 0f;     // Tex1 blending weight
7.                 }
8.                 else if (heightFactor < 2f)
9.                 {
10.                         float f = (heightFactor - 0.5f) / 1.5f;
11.                         atmosphericBlending.x = 16f;
12.                         atmosphericBlending.y = 1f - f;
13.                         atmosphericBlending.z = 8f;
14.                         atmosphericBlending.w = f;
15.                 }
16.                 else if (heightFactor < 6f)
17.                 {
18.                         float f = (heightFactor - 2f) / 4f;
19.                         atmosphericBlending.x = 8f;
20.                         atmosphericBlending.y = 1f - f;
21.                         atmosphericBlending.z = 4f;
22.                         atmosphericBlending.w = f;
23.                 }
24.                 else if (heightFactor < 18f)
25.                 {
26.                         float f = (heightFactor - 6f) / 12f;
27.                         atmosphericBlending.x = 4f;
28.                         atmosphericBlending.y = 1f - f;
29.                         atmosphericBlending.z = 2f;
30.                         atmosphericBlending.w = f;
31.                 }
32.                 else if (heightFactor < 54f)
33.                 {
34.                         float f = (heightFactor - 18f) / 36f;
35.                         atmosphericBlending.x = 2f;
36.                         atmosphericBlending.y = 1f - f;
37.                         atmosphericBlending.z = 1f;
38.                         atmosphericBlending.w = f;
39.                 }
40.                 else
41.                 {
42.                         atmosphericBlending.x = 2f;
43.                         atmosphericBlending.y = 0f;
44.                         atmosphericBlending.z = 1f;
45.                         atmosphericBlending.w = 1f;
46.                 }

And just like that, I had clouds that could be zoomed in all the way to the ground that looked fantastic both far away and up close. The blending between them was very subtle when traveling at the speed of a real-world rocket -- so subtle as to not be noticeable. Even with the camera test I set up that was moving very quickly the transitions were all smooth:

(http://www.tasharen.com/misc/dev52.jpg)

I made the clouds be affected by the scattering color for a more natural looking transition:

(http://www.tasharen.com/misc/dev53.jpg)

Next up came the night lights. The square nature of pixels was very noticeable up close. Something had to be done. The approach I settled on simply took the night lights and blurred them slightly, resulting in smoother edges. I then used a detail texture blended with the night lights map to create a much higher-than-original night lights map:

(http://www.tasharen.com/misc/dev54.jpg)

(http://www.tasharen.com/misc/dev55.jpg)

It still looks great even from far away:

(http://www.tasharen.com/misc/dev56.jpg)

The last thing I did was duplicate the cloud detail code in the shader and made it sample a noise map texture that I then applied to the terrain itself. This added a subtle variation to the terrain's texture that improved how it looks when zoomed in. The snow-covered mountain peaks still looked rather bad when zoomed in because there was a lot of contrast between the color of the pixels, but I addressed that by simply adding extra snow to make the transition less jarring. I did that by sampling the height map, disturbing it a little by using my trusty LOD-based noise map explained above, and adding extra whiteness around the cliffs:

(http://www.tasharen.com/misc/dev57.jpg)

Unfortunately there was nothing it could do to make the shoreline less blurry when zoomed in... but I have some ideas on how I can address that that I will explore further in a future post. I'm sure simply adding terrain deformations based on a heightmap + noise will improve the look quite a bit. But in the meantime I have some new decent looking 3440x1440 backgrounds!

(http://www.tasharen.com/misc/dev58.jpg)

(http://www.tasharen.com/misc/dev59.jpg)

(http://www.tasharen.com/misc/dev5a.jpg)

Title: Re: Apr 2, 2016 - In pursuit of better skies
Post by: Nicki on May 01, 2016, 04:40:11 PM

Looks all fancy! :D

Title: Re: Apr 2, 2016 - In pursuit of better skies
Post by: r.pedra on May 03, 2016, 04:53:21 AM

It looks so easy for you...