experience
the visceral beauty of
a rainy street at night

tears in the rain


by Nicholas Francis
Apr 9, 2013

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.

Reflections

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.

reflections

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.

Raindrops

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.

raindrops
(note: I’ve boosted the contrast in the images, so you can more easily tell what’s going on)

Bullet Time

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

ripples
Blending the ripples: Left is alpha blending, right is 2 * src * dest

Puddles

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.

puddles

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.


by Siddhartha
April 18, 2013

Hi,

Would like to have a look at your new game video,perhaps game play video would be interesting to watch.

Thank you.

Sid.


by rudy
April 18, 2013

Seems a bit like your ripping off syndicate but..,….. best of luck


by framebunker
April 18, 2013

Sid – That’s a good idea, we’ll look into getting a video of prototype gameplay footage online.

Rudy – Syndicate was a great game and we loved playing it 20 years ago and still love it today. We were certainly influenced by it and can only hope that some of that influence manages to shine through. Thanks.


by Esa
October 3, 2013

Very impressive effects! Though as plain text, it flies way above my head. Would it be possible to get simple tutorials or an example project of the stuff you do in the blog?


by Nicholas Francis
October 3, 2013

I’m sorry, but we’re very focused on making our first game, so we’ll just describe the various bits we do – and then let other people do their own variants

Add Your Comment