[Unity Shaders] gameplay and image effects-create an old movie-style image effect, unityshaders

[Unity Shaders] gameplay and image effects-create an old movie-style image effect, unityshaders

This series mainly references the book "Unity Shaders and Effects Cookbook" (thanks to the author of the original book) and adds a bit of personal understanding or expansion.

Here are all the illustrations in this book. Here is the code and resources required for this book (you can also download them from the official website ).

========================================================== ===================================================== =====

Preface

The last chapter of this book is finally available! As a press axis, although there are only two articles, each article is more complex than any previous one. After finishing this chapter, let's make a summary ~ So, start learning!

Most of the people studying this book have played one or two games in their spare time. So you must be touched. A very important feature of real-time games is to make players feel immersive. The more modern the game is, the more screen effects are used to achieve this immersion.

By using screen effects, you only need to change the screen of a game, so that we can calm down the atmosphere of an environment to every level of terror. Imagine that we walk into a room in a certain level, take over the game, and start playing the live animation. Many modern Games use different screen effects to change the atmosphere at the moment. Understanding how to create these video effects triggered in gameplay is what we will do below.

In this chapter, we will learn some common video effects for games. These include how to change a normal screen to an old movie-style screen effect, and how to apply night vision effects (night vision effects) on the screen in many first-person shooting games ).

First, let's learn how to create an old movie-style image effect.

Games are often based on different backgrounds. Some occur in the imaginary world, some occur in the future world, and some even occur in the Ancient West. At that time, the film camera was just developed and people saw black and white movies, sometimes it also shows the coloring effect of a sepia effect, which has built-in scripts and Shader in Unity Pro. This effect looks very unique and we will use screen effects in Unity to reproduce this effect.

Some steps are required to achieve this effect. First, we will analyze the following images and then break down the steps for making such an old movie vision:

The above images are actually composed of a series of images found on the Internet. We can use Photoshop to create images of this style to help you sketch image effects. This process (making a prototype in Photoshop) not only tells us what elements are needed, but also quickly lets us know which hybrid modes should be used, and how to build layers for screen effects ). However, I cannot find the source Photoshop file...

The final result of this article is probably as follows:

The original image is:

Preparations

Now let's take a look at how each layer is combined to create the final effect, so that we can prepare the required resources for the Shader and the script.

• Sepia Tone): This effect is relatively easy to create. We only need to convert all pixel colors from the original render texture to a single color range. This can be achieved by adding a constant color value to the luminance of the original image. The first layer looks like the following:
  
  
• Halo effect (Vignette effect): We can always see that there is always a blurred border when we use an old movie projector to project an old movie to a screen. This is because the light bulb used by the vintage projector has a brightness higher than the surrounding brightness in the center. This Effect is usually called Vignette Effect, which is the second layer of our screen Effect. We can use an overlay texture to overwrite the entire screen. The following image shows how this layer looks separately:
  
  
• Dust and Scratches (Scratches): The last layer is Dust and Scratches. This layer utilizes two different tiled textures, one for dust and the other for scratches. They are used because we want to use different tile rates to move these two textures by time. Because each frame of an old movie usually has some small scratches and dust, this makes the entire picture look like a movie is being screened. The following figure shows the effect of this layer separately:
  

The above analyzes the appearance and implementation of each layer in Photoshop. Now, we will use the above texture to formally implement our image effects in Unity!

Implementation
Every independent layer in our old movie-style image effects is actually very simple, but when we integrate them together, we can have a very shocking effect. Now your image special effect script system has been set up. Now let's implement the specific script and Shader.
First, enter the main code of the script.

Next, we will implement the key Shader part.

The complete script and Shader are as follows:
OldFilmEffect script:

