Nightvision Shader Scopes

Interested in this Exercise?

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

Watch course trailer Start Learning
Heya!

Login with your CG Cookie Citizen Account to ask a question.

Start Learning
  • Software: Unity 2017
  • Difficulty:

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:

    Properties
    {
        _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. 

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

No questions found.

Heya! Login with your CG Cookie Citizen account to download Exercise files.

No exercise submissions found.

Level 5

Thumb
Rank: 24
Ever since I was young I've been fascinated with games and the way they work. Now I get to teach the amazing world of game development. I'm always learning and always willing to teach what I've picked up along the way. You can directly contact me here, through the message boards or even through my person site linked to the side.