Shulou(Shulou.com)05/31 Report--

Today, the editor will share with you the relevant knowledge points about how to achieve 2D edge detection based on Unity. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

1. ShaderLab1.Alpha value edge detection

According to the alpha value of the picture, the edge is determined by expanding the distance inward to make the edge, and the color is set to the unstroked color.

In the element coloring stage, the detection is made in four directions up, down, left and right, and the transparency of one point is 0, which is determined to be the edge.

Shader "2DOutline" {Properties {_ MainTex ("Texture", 2D) = "white" {} _ LineWidth ("Width", Range) = 1.0 _ LineColor ("LineColor", color) = (1 Intensity ("Intensity") Range (1m 10) = 1.0} SubShader {Tags {"RenderType" = "Opaque"Queue" = "Transparent"} Blend SrcAlpha OneMinusSrcAlpha Pass {CGPROGRAM # pragma vertex vert # pragma fragment frag # include "UnityCG.cginc" struct appdata {float4 vertex: POSITION Float2 uv: TEXCOORD0;}; struct v2f {float2 uv: TEXCOORD0; float4 vertex: SV_POSITION;} Sampler2D _ MainTex; float4 _ MainTex_ST; fixed _ LineWidth; float4 _ LineColor; fixed _ Intensity; v2f vert (appdata v) {v2f o O.vertex = UnityObjectToClipPos (v.vertex); o.uv = TRANSFORM_TEX (v.uv, _ MainTex); return o } fixed4 frag (v2f I): SV_Target {fixed4 col = tex2D (_ MainTex, i.uv) / / sampling the surrounding 4 points float2 up_uv = i.uv + float2 (0,1) * _ LineWidth * 1 / 10 * _ MainTex_ST.xy; float2 down_uv = i.uv + float2 * _ LineWidth * 1 / 10 * _ MainTex_ST.xy Float2 left_uv = i.uv + float2 (- 1J 0) * _ LineWidth * 1 / 10 * _ MainTex_ST.xy; float2 right_uv = i.uv + float2 (1J 0) * _ LineWidth * 1 / 10 * _ MainTex_ST.xy / / if there is a point whose transparency is 0, it is the edge float w = tex2D (_ MainTex,up_uv). A * tex2D (_ MainTex,down_uv). A * tex2D (_ MainTex,left_uv). A * tex2D (_ MainTex,right_uv). A If (w = = 0) {col.rgb = lerp (_ LineColor * _ Intensity, col.rgb, w);} return col } ENDCG}

If the content of the picture happens to cover the whole picture and there is no alpha value, the method is not applicable; the bottom edge of the following image disappears

two。 Convolution edge detection

In the screen post-processing stage, convolution is used for edge detection.

Convolution: new pixel values are calculated based on pixels in eight directions around the pixel

Edge detection convolution operators contain convolution kernels in both horizontal and vertical directions

Gradient formula: G = sqrt (Gx*Gx + Gy*Gy)

To consider the performance, use: G = | Gx | + | Gy |

Vertex shaders calculate convolution texture sampling coordinates, reducing the amount of computation (more chips)

Sobel convolution is calculated in the element coloring stage, and the pixel color is obtained by interpolation.

The result of Sobel calculation is compared with that of gradient Gradient, which is larger than gradient and interpolated by EdgeColor.

Screen aftereffect calls OnRenderImage interface

Shader "EdgeDetection" {Properties {_ MainTex ("Base (RGB)", 2D) = "white" {} _ EdgeColor ("EdgeColor", Color) = (0,0,0,1) / / convolution gradient _ Gradient ("Gradient") Float) = 0.0} SubShader {Pass {ZTest Always Cull Off ZWrite Off CGPROGRAM # include "UnityCG.cginc" # pragma vertex vert # pragma fragment frag sampler2D _ MainTex Uniform half4 _ MainTex_TexelSize; / / fixed _ EdgeOnly; fixed4 _ EdgeColor; / / fixed4 _ BackgroundColor; fixed _ Gradient; struct v2f {float4 pos: SV_POSITION Half2 uv [9]: TEXCOORD0;}; v2f vert (appdata_img v) {v2f o; o.pos = UnityObjectToClipPos (v.vertex); half2 uv = v.texcoord O.uv [0] = uv + _ MainTex_TexelSize.xy * half2 (- 1,-1); o.uv [1] = uv + _ MainTex_TexelSize.xy * half2 (0,-1); o.uv [2] = uv + _ MainTex_TexelSize.xy * half2 (1,-1) O.uv [3] = uv + _ MainTex_TexelSize.xy * half2 (- 1,0); o.uv [4] = uv + _ MainTex_TexelSize.xy * half2 (0,0); o.uv [5] = uv + _ MainTex_TexelSize.xy * half2 (1,0) O.uv [6] = uv + _ MainTex_TexelSize.xy * half2 (- 1,1); o.uv [7] = uv + _ MainTex_TexelSize.xy * half2 (0,1); o.uv [8] = uv + _ MainTex_TexelSize.xy * half2 (1,1) Return o;} fixed luminance (fixed4 color) {return 0.2125 * color.r + 0.7154 * color.g + 0.0721 * color.b } half Sobel (v2f I) {const half Gx [9] = {- 1,0,1,-2,0,2 -1,0,1} Const half Gy [9] = {- 1,-2,-1, 0, 0, 0, 1, 2 1} Half texColor; half edgeX = 0; half edgeY = 0; for (int it = 0; it)

< 9; it++) { texColor = luminance(tex2D(_MainTex, i.uv[it])); edgeX += texColor * Gx[it]; edgeY += texColor * Gy[it]; } half edge = 1 - abs(edgeX) - abs(edgeY); return edge; } fixed4 frag(v2f i) : SV_Target { half edge = Sobel(i); fixed4 col = tex2D(_MainTex, i.uv[4]); if(edge>

_ Gradient) col = lerp (_ EdgeColor, tex2D (_ MainTex, i.uv [4]), edge); return col } ENDCG}} FallBack Off}

II. ShaderGraph

Grab the image buffer, translate from top to bottom, left and right, and multiply by the stroke color.

The four images are merged, subtracting the pixels in the range of the original image, leaving only the edge

Finally, merge the original image with the edge (interpolate to soften the edge)

Upgrade the project to URP and modify projectsetting-graphic-pielinesettings

Import ShaderGraph package, start dragging and dragging, really fragrant, good effect, fast speed, clear thinking

These are all the contents of the article "how to achieve 2D Edge Detection based on Unity". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.