Watercolour Shadow Shader Effect

Inspired by the beautiful visual styles of games like Okami and Wind Waker, I made a thing. Now you too can see that thing moving and doing other weird stuff in this here video.

I will eventually use this as part of a much larger games project, but the effect in itself is essentially finished.

Let me know what y'all think! I'd be happy to answer general questions about how the various bits and pieces of the effect were achieved if anyone's curious.

- Hadyn [skybreaker]

____________________________________________

2018 Update

Good news everyone!

I'm selling the full source for this project on gumroad. Just note it's super important to read the description in full before buying, so you know exactly what you're getting!

If you make anything based off this, please share it here - I'd love to see it.

- Hadyn

 

argh damnit.. its a good tune and you no finish it or make it longer

 

Wow, that's beautiful!
I really love this effect, it would look great in a minimalistic game~
(The colours you've chosen are really nice too.)

Any chance that you're going to share/sell this on the asset store one day? The video really gets me in the mood to make a small game like this.
Or a tutorial at least? Did you use a realtime shadowmap and overlayed a texture, or how did you do this? [Edit: Just saw that you wrote a bit under the youtube video--it's quite amazing that you managed to achieve this effect like this--I'm not sure I could wrap my head around this.]

Also, I agree with Player7--the tune is extremely catchy, I replayed the video a few times because of it~

 

Thanks, that's kind of you to say - I might have to continue work on that tune after all!

As for sharing/selling, I've been a little conflicted about what I want to do. One of my big, long-time ambitions is to develop a game with a unique rendering style, and I'm vaguely paranoid about someone beating me to the punch with my own technique if I make it available.

... But even I have to admit that's kind of dumb/egotistical! It wouldn't be all that hard for experienced tech artists to recreate the effect just from seeing the video anyway, and at the end of the day I believe in being open about development. Heck, I was only able to achieve the effect in the first place because of a whole bunch of awesome people who shared their work online.

I won't give out the shader code just yet, but I'm happy to break down the technique I used to get the effect. It's easier to explain with pictures than words, so give me some time to do up a little graphic thingy and I'll get back to ya!

 

I hope this helps someone, somewhere!

 

That really is a great tune. Please continue, and the visual effect looks cool as well.
Thanks for sharing your process.

 

Nice reading your process. I love that creative part of doing shaders.

 

I understand feeling protective of one's work and ideas, so I really appreciate that you still shared your knowledge--thank you!
Your workflow looks really interesting, and it made me play around a bit~
The blurring shadows part is still confusing me (especially doing it semi-optimised), but your suggestion of looking at frosted glass shaders sounds smart. I guess performance isn't that much of an issue here, since it's used sparingly and the style is probably going to be minimalistic?

Thanks again for sharing, and you really have a nice sense of style.

 

I expected performance to be more of an issue than it is. I tested the effect on the much larger ground mesh in the standard assets driving map, and it only had an impact of extra 0.1-0.3 milliseconds compared to the standard material - even after I tripled the number of blur passes within the shader. I have a fairly decent video card (GTX 970), so maybe that's helping keep the time down, but still... I was really quite surprised!

 

Glad to hear that you managed to optimise it!
I look forward to the finished game~

Would you mind me asking if you have some resources on the blurring?
I tried to roughly replicate the shader as a programming exercise, but I'm really stuck on the blurring--I managed to blur the entire screen, but not only the shadows.
Is there a trick to it, like rendering the attenuation into a Texture und using MIPs, or to calculate the lighting yourself by using a custom AutoLight shader or something?

 

This Shader is so beautiful! I would love to use it in my game but i just started out with unity and even after lots of research and experimenting I get nowhere near this shader. It would mean the world to me if youd share the finished shader in the asset store.
Keep up the good work and good luck with your game!

 

Hi , I like your shader a lod and I'd like to play around with it, is it available on a git / asset store ? non commercial use only

 

bump

 

Nice bump. What a good read this thread was and that tune is so catchy - even after the 5th time of watching the video.

 

Good news everyone!

I'm selling the full source for this project on gumroad. Just note it's super important to read the description in full before buying, so you know exactly what you're getting!

If you make anything based off this, please share it here - I'd love to see it.

- Hadyn

 

Would this shader work on mobile?

 

I haven't tested it, and the effect wasn't built with mobile in mind, but it's possible that it would work.

It's compatible with DirectX, OpenGLCore, and OpenGLES3 and should theoretically work on platforms which support those APIs; however it's possible that certain shader features won't be available on certain devices, and it may not be performant enough without some modifications.

 

Hey there,
amazing shader. Me and some folks are wondering, whether your are allowed to use it in a commercial product, since it states, that it was designed as a educational resource.
Is there any license provided with the source code?
Thanks a lot.
Best,

 

Thanks!

You're welcome to use this for commercial products. I don't think I bothered with a license. If the shader helps you out and you'd like to credit me, you're welcome to - but it's not a requirement at all. My comments about it being intended as a learning resource are just to set the expectation that it's not what I'd consider "production-ready". The code is messy and not well optimised. It achieves a cool visual effect, but it's not the best way to achieve that effect.

Still - if you feel it's good enough to be useful in your commercial product, you're welcome to use it for that purpose

If you're able to make something cool with it, I'd love to see it when it's done!