Soft looking clouds, how?


#1

I have been looking at thatgamecompany’s new game Sky: Light Awaits and am wondering how in the hell they managed to get so good looking clouds. Video for reference:
https://youtu.be/ttIo9miMizE?t=1571

I am working in Unity. Here are the things I’m most interested/confused about:

-Soft shadows. Look at 27:52 in the video for example.
-Intersecting transparency. Look at 26:15 in the video for example.

So, how are they able to get such soft shadows? I’m guessing they’re all baked? Or maybe even custom textures somehow? I don’t believe the big clouds in the background are just planes as they seem to be moving constantly.

I am trying to recreate with my own kind of layer of clouds, which currently is just basic vertex displacement from a texture. When it casts its own shadow on itself it is anything from soft. Take a look:
https://gfycat.com/CheerfulIdleFlee
Changing unitys shadows to soft won’t solve this issue, only blur the edges a little bit, but obviously I would need more than that. Is it possible to get these shadows to blur out a lot more, so that they resemble more of a volumetric shadow on itself?

Next, the intersecting transparency. Maybe this is just a Unity issue though, but… If I want my clouds to intersect with the world, I check the intersection through the depth map created from deferred rendering. To be able to do this I need the cloud to be transparent so it isn’t added to the depth map. I also need it to be transparent to be able to have transparent intersection, duuh… What this does however is create a lot of overdraw and sorting issues. If I change rendering queue to lets say AlphaTest, the sorting issues are solved but now there’s no intersection and transparency functionality…

I’ve been scratching my head over this for quite some time, figured this is a good place to ask for advice :smiley:


#2

Hi !

They most likely used raymarching for the clouds, Unreal seems to have that but not Unity you might want to create your own script for that, my knowledge on the subject is very limited but with some search you could get it done.

you can also check this video, this isn’t a tutorial by any way but i thought this was looking too cool to not share : https://www.youtube.com/watch?v=6wJM7bceQfc&t=1s


#3

Raymarching a full level on IOS!?!? Damn, Moore’s law must really be kicking off!

Do you have any sources as to how the fuuuuuuuuu they pulled that off?


#4

About sorting issues: Looking at 28:32 frame by frame, they might use a masked instead of a translucent material with dithering and a crap ton of bloom to blur everything.
The most interesting part is the camera fade on 28:34 which does hint to raymarching single clouds or Camera fade with a harsh transition. Would love to hear other thoughts on that part as well :slightly_smiling_face:


#5

Raymarching was the first thing that pop’d in my mind, the clouds looks too real and 3D, as i said i’m not the most knowledgeable on the raymarching subject i’m just sharing what might be a possibility (and yes this being on mobile reduce strongly the chance of raymarching being used, i did not payed attention to the title),
but what’s your idea on the subject tho ?

Focusing on the right clouds at 26:14 i can see the sprite but there is also 3D meshes that seems to be layered, and it’s kind of looking pixalated (that led me to think it was low res raymarched clouds)
If it’s not then mybad :smile:


#6

Hehe, I have no idea how they did it. But if I was the curious type, I’d probably start reading about WPO, fresnel, dithering and depthfading sprites.


#7

Thanks a lot for the answers everyone. I kinda figured it wouldn’t be “one simple trick”. Good to get the discussion going :stuck_out_tongue:

Partikel, would you mind elaborating? What is WPO? How would fresnel help? What do you mean with depthfading sprites? Lol


#8

Very interested in knowing how it was made, probably gonna try my own version of that when I have time too


#9

Saw this on twitter and thought of this post. Perhaps not the answer but thought you might find it interesting


#10

Damn, that looks pretty good! But it’s not really anything I haven’t tried. It still got the hard shadows and no transparency.

I do however wonder if the vertex normals are updated along the vertex displacement? It kind of looks like it… Is it something that’s automatic in Unreal? Lol

Edit: In the meantime I’ve been looking at raymarching in Unity but am not having any luck really… All resources I can find is either super basic “render a sphere in a box” raymarching, or out-of-date github projects that do one specific thing and is pretty hardcore codewise. Then I see posts like this https://twitter.com/BetaVersionOfMe/status/1067557611174805505 and get my hopes up, but can’t seem to find a good place to get started :stuck_out_tongue:

I’ve also purches an Asset Store project true clouds which I’m currently trying to reverse engineer. It’s not raymarching but still produce soft looking clouds (with some limitations which I’m trying to figure out)


#11

A wizard did it type of deal.

I dunno of the game if you can go under or into the clouds etc.

If not then it can be simpler than it looks.


#12

Would you mind elaborating? How do you think it could be made in a simple way?


#13

I have no clue how it was done i was saying that its much simpler if you can’t get into or under the clouds as it can be a simple modeled mesh with a good shader that has depth fade, erosion on fresnel sides etc.

To me it looks like volumetric clouds by viewing the video again.

Cryengine can do it https://www.youtube.com/watch?v=ZjqddgfzfuE
I remember you assigned a set of clouds to it but i never dug too deep to figure out how the actual thing was generating a volume.

if it were supported in engine i would just find a shader that works and translate it.
https://www.shadertoy.com/view/XslGRr
https://www.shadertoy.com/view/Xsd3R2

Hope this makes more sense.


#14

You can indeed go under the clouds in this game :confused:
Interested to see your progress on this


#15

Well, here is currently where I am at with the raymarching:
https://gfycat.com/UnequaledTartGentoopenguin

This is not volume raymarching, this is a quad in front of the camera doing the raymarching… If that makes sense. I’m not familiar with the correct terms yet.

As you can see there is a lot of things missing. But I think it’s something I can work with. I am working from a project made as a thesis on rendering clouds, link here . This project is the first one I have been somewhat able to understand from looking at the code, so I’m thankful for that…

Obviously I want things such as lighting working nicely, but my focus right now is figuring out how to actually use this in a game. How would I go about making “custom” clouds? Say I want one cloud “plane” across the entire level, that’s easy enough, but then I want a big cloud sticking out of it… How would I easily make that happen without having to rewrite code everytime I wanted new clouds?

Right now you can set the position of this sphere shaped cloud in the GIF, but I can’t add more clouds with this set up. Not that I know of atleast… Duplicating another quad in front of the camera with its own cloud hardly seems sustainable in the long run. I understand that the bounding volume of the cloud is generated through code, and right now it’s generating a sphere, but how would I go about making more custom stuff? Would it be possible to import meshes as bounding volumes? Do you see my problem? :stuck_out_tongue: