If you’ve said Cyberpunk and Blade Runner, odds are you’re not making a world in sunset colors. Cyberpunk is hard, it is brutal. It is also a lovesong to the hard walls of the city. To me, it is very much genre that lets us experience the visceral beauty of a rainy street at night.
So let’s talk about rain. For Static Sky, I wanted the rain to look beautiful. To make it be a contrast to the grayish future world.
First off is getting wet surfaces. We don’t want to make a biblical deluge, so surfaces should not be reflective mirrors, but you still want some reflection. So we render all reflections to an offscreen buffer. However, Looking at rainy streets, one of the main takeaways is that the one detail you can make out is vertical streaks of light. We render a quad from each light with a streaky texture on it, and we render the neon signs.
In order to make the reflections feel less like a coat, we let the underlying texture govern the reflection a lot — we kill the reflection in cracks, and use the ground’s bumpmap to perturb the reflection. We also have a bit of ripple effect, but it’s kept very subtle. (it’s hard to see, but if you click the image you get the full-res version).
Don’t forget the fresnel – this is one of the main visual effects that make people go “ah, this is water”. It’s hard to see in the screenshots – but in the game it makes a huge difference.
The nice thing about this way of doing is that once you accept you’re not reflecting the world (which isn’t really feasible on a tablet), you can decide what you want in your reflections. We added the gunfire flashes to it, and that made a huge difference in feel.
In the real world, rain is often most apparent in front of light sources, and we simulate this by rendering cones from all light sources, billboard ads, etc. into a low resolution offscreen buffer. This is multiplied into our rain effect. Really we should blur this, but you can’t see the difference in the final effect — instead we just make sure to scale up the billboard so it lights up raindrops around it.
Static Sky features a bullet time mode that slows down time for issuing orders. This also lets people slow down and actually see the details, which makes the whole thing more challenging. Let’s look at how we make the effect hold together in slo-mo.
First, when you can see each rain drop, the first thing you need to sync is the splashes with the drops. In Static Sky the environments are not that big, so we can use custom meshes for each area. We place volumes around areas where it rains, and at bake time we raycast into the scene and find intersection points. We then build a mesh with 0-sized quads around these points and assign a random splash-time.
When rendering, we draw this mesh twice; the first material does the drop. If the drop hasn’t hit the ground yet, we draw it as a droplet. The droplet gets stretched when we’re in bullet time, but gets brighter outside (to maintian overall scene brightness). If it has the ground, we simply don’t draw it. This has the nice side effect of overhangs actually stopping the rain.
The second part does the splash. If the time is just after the splash-time, we simply draw a ground-oriented quad that goes through a UV animation. We don’t want a solid white-ish splash, so instead of alphablending, we use 2*src*dest multiplication in order to get the effect we’re looking for. Take a look at the figure below
What we have then isn’t bad at all, but some variety could be nice. So we added some clearer puddles to the world. They just basic decals we throw down on top of everything else. They darken whatever is there already and add in more powerful reflections. The reflections are pretty pixellated, but we mask that by adding some stronger ripples.
Alltogether, it’s kinda cool – when you go into bullet time you can see each individual drop of rain going down the screen, and watch it splash nicely. These effects add a lot to a money shot, and being careful about what you render into offscreen buffers and being very low on resolution it’s not too expensive.
If you have any questions, don’t hesitate to ask them in the comments below. It was kinda fun dissecting an effect; let me know if this is something you want more of.