Interested in this Exercise?

Watch the course trailer to see what's inside, read the description, and then start learning on CG Cookie today.

Watch course trailer Start Learning

Nightvision Shader Scopes

  • Software:Unity 2017  ·
  • Difficulty:Intermediate

Rules of the Exercise

  • 1
    Create a vignette around the night vision effect
  • 2
    Add a custom scope texture overlay that includes a crosshair
  • 3
    Provide a way to enable/disable the night vision effect through a C# script to mimic night vision goggles being used

Lets Get Tactical!

In this exercise we'll expand upon our full screen night vision effect and include a texture overlay to mimic the effect of a night vision scope. Night vision goggles are a common game mechanic in first person shooters and similar action games. In this exercise you'll be required to create a night vision scope using a scope overlay of your choosing along with a way to enable or disable this effect through script. 

Submission Process

To submit your exercise create a video of your night vision shader working based off the requirements of this exercise. Once you have a video uploaded provide a link to that video for grading. 

Instructors Notes

If you're struggling to complete this exercise then take a look below on how this was accomplished. 

The process of adding an overlay texture only requires a few lines of code within our original night vision shader. Add a property for this texture at the top of your shader as such:

        _MainTex ("Texture", 2D) = "white" {}
        _ScopeTex ("Scope Texture", 2D) = "white" {} // add this for your overlay
        _NoiseTex("Noise Texture", 2D) = "white" {}
        _NoiseBlend("Noise Blend", Range(0,0.5)) = 0
        _NVColor("Night Vision Color", Color) = (1,1,1,1)
        _Sensitivity("Sensitivity", Range(0,1)) = 0
        _Contrast("Contrast", Range(0,1)) = 0

Make sure this is referenced down below in your sub shader:

sampler2D _MainTex;
sampler2D _NoiseTex;
sampler2D _ScopeTex;

In the frag function we'll then use tex2d for this texture, the finally use it down below to multiply this against our final color value:

fixed4 frag (v2f_img i) : COLOR
                fixed4 col = tex2D(_MainTex, i.uv);
                fixed4 scope = tex2D(_ScopeTex, i.uv); // here is your overlay texture
                half2 noiseUV = half2(i.uv.x + _Time.y * 100, i.uv.y + _Time.y * 100);
                fixed4 noiseTex = tex2D(_NoiseTex, noiseUV);

                float lum = Luminance(col.rgb);
                lum -= _Sensitivity;
                fixed4 finalColor = (lum * 4) + _NVColor;
                finalColor = pow(finalColor, _Contrast);
                finalColor = lerp(finalColor, noiseTex, _NoiseBlend);
                finalColor *= scope; //multiply your final color by your scope fixed4 from up above
                return finalColor;

And there you go, you now have a night vision shader that works with an overlay texture. Check the completed project files for a few images you can use. One includes a scope and another a generic vignette.