企业官网建设流程全解析

1. 线框渲染到底解决什么问题，为什么值得单独装一个插件

做 Unity 项目的人，尤其是做建筑可视化、工业仿真、机械拆解演示、科幻风 UI 或者低多边形（Low Poly）美术风格的朋友，大概率都碰到过一个很具体的需求：我想让模型以“线框”的形式显示出来，或者在线框和实体之间做过渡、叠加、闪烁。这个需求听起来简单，真动手做的时候你会发现 Unity 内置的渲染管线里压根没有现成的“线框模式”开关——编辑器 Scene 视图里那个 Wireframe 显示模式只是编辑器自己的调试功能，打包出去就没了，运行时根本用不了。

这就是Wireframe Shader这类插件存在的意义。它要解决的核心问题就一句话：在运行时（Runtime）把任意 Mesh 以线框形式渲染出来，并且能控制线框的粗细、颜色、透明度、显示范围，甚至动态生成线框纹理。标题里提到的 “All In One” 说明它不是单一功能，而是一套组合拳，通常包含三类能力：经典线框渲染（基于几何着色器或重心坐标）、GPU 动态线框（运行时按需生成，不依赖预烘焙数据）、线框纹理生成（把线框结果输出成贴图供后续使用）。

适合谁来参考这篇内容？我把它分成三类。第一类是刚接触 Shader 的 Unity 开发者，你可能用过 Shader Graph 但没系统写过几何着色器，想找一个能直接跑起来、又能看懂原理的线框方案。第二类是做工具链和编辑器扩展的工程师，你需要把线框能力集成到自己的美术管线里，比如批量生成线框预览图。第三类是技术美术（TA）和独立开发者，你关心的是性能开销、移动端能不能跑、和 URP/HDRP 的兼容性这些实际问题。

我先把结论放前面：线框渲染在 Unity 里从来不是“一个 Shader 搞定”的事，它是一组技术路线的取舍。选错了路线，你在 PC 上跑得好好的，一到移动端就掉帧；或者线框粗细随相机距离乱变，近处粗成一片、远处细到看不见。下面我会把这几条路线拆开讲清楚，包括它们各自的原理、参数怎么算、坑在哪里。

2. 三条主流技术路线拆解与选型逻辑

在动手之前，你得先明白线框渲染在 GPU 层面到底有几种实现方式。这不是玄学，每种方式背后对应的是不同的硬件特性和性能模型。我把市面上 Wireframe Shader 类插件常见的三种路线列出来，你可以对照自己的项目需求选。

2.1 基于几何着色器的经典线框：兼容性好但要注意平台限制

这是最“经典”的做法，也是很多老牌线框插件的默认方案。原理不复杂：在渲染管线里插入一个几何着色器（Geometry Shader）阶段，它接收一个三角形图元，然后把这个三角形的三条边“膨胀”成三个细长的四边形（也就是用三角形带模拟出有宽度的线段），再输出给片元着色器去上色。

为什么用几何着色器？因为普通的顶点-片元管线没法凭空“造”出新的几何体，而线框的本质就是要把“面”变成“线”，这需要改变图元拓扑结构，几何着色器正好干这个。它的优势是不依赖模型本身的顶点数据，任何 Mesh 丢进来都能直接出线框，不需要美术提前烘焙重心坐标或者 UV 信息。

但这里有个硬伤你必须知道：几何着色器在部分移动端 GPU 上支持很差，甚至完全不支持。尤其是很多中低端安卓机的 GPU 架构对几何着色器的吞吐量极低，一旦三角形数量上去，性能会断崖式下跌。所以如果你的项目要发移动端，这条路线要慎用，或者至少做一个降级开关。

参数方面，线框粗细通常通过一个_WireThickness之类的属性控制，但要注意它是在屏幕空间还是世界空间计算。屏幕空间的好处是无论相机远近，线框看起来粗细一致；世界空间则会让线框随距离缩放，近大远小。做建筑演示一般用屏幕空间，做科幻特效可能故意用世界空间制造纵深感。

