Tuesday, March 6, 2018

Unity Shader: Adding a Gradient Overlay

Let's get right to it. Here's the shader, in all its amateurish glory:

But why use this?

A gradient is a great way of focusing attention, either towards the bottom or the top of an element. In the example below, the gradient was used to focus attention on the main street area. Additionally, it was be used to fake street-level lighting by darkening the tops of buildings and to add a feeling of cohesion between the sky colours and environment colours (like a vertical "fog").
Buildings with gradient

By changing the the value of screenPosition from Y in the highlighted section, we can change the direction of the gradient.
Oh, the places you can go

Now, this is a fairly limited shader that I created for a very specific use-case in a project. So there are some blatant improvements to be made to it:
  • Despite being named "Standard (Gradient Overlay)", it is missing many properties before actually matching Unity's Standard shader
  • The shader is in screenspace, so any camera movements on the same axis as the gradient will affect the appearance of the gradient
  • The emissive in on by default, blowing out the gradient. So if it looks like it's not working... Try changing the emissive colour to black first
  • There's no snazzy custom editor for it
Next time (eventually): improving the gradient shader.