【unity】网格描边方法

【unity】网格描边方法

介绍对模型四边网格的三种描边方法：包括纯Shader方法、创建网格方法和后处理方法。于增强场景中3D模型的轮廓，使其在视觉上更加突出和清晰。这种效果可以用于增强三维场景中的物体、角色或环境，使其在视觉上更加吸引人。

网格描边方法资源

Shader方法

使用GeometryShader方法对三角网进行计算，目的是保留距离最短的两条边。在进行计算时，首先需要建立一个float2 dist来储存点的信息。在进行插值后，需要保留边的dist，其中一个数值为0，以此为依据来绘制边。下图展示了顶点dist的赋值情况。

这种方法可以让我们在渲染三角网时，根据点之间的距离信息来动态地调整边的绘制，从而实现更加真实和精细的渲染效果。

实现效果

实现shader

Shader "Unlit/WireframeMesh"
{
    Properties
    {
        _MainTex("Texture", 2D) = "white" { }
        _WireColor("WireColor", Color) = (1, 0, 0, 1)
        _FillColor("FillColor", Color) = (1, 1, 1, 1)
        _WireWidth("WireWidth", Range(0, 1)) = 1

    }
        SubShader
        {
            Tags { "RenderType" = "Transparent" "Queue" = "Transparent" }
            LOD 100
            AlphaToMask On // 为此通道启用减法混合
            Pass
            {
                Blend SrcAlpha OneMinusSrcAlpha
                Cull Off
                CGPROGRAM

                #pragma vertex vert
                #pragma geometry geom //添加几何阶段
                #pragma fragment frag

                #include "UnityCG.cginc"

                struct appdata
                {
                    float4 vertex: POSITION;
                    float2 uv: TEXCOORD0;
                };

                struct v2g 
                {
                    float2 uv: TEXCOORD0;
                    float4 vertex: SV_POSITION;
                };

                struct g2f
                {
                    float2 uv: TEXCOORD0;
                    float4 vertex: SV_POSITION;
                    float2 dist: TEXCOORD1;
                    float maxlenght : TEXCOORD2;
                };

                sampler2D _MainTex;
                float4 _MainTex_ST;

                float4 _FillColor, _WireColor;
                float _WireWidth, _Clip, _Lerp, _WireLerpWidth;
				//视口到几何
                v2g vert(appdata v) 
                {
                    v2g o;
                    o.vertex = v.vertex;
                    o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                    return o;
                }
				//几何到片元
                [maxvertexcount(3)]
                void geom(triangle v2g IN[3], inout TriangleStream < g2f > triStream)
                {
                    //读取三角网各个顶点
                    float3 p0 = IN[0].vertex;
                    float3 p1 = IN[1].vertex;
                    float3 p2 = IN[2].vertex;
					//计算三角网每一边的长度
                    float v0 = length(p1 - p2);
                    float v1 = length( p2 - p0);
                    float v2 = length( p0 - p1);
					//求出最长边
                    float v_max = max(v2,max(v0, v1));
					//每一边减最长边，小于0时为0，等于0时为1
                    float f0 = step(0, v0 - v_max);
                    float f1 = step(0, v1 - v_max);
                    float f2 = step(0, v2 - v_max);

                    //赋值传到片元操作
                    g2f OUT;
                    OUT.vertex = UnityObjectToClipPos(IN[0].vertex);
                    OUT.uv = IN[0].uv;
                    OUT.maxlenght = v_max;
                
                    OUT.dist = float2(f1, f2);
                    triStream.Append(OUT);

                    OUT.vertex = UnityObjectToClipPos( IN[1].vertex);
                    OUT.uv = IN[1].uv;
                    OUT.maxlenght = v_max;
                    OUT.dist = float2(f2, f0);
                    triStream.Append(OUT);

                    OUT.vertex = UnityObjectToClipPos( IN[2].vertex);
                    OUT.maxlenght = v_max;
                    OUT.uv = IN[2].uv;
                    OUT.dist = float2(f0, f1);
                    triStream.Append(OUT);
                }
				//片元阶段
                fixed4 frag(g2f i) : SV_Target
                {
                    fixed4 col = tex2D(_MainTex, i.uv );
                    fixed4 col_Wire= col* _FillColor;
                    //取dist最小值
                    float d =  min(i.dist.x, i.dist.y);
                    //d小于线宽是赋值线颜色，否则赋值背景颜色
                    col_Wire = d < _WireWidth ? _WireColor : col_Wire;
                    fixed4 col_Tex = tex2D(_MainTex, i.uv);
                    return col_Wire;
                }
                ENDCG

            }
        }
}

