企业官网建设流程全解析

去年冬天我在一个非遗展馆里站了四十分钟，就为了看清一件京绣蟒袍下摆的针脚走向。玻璃柜的反光、顶部的射灯、后退一米就完全糊掉的细节，最后我掏出手机放大拍了张照片，回家对着屏幕看了半天,依然分不清哪一针是盘金、哪一针是打籽。那次之后我就一直想动手做一件事：用 Unity 加 3D 建模加 C#，把京绣（宫绣）这种对细节极度挑剔的手工艺，搬进一个可以自由走、可以凑近看、可以听讲解的虚拟展馆里。这套东西不是做一个炫技的 Demo，而是要能让普通观众在浏览器或者一体机里真正看懂一件绣品"贵在哪"，也能让做非遗数字化的人直接把这套骨架拿去改。

这篇文章我会把这套交互漫游系统从需求拆解、三维资产制作、Unity 工程搭建、中文讲解与 UI、灯光烘焙与性能预算，一直到踩过的坑，完整讲一遍。适合正在做博物馆数字化、非遗展示、虚拟展厅的 Unity 开发者，也适合只是想把 C# 和 3D 建模真正串起来做点东西的人。下面所有的方案和参数，都是我在这个项目里实际跑通、并且在不同设备上验证过的路径。

1. 京绣展馆为什么值得用实时3D重做一遍

1.1 隔着玻璃看绣品，观众到底损失了什么

京绣最值钱的地方，恰恰是最难被物理展陈还原的三样东西：针脚的层次、丝线的光泽、金线的立体走向。这三样都有一个共同点——它们只在特定距离和特定角度下才成立。观众站在展柜前，最佳观赏距离大概在 30 到 50 厘米，但展柜玻璃会反光、保安会提醒你不要贴太近、展签上的字离得远看不清。结果就是大部分人看两分钟就走，记住的只有"很精致"三个字。

更麻烦的是环境光的干扰。绣品的丝线是各向异性材质，光泽会随着观察角度变化，专业展陈需要用低照度、定向的洗墙光才能把这种变化表现出来。但普通展厅为了保证整体亮度，往往用大面积泛光，丝线的高光被冲平，盘金绣的金线看起来就像贴了一层黄纸。这不是策展水平问题，而是物理空间的硬约束。

虚拟展馆能绕过这些约束，但不是因为它"更高级"，而是因为它把观赏这件事的变量全部交还给了观众：距离可以随便调，光源可以按绣品类型切换，想看针脚就把镜头推到 5 厘米，想看整体纹样就拉远到 3 米。这套逻辑听上去像游戏，实际上和文物数字化的研究需求是同一套——可重复观察、可量化对比、可留存记录。

1.2 把需求拆成技术清单：这个展馆长什么样

在动手写第一行 C# 之前，我把需求列成了一张表，因为"虚拟展馆"这个词太笼统，不拆开就会做成一堆孤立的特效。下面是我最终确定的清单，也是后面所有技术选型的依据。

拆完这张表你会发现，真正难的不是"做个展馆"，而是在同一套资源上同时满足"近看要清晰"和"远看要流畅"。这两个目标天生冲突，所有优化工作本质上都是在调和这个矛盾。

我在需求阶段还额外加了一条自己的私心：必须能看懂一件绣品的工艺分类。所以我给每件展品都定义了工艺标签（盘金、打籽、平针、锁绣等），点击标签会高亮绣品上对应的区域。这个功能技术上不难，就是在贴图上多做一张遮罩图，但它把"看热闹"变成了"看门道"，是整个项目的价值锚点。

2. 从一张平绣照片到可交互展品：京绣三维资产的制作链路

2.1 展厅本体：模块化建模和网格预算的底线

展馆建筑的部分反而是最容易被做崩的。很多人的第一反应是"我要做一个恢弘的中式大殿"，然后在 Blender 里堆了几十万面，进 Unity 一看帧率直接腰斩。我的做法是先定网格预算，再开始建模，顺序反了就得返工。

