Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

Watercolour Shadow Shader Effect

Discussion in 'Made With Unity' started by hadynlander, Jan 12, 2016.

  1. hadynlander

    hadynlander

    Joined:
    Jan 24, 2014
    Posts:
    41
    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
     
    Last edited: Mar 11, 2018
    crekri, yoshkoba, HolBol and 4 others like this.
  2. Player7

    Player7

    Joined:
    Oct 21, 2015
    Posts:
    1,533
    argh damnit.. its a good tune and you no finish it or make it longer :D
     
    hadynlander likes this.
  3. KWaldt

    KWaldt

    Joined:
    Nov 1, 2013
    Posts:
    127
    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~
     
    hadynlander likes this.
  4. hadynlander

    hadynlander

    Joined:
    Jan 24, 2014
    Posts:
    41
    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!
     
    theANMATOR2b and zyzyx like this.
  5. hadynlander

    hadynlander

    Joined:
    Jan 24, 2014
    Posts:
    41
    I hope this helps someone, somewhere!

    HadynShaderProcess.png
     
    Alimen, crekri, asdzxcv777 and 8 others like this.
  6. theANMATOR2b

    theANMATOR2b

    Joined:
    Jul 12, 2014
    Posts:
    7,790
    That really is a great tune. Please continue, and the visual effect looks cool as well.
    Thanks for sharing your process.
     
    hadynlander likes this.
  7. hippocoder

    hippocoder

    Digital Ape

    Joined:
    Apr 11, 2010
    Posts:
    29,723
    Nice reading your process. I love that creative part of doing shaders.
     
    hadynlander likes this.
  8. KWaldt

    KWaldt

    Joined:
    Nov 1, 2013
    Posts:
    127
    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.
     
    hadynlander likes this.
  9. hadynlander

    hadynlander

    Joined:
    Jan 24, 2014
    Posts:
    41
    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!
     
    KWaldt and theANMATOR2b like this.
  10. KWaldt

    KWaldt

    Joined:
    Nov 1, 2013
    Posts:
    127
    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?
     
  11. Catosar

    Catosar

    Joined:
    Jun 17, 2017
    Posts:
    1
    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!
     
  12. siordache94

    siordache94

    Joined:
    Jan 8, 2017
    Posts:
    6
    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
     
  13. biscito

    biscito

    Joined:
    Apr 3, 2013
    Posts:
    138
  14. Doug_B

    Doug_B

    Joined:
    Jun 4, 2017
    Posts:
    1,596
    Nice bump. What a good read this thread was and that tune is so catchy - even after the 5th time of watching the video. :)
     
    hadynlander likes this.
  15. hadynlander

    hadynlander

    Joined:
    Jan 24, 2014
    Posts:
    41
    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
     
    omeys and Doug_B like this.
  16. Kaji-Atsushi

    Kaji-Atsushi

    Joined:
    Oct 6, 2012
    Posts:
    234
    Would this shader work on mobile?
     
  17. hadynlander

    hadynlander

    Joined:
    Jan 24, 2014
    Posts:
    41
    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.
     
    Yogameamanotes likes this.
  18. bastingup

    bastingup

    Joined:
    Jun 22, 2019
    Posts:
    1
    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,
     
  19. hadynlander

    hadynlander

    Joined:
    Jan 24, 2014
    Posts:
    41
    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!