Night vision effect in the game

OK. Let's take a look at the effect of a real night vision:

We can see from the picture that the world of night vision (for convenience, hereinafter referred to as NV) is green. In order to create our NV world, the first step is to turn the screen into green. The method is very simple, just filter the final output color and a filter. The following is an example:

Emm... is that all done? Obviously, it's too simple. It's just like this. It may be able to meet the needs of some occasions. But for you who keep improving, this is of course the first step. What about the following?

Let's take a closer look at the first real photo and we can see that the image is blurred. So we will start to simulate this effect. How can we do this? There are many methods. You can use box or Gaussian blur, or use a pre-rendered fuzzy texture. in this article, I select the latter, of course, you can use any of your favorite methods, basically the same, the following is my noise texture:

This time, we get the image:

In fact, the noise is constantly beating, the static effect is not very good, at the same time, it is also very important to choose a good noise texture, you can try several different noise texture.

Well, it seems that in the game, this step can basically better restore the effect of NV. However, for integrity, let's look at the effect of watching from the NV telescope, to be more realistic:

Take a closer look at the edge. I did not do anything about it. Otherwise, the effect would be better. The following figure shows a frame:

 

All the texture used above are found online. If you want to use it in the game, then a few exquisite texture for your game will certainly make this NV effect several times better than mine. for example, in addition to noise blur, you can add a soft blur to the final frame to bring it closer to the real world.

The following is the key PS code:

 

I hope it will be helpful to you, and I hope you can learn and make progress together!

 1 float4 ps_main(float2 texCoord: TEXCOORD0) : COLOR 
 2 {
 3    float2 uv;
 4    uv.x = 0.4*sin(fElapsedTime*50.0);
 5    uv.y = 0.4*cos(fElapsedTime*50.0);
 6    float m = tex2D(Texture2, texCoord).r;
 7    float3 n = tex2D(Texture1, texCoord*3.5 + uv).rgb;
 8    float3 c = tex2D(Texture0,  texCoord + n.xy*0.005).xyz;
 9    float lum = dot(float3(0.30, 0.59, 0.11), c);
10    if(lum < 0.2)
11       c *= AmplifyFactor;
12    float3 vc = float3(0.1, 0.95, 0.2)*m; 
13    return float4((c+n*0.02)*vc,1.0);
14 }

Short, not short? The principle to be optimized is very simple: Turn the screen green-> blur the object-> complete or add the desired effect, such as a sniper mirror or telescope. this special effect is very simple. I will not talk about it anymore. enjoy yourself!