[Unity shaders] uses unity render textures to implement image effects-a basic mix mode similar to Photoshop in image effects

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

Screen effects are not limited to adjusting the color of the game screen. We can also use them to mix with other images. This technique is similar to creating a layer in Photoshop. We can choose a mixed mode to mix two images. In our example, one of them is render texture. This allows the artist to simulate a variety of mixed effects in the game, rather than simply in Photoshop.

In this article, we will learn some common mixed modes, such as multiply, add, and screen ...). You will find that this is not difficult to implement ~

Knowledge tutorial

Here, we will add an understanding of the mixed modes.

Multiply and Screen)

Multiply and screen are two basic hybrid modes, which are used to make the image darker and brighter. The combination between them can also form more complex hybrid modes, such as overlay and soft light ).

Stacked front-slice-that is, the pixels of two layers of images are multiplied to obtain a darker image. This mode is symmetric, that is, the result of the base color exchange and the mixed color is the same.

Where a is the base color and B is the mixed color.

Color Filtering-first take the pixel values of two layers of images as the complementary number, then multiply them, and then perform the complementary number. This is the opposite of the result obtained by stacking the video. It will get a brighter image.

Where a is the base color and B is the mixed color.

Overlay-combines two blending modes: the front slice and the filter color. The brighter part of the base color is brighter, while the darker part is darker.

Where a is the base color and B is the mixed color.

Preparations

This article also has a lot of code built on the basis of the previous article, so a lot of code does not need to be written ~

1. Create a new script named blendmode_imageeffect;
2. Create a new shader named blendmode_effect;
3. Copy the C # code in the first part of this chapter to the script created in step 1; (I found that the original author also forgot to delete the sentence of brightness, saturation, and contrast due to copying and pasting ...)
4. Copy the shader code in the first part of this chapter to the shader created in step 2;
5. Add the new script to camera and assign a value to the cur shader in the script using the new shader. In this article, we will need a texture to demonstrate the mixed effect. You can find this ugly image from the book's resources (see the top of the article). The author says this is to make it easier to see the effect ~...

The following figure shows the texture we want to use! In addition to being ugly, this texture has rich details and a large gray scope, which is helpful for us to test the mixed effect.


Implementation

1. The first mixed mode we want to implement is the multiply mode. To put it bluntly, we multiply the base color and the mixed color. To control transparency, we also need an attribute:
   

   Properties {_MainTex ("Base (RGB)", 2D) = "white" {}_BlendTex ("Blend Texture", 2D) = "white" {}_Opacity ("Blend Opacity", Range(0.0, 1.0)) = 1.0}

   
   
2. Similarly, we create the corresponding variables in the cgprogram block:
   

   Pass {CGPROGRAM#pragma vertex vert_img#pragma fragment frag#include "UnityCG.cginc"uniform sampler2D _MainTex;uniform sampler2D _BlendTex;fixed _Opacity;

   
   
3. Finally, we modify the frag function to perform the multiplication operation on the two textures:
   

   fixed4 frag(v2f_img i) : COLOR{//Get the colors from the RenderTexture and the uv‘s//from the v2f_img structfixed4 renderTex = tex2D(_MainTex, i.uv);fixed4 blendTex = tex2D(_BlendTex, i.uv);// Perform a multiply Blend modefixed4 blendedMultiply = renderTex * blendTex;// Adjust amount of Blend Mode with a lerprenderTex = lerp(renderTex, blendedMultiply,  _Opacity);return renderTex;}

   
   
4. Edit the C # script. First, we need to create corresponding variables. Therefore, we need a texture that can be assigned values in the panel and a variable transparency:
   

   #region Variablespublic Shader curShader;public Texture2D blendTexture;public float blendOpacity = 1.0f;private Material curMaterial;#endregion

   
   
5. Then, we need to pass the variable data to the shader in the onrenderimage function:
   

   void OnRenderImage (RenderTexture sourceTexture, RenderTexture destTexture){if (curShader != null) {material.SetTexture("_BlendTex", blendTexture);material.SetFloat("_Opacity", blendOpacity);Graphics.Blit(sourceTexture, destTexture, material);} else {Graphics.Blit(sourceTexture, destTexture);}}

   
   
6. Finally, we can ensure that the value range of blendopacity in the function is 0.0 to 1.0:
   

   void Update () {blendOpacity = Mathf.Clamp(blendOpacity, 0.0f, 1.0f);}

   
   

After that, you can pass any image as a hybrid image to the script. Finally, you can see results similar to the following:
Multiply hybrid modeOpacity = 0.5:


Multiply hybrid modeOpacity = 1.0:


Through the above implementation, we can find that it is not difficult to achieve such a mix effect. Next we will continue to add some simple mixed modes.
Extension
The following two simple hybrid modes are implemented:

1. Modify the frag function in the shader to comment out the multiplication operation and add a new addition operation:
   

   fixed4 frag(v2f_img i) : COLOR{//Get the colors from the RenderTexture and the uv‘s//from the v2f_img structfixed4 renderTex = tex2D(_MainTex, i.uv);fixed4 blendTex = tex2D(_BlendTex, i.uv);// Perform a multiply Blend mode//fixed4 blendedMultiply = renderTex * blendTex;// Perform a add Blend modefixed4 blendedAdd = renderTex + blendTex;// Adjust amount of Blend Mode with a lerprenderTex = lerp(renderTex, blendedAdd,  _Opacity);return renderTex;}

   
   

Save and return to unity. You can see the following results. As you can see, it is the opposite of multiply: Add hybrid modeOpacity = 1.0:

1. Finally, we implement a screen blend (which is a strange Chinese name ?) . This operation is more complex than the first two operations, but it is also very simple. Continue to modify the frag function:
   

   fixed4 frag(v2f_img i) : COLOR{//Get the colors from the RenderTexture and the uv‘s//from the v2f_img structfixed4 renderTex = tex2D(_MainTex, i.uv);fixed4 blendTex = tex2D(_BlendTex, i.uv);// Perform a multiply Blend mode//fixed4 blendedMultiply = renderTex * blendTex;// Perform a add Blend mode//fixed4 blendedAdd = renderTex + blendTex;// Perform a screen render Blend modefixed4 blendedScreen = 1.0 - ((1.0 - renderTex) * (1.0 - blendTex));// Adjust amount of Blend Mode with a lerprenderTex = lerp(renderTex, blendedScreen,  _Opacity);return renderTex;}

   
   

Finally, you can see the following results: Screen blend hybrid modeOpacity = 1.0:

[Unity shaders] uses unity render textures to implement image effects-a basic mix mode similar to Photoshop in image effects