using UnityEngine;using System.Collections;[ExecuteInEditMode]public class OldFilmEffect : MonoBehaviour {#region Variablespublic Shader oldFilmShader;public float oldFilmEffectAmount = 1.0f;public Color sepiaColor = Color.white;public Texture2D vignetteTexture;public float vignetteAmount = 1.0f;public Texture2D scratchesTexture;public float scratchesXSpeed;public float scratchesYSpeed;public Texture2D dustTexture;public float dustXSpeed;public float dustYSpeed;private Material curMaterial;private float randomValue;#endregion#region Propertiespublic Material material {get {if (curMaterial == null) {curMaterial = new Material(oldFilmShader);curMaterial.hideFlags = HideFlags.HideAndDontSave;}return curMaterial;}}#endregion// Use this for initializationvoid Start () {if (SystemInfo.supportsImageEffects == false) {enabled = false;return;}if (oldFilmShader != null && oldFilmShader.isSupported == false) {enabled = false;}}void OnRenderImage (RenderTexture sourceTexture, RenderTexture destTexture){if (oldFilmShader != null) {material.SetColor("_SepiaColor", sepiaColor);material.SetFloat("_VignetteAmount", vignetteAmount);material.SetFloat("_EffectAmount", oldFilmEffectAmount);if (vignetteTexture) {material.SetTexture("_VignetteTex", vignetteTexture);}if (scratchesTexture) {material.SetTexture("_ScratchesTex", scratchesTexture);material.SetFloat("_ScratchesXSpeed", scratchesXSpeed);material.SetFloat("_ScratchesYSpeed", scratchesYSpeed);}if (dustTexture) {material.SetTexture("_DustTex", dustTexture);material.SetFloat("_DustXSpeed", dustXSpeed);material.SetFloat("_DustYSpeed", dustYSpeed);material.SetFloat("_RandomValue", randomValue);}Graphics.Blit(sourceTexture, destTexture, material);} else {Graphics.Blit(sourceTexture, destTexture);}}// Update is called once per framevoid Update () {vignetteAmount = Mathf.Clamp(vignetteAmount, 0.0f, 1.0f);oldFilmEffectAmount = Mathf.Clamp(oldFilmEffectAmount, 0.0f, 1.0f);randomValue = Random.Range(-1.0f, 1.0f);}void OnDisable () {if (curMaterial != null) {DestroyImmediate(curMaterial);}}}

OldFilmEffectShader is as follows:

Shader "Custom/OldFilmEffectShader" {Properties {_MainTex ("Base (RGB)", 2D) = "white" {}_VignetteTex ("Vignette Texture", 2D) = "white" {}_VignetteAmount ("Vignette Opacity", Range(0, 1)) = 1_ScratchesTex ("Scraches Texture", 2D) = "white" {}_ScratchesXSpeed ("Scraches X Speed", Float) = 10.0_ScratchesYSpeed ("Scraches Y Speed", Float) = 10.0_DustTex ("Dust Texture", 2D) = "white" {}_DustXSpeed ("Dust X Speed", Float) = 10.0_DustYSpeed ("Dust Y Speed", Float) = 10.0_SepiaColor ("Sepia Color", Color) = (1, 1, 1, 1)_EffectAmount ("Old Film Effect Amount", Range(0, 1)) = 1_RandomValue ("Random Value", Float) = 1.0}SubShader {Pass {CGPROGRAM#pragma vertex vert_img#pragma fragment frag#include "UnityCG.cginc"uniform sampler2D _MainTex;uniform sampler2D _VignetteTex;uniform sampler2D _ScratchesTex;uniform sampler2D _DustTex;fixed4 _SepiaColor;fixed _VignetteAmount;fixed _ScratchesXSpeed;fixed _ScratchesYSpeed;fixed _DustXSpeed;fixed _DustYSpeed;fixed _EffectAmount;fixed _RandomValue;fixed4 frag (v2f_img i) : COLOR {half2 renderTexUV = half2(i.uv.x, i.uv.y + (_RandomValue * _SinTime.z * 0.005));fixed4 renderTex = tex2D(_MainTex, renderTexUV);// Get teh pixed from the Vignette Texturefixed4 vignetteTex = tex2D(_VignetteTex, i.uv);// Process the Scratches UV and pixelshalf2 scratchesUV = half2(i.uv.x + (_RandomValue * _SinTime.z * _ScratchesXSpeed), i.uv.y + (_Time.x * _ScratchesYSpeed));fixed4 scratchesTex = tex2D(_ScratchesTex, scratchesUV);// Process the Dust UV and pixelshalf2 dustUV = half2(i.uv.x + (_RandomValue * _SinTime.z * _DustXSpeed), i.uv.y + (_Time.x * _DustYSpeed));fixed4 dustTex = tex2D(_DustTex, dustUV);// Get the luminosity values from the render texture using the YIQ valuesfixed lum = dot(fixed3(0.299, 0.587, 0.114), renderTex.rgb);// Add the constant calor to the lum valuesfixed4 finalColor = lum + lerp(_SepiaColor, _SepiaColor + fixed4(0.1f, 0.1f, 0.1f, 0.1f), _RandomValue);// Create a constant white color we can use to adjust opacity of effectsfixed3 constantWhite = fixed3(1, 1, 1);// Composite together the different layers to create final Screen EffectfinalColor = lerp(finalColor, finalColor * vignetteTex, _VignetteAmount);finalColor.rgb *= lerp(scratchesTex, constantWhite, _RandomValue);finalColor.rgb *= lerp(dustTex, constantWhite, (_RandomValue * _SinTime.z));finalColor = lerp(renderTex, finalColor, _EffectAmount);return finalColor;}ENDCG}} FallBack "Diffuse"}

Save and return to Unity. We need to set the corresponding images and attributes in the panel, as shown below:



Extended Link

About YIQ:

• Http://en.wikipedia.org/wiki/YIQ
  
  
• Http://www.blackice.com/colorspaceYIQ.htm
  
  
• Http://dcssrv1.oit.uci.edu /~ Wiedeman/cspace/me/infoyiq.html
  

Who wants to learn about unity3d in PDF format ?? Can I download and share it?

Very good and powerful. If you want to learn unity3d, this is the best partner!

Welcome to Unity ..................................... ........................................ ........................................ ........... 1
1. User Guide .................................... ........................................ ........................................ .............. 2
1.1. unity Basics ).................................. ........................................ ............... 2
1.1.1. learning interface ...................................... ........................................ ............................. 2
1.1.2. resource Workflow (Asset Workflow ).................................. ...................................... 17
1.1.3. create a scenario (Creating Scenes ).................................. ........................................ .. 18
1.1.4. publish (Publishing Builds )................................... ........................................ ....... 19
1.1.5. tutorial (Tutorials ).................................... ........................................ .................... 22
1.2. building Scenes ).................................. ........................................ .......... 23
1.2.1. game objects )................................... ........................................ ....... 23
1.2.2. use Components (Using Components ).................................. ..................................... 25
1.2.3. prefab ).................................... ........................................ ........................ 30
1.2.4. lights ).................................... .................. remaining full text>