2.2 基于重心坐标的烘焙式线框：性能最优但需要预处理

这条路线是移动端的救星。核心思路是：在建模阶段或者导入阶段，把每个三角形的重心坐标（Barycentric Coordinates）烘焙到顶点颜色或者额外的 UV 通道里。所谓重心坐标，就是三角形内任意一点相对于三个顶点的权重，三个顶点的重心坐标分别是 (1,0,0)、(0,1,0)、(0,0,1)。片元着色器拿到插值后的重心坐标，只要判断“这个点是不是靠近某条边”，就能决定要不要画线。

判断逻辑很直接：重心坐标三个分量里，如果最小的那个分量小于某个阈值（比如 0.02），说明这个点离某条边很近，就把它染成线框颜色，否则透明。这个阈值就是控制线框粗细的参数，而且它天然是屏幕空间无关的——因为重心坐标是模型空间插值的，线框粗细会随距离变化。想要屏幕空间恒定粗细，得额外做一次导数计算（用fwidth或者手动算屏幕空间梯度）。

这条路线最大的优点是性能极好，因为它没有增加任何几何体，只是在片元着色器里多做了几次比较运算，移动端跑起来毫无压力。缺点是需要预处理：你得写一个编辑器脚本，遍历 Mesh 的每个三角形，把重心坐标写进顶点数据。而且这个预处理是破坏性的，会占用额外的顶点通道（通常是 UV2 或 Color），如果你的模型顶点通道本来就紧张，就得权衡。

2.3 GPU 动态线框与线框纹理生成：灵活但实现复杂度高

标题里特别提到“GPU 动态线框”和“线框纹理生成”，这其实是两个进阶能力。动态线框指的是不预先烘焙重心坐标，而是在运行时用 Compute Shader 或者几何着色器动态计算线框数据。比如你有一个程序化生成的 Mesh，顶点数据每帧都在变，没法提前烘焙，这时候就得靠 GPU 实时算。

线框纹理生成则是另一个维度的需求：把线框渲染的结果输出到一张 RenderTexture，然后这张贴图可以拿去做 UI 背景、做后处理遮罩、做描边效果的输入。这个能力在工具链里特别有用，比如你要批量给几百个模型生成线框缩略图，总不能一个个截图吧，用 RenderTexture 离屏渲染效率高得多。

选型逻辑我总结成一张表，你对着自己的项目情况看：

提示：不要迷信“All In One”就一定要全用上。实际项目里我通常只启用一到两条路线，比如 PC 端用几何着色器，移动端切重心坐标，用宏定义在编译期区分，这样包体和运行时开销都可控。

3. 重心坐标线框的核心实现与参数计算

既然重心坐标方案是移动端最实用的，我把它单独拎出来讲透。这部分是整篇内容里最“硬”的干货，你看懂了就能自己手写一个不依赖任何插件的线框 Shader。

3.1 重心坐标烘焙脚本怎么写

Unity 的 Mesh 类提供了mesh.colors和mesh.uv2等通道，我们可以把重心坐标塞进Color通道（因为 Color 是 float4，够用）。烘焙脚本的核心逻辑是：遍历mesh.triangles，每三个索引构成一个三角形，给这三个顶点分别赋 (1,0,0)、(0,1,0)、(0,0,1)。

但这里有个坑：Unity 的 Mesh 顶点是共享的，一个顶点可能被多个三角形共用。如果你直接按三角形遍历赋值，后一个三角形会覆盖前一个三角形的重心坐标，导致线框错乱。解决办法是先把 Mesh 拆成不共享顶点的版本，也就是每个三角形用独立的三个顶点。这会增加顶点数量（大约三倍），但换来正确的重心坐标。

