While searching for an good Noir style Image Effect shader, I noticed that there are hardly any. There are some simple black and white ones, but not real Noir effects where the blacks are really dark and the whites are super bright. So I decided to make one myself. For these tips to work you need to know the very basics of shader. They can be found here: http://www.alanzucconi.com/2015/07/08/screen-shaders-and-postprocessing-effects-in-unity3d/
The Setup
For the stylized effect that is Noir you need two simple effects combined. First you need to make the whole camera black and white, or grayscale. Then when you have a nice grayscale effect you're not done because that is not really Noir in my opinion. So the next easy step you can take is increase the contrast. This is done so all the gray parts of the grayscale image get either black or white.
Image Effect Shader
To make the camera show everything in black and white, you need to make an Image Effect Shader (also known as Post-Processing Shader). Scroll down until you see this part:
fixed4 frag (v2f i) : SV_Target
{
fixed4 col = tex2D(_MainTex, i.uv);
// just invert the colors
col = 1 - col;
return col;
}
Here is where the magic happens. Unity even provides us with an sample effect. The shader will invert the colors out of the box. However the shader as it is does nothing. You need an .cs script with it to attach it to the camera. Lucky for us this isn't very hard.
You make two references, one public and one private to Shader and Material. The shader needs to be public and the material private.
Then you make a OnRenderImage function with RenderTexture source and RenderTexture Destination passed through. In this function you check if the material reference is null, or empty. If that is the case you fill it with a new Material with the public shader in it. After that you do the Graphics.Blit magic. This is better explained on Alan Zucconi's blogpost.
using UnityEngine;
using System.Collections;
public class Noir : MonoBehaviour {
public Shader NoirShader;
private Material MyMat;
void OnRenderImage(RenderTexture source, RenderTexture destination)
{
if (MyMat == null)
{
MyMat = new Material (NoirShader);
}
Graphics.Blit (source, destination, MyMat);
}
}
Black and White
For the camera to see only black and white, we need to edit the part that made it invert colors earlier. The formula to make colors grayscale is to add all the colors up and devide it by 3. So Colors = Red + Green + Blue / 3. This is what that looks like:
fixed4 frag (v2f i) : SV_Target
{
fixed4 col = tex2D(_MainTex, i.uv);
col = col.r + col.b + col.g / 3, col.a;
return col; } }
And voila! Your scene is black and white. Not really Noir but close. Now we need to increase the contrast. For a better grayscale effect, you can use this formula: col = col.r*.3 + col.g*.59 + col.b*.11; This one is however not recommended for the Noir style.
Increasing Contrast
For increasing contrast you need another fixed4, in my case called con for contrast. Also you need a float called Contrast, just to make it clear which one is which.
Set con.rgb to ((col.rgb - 0.5f) * max(Contrast, 0)) + 0.5f. I honestly don't know why this increases the contrast, but it does. You can see the 'Contrast' float in there. This is the intensity modifier. Contrast is in my case set to 4 but you can tweak it how you like. Finally you set col.rgb to col multiplied by con and devived by 2. That's how you make a good noir shader.
Set con.rgb to ((col.rgb - 0.5f) * max(Contrast, 0)) + 0.5f. I honestly don't know why this increases the contrast, but it does. You can see the 'Contrast' float in there. This is the intensity modifier. Contrast is in my case set to 4 but you can tweak it how you like. Finally you set col.rgb to col multiplied by con and devived by 2. That's how you make a good noir shader.
fixed4 frag (v2f i) : SV_Target
{
fixed4 col = tex2D(_MainTex, i.uv);
fixed4 con;
float Contrast = 4;
col = col.r + col.b + col.g / 3, col.a;
con.rgb = ((col.rgb - 0.5f) * max(Contrast, 0)) + 0.5f;
col.rgb = col * con / 2;
return col;
} }
My next step will be, making all the red objects in the scene pop out in a bright red. I already tried that for this version but without success. Everything I tried ended up with everything red tinted or blue tinted.
So to be continued.
To see the Shader in action I made a scene where you can walk around in all the noir goodness here.
