Overlay that creates only black and white underneath.

Hi
I’m training myself by making a game atm.
I recently wanted to create an overlay that makes everything underneath black and white, but it is neccessary that this overlay works with some kind of overlay image, or however something like this is called. alt text This is the original picture. alt text This is the overlay-image. (white is transparent) alt text And this is how it shall look combined.
Hopefully you can understand what I want to create after you’ve seen this pictures. It would be verry helpful if someone could link me some sources where i can read abeout it or videos etc… It would also be helpful if someone could tell me how the overlay-thingy im searching for is called, because its kind of hard to search the internet for something you don’t know the name of ^^.

Best regards
Janis Hansen

Because there really is a lack of image effect documentation and it is pretty simple, here’s a basic image effect that does this.

First, here is a C# script that you can attach to your camera;

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

[ExecuteInEditMode]
public class GrayscaleFilter : MonoBehaviour 
{
	private Material mat;

	public Texture overlay;

	private void OnRenderImage (RenderTexture src, RenderTexture dest)
	{
		if (!mat)
			mat = new Material (Shader.Find ("Hidden/GSF"));

		mat.SetTexture ("_Mask", overlay);

		Graphics.Blit (src, dest, mat);
	}

	private void OnDisable ()
	{
		if (mat)
			DestroyImmediate (mat);
	}
}

And here is the accompanying shader;

Shader "Hidden/GSF"
{
	Properties
	{
		_MainTex ("Texture", 2D) = "white" {}
		_Mask ("Overlay", 2D) = "white" {}
	}
	SubShader
	{
		// No culling or depth
		Cull Off ZWrite Off ZTest Always

		Pass
		{
			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag
			
			#include "UnityCG.cginc"
			
			sampler2D _MainTex;
			sampler2D _Mask;

			struct appdata
			{
				float4 vertex : POSITION;
				float2 uv : TEXCOORD0;
			};

			struct v2f
			{
				float2 uv : TEXCOORD0;
				float4 vertex : SV_POSITION;
			};

			v2f vert (appdata v)
			{
				v2f o;
				o.vertex = UnityObjectToClipPos(v.vertex);
				o.uv = v.uv;
				return o;
			}

			fixed4 frag (v2f i) : SV_Target
			{
				fixed4 c = tex2D (_MainTex, i.uv);
				fixed4 gs = (c.r + c.g + c.b) / 3;
				return lerp (gs, c, tex2D (_Mask, i.uv).r);
			}
			ENDCG
		}
	}
}

As you can see, the majority of the actual code is done in about 6 lines.

This might work:

  1. Duplicate your camera and make it render above the other one.

  2. Give your duped cam a grayscale image effect.

  3. Hardest part: Give the grayscale camera some kind of mask so not everything is gray.

Another way:

  1. Duplicate your camera.

  2. Give your duped cam a grayscale image effect.

  3. Render the grayscale camera to a render texture.

  4. Overlay the rendertexture over your normal, color camera and use some kind of shader to get a round mask.

Thanks for your answers.

Namey5: I unfortunately can’t get your solution to work. Either my explanation was too bad or I’m just too dump to use shaders. (I have no clue of shaders btw.) To eliminate the first possibility I’ll describe my problem more accurate (I think): I’m making a 2D Game and I wan’t my character to sometimes be surrounded by an color-consuming aura. Therefore I need some kind of overlay/graphic that i can attach to my character that will render everything underneath it in gray-scales. Also it should be possible regulate the gray-scale/color-intensity by the transparency of the overlay, like my black circular thing on the second picture tries to show.
If I just don’t understand how to use your shader than I would be thankful if you could explain it to me.

N00MKRAD: I agree that this should somehow work, but I also agree to Namey5 that it would be quite expensive this way.

Anyways: Thanks to you too and hopefully someone will enlighten me.

Best Regards
Janis Hansen