// 简化版烘焙逻辑示意 Mesh BakeBarycentric(Mesh source) { Mesh mesh = new Mesh(); var verts = source.vertices; var tris = source.triangles; var newVerts = new Vector3[tris.Length]; var colors = new Color[tris.Length]; for (int i = 0; i < tris.Length; i += 3) { newVerts[i] = verts[tris[i]]; newVerts[i+1] = verts[tris[i+1]]; newVerts[i+2] = verts[tris[i+2]]; colors[i] = new Color(1,0,0,1); colors[i+1] = new Color(0,1,0,1); colors[i+2] = new Color(0,0,1,1); } mesh.vertices = newVerts; mesh.colors = colors; mesh.triangles = Enumerable.Range(0, tris.Length).ToArray(); return mesh; }

这段代码是示意，实际用的时候还要处理法线、UV、切线等通道的复制，否则模型会丢失光照信息。我建议把烘焙做成一个AssetPostprocessor，模型导入时自动处理，省得手动一个个点。

3.2 片元着色器里的线宽判断与抗锯齿

拿到重心坐标后，片元着色器里的核心就一行判断：取重心坐标三个分量的最小值，和阈值比较。但直接硬比较会有严重的锯齿，因为线框边缘是硬切的。解决办法是用smoothstep做平滑过渡：

float3 bary = i.color.rgb; float minBary = min(bary.x, min(bary.y, bary.z)); float wire = smoothstep(_Threshold, _Threshold + _AAWidth, minBary); // wire 为 0 表示在线框上，为 1 表示在面内

这里的_Threshold控制线框粗细，_AAWidth控制抗锯齿过渡带宽度。注意_Threshold是模型空间的，如果你想要屏幕空间恒定粗细，得用fwidth(minBary)来动态调整阈值。fwidth返回的是该值在屏幕空间的变化率，用它乘以一个系数就能得到与距离无关的线宽。

我实测下来，_Threshold取 0.01 到 0.03 之间比较合适，太小线框会闪烁（因为低于像素精度），太大线框会糊成一片。_AAWidth一般取_Threshold的 0.5 到 1 倍，过渡自然又不至于太软。

3.3 线框与实体的混合模式设计

纯线框往往不够用，实际项目里更常见的是“实体+线框叠加”或者“线框渐显”效果。这就需要在 Shader 里做混合。最简单的做法是用两个 Pass：一个 Pass 渲染实体（正常光照），另一个 Pass 渲染线框（透明混合，Blend SrcAlpha OneMinusSrcAlpha），线框 Pass 的ZWrite Off但ZTest LEqual，这样线框只显示在实体表面，不会穿透到背面。

如果你想要“线框逐渐变成实体”的动画效果，可以用一个_WireAmount参数，在片元着色器里根据重心坐标和这个参数做插值。当_WireAmount从 0 变到 1，线框从细变粗最后覆盖整个面，视觉上就是线框“填充”成实体的过程。这个效果在科幻 UI 和加载动画里特别常见。

注意：线框 Pass 一定要处理好深度测试。如果ZTest设成Always，背面的线框会透过来，看起来像 X 光效果；如果设成LEqual，就只有正面线框可见。两种效果都有用，看你的美术需求。

4. 几何着色器路线的完整实操与性能调优

虽然移动端不推荐几何着色器，但 PC 端做建筑和工业项目时，它的“免预处理”特性太香了。这部分我讲清楚怎么从零写一个几何着色器线框，以及怎么把它调优到能跑大场景。

4.1 几何着色器的输入输出结构定义

几何着色器的写法和其他 Shader 阶段差别很大，它的输入是一个图元的所有顶点，输出需要手动Append到TriangleStream。一个标准的三角形线框几何着色器大概长这样：

[maxvertexcount(3)] void geom(triangle v2g input[3], inout TriangleStream<g2f> stream) { g2f o; for (int i = 0; i < 3; i++) { o.pos = UnityObjectToClipPos(input[i].vertex); o.uv = input[i].uv; o.color = float4(1,1,1,1); stream.Append(o); } stream.RestartStrip(); }

