Clouds
Undoubtedly the most majestic form of H2O.
- whiskas101
Clouds are hard to render. Convincing clouds, that is. If you’ve ever tried your hand at drawing, you would know that the difficulty of drawing something is inherently tied to how it reflects light, how it absorbs light. Clouds? Well, they also absorb and scatter. It’s particularly annoying because for most materials we can just get away with modelling how it reflects.
Now imagine you’re a game dev, in 2012, and you need to render these on a mobile phone. Also, make it interactive. Also, it has to run smooth, on an iPhone 6. Good luck.
Table of contents
Open Table of contents
What makes it so hard?
I will point the question back to you, what wouldn’t make it hard? Everything about it is a headache. Interaction, lighting, self-shadowing, and animation. Yeah, those clouds are animated (in a way).
- They are not solid objects, they’re volumes
- They don’t block light, they scatter it. (more on this later)
There’s actually more, but in the context of stylized clouds, the ones that we see in this game, we don’t actually encounter those issues, so I will omit them.
The Journey
I started out extremely confident. Afterall, the game runs on a phone that’s like ~8 years old, how hard could it be to run something like this on a modern GPU?
This is going to read like a story, a recollection of events as they happened. If you’re strictly interested in the math, code and rendering techniques, you should use the table of contents to skip to the end.
Some things stood out in the way thatgamecompany stylized their clouds. They are opaque. They don’t have those wispy edges, not at a distance anyway. They look cartoonishly dense. If you pay close attention, you can’t actually see any meaningful transparency to them. They might as well be white foamy water.
The very first technique I tried was, based on a reddit post and also this one discussing the very same clouds.
Cloud shader inspired by Sky: Children of Light
by u/Then-Drive2284 in Unity3D
My approach assumed those clouds to be a mesh, just like these reddit users. To quote the author of this one:
Sky:Children of Light inspired cloud shader in URP. Opaque + depth fade + tessellation + basic interaction
by u/907games in Unity3D
The clouds are mesh objects, the circular cloud is the standard sphere. The clouds in Sky:Children of Light were also mesh objects, but they used a “blob” technique to model them. I used clayxels to make the cloud “blob” and baked it into a mesh. Made in amplify shader editor, marked as opaque in the rendertype and transparent in queue. Depth fade gives a transparent illusion. Tessellation gives the cloud more detail. The only thing I cant figure out is how Sky was able to make the edges of the clouds have small particle like effects. Fresnel alpha doesnt work too well the way I tried, but maybe I just did it wrong and theres another way.