具体到数值：整个展厅的静态建筑面数控制在 15 万三角面以内，单件展品在最高 LOD 下不超过 3 万面（绣品本身基本是平面，面数主要花在装裱框和展台的雕花上）。之所以定这个数，是因为目标机型里有一体机，它的 GPU 填充率和顶点吞吐都有限，超过这个量级再叠加烘焙光照，掉帧是必然的。

建模层面我用的是模块化拼装：柱子、斗拱、窗棂、地砖各做一套基础件，然后在场景里复制旋转。这样做有两个好处，一是可以用 GPU Instancing 把重复件的 Draw Call 压下来，二是后期改配色只要换材质，不用重新导模型。斗拱这类细节件我做了一个高模和一个低模，高模只用来烘焙法线，实际进场景的是低模加法线贴图，视觉上几乎看不出差别。

提示：中式建筑的木构件有大量重复，建模时一定要提前想好哪些件可以复用。我见过一个同类项目，光窗棂就做了 40 个独立模型，最后光是这一项就吃掉了 200 多个 Draw Call。

2.2 绣品建模：翻拍贴图、法线叠加与"针脚可见"的实现

这部分是整个项目的核心，也是我花时间最多的地方。绣品本质上是二维的，所以没必要真的去建三维的针脚几何，那是自找麻烦。我的方案是高精度平面加多层贴图。

第一层是翻拍贴图。有条件就用中画幅或者高像素微单加微距镜头，在可控光源下做平铺翻拍，分辨率至少做到 8192 长边，因为最终要放大到针脚级别。翻拍时一定注意两点：一是用偏振镜压掉丝线的镜面反光，否则贴图上会出现大面积死白；二是做色彩校准，放置色卡，后期在 Unity 里用颜色校正曲线还原。丝线的颜色偏差一旦大了，整个展品的质感就全垮了。

第二层是法线贴图。这一步是把"平"变成"鼓"的关键。我没有用软件从照片硬算，而是手动做了一层高度图：把每一簇丝线的走向画成灰度渐变，再用高度图转法线。这么做比自动生成麻烦，但结果可控——自动生成的法线会在绣品边缘产生大量噪点，看起来像发霉。

第三层是粗糙度和金属度。丝线用较高的粗糙度变化范围（0.25 到 0.6），金线单独做一张遮罩，金属度拉到 0.8 以上、粗糙度压到 0.15 左右。这样在同样的光照下，金线会比其他丝线亮出明显的层次。

第四层是工艺标签遮罩。一张 RGBA 图，每个通道对应一类工艺，点击标签时用 Shader 做区域高亮。这个设计让展品从单纯的"好看"变成了"可读"。

2.3 丝绸与金线的材质：URP下的一套可控方案

材质是决定"像不像"的最后一公里。我在 URP 下没有直接用 Lit，而是写了一个基于 Lit 修改的自定义 Shader，主要加了三样东西：各向异性高光、边缘柔化、可切换的光照模式。

各向异性高光是丝线的命门。标准 Lit 的高光是圆形扩散的，看起来像塑料；丝线的高光沿纤维方向拉长，才是正确的表现。我在 Shader 里加了一个切线方向的控制参数，用它来模拟丝线的走向。这个参数不需要和真实针脚完全对齐，只要大方向对，大脑就会自动接受。

边缘柔化是为了解决近距离观察时的锯齿感。绣品贴图放大到极限时，边缘会出现硬边，加一点基于视角的柔化能明显改善观感。光照模式切换则是为了满足不同展示场景，比如整体参观用柔和的全局光，细节观察时切到单向硬光，让针脚的起伏更明显。

注意：自定义 Shader 一定要在目标机型上跑一遍。我在编辑器里调得很满意，导到一体机上发现各向异性计算量比预期高，最后把参数降了一档才稳住帧率。

3. Unity工程骨架的搭建：管线、场景组织与漫游控制

3.1 版本与渲染管线的选择理由

版本我选的是 Unity 2022 LTS。理由很朴素：这个项目要交付给别人维护，LTS 的插件兼容性最稳，遇到问题也最容易搜到答案。技术预览版的某些新特性确实诱人，但一个需要长期运营的展馆项目，稳定压倒一切。

