Unity硬表面模型描边断裂问题解决过程记录

炯幸

2020.9.24日重大更新！！！
我的天！！
今天用我写的这些个烂代码处理了一个小两万面的模型
那叫一！个！卡！！
处理的时间得有十！分！钟！！
评论区有大佬给出了优化的方案
如果有大佬实现了更效率的办法，请务必留下链接让我拜读一下，万分感谢！！
------------------------原文分割线--------------------------
这篇文章很早以前我在CSDN发的，不过现在知乎用的多，在知乎再发一遍。
在Shader中使用单独一个Pass渲染轮廓线是非常常见的做法，其原理是在该Pass的顶点着色器中将模型顶点加上沿法线方向的偏移是原本的模型扩大一圈并剔除正向面，从而实现轮廓线效果。
但是使用该方法有一个要求就是模型的法线必须连续，也就是模型必须光滑表面，如果是硬表面的模型，由于转折处法线不连贯，会导致沿法线扩大的轮廓线模型断裂，如下图：
原因是转折处法线不连贯：
解决方案有二，但思路是一样的，就是将一个点光滑处理后的法线值存入该点的顶点色的RGB通道中，A通道可以用来控制轮廓线的粗细。需要注意的是，存入顶点色的法线必须是切线空间下的坐标，如果是模型空间下的坐标的话，一旦模型需要做动画，模型的轮廓线就会计算错误。一开始想要在3dsMax中通过脚本实现以上思路，结果发现Max脚本只能设置“控制点”的颜色，而不能分开设置同一顶点但是不同“Ploygon顶点”的颜色（不知道怎样描述），反正我是看了半天Max文档也没找到方法，如果有方法的话希望大佬能够在评论区告知，万分感谢！下面说一下我实验成功的两种解决方案。
（本人程序菜鸡，只会点基础，代码烂的一批，轻喷）
更新：才知道还有个“资产后处理（AssetPostprocessor）”这么个东西，感觉不错，可以看看这位大佬的文章：【Job/Toon Shading Workflow】自动生成硬表面模型Outline Normal
方案一：在Unity中实现以上思路，并将处理好的模型存为新的.asset文件（一开始我还以为获取模型的时候使用GetComponent<SkinnedMeshRenderer>().sharedMesh然后编辑该mesh就能就改资源文件，结果发现理解错了，这样并不行，而且Unity也不能保存Mesh为Fbx，只能存为.asset文件 ）。具体实现为，Unity中新建SetNormalsInVertColor脚本，脚本内容如下：