等等，这段代码只是把三角形原样输出了，并没有变成线框。真正的线框几何着色器要复杂得多：它需要把每条边扩展成一个四边形，每个四边形用两个三角形表示，所以一个输入三角形要输出六个顶点（三条边各两个三角形）。maxvertexcount要设成 6 或者更高。

具体做法是：对三角形的每条边，计算边在屏幕空间的法线方向，然后沿法线方向把边的两个端点各偏移_Thickness的距离，形成四边形的四个角。这里的关键是偏移要在屏幕空间做，否则线宽会随距离变化。计算屏幕空间法线需要把顶点变换到裁剪空间后，用normalize(cross(p1-p0, p2-p0))之类的操作，细节比较绕，建议直接参考成熟插件的实现。

4.2 线框粗细的屏幕空间计算与深度偏移

屏幕空间线宽的计算是几何着色器的核心难点。我踩过的坑是：直接在裁剪空间偏移会导致透视除法后线宽不一致。正确做法是先把顶点变换到 NDC（归一化设备坐标），在 NDC 里计算边的方向，然后偏移量要乘以pos.w来抵消透视除法的影响。

深度偏移（Depth Bias）是另一个必须处理的点。线框和实体如果共面，会出现 Z-Fighting 闪烁。解决办法是在几何着色器输出时给线框加一个微小的深度偏移，或者用Offset -1, -1指令。我一般用Offset因子，简单可靠。

4.3 大批量模型的合批与剔除策略

几何着色器会禁用 Unity 的动态合批（Dynamic Batching），因为合批后的 Mesh 图元拓扑会变。这意味着场景里几百个模型每个都是独立 Draw Call，性能压力很大。我的应对策略是：对静态模型做手动合批，把多个小模型合并成一个 Mesh 再渲染；对动态模型，用 GPU Instancing 配合几何着色器（需要 Unity 2018 以上版本，且 Shader 要支持UNITY_INSTANCING_BUFFER）。

另外，几何着色器对视锥剔除不友好，因为它在顶点着色器之后才展开几何体，剔除阶段拿不到最终图元。所以大场景里要手动做距离剔除，超过一定距离的模型直接关掉线框 Pass，用实体渲染代替。

5. 线框纹理生成与工具链集成实战

线框纹理生成这个能力，单独拿出来讲是因为它在工具链里的价值被严重低估了。很多团队还在用截图的方式做模型预览图，效率低且分辨率不可控。用 RenderTexture 离屏渲染，可以批量、自动化、高分辨率地生成线框图。

5.1 RenderTexture 离屏渲染的关键配置

核心思路是：创建一个相机，设置targetTexture为一个 RenderTexture，把模型放在相机视野内，用线框材质渲染一帧，然后ReadPixels读回 CPU 存成 PNG。关键配置有几个：RenderTexture 的depth要设成 24 或 32，否则深度测试会出错；相机的clearFlags设成SolidColor并给一个透明或纯色背景；orthographic通常设成 true，这样模型不会因透视变形。

RenderTexture rt = new RenderTexture(1024, 1024, 24, RenderTextureFormat.ARGB32); cam.targetTexture = rt; cam.Render(); RenderTexture.active = rt; Texture2D tex = new Texture2D(1024, 1024, TextureFormat.ARGB32, false); tex.ReadPixels(new Rect(0, 0, 1024, 1024), 0, 0); tex.Apply(); File.WriteAllBytes(path, tex.EncodeToPNG());

这段代码我用了很多次，稳定可靠。注意ReadPixels必须在cam.Render()之后、RenderTexture.active设置之后调用，顺序错了会读到黑图。

5.2 批量生成线框预览图的编辑器脚本