该方法不支持webGL,原因webGL不支持GeometryShader。

介绍一个根据uv创建网格的方法，虽然支持webGL，但是局限性太大，不做详细介绍，附上shader

Shader "Unlit/WireframeUV"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _FillColor("FillColor", Color) = (1, 1, 1, 1)
       [HDR] _WireColor("WireColor", Color) = (1, 0, 0, 1)
        _WireWidth("WireWidth", Range(0, 1)) = 1
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 100
        AlphaToMask On
        Pass
        {
             Tags { "RenderType" = "TransparentCutout" }
            Blend SrcAlpha OneMinusSrcAlpha
            Cull Off
            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;
            fixed4 _FillColor;
            fixed4 _WireColor;
            float _WireWidth;


            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);
                fixed2 uv2 = abs(i.uv - fixed2(0.5f, 0.5f));
                float minUV = max(uv2.x, uv2.y);
                col = minUV < 0.5- _WireWidth ? col* _FillColor : _WireColor;
                return col;
            }
            ENDCG
        }
    }
}

创建网格方法

这个方法支持在内置built-in管线中使用，实现原理和shader方法类似，不同的是需要构建线网格。根据原有三角网格抽取其中最短两条重新绘制。

实现效果

因为CommandBuffer方法暂时无法设置线宽，用了一些后处理方法

实现的方法

using System.Collections.Generic;
using UnityEngine;
using UnityEngine.Rendering;

public class CamerDrawMeshDemo : MonoBehaviour
{
    [SerializeField]
    MeshFilter meshFilter;
    CommandBuffer cmdBuffer;
    [SerializeField]
    Material cmdMat1;

    // Start is called before the first frame update
    void Start()
    {
        //创建一个CommandBuffer
        cmdBuffer = new CommandBuffer() { name = "CameraCmdBuffer" };
        Camera.main.AddCommandBuffer(CameraEvent.AfterForwardOpaque, cmdBuffer);
        DarwMesh();
    }
    //绘制网格
    void DarwMesh()
    {
        cmdBuffer.Clear();
        Mesh  m_grid0Mesh = meshFilter.mesh;//读取原有网格，这里需要开启网格可读写
        cmdBuffer.DrawMesh(CreateGridMesh(m_grid0Mesh), Matrix4x4.identity, cmdMat1);
    }
    //创建网格
    Mesh CreateGridMesh(Mesh TargetMesh)
    {
     
        Vector3[] vectors= getNewVec(TargetMesh.vertices);
        //模型坐标转换到世界坐标
        Vector3[] getNewVec(Vector3[] curVec)
        {
            int count = curVec.Length;
            Vector3[] vec = new Vector3[count];
            for (int i = 0; i < count; i++)
            {
                //坐标转型，乘上变化矩阵
                vec[i] =(Vector3)(transform.localToWorldMatrix* curVec[i])+transform.position;
            }
            return vec;
        }
        int[] triangles = TargetMesh.triangles;
        List<int> indicesList = new List<int>(2);
        //筛选绘制边
        for (int i = 0; i < triangles.Length; i+=3)
        {
            Vector3 vec;
            int a = triangles[i];
            int b = triangles[i+1];
            int c = triangles[i+2];
            vec.x = Vector3.Distance(vectors[a], vectors[b]);
            vec.y = Vector3.Distance(vectors[b], vectors[c]);
            vec.z = Vector3.Distance(vectors[c], vectors[a]);
            addList(vec, a,b,c);
        }
        void addList(Vector3 vec,int a,int b,int c)
        {
            if (vec.x< vec.y|| vec.x <vec.z)
            {
                indicesList.Add(a);
                indicesList.Add(b);
            }
            if (vec.y < vec.x || vec.y < vec.z)
            {
                indicesList.Add(b);
                indicesList.Add(c);
            }
            if (vec.z < vec.x || vec.z < vec.y)
            {
                indicesList.Add(c);
                indicesList.Add(a);
            }
        }
        int[] indices = indicesList.ToArray();
        //创建网格
        Mesh mesh = new Mesh();
        mesh.name = "Grid ";
        mesh.vertices = vectors;
        mesh.SetIndices(indices, MeshTopology.Lines, 0);
        return mesh;
    }
}

后处理方法

利用深度纹理和法线纹理来比较相邻像素之间的相似性，以判断它们是否位于物体的边缘，并进而实现描边效果。具体而言，该算法会对相邻像素的深度值和法线值进行比较，若它们之间的差异超过一定阈值，则认为这两个像素位于物体的边缘上。通过这一方法，我们可以在渲染时对边缘进行特殊处理，以实现描边效果。