1. using System.Collections;
2. using System.Collections.Generic;
3. using UnityEngine;
4. using UnityEditor;
6. public class SetNormalsInVertColor : MonoBehaviour
7. {
8.     public string NewMeshPath = "Assets/";
9.     void Awake()
10.     {
11.         //获取Mesh
12.         Mesh mesh = new Mesh();
13.         if (GetComponent<SkinnedMeshRenderer>())
14.         {
15.             mesh = GetComponent<SkinnedMeshRenderer>().sharedMesh;
16.         }
17.         if (GetComponent<MeshFilter>())
18.         {
19.             mesh = GetComponent<MeshFilter>().sharedMesh;
20.         }
21.         Debug.Log(mesh.name);
23.         //声明一个Vector3数组，长度与mesh.normals一样，用于存放
24.         //与mesh.vertices中顶点一一对应的光滑处理后的法线值
25.         Vector3[] meshNormals = new Vector3[mesh.normals.Length];
27.         //开始一个循环，循环的次数 = mesh.normals.Length = mesh.vertices.Length = meshNormals.Length
28.         for (int i = 0; i < meshNormals.Length; i++)
29.         {
30.             //定义一个零值法线
31.             Vector3 Normal = new Vector3(0,0,0);
32.             //遍历mesh.vertices数组，如果遍历到的值与当前序号顶点值相同，则将其对应的法线与Normal相加
33.             for (int j = 0; j < meshNormals.Length; j++)
34.             {
35.                 if (mesh.vertices[j] == mesh.vertices[i])
36.                 {
37.                     Normal += mesh.normals[j];
38.                 }
39.             }
40.             //归一化Normal并将meshNormals数列对应位置赋值为Normal,到此序号为i的顶点的对应法线光滑处理完成
41.             //此时求得的法线为模型空间下的法线
42.             Normal.Normalize();
43.             meshNormals[i] = Normal;
44.         }
45.         
46.         //构建模型空间→切线空间的转换矩阵
47.         ArrayList OtoTMatrixs = new ArrayList();
48.         for (int i = 0; i < mesh.normals.Length; i++)
49.         {
50.             Vector3[] OtoTMatrix = new Vector3[3];
51.             OtoTMatrix[0] = new Vector3(mesh.tangents[i].x, mesh.tangents[i].y, mesh.tangents[i].z);
52.             OtoTMatrix[1] = Vector3.Cross(mesh.normals[i], OtoTMatrix[0]);
53.             OtoTMatrix[1] = new Vector3(OtoTMatrix[1].x * mesh.tangents[i].w, OtoTMatrix[1].y * mesh.tangents[i].w, OtoTMatrix[1].z * mesh.tangents[i].w);
54.             OtoTMatrix[2] = mesh.normals[i];
55.             OtoTMatrixs.Add(OtoTMatrix);
56.         }
58.         //将meshNormals数组中的法线值一一与矩阵相乘，求得切线空间下的法线值
59.         for (int i = 0; i < meshNormals.Length; i++)
60.         {
61.             Vector3 tNormal;
62.             tNormal = Vector3.zero;
63.             tNormal.x = Vector3.Dot(((Vector3[])OtoTMatrixs[i])[0], meshNormals[i]);
64.             tNormal.y = Vector3.Dot(((Vector3[])OtoTMatrixs[i])[1], meshNormals[i]);
65.             tNormal.z = Vector3.Dot(((Vector3[])OtoTMatrixs[i])[2], meshNormals[i]);
66.             meshNormals[i] = tNormal;
67.         }
69.         //新建一个颜色数组把光滑处理后的法线值存入其中
70.         Color[] meshColors = new Color[mesh.colors.Length];
71.         for (int i = 0; i < meshColors.Length; i++)
72.         {
73.             meshColors[i].r = meshNormals[i].x * 0.5f + 0.5f;
74.             meshColors[i].g = meshNormals[i].y * 0.5f + 0.5f;
75.             meshColors[i].b = meshNormals[i].z * 0.5f + 0.5f;
76.             meshColors[i].a = mesh.colors[i].a ;
77.         }
78.         
79.         //新建一个mesh，将之前mesh的所有信息copy过去
80.         Mesh newMesh = new Mesh();
81.         newMesh.vertices = mesh.vertices;
82.         newMesh.triangles = mesh.triangles;
83.         newMesh.normals = mesh.normals;
84.         newMesh.tangents = mesh.tangents;
85.         newMesh.uv = mesh.uv;
86.         newMesh.uv2 = mesh.uv2;
87.         newMesh.uv3 = mesh.uv3;
88.         newMesh.uv4 = mesh.uv4;
89.         newMesh.uv5 = mesh.uv5;
90.         newMesh.uv6 = mesh.uv6;
91.         newMesh.uv7 = mesh.uv7;
92.         newMesh.uv8 = mesh.uv8;
93.         //将新模型的颜色赋值为计算好的颜色
94.         newMesh.colors = meshColors;
95.         newMesh.colors32 = mesh.colors32;
96.         newMesh.bounds = mesh.bounds;
97.         newMesh.indexFormat = mesh.indexFormat;
98.         newMesh.bindposes = mesh.bindposes;
99.         newMesh.boneWeights = mesh.boneWeights;
100.         //将新mesh保存为.asset文件，路径可以是"Assets/Character/Shader/VertexColorTest/TestMesh2.asset"                          
101.         AssetDatabase.CreateAsset( newMesh, NewMeshPath);
102.         AssetDatabase.SaveAssets();
103.         Debug.Log("Done");
104.     }
105. }