单个生成没意思，批量才有价值。写一个EditorWindow，支持拖入一个文件夹，遍历里面所有 FBX 或 Prefab，自动生成线框图并命名保存。这里要注意的是资源加载和卸载，批量处理几百个模型时如果不及时Resources.UnloadAsset，内存会爆。我一般每处理 20 个模型就调一次EditorUtility.UnloadUnusedAssetsImmediate()。

另一个细节是相机自动取景：不同模型大小差异巨大，相机距离要动态计算。用mesh.bounds拿到包围盒，然后根据包围盒半径和相机 FOV 算距离，公式是distance = radius / Mathf.Tan(fov * 0.5f * Mathf.Deg2Rad)，再乘一个 1.2 的余量系数。

5.3 线框纹理在后处理中的二次利用

生成的线框纹理不只是预览图，还能拿来做后处理。比如你想做一个“扫描线”效果，可以把线框纹理作为遮罩，和主相机画面做Lerp。或者做“故障风”效果，把线框纹理做 UV 偏移后叠加。这些用法在 Shader Graph 里很容易实现，把线框纹理当普通贴图采样就行。

提示：线框纹理生成时建议输出带 Alpha 通道的 PNG，这样在后处理里做混合时边缘更干净，不会有黑边。

6. 常见问题排查与避坑经验实录

这部分是我这些年踩坑攒下来的，网上搜不到或者搜到了也说不清楚的，我按问题类型整理成速查表。

6.1 线框显示异常问题速查

6.2 URP/HDRP 兼容性避坑

内置管线的 Shader 直接拿到 URP 下是用不了的，因为 URP 有自己的光照和相机系统。线框 Shader 如果只是做透明混合，移植到 URP 相对简单，把CGPROGRAM换成HLSLPROGRAM，UnityCG.cginc换成Core.hlsl就行。但如果涉及光照，就得重写光照计算。

HDRP 更麻烦，它的 Shader 体系完全不一样，建议直接用 Shader Graph 重做。Shader Graph 里没有几何着色器节点，所以 HDRP 下只能用重心坐标方案。好在 HDRP 项目通常跑在 PC 上，性能不是瓶颈。

6.3 性能问题的定位与优化

线框渲染的性能问题通常出在两个地方：Overdraw和几何着色器吞吐。Overdraw 是因为线框是透明的，多个线框叠加会重复着色。解决办法是尽量让线框不重叠，或者用ZWrite On配合AlphaTest代替透明混合。

几何着色器吞吐问题前面讲过，移动端基本无解，PC 端可以通过减少输入三角形数量来缓解。比如对高模做一次简化，用简化后的低模做线框，视觉上差别不大但性能好很多。

注意：不要在线框 Pass 里做复杂的光照计算。线框就是线框，给它一个纯色或者简单的渐变就够了，光照交给实体 Pass。

7. 我个人的使用建议与扩展思路

最后说点实在的。Wireframe Shader 这类插件，我的态度是：能用现成的就别自己写，但一定要看懂原理。因为线框渲染的需求千变万化，插件不可能覆盖所有场景，你迟早要改代码。看懂重心坐标和几何着色器这两条路线，基本上就能应付 90% 的需求了。

扩展思路上，线框渲染可以和很多效果结合。比如配合顶点动画做“模型破碎重组”的效果，线框先出现，然后实体从线框里“生长”出来。或者配合后处理做“全息投影”风格，线框加扫描线和噪点。这些在 Shader Graph 里都能搭出来，核心还是那个重心坐标判断。

另外提醒一句，线框渲染在 VR 项目里要特别小心。VR 对帧率要求极高，几何着色器基本不能用，重心坐标方案也要严格控制线框数量。而且 VR 里线框的粗细感知和平面屏幕不一样，需要实际戴上头显调参数，不能只看编辑器预览。

这个方向后续还可以往“程序化线框纹理”走，就是用 Compute Shader 实时生成线框图案，不依赖模型数据。这个在生成艺术和动态背景里很有前景，我最近在试，等跑通了再单独写一篇。