渲染管线用的是 URP，不是 HDRP。HDRP 的材质表现力确实更强，尤其是半透明和体积光，但它对硬件的要求也更高，一体机和网页端基本无缘。URP 在画质和性能之间的平衡点刚好落在我的目标区间内，而且它对移动端的支持成熟，后面要往一体机上移植时改动量最小。

场景组织上我做了拆分，而不是把整个展馆塞进一个 Scene：

• Boot场景：只放启动逻辑和配置加载，常驻不卸载。
• Hall_Main：主展厅，静态建筑和灯光。
• Hall_Detail：细节展区，加载高清绣品资源。
• Exhibit_XXX：单件展品的独立场景，按需异步加载。

这样做的好处是显存占用可控。观众在主展厅闲逛时，高清绣品贴图根本不在内存里，点进去才加载。异步加载我用Addressables做，配合一个加载进度提示，体验上不会有明显卡顿。

3.2 漫游控制器：CharacterController与轨道模式的切换

漫游控制我试过三套方案，最后留下的是 CharacterController。Rigidbody 加胶囊碰撞在楼梯和门槛上很容易打滑或者卡住，而 CharacterController 的移动是自己算的，虽然要手写重力，但可控性高得多。

核心逻辑不复杂，关键是几个容易忽略的参数：