复制代码

然后将该脚本挂载到要处理的模型上面，play一下就行了，新模型就会出现在设置好的路径下。必须要说的是，需要处理的模型本身必须要有顶点色通道，也就是说在模型软件导出时必须要设置过顶点色，要不然导出的模型没有顶点色通道，当然即便没有顶点色通道在脚本中也可以处理，但是我懒得研究了ε=(ο｀*)))
方案二：由于在Unity中无法对fbx资源进行修改，这就使得整个资源导入的流程不够流畅。于是我决定研究一下Fbx SDK，用C++写个小程序直接对Fbx文件进行操作，操作的内容与方案一完全一样：计算法线→空间转换→写入顶点色→导出文件。需要处理的模型本身必须要有顶点色通道，也就是说在模型软件导出时必须要设置过顶点色，否则导出的模型没有顶点色通道，当然即便没有顶点色通道在脚本中也可以处理，但是我懒得研究了ε=(ο｀*)))
按照Fbx sdk的文档所示，下载配置好sdk，代码如下：

1. #include "pch.h"
2. #include &l;iostream>
3. #include <fbxsdk.h>
5. void StoreNormalsToVertColor(FbxNode* node)
6. {
7.         if (node->GetChildCount())
8.         {
9.                 for (int i = 0; i < node->GetChildCount(); i++)
10.                 {
11.                         if (node->GetChild(i)->GetMesh())
12.                         {
13.                 //获取mesh
14.                                 FbxMesh* mesh = node->GetChild(i)->GetMesh();
15.                 //获取layer，顶点色、法切线之类的顶点信息几乎存在layer中
16.                                 FbxLayer* layer0 = mesh->GetLayer(0);
17.                 //依次获取layer中的顶点色层、法线层、切线层、副法线（或者叫副切线）层
18.                                 FbxLayerElementVertexColor* VertColor = layer0->GetVertexColors();
19.                                 FbxLayerElementNormal* VertNormal = layer0->GetNormals();
20.                                 FbxLayerElementTangent* VertTangent = layer0->GetTangents();
21.                                 FbxLayerElementBinormal* VertBinomral = layer0->GetBinormals();
22.                 //逐顶点遍历操作
23.                                 for (int j = 0; j < mesh->GetPolygonVertexCount(); j++)
24.                                 {
25.                                         //声明一个整型数组，用于存放与当前遍历顶点同属一个控制点的顶点序列
26.                     //数组用的是FbxSdk内置的数组，是动态数组，比较好使
27.                     FbxArray<int> SameControlPointsIndex;
28.                                         for (int k = 0; k < mesh->GetPolygonVertexCount(); k++)
29.                                         {
30.                                                 if (mesh->GetPolygonVertices()[k] == mesh->GetPolygonVertices()[j])
31.                                                 {
32.                                                         SameControlPointsIndex.Add(k);
33.                                                 }
34.                                         }
35.                                        
36.                     //声明一个Vector4数组，获取并存放上面声明的顶点序列数组中所有不同方向的法线
37.                     //需要注意的是，与Unity的顶点不同，这里的顶点中有很多法线的方向是重复的
38.                     //如果将重复的法线也参与计算则算出来的值是错误的，轮廓线会扭曲，说出来都是泪
39.                     //所以使用AddUnique保证去掉重复的法线方向
40.                                         FbxArray<FbxVector4> Normals;
41.                                         for (int x = 0; x < SameControlPointsIndex.Size(); x++)
42.                                         {
43.                                                 FbxVector4 Normal = VertNormal->GetDirectArray()[SameControlPointsIndex[x]];
44.                                                 Normals.AddUnique(Normal);
45.                                         }
46.                     //将所有不同方向的法线加在一起并归一化获得光滑法线
47.                                         FbxVector4 SmoothNormal;
48.                                         for (int n = 0; n < Normals.Size(); n++)
49.                                         {
50.                                                 SmoothNormal += Normals[n];
51.                                         }
52.                                         SmoothNormal.Normalize();
53.                     //分别获取当前顶点的切线、法线、副切线用于构建模型→切线空间的转换矩阵
54.                     //需要注意的是：法线、切线、副切线的映射方式（也就是存储方式）是与顶点
55.                     //序列一一对应，所以直接GetDirectArray()[顶点序号]就可以
56.                     FbxVector4 Tangent = VertTangent->GetDirectArray()[j];
57.                                         FbxVector4 Normal = VertNormal->GetDirectArray()[j];
58.                                         FbxVector4 Bitangent = VertBinomral->GetDirectArray()[j];
59.                                         //将法线从模型空间转为切线空间
60.                                         //FbxSdk的内置矩阵类型不会使，算出来的值有问题，所以还是手动计算
61.                     FbxVector4 tmpVector;
62.                                         tmpVector = SmoothNormal;
63.                                         tmpVector[0] = Tangent.DotProduct(SmoothNormal);
64.                                         tmpVector[1] = Bitangent.DotProduct(SmoothNormal);
65.                                         tmpVector[2] = Normal.DotProduct(SmoothNormal);
66.                                         tmpVector[3] = 0;
67.                                         SmoothNormal = tmpVector;
69.                     //获取当前顶点的颜色信息存放于其layer中的序号
70.                     //与法切副不同，顶点色数据在layer中的存储方式（映射Mapping方式）稍微复杂
71.                     //首先要使用GetIndexArray()[顶点序号]获取其颜色值在DirectArray中的序号
72.                     //然后使用GetDirectArray()[获得的序号]来获得该顶点的顶点色信息
73.                                         int VertColorIndex = VertColor->GetIndexArray()[j];
74.                                         //声明一个颜色值，将法线数值范围从-1~1处理为0~1后存入RGB通道中，A通道保持
75.                     //不变，因为其中存放着轮廓线大小信息
76.                                         FbxColor Color;
77.                                         Color.mRed = SmoothNormal[0] * 0.5f + 0.5f;
78.                                         Color.mGreen = SmoothNormal[1] * 0.5f + 0.5f;
79.                                         Color.mBlue = SmoothNormal[2] * 0.5f + 0.5f;
80.                                         Color.mAlpha = VertColor->GetDirectArray()[VertColorIndex].mAlpha;
81.                     //将颜色写入顶点颜色layer中
82.                                         VertColor->GetDirectArray().SetAt(VertColorIndex, Color);
83.                                 }
84.                         }
85.             //递归调用，确保场景中所有mesh都得到处理
86.             StoreNormalsToVertColor(node->GetChild(i));
87.                 }
88.         }
89. }
91. int main(int argc, char** argv) {
93.         // lFilename是输入路径，lFilename2是输出路径
94.         const char* lFilename = "Weapon.fbx";
95.         const char* lFilename2 = "Export.fbx";
96.    
97.     //主函数中几乎都是FbxSdk文档中所写的代码，是导入导出fbx所需要的的标准流程
99.         // Initialize the SDK manager. This object handles all our memory management.
100.         FbxManager* lSdkManager = FbxManager::Create();
102.         // Create the IO settings object.
103.         FbxIOSettings *ios = FbxIOSettings::Create(lSdkManager, IOSROOT);
104.         lSdkManager->SetIOSettings(ios);
106.         // Create an importer using the SDK manager.
107.         FbxImporter* lImporter = FbxImporter::Create(lSdkManager, "");
109.         // Use the first argument as the filename for the importer.
110.         if (!lImporter->Initialize(lFilename, -1, lSdkManager->GetIOSettings())) {
111.                 printf("Call to FbxImporter::Initialize() failed.\n");
112.                 printf("Error returned: %s\n\n", lImporter->GetStatus().GetErrorString());
113.                 exit(-1);
114.         }
116.         // Create a new scene so that it can be populated by the imported file.
117.         FbxScene* lScene = FbxScene::Create(lSdkManager, "myScene");
119.         // Import the contents of the file into the scene.
120.         lImporter->Import(lScene);
122.         // The file is imported; so get rid of the importer.
123.         lImporter->Destroy();
125.     //获取场景中根节点，然后对其调用自定义的StoreNormalsToVertColor函数       
126.         FbxNode* lRootNode = lScene->GetRootNode();
127.         if (lRootNode) {
128.                 StoreNormalsToVertColor(lRootNode);
129.         }
130.    
131.     //导出Fbx文件
132.     FbxExporter* lExporter = FbxExporter::Create(lSdkManager, "");
133.         bool lExportStatus = lExporter->Initialize(lFilename2, -1, lSdkManager->GetIOSettings());
134.         if (!lExportStatus) {
135.                 printf("Call to FbxExporter::Initialize() failed.\n");
136.                 printf("Error returned: %s\n\n", lExporter->GetStatus().GetErrorString());
137.                 return false;
138.         }
139.         lExporter->Export(lScene);
140.     lExporter->Destroy();
141.        
142.         // Destroy the SDK manager and all the other objects it was handling.
143.         lSdkManager->Destroy();
144.         return 0;
145. }

