Pixel Art Rain Shader

Date of Recording: 2020-11-30
Working on more environment systems, this time it's a rain effect. Selling the atmosphere of rain is a matter of layering together a bunch of individual effects:
1. streaks representing rain drops
2. splashes on all gently-sloped ground
3. spatter on the top edges of objects on screen
4. ripples in the water
5. mist blowing around the scene
6. randomized bobbing of the upward-facing leaves on trees
7. lightning flashes (with sharp shadows)
8. color grading
Most of the effects are built on the GPU using a few tiling/looping textures and a single post-processing draw call, obviating the need to compute particle effects on the CPU or transferring buffers between CPU and GPU memory, making it a very lightweight effect to compute. The downside is that the effect does not show well while the camera is rotating.

[@spaceowl5957]

My god so want full length video essays on all of these this is so cool!

[@salazarr_js]

this can be easily the background of a lofi song with rain sfx that i would look for hours

[@datdamndog389]

insane dude

[@Entidad-zh8pt]

dooou this is so cool

[@_Thorondor]

This is amazing 😮

[@EricDaily]

Breh, come on...so cool!

[@DarshUK1]

This needs some lofi music over it

[@buddyroach]

this is sick stuff. you gonna make this a first-person 3d game? would be awesome to see a first-person perspective walking around in this environment while it rains.

[@juancruzzeballos938]

that would be trippy af hahah. But, witohut knowing too much, i think is necesary an isometric camera to generate this effect

[@buddyroach]

@@juancruzzeballos938 put it in fixed update

[@rivall8105]

@@buddyroach ?? you need to keep this angle to have the isometric camera look, it would look really weird in fp

[@pixboi]

Most of the effects here rely that its a top down orthographic scene.

[@matheusviniciusdemoraes9420]

Que lindo

[@dmitryalexandersamoilov]

can u plz make a discord for your channel where we aspiring coders can talk about wat youve done? :3

[@t3ssel8r]

I'd be happy to entertain discussions publicly on twitter/reddit. You can also pm me on these various channels. I'm not very prolific on discord I'm afraid.

[@iFlxm3-Flamebearer]

plz make a tutorial bro 😭🙏

[@myrealusername2193]

I’m very curious on how you got this to work! In another video you mentioned it being a texture overlaid to the screen, but it seems like it’s actually being rendered in-game when I look at it. Is it just that convincing of an effect? And how are you able to vary the intensity of the rain? Last question, how can you detect whether a droplet ends over water or grass? Because I cannot figure out if it was through some kind of custom buffer that contains the material type at each pixel or whether it was some other method. Thanks for the cool demo though!

[@t3ssel8r]

the raindrops, ground splashes, etc are just screenspace textures. The water ripples are a texture on the water surface itself. Intensity just controls average opacity of the textures (but local regions can be completely opaque or transparent) It's fairly convincing for what is essentially just a few texture fetches.

[@myrealusername2193]

@@t3ssel8r interesting! So I’m guessing then that you make the splash texture fully transparent over the water so that they don’t overlay the ripples? And it seems like you have some way of having the trees “block” the rain as it looks to me like rain never falls on the back side of the leaves. That just might be me not noticing it though.

[@chalobeats8971]

Im curious as to whether the raindrop screen texture somehow rotates to the angle of the camera? I don’t think you have demo’d that but I’m wondering if it’s possibly. This is currently where I am stuck with my rain.

[@ВторойкиборгЧеловек-Сидр]

😍🙏

[@lucasbird6367]

I Love this rain, how did you make it, maybe you can share?

[@theveganenemy]

please do online courses for shaders

[@worstluck6113]

What engine did you use, good sir?

[@t3ssel8r]

unity

[@worstluck6113]

@@t3ssel8r is that combined with blender to create the environments?

[@Sir.Rollback]

@@worstluck6113 yeah, he's got a video on his workflow, creating scenes in blender.