public class RoamController : MonoBehaviour { public float walkSpeed = 2.2f; // 步行速度，展馆内不宜过快 public float runSpeed = 4.0f; public float gravity = -9.81f; public float groundCheckOffset = -0.15f; public float stepOffset = 0.35f; // 台阶高度，对应展厅的实际台阶 private CharacterController cc; private Vector3 velocity; private bool isGround; void Update() { isGround = Physics.CheckSphere( transform.position + Vector3.up * groundCheckOffset, 0.25f, LayerMask.GetMask("Ground")); if (isGround && velocity.y < 0) velocity.y = -2f; velocity.y += gravity * Time.deltaTime; float h = Input.GetAxis("Horizontal"); float v = Input.GetAxis("Vertical"); Vector3 move = transform.right * h + transform.forward * v; float speed = Input.GetKey(KeyCode.LeftShift) ? runSpeed : walkSpeed; cc.Move((move * speed + velocity) * Time.deltaTime); } }

walkSpeed这个值我调了很久。定 2.2 是因为展馆的观赏节奏比游戏慢，走太快观众根本来不及看展品，会变成"跑图"。stepOffset必须和展厅实际台阶高度一致，我一开始没改默认值，结果观众在台阶前反复横跳上不去。

另外我加了一个轨道模式：切换到聚焦状态时，控制器停用，相机绕着展品中心做球面插值。这两个模式的切换用状态机管理，避免两套逻辑同时写 Transform 导致抖动。

3.3 交互拾取与展品聚焦视图

拾取用射线检测，但有几个细节决定了手感的顺滑程度。第一，射线的最大距离不能设太远，否则观众在展厅另一头也能点中展品，体验很怪，我设为 4 米。第二，要用 LayerMask 过滤，只检测展品层，不要把地面和墙壁也算进去。第三，聚焦过程必须用插值而不是瞬移，我用的是一段 0.6 秒的球面插值，同时把相机的 Field of View 从 60 收到 45，视觉上会有一个"推近"的感觉。

聚焦状态下的相机位置不是随便定的，而是每件展品在配置里预先存好一个观察点位和注视点。这是因为不同绣品的观赏角度差异很大，盘金绣要斜着看才有立体感，平针绣正面看纹样最清楚，自动算出来的位置往往不是最佳观赏位。

提示：交互不只是鼠标点击，一体机上要用射线控制器，网页端要处理鼠标和触摸两套输入。我封装了一层 InputAdapter，把输入源统一成"射线的起点和方向"，上层逻辑就不用改。

3.4 自动导览：NavMesh和路点该怎么配合

自动导览一开始我想直接用 NavMesh 让虚拟导游自己走过去，后来发现效果不好——NavMesh 算出来的路径是"最短路径"，不是"最佳观赏路径"，它会贴着墙走，还会错过重要的展品。最后改成路点驱动加 NavMesh 修正：手动摆放主要观赏点，NavMesh 只负责在点与点之间做局部避障。

这个方案的好处是节奏可控。每个路点可以配置停留时长、镜头朝向、是否触发讲解音频。观众开启导览后，相机会按照预设的节奏移动，到某件绣品前停 20 秒，同时播放对应的讲解，讲完自动走向下一个点。中途观众随时可以按键接管控制权，接管后导览暂停而不是退出，再次按键可以继续。

这种"可打断、可续播"的设计我是从实际参观习惯推出来的。观众听讲解听到一半想自己看看细节，如果导览直接退出，他得从头再走一遍，体验很差。

4. 中文讲解、字幕与UI：最容易翻车的部分

4.1 TextMeshPro的中文图集内存问题

中文在 Unity UI 里一直是个麻烦事。TextMeshPro 默认用静态图集，需要你预先指定用到的字符，一旦漏字就是方块。京绣的讲解文本里有大量生僻字和工艺术语，靠手工列字符表根本不可能覆盖全。

我的做法是静态图集加动态图集混合：把常用汉字预先生成到静态图集里，保证启动后的第一屏不会出现延迟；同时开一个动态图集兜底，遇到静态图集里没有的字，运行时补进去。这个配置在 Font Asset 的属性面板里就能设，关键是动态图集的最大尺寸和数量要控制住。

我第一次做的时候把动态图集上限设成了 4096，结果跑了一个小时，内存涨了 200 多兆。原因是图集只增不减，看完所有展品后，所有出现过的字都留在图集里。后来我把单片图集压到 1024，允许最多 4 片，同时在切换展区时主动调用图集清理，内存才稳定下来。

注意：动态图集清理有个坑，清完之后屏幕上正在显示的文字会变成方块。所以清理时机一定要选在场景切换的黑屏或者加载页期间，不能随时清。

4.2 语音讲解与字幕的时序对齐

语音和字幕对齐是"看起来简单、做起来烦"的典型。我用的是音频时间轴驱动字幕的方案：每段讲解音频按句子切分成若干时间区间，运行时读AudioSource.time，落在哪个区间就显示哪句。

这么做比"每句话单独做一个音频文件然后顺序播放"要稳，因为后者的句间停顿完全靠代码控制，稍微有点音频加载延迟就会错位。时间轴方案的缺点是前期标注麻烦，需要人工听音频把每句的起止时间记下来。我的偷懒办法是先用语音识别工具跑一遍自动打轴，再人工校对，效率能提高三倍以上。

还有一个细节：字幕的出现和消失不能是硬切。我加了一个 0.2 秒的淡入淡出，视觉上柔和很多。另外字幕的换行要按语义断句，不能让它自动按宽度折行，否则会出现"盘金"和"绣"被拆到两行的情况。

4.3 分辨率适配与VR模式下的UI重排

UI 适配我用的是 Canvas Scaler 加锚点组合。桌面端按 1920x1080 设计，Scaler 设为Scale With Screen Size，匹配模式选 0.5，保证横竖比例变化时文字不会变形。但这套逻辑在一体机上完全不适用，因为 VR 里的 UI 是空间化的，不存在"屏幕分辨率"这个概念。

所以我的 UI 分了两套：平面 UI 用于桌面和网页端，世界空间 UI 用于一体机。两者共享同一份数据，但布局完全独立。世界空间的讲解面板我放在了观察点位的左前方约 1.2 米处，高度与视线齐平，字号换算下来相当于 1 米外看 32 号字，这个尺寸在实际体验里最舒服，既不用刻意转头，也不会挡住展品。

5. 灯光烘焙与性能预算：让展馆在笔记本和一体机上都能跑

5.1 光照烘焙策略与光照贴图UV的准备

展馆的灯光几乎全部是烘焙的，只有展品的局部补光用了实时灯。这么选是因为动态全局光照在目标机型上开销太大，而展馆是静态场景，烘焙完全够用。

烘焙之前有一件事必须做，就是准备光照贴图 UV。Unity 里的模型如果直接用导入时的 UV 去烘焙，会出现大面积重叠和接缝发黑。正确做法是在建模软件里展一套专用的第二套 UV，或者在 Unity 里用Generate Lightmap UVs自动生成。自动生成对简单几何体够用，但斗拱这种复杂件一定要手动展，否则接缝会非常难看。

烘焙参数上我踩过一个坑：Lightmap Resolution设得太高（我一开始设了 60），烘焙时间从 20 分钟涨到 3 小时，但画质提升几乎看不出来。后来按区域分开设置，地面和墙面用 15 到 20，斗拱和雕花用 40，烘焙时间回到 40 分钟左右，效果反而更好。

提示：烘焙前一定要把不参与烘焙的物体（比如展品、可动部件）标记为Contribute GI关闭，否则它们会在墙上留下奇怪的阴影。

5.2 Draw Call、遮挡剔除与LOD的取舍

性能优化里我优先级排得最清楚的一件事是：先砍 Draw Call，再谈其他。桌面端超过 1500 个 Draw Call 就开始有压力，一体机上 500 以上就是危险区。

砍 Draw Call 的手段按性价比排序：

1. 材质合并：把能共用一张贴图的物体合到同一个材质。展厅的木质结构本来有 12 个材质，合并贴图后压到 3 个。
2. GPU Instancing：所有重复的柱子、地砖、展柜都开这个选项，Draw Call 直接按实例数摊薄。
3. 静态合批：不动的小物件合并网格，代价是内存占用上升，要权衡。
4. 遮挡剔除：展馆是隔间结构，墙体天然遮挡，开启 Occlusion Culling 后，站在一个展区里时，其他区域的物体全部被剔除，效果非常明显。

LOD 我只给展品做了两级。展厅建筑本身是静态的，配合遮挡剔除已经够用，做 LOD 收益不大。展品的 LOD0 用 8K 贴图，LOD1 降到 2K，切换距离设在 2.5 米。为什么是 2.5 米，因为这是观众从"看整体"切换到"看细节"的心理分界线，再近就该给高清贴图了。

5.3 贴图压缩与显存预算：移动端的硬约束

移动端的显存是真的紧，这一点在桌面端做开发时完全感觉不到。我的做法是按分辨率分层指定压缩格式。

除了压缩格式，还有一个很多人忽略的点是贴图的 Read/Write 开关。默认关闭，一旦打开，Unity 会在内存里额外保存一份可读副本，显存翻倍。我检查工程时发现有三分之一的高清贴图被误开了这个选项，关掉之后一体机的内存占用直接降了 300 多兆。

6. 踩坑复盘：几个卡了我一整天的具体问题

6.1 阴影贴图引发的条纹与自阴影痤疮

展厅的斗拱区域出现了一道道横向的条纹，远看像百叶窗。这个问题我排查了大半天，最后定位到是阴影贴图分辨率和 Bias 配置不匹配导致的自阴影痤疮。

排查过程是这样的：先怀疑是烘焙光照贴图的问题，重新烘焙了一遍，条纹消失了一半，说明确实和烘焙有关；然后关掉实时阴影，条纹完全消失，锁定问题在实时阴影；接着把 Directional Light 的 Shadow Resolution 从 Medium 提到 High，条纹变细但没有消失，说明是 Bias 的问题。最后把Shadow Bias从默认的 0.05 调到 0.12、Normal Bias调到 0.4，条纹彻底消失。

这个过程的经验是：自阴影痤疮和光照贴图接缝的视觉表现很像，但排查顺序不一样。如果是条纹跟着相机移动，多半是实时阴影；如果是固定在几何体边缘，多半是光照贴图 UV 问题。

6.2 玻璃展柜的半透明排序

玻璃展柜用的是半透明材质，展品在柜子里，结果出现了"展品被玻璃盖住一半"的诡异现象，而且随着相机移动，遮挡关系还会跳变。这是半透明渲染排序的经典问题：Unity 按物体中心到相机的距离排序，但玻璃和展品的位置关系是嵌套的，按中心排序必然出错。

解决方案有两层。第一层是让玻璃不写深度但正确排序，把玻璃材质的 Render Queue 设为 Transparent，并关掉ZWrite。第二层，也是更可靠的一层，是给展品单独指定渲染队列，让它在玻璃之前渲染。我最终用的是第二种，因为展品数量可控，手动指定队列最稳。

如果展柜数量很多，还有个办法是把玻璃换成"伪透明"材质：不做真正的 Alpha 混合，而是用折射贴图加轻微的高光，视觉上像玻璃，但走的是不透明渲染流程，完全没有排序问题。我在细节展区就用的这个方案。

6.3 WebGL构建与桌面端的资源读取差异

桌面端跑得好好的东西，构建成网页版之后直接打不开。排查下来有三个原因。

第一是资源读取方式。桌面端可以用File.ReadAllBytes直接读文件，网页端没有本地文件系统，必须走UnityWebRequest或者把资源打进包体。我原来那套从外部加载展品配置的逻辑，在网页端全部改成从StreamingAssets走网络请求。

第二是线程。网页端不支持多线程，任何用了System.Threading的代码都会直接报错。我的异步加载逻辑原来是开线程读文件的，改成协程之后才正常。

第三是包体大小。8K 贴图打进去，包体直接 400 多兆，加载页转了快一分钟。最后我把网页版单独做了一套资源，最高 2K 贴图，配合压缩，包体降到 90 多兆，加载时间压到 20 秒以内。

注意：网页版和桌面版最好从一开始就分成两套构建配置，不要等到最后再改，否则要动的代码会非常多。

7. 把展品做成数据：内容可扩展的工程化思路

7.1 ScriptableObject加JSON的双层配置

展馆项目最怕的是"换一件展品就要改代码重新打包"。所以我从一开始就把展品定义成数据。核心结构用 ScriptableObject，方便在编辑器里可视化编辑和引用资源：

[CreateAssetMenu(fileName = "Exhibit", menuName = "JingXiu/Exhibit")] public class ExhibitData : ScriptableObject { public string exhibitId; public string displayName; public string craftType; // 盘金、打籽、平针等 public Texture2D albedo; public Texture2D normalMap; public Texture2D craftMask; // RGBA 分通道标记工艺区域 [TextArea] public string description; public AudioClip narration; public Vector3 cameraPos; // 预设观察点 public Vector3 lookAtPos; public float focusFov = 45f; public List<SubtitleLine> subtitles; } [System.Serializable] public struct SubtitleLine { public float startTime; public float endTime; public string text; }

同时我在StreamingAssets里放了一份 JSON，内容和 ScriptableObject 一致。运行时优先读 JSON，本地没有就回落到内置的 SO 数据。这么做是为了让展馆运营方可以自己改讲解词、调观察点位，改完直接把 JSON 推上去，不用重新构建。

7.2 这套骨架还能往哪长

做到这里，展馆的基本盘已经稳了，但我实际用下来觉得还有几个方向值得继续加。

一个是工艺对比模式。现在的展馆是"一件一件看"，但京绣的价值很大程度上在于工艺之间的差异。我后来加了一个并排对比功能，可以把盘金绣和平针绣放在同一光照下左右对照，观众能直观看到金线的反光和丝线的哑光是完全两回事。

另一个是纹样的结构拆解。京绣的纹样有很强的对称性和重复规律，我尝试过用程序化的方式把一件绣品的纹样拆成基础单元，观众点某个单元，其余相同的单元一起高亮。这个功能技术上是复用工艺遮罩那套逻辑，把遮罩换成纹样单元图就行。

最后是参观记录导出。我加了一个很轻的功能：观众可以给自己喜欢的展品打标记，参观结束时导出成一张图，包含展品缩略图和名称。这个功能本身价值不大，但它显著提高了观众的停留时间，因为有了"要收集"的动机之后，人会不自觉地多看几件。

我个人在整套项目里最深的体会是，非遗数字化最大的难点从来不是渲染技术，而是你到底想让观众看懂什么。技术选型、贴图精度、光照方案，这些都能查文档解决，但"这件绣品最值得被看见的那一针在哪里"，只能靠你反复看、反复问手艺人，才能找到答案。