复制代码

经过以上两种方案处理后的模型，在Unity shader中通过读取顶点颜色中的法线信息，然后将其转换到模型空间下与模型顶点坐标相加即可挤出轮廓线模型，shader中轮廓线pass代码如下：

1. Pass
2. {
3.         NAME "OUTLINE"
4.         Cull Front
5.         CGPROGRAM
6.         #pragma vertex vert
7.         #pragma fragment frag
8.         // make fog work
9.         #pragma multi_compile_fog
10.         #include "UnityCG.cginc"
11.         struct a2v
12.         {
13.                 float4 vertex : POSITION;
14.                 float3 normal : NORMAL;
15.                 float4 tangent : TANGENT;
16.                 float4 vertexColor : COLOR0;
17.         };
18.         struct v2f
19.         {
20.                 UNITY_FOG_COORDS(1)
21.                 float4 vertex : SV_POSITION;
22.         };
23.         fixed4 _OutlineColor;
24.         half _OutlineWidth;
25.         v2f vert(a2v v)
26.         {
27.                 v2f o;
28.                 //从顶点颜色中读取法线信息，并将其值范围从0~1还原为-1~1
29.                 float3 vertNormal = v.vertexColor.rgb * 2 - 1;
30.                 //使用法线与切线叉乘计算副切线用于构建切线→模型空间转换矩阵
31.                 float3 bitangent = cross(v.normal,v.tangent.xyz) * v.tangent.w * unity_WorldTransformParams.w;
32.                 //构建切线→模型空间转换矩阵
33.                 float3x3 TtoO = float3x3(v.tangent.x, bitangent.x, v.normal.x,
34.                                                                  v.tangent.y, bitangent.y, v.normal.y,
35.                                                                  v.tangent.z, bitangent.z, v.normal.z);
36.                 //将法线转换到模型空间下
37.                 vertNormal = mul(TtoO, vertNormal);
38.                 //模型坐标 + 法线 * 自定义粗细值 * 顶点颜色A通道 = 轮廓线模型                                       
39.                 o.vertex = UnityObjectToClipPos(v.vertex + vertNormal *_OutlineWidth * v.vertexColor.a);
40.                 UNITY_TRANSFER_FOG(o,o.vertex);
41.                 return o;
42.         }
43.         fixed4 frag(v2f i) : SV_Target
44.         {
45.                 // apply fog
46.                 UNITY_APPLY_FOG(i.fogCoord, _OutlineColor);
47.                 return _OutlineColor;
48.         }
49.         ENDCG
50. }

复制代码

Unity中轮廓线显示效果如下（模型颜色为顶点色）：
一个部分光滑部分硬边的球体轮廓线效果如下：
简单做了一个骨骼动画，轮廓线也没有出现问题：
以上都是非常简单的测试，以后发现问题再解决，就这样