实现效果

实现方法

建立后渲染脚本挂载在主相机上

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class SceneOnlineDemo : MonoBehaviour
{
   public  Shader OnlineShader;
    Material material;
    [ColorUsage(true, true)]
    public Color ColorLine;
    public Vector2 vector;
    public float LineWide;
    // Start is called before the first frame update
    void Start()
    {
        material = new Material(OnlineShader);

        GetComponent<Camera>().depthTextureMode |= DepthTextureMode.DepthNormals;
    }

    void Update()
    {
        
    }
    void OnRenderImage(RenderTexture src, RenderTexture dest)
    {
        if (material != null)
        {
            material.SetVector("_ColorLine", ColorLine);
            material.SetVector("_Sensitivity", vector);
            material.SetFloat("_SampleDistance", LineWide);
            Graphics.Blit(src, dest, material);
        }
        else
        {
            Graphics.Blit(src, dest);
        }
    }
}

后处理shader挂载在SceneOnlineDemo 脚本上

Shader "Unlit/SceneOnlineShader"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
      [HDR] _ColorLine("ColorLine", Color) = (1,1,1,1)   //颜色，一般用fixed4
        _Sensitivity("Sensitivity", Vector) = (1, 1, 1, 1)    //xy分量分别对应法线和深度的检测灵敏度，zw分量没有实际用途
        _SampleDistance("Sample Distance", Float) = 1.0
    }
        SubShader
    {
        Tags { "RenderType" = "Opaque" }
        LOD 100

        Pass
        {
            ZTest Always Cull Off ZWrite Off
      
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag


            #include "UnityCG.cginc"

            sampler2D _MainTex;
            half4 _MainTex_TexelSize;
            sampler2D _CameraDepthNormalsTexture;    //深度+法线纹理
            sampler2D _CameraDepthTexture;
            fixed4 _ColorLine;
            float _SampleDistance;
            half4 _Sensitivity;

            struct v2f
            {
                half2 uv[5]: TEXCOORD0;
                float4 vertex : SV_POSITION;
            };

            v2f vert (appdata_img v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                half2 uv = v.texcoord;
                o.uv[0] = uv;
                #if UNITY_UV_STARTS_AT_TOP
                if (_MainTex_TexelSize.y < 0)
                    uv.y = 1 - uv.y;
                #endif
                //建立相邻向量数组
                o.uv[1] = uv + _MainTex_TexelSize.xy * half2(1, 1) * _SampleDistance;
                o.uv[2] = uv + _MainTex_TexelSize.xy * half2(-1, -1) * _SampleDistance;
                o.uv[3] = uv + _MainTex_TexelSize.xy * half2(-1, 1) * _SampleDistance;
                o.uv[4] = uv + _MainTex_TexelSize.xy * half2(1, -1) * _SampleDistance;
                return o;
            }
            //检查是否相似
            half CheckSame(half4 center, half4 sample) {
                half2 centerNormal = center.xy;
                float centerDepth = DecodeFloatRG(center.zw);
                half2 sampleNormal = sample.xy;
                float sampleDepth = DecodeFloatRG(sample.zw);

                // 法线相差
                half2 diffNormal = abs(centerNormal - sampleNormal) * _Sensitivity.x;
                int isSameNormal = (diffNormal.x + diffNormal.y) < 0.1;
                // 深度相差
                float diffDepth = abs(centerDepth - sampleDepth) * _Sensitivity.y;
                // 按距离缩放所需的阈值
                int isSameDepth = diffDepth < 0.1 * centerDepth;

                // return:
                // 1 - 如果法线和深度足够相似
                // 0 - 相反
                return isSameNormal * isSameDepth ? 1.0 : 0.0;
            }
            fixed4 frag (v2f i) : SV_Target
            {
                    fixed4 col = tex2D(_MainTex,  i.uv[0]);
                    half4 sample1 = tex2D(_CameraDepthNormalsTexture, i.uv[1]);
                    half4 sample2 = tex2D(_CameraDepthNormalsTexture, i.uv[2]);
                    half4 sample3 = tex2D(_CameraDepthNormalsTexture, i.uv[3]);
                    half4 sample4 = tex2D(_CameraDepthNormalsTexture, i.uv[4]);
                    half edge = 1.0;
                    edge *= CheckSame(sample1, sample2);
                    edge *= CheckSame(sample3, sample4);
                    fixed4 withEdgeColor = lerp(_ColorLine, col, edge);
               

                 return withEdgeColor;
            }
            ENDCG
        }
    }
}