Unity AR涂色实战：识别、取色与材质烘焙全解

简介这是一份基于Unity与EasyAR的AR实时涂色应用工程资料面向Unity开发者和AR互动设计者展示如何将虚拟颜色叠加到现实线稿上完成识别、跟踪、触摸填色与实时反馈的全流程。压缩包内共545个文件35.3MB其中包含41个C#脚本、19个asset资源文件、15个材质mat、13个prefab预制体、7个shader着色器以及EasyAR插件相关dll、so、jar等依赖目录结构覆盖AR相机配置、图像目标识别、涂色对象绑定和交互事件处理等模块。已有1489人学习下载适合想快速上手AR涂色或需要参考项目结构的开发者。通过这份资源可以了解EasyAR图像跟踪的接入方式掌握在Unity中为图像目标创建3D模型并实时响应触摸填色的实现思路同时可借鉴其颜色选择、橡皮擦等交互优化与性能处理细节为拓展更多AR互动玩法提供可复用的工程基础。1. 一行代码之外的Unity AR涂色这个标题到底在做什么孩子拿蜡笔把纸上的狮子涂成橙黄色家长举起手机对着纸面一扫屏幕里那头狮子站起来抖了抖鬃毛颜色跟纸上涂的完全一致。这就是Unity AR涂色技术最典型的产品形态。它做的不是普通AR展示而是把用户真实的物理涂色结果通过图像识别、抓帧取色、材质烘焙这条链路同步到3D模型上。对开发者来说这套技术能把儿童教育、图书出版、互动文创产品带进AR赛道而且门槛比大多数人想象的低。这篇文章按我实际做过的方案讲清楚为什么有人做出来颜色飘、画面抖以及怎么从零跑通一个可靠的最小Demo。适合Unity已经入门的AR开发者、想做儿童交互产品的团队以及被美术追问“为什么颜色不对”的工程师。2. AR涂色的技术拆解识别、取色、上色哪个环节让你翻车AR涂色这个标题看着简单拆开是三段独立的问题先让手机认出眼前这张纸再从相机画面里拿到纸上涂的颜色最后把颜色正确贴到3D模型上。三段之间隔着完全不同的技术栈很多人翻车就是想把三段混成一段做。2.1 为什么不能把摄像头画面直接贴到模型上第一个版本最容易走的路是AR里把模型放在纸上然后把相机画面整帧当作模型的贴图实时渲染。这个方案在技术Demo里能跑但拿到真机上全是问题。手机视角移动时画面里的纸有透视形变整帧贴上去等于把一张扭曲的照片糊在模型表面模型转动时颜色跟着扭。其次纸面光照不均匀、蜡笔反光、手机自动白平衡都会让同一块颜色每帧不一样。更棘手的是遮挡小孩的手一压到纸上模型的贴图里就多出一截手指画面立刻穿帮。所以工程上普遍把AR涂色拆成“识别→取色→上色”三段。识别负责确定纸在哪、纸的四个角在哪取色负责在用户按下按钮那一瞬间从相机帧里提取各区域的颜色上色负责把这份颜色结果填进模型材质。每一段单独做能做得很扎实合在一起才叫AR涂色。2.2 识别环节Image Target选型和识别图设计识别环节的选型会决定后面所有代码怎么写。ARFoundation里的ARTrackedImageManager是基于ARCore和ARKit的图像追踪识别到预定图片后会给一个ARTrackedImage对象里面带识别图的位姿和物理尺寸这是当前自研App最主流的路线。Vuforia的Image Target也有一大批涂色书案例它的识别对低纹理图更宽容但License按订阅收费而且彩色涂色书方案里它内部做了颜色处理接口不够透明调试时像个黑匣子。方案成本识别特性适合场景ARFoundationARCore/ARKit免费需要图像有足够特征点对大面积纯色图灵敏度低自研儿童App、Android/iOS双端Vuforia Image Target按订阅收费对彩色图、低纹理图更友好出版、快速出原型、已有Vuforia授权的团队Model Target按订阅收费识别立体实物不适合平面涂色页玩具模型追踪不做涂色纸识别图的设计比选哪个SDK更重要。我的经验是涂色页不能整页都用来识别四角必须留出高对比特征图形中央涂色区保持低纹理。原因是ARCore这类特征点识别对纯色大区域基本无能为力一旦小孩把中央涂满特征全被压掉。出印刷稿时识别图分辨率不要低于相机画面宽度的一半印刷建议用灰度网点而不是纯色块不然相机的摩尔纹会让识别图时有时无。2.3 取色环节抓帧与颜色空间取色不是截屏这是很多新手绕不过去的第一道坎。AR相机的画面来源不是普通Camera渲染出来的GameView画面而是相机硬件流要用ARCameraManager的TryAcquireLatestImage去拿原始帧或者把AR相机临时渲染到RenderTexture再读像素。前者效率高且能拿到原始YUV后者实现简单但每次抓帧都让GPU多渲染一遍。两种方式在第三章都有代码。取色前必须处理相机自动参数。手机相机默认开着自动曝光和自动白平衡纸面颜色会不断被拉回中性色红色拍出来偏粉、蓝色偏灰。能在系统层锁AE和AWB就锁锁不了就给用户一个“把手机放在纸上别动”的交互等画面静止再抓帧。颜色空间方面Unity工程建议开Linear渲染抓到的帧如果是Gamma空间的要先转换到Linear再做颜色平均输出贴图前再转回Gamma否则模型上的颜色会整体暗一档。2.4 上色环节掩码贴图替换上色最省事的做法是拿到抓帧后把整个涂色区域的图像作为模型贴图但这又回到2.1说的透视问题。工程上普遍用“白模区域掩码贴图”的思路3D模型是一套白色模型附加一张掩码贴图每个涂色部位在掩码里用不同的纯色编码比如狮子头是红色块、身体是绿色块、尾巴是蓝色块。取色时把对应部位的主色调成一张颜色表运行时遍历掩码贴图按掩码色把用户颜色替换进去。这种做法跟Unity里反向遮罩组件的思路是一致的先用掩码把区域抠出来再反向把用户颜色填进去。这里有个容易被忽略的联动涂色页的排版必须和模型的UV对应。我给美术的规范是白模展UV时把每个交互部位摊在涂色页对应的区块里页面网格和UV壳要能对齐。如果涂色页是狮子头在左上、身体在右下那模型UV里的狮子头也必须落在同一位置否则颜色对不上。2.5 三个关键参数第一个是识别图的物理尺寸ARTrackedImageManager里每张识别图都要填实际宽度填错会导致模型放大缩小A4纸就填0.21米。第二个是取色采样步长区域图缩放成32乘32再取样步长设成宽除以32能压住耗时还能滤掉涂色笔触噪声。第三个是掩码贴图分辨率手机端512起步印刷级涂色页用1024再往上CPU遍历会卡顿除非把烘焙挪到ComputeShader。这三个参数是AR涂色最常见的调优点后面所有优化都围着它们转。3. 跑通Unity AR涂色最小Demo识别图、抓帧、颜色烘焙三步落位这一章把最小可跑的链路落下来。我不依赖任何第三方插件只用ARFoundation和C#脚本从环境准备到上色一共五个小节按顺序做完你能在真机上看到模型吃掉纸上的颜色。3.1 环境准备版本、包与Unity安装Unity版本用2021.3 LTS或2022.3 LTS都行装的时候记得在Unity Hub勾选Android Build Support和Android SDK相关模块不然打包到一半才补会浪费一轮时间。PackageManager里安装AR Foundation、ARCore XR PluginiOS端加装ARKit XR Plugin。这里不用装第三方插件推荐里的那些高级特性包AR Foundation对涂色场景已经够用。有个环境上的细节我要专门提如果Unity还没用合法的开发授权激活所有平台都会在画面右下角盖一个试玩版水印。AR识别时水印会压到识别图上方特征点被水印挡住识别率肉眼可见地下降。先完成授权别带着水印调试AR这是很多入门者第一道坎。3.2 识别图配置与Prefab实例化识别图建议做成A4横版四角放四个黑白相间的特征图形中央留白给用户涂色。在Project窗口右键创建Reference Image Library把这张图拖进去物理宽度填0.21米。图片纹理导入设置里把sRGB选项关掉、Alpha Source设为None压缩格式建议保留RGBA32因为ARCore对过度压缩的纹理识别率很差。场景结构是三条链AR Session、AR Session Origin、ARTrackedImageManager。ARTrackedImageManager的referenceLibrary指向刚才建的图库trackedImagePrefab指向一个预制体这个预制体就是识别成功后要出现的东西。预制体上挂一个脚本using UnityEngine; using UnityEngine.XR.ARFoundation; using UnityEngine.XR.ARSubsystems; public class TrackedColoringPrefab : MonoBehaviour { public GameObject modelRoot; private void OnEnable() { var trackedImage GetComponentARTrackedImage(); if (trackedImage ! null trackedImage.trackingState TrackingState.Tracking) { modelRoot.SetActive(true); } } }逻辑说明ARTrackedImageManager为每一张被识别到的图实例化一个trackedImagePrefab脚本的OnEnable时机正好是实例被激活时。判断trackingState为Tracking表示当前帧确实跟踪到了这张纸此时才把3D模型显示出来可以避免初始化那几帧模型闪一下又不显示。参数说明modelRoot是模型的根节点默认在Prefab里设成隐藏识别成功后SetActive(true)会保证模型出现时机和识别状态同步。3.3 抓帧从AR相机拿到一张可用的彩色图取色之前必须先拿到相机帧。ARFoundation 5.x里最可靠的方式是TryAcquireLatestImage它把原始相机帧转成NativeArray用完后要马上释放否则内存一路涨。各版本API签名略有差异按你装出来的提示调整即可using Unity.Collections; using UnityEngine; using UnityEngine.XR.ARFoundation; using UnityEngine.XR.ARSubsystems; public class ArFrameGrabber : MonoBehaviour { public ARCameraManager arCameraManager; public Texture2D GrabLatestFrame(int maxSize 640) { if (!arCameraManager.TryAcquireLatestImage(out XRCameraImage image)) return null; double scale Mathf.Min(1.0, (double)maxSize / image.width); var param new XRCameraImageConversionParams( new RectInt(0, 0, image.width, image.height), new Vector2Int((int)(image.width * scale), (int)(image.height * scale)), TextureFormat.RGB24, XRCameraImageTransformation.MirrorY); int size image.GetConvertedDataSize(param); using (NativeArraybyte buffer new NativeArraybyte(size, Allocator.Temp)) { image.Convert(param, buffer); var tex new Texture2D(param.outputDimensions.x, param.outputDimensions.y, TextureFormat.RGB24, false); tex.LoadRawTextureData(buffer); tex.Apply(); return tex; } } }逻辑说明TryAcquireLatestImage拿到的是相机传感器原始帧不能直接用要先声明转换参数XRCameraImageConversionParams。这里把输出尺寸限制在最长边640是为了避免后面取色和烘焙时的内存压力。MirrorY做垂直翻转是因为相机传感器坐标和Unity纹理坐标的原点方向不同不做翻转取出来的图像上下颠倒。参数说明maxSize改到320会让颜色更噪声化改到1280能保留更多细节但线程卡顿明显我一般保持在640兼顾主色提取和性能。3.4 分区块取色屏幕坐标裁剪与HSV主色抓帧成功以后要把帧里“纸上涂色区域”的位置找出来。ARFoundation给我们的ARTrackedImage有两个信息识别图中心点的世界坐标和识别图物理尺寸。把这两个信息换成屏幕坐标再映射到抓帧纹理的像素坐标就能把纸上的每个涂色区裁剪出来。下面这个函数把识别图四角转到屏幕坐标private ListVector2 GetTrackedCorners(ARTrackedImage image, Camera arCamera) { Vector2 size image.size; Vector3 half new Vector3(size.x * 0.5f, size.y * 0.5f, 0f); Vector3[] localCorners new Vector3[4]; localCorners[0] new Vector3(-half.x, -half.y, 0); localCorners[1] new Vector3( half.x, -half.y, 0); localCorners[2] new Vector3( half.x, half.y, 0); localCorners[3] new Vector3(-half.x, half.y, 0); var screenPts new ListVector2(); foreach (var local in localCorners) { Vector3 world image.transform.TransformPoint(local); Vector3 screen arCamera.WorldToScreenPoint(world); screenPts.Add(screen); } return screenPts; }逻辑说明识别图的transform原点在纸的中心xy平面贴合纸面。通过TransformPoint把四角从局部坐标转到世界坐标再用WorldToScreenPoint转到屏幕坐标。注意ARFoundation的ARTrackedImage坐标系是识别图中心为原点所以要先减去一半尺寸再变换。参数说明这里没有做Screen.height翻转因为Texture2D.ReadPixels和WorldToScreenPoint都基于屏幕左下角原点保持同一约定就不会出错如果你要在UI层画方框才需要翻转y轴。区域裁剪出来后对每块区域提取主色。直接平均所有像素会得到一坨脏色需要先滤掉没涂到的白纸再把色相量化到固定档位防止相机噪声导致颜色在两帧之间跳动private Color ClassifyByHsv(Color c) { Color.RGBToHSV(c, out float h, out float s, out float v); if (s 0.15f) return Color.white; if (v 0.20f) return Color.black; int bin Mathf.RoundToInt(h * 24f) % 24; float quantizedH bin / 24f; return Color.HSVToRGB(quantizedH, Mathf.Clamp01(s 0.1f), Mathf.Clamp01(v 0.1f)); }逻辑说明RGBToHSV把颜色转成色相、饱和度、明度三个分量。饱和度低于0.15的像素当成白色或灰色因为白纸和浅灰蜡笔在这种饱和度下没区别。明度低于0.2的像素当成没涂色的暗部。色相被量化成24档意味着橙红和正红不会被严格区分但这正好避开相机白平衡带来的微小偏移。参数说明s和v各加0.1是补偿手机相机普遍把颜色往中性拉的倾向如果你发现出来的颜色偏艳把0.1改成0.05即可。3.5 上色把颜色表烘焙到掩码贴图取完颜色后把每个区块的主色写进一张颜色字典接下来遍历掩码贴图按掩码色替换成用户颜色public Texture2D BakeColors(Texture2D maskTex, DictionaryColor, Color colorMap) { const int size 512; var outTex new Texture2D(size, size, TextureFormat.RGBA32, true); Color[] maskPixels maskTex.GetPixels(); var outPixels new Color[maskPixels.Length]; for (int i 0; i maskPixels.Length; i) { Color mask maskPixels[i]; if (colorMap.TryGetValue(mask, out Color target)) outPixels[i] target; else outPixels[i] mask; } outTex.SetPixels(outPixels); outTex.Apply(true); return outTex; }逻辑说明maskTex是美术准备好的区域编码贴图每个部位用纯色区分。字典里的键是掩码色值是第3.4节得到的用户主色。遍历掩码像素时能命中的区域替换成用户颜色没命中的保持掩码色这样即使掩码贴图和涂色页排版有轻微偏差也不会把颜色涂到隔壁区域。参数说明512分辨率下这段代码在手机上大约要跑5到15毫秒用户点“上色”按钮时UI要加一个短暂的loading状态避免连续点击触发两次烘焙造成纹理互相覆盖需要更快就把循环改成ComputeShaderCPU版本只适合低频触发。4. Unity AR涂色避坑清单5个让你翻车的细节AR涂色的坑大多藏在真机上编辑器里看不出毛病。下面这五条是我做过AR涂色项目后最值钱的血泪经验每一条都按现象、原因、解决三步写直接对着排查。4.1 识别图被涂上颜色后追踪丢失现象线稿图在AR里识别得好好的孩子涂完颜色手机再扫就模型乱晃甚至完全识别不到。原因ARCore和ARKit的图像识别依赖特征点大面积颜色填充把中央特征全压掉了。蜡笔在哑光纸上还有反光局部过曝会让识别更差。解决把识别特征全部放在四角用黑白相间的角标图形中央涂色区保持低纹理。如果产品设计要求整页都能涂就把角标面积加大、特征图形加密或者用ARCore的增强图片能力离线生成增强特征图。每次改版式后都要拿涂完色的样张在真机上重新验证一遍不要只用线稿测。4.2 抓帧颜色偏灰偏色现象模型上出来的颜色比纸上淡红色变粉、深蓝变灰饱和度整体很低。原因手机默认开着的自动白平衡和自动曝光一直在跟随画面变化导致每帧的颜色基准不同。Unity项目如果没统一颜色空间从相机帧到材质贴图之间的Gamma和Linear转换也会造成整体偏暗。解决取色前先把曝光和白平衡锁死ARCore和ARKit的底层都暴露了相应的相机参数控制接口不能锁的就加入“识别到图后静止1秒再抓帧”的交互引导。工程设置里把Player Settings的Color Space设为Linear抓到的Gamma帧先转Linear再处理Bake完成输出时转回Gamma。这段逻辑写进文档不然美术那边永远在跟你扯是纸的问题还是代码的问题。4.3 模型上色位置偏移狮子的尾巴跑到背上现象识别正常、颜色也正确但区块张冠李戴狮子的尾巴颜色跑到了背上。原因涂色页的排版和模型UV壳不对应或者取色时四角坐标算错了。常见的坐标坑是WorldToScreenPoint没处理UI画布缩放以及Android平台全面屏的Safe Area没有处理导致裁剪矩形整体偏移。解决在工程里打一张九宫格校准图每个格子填不同的纯色扫描后逐个色块对照模型部位把偏移量化成像素再在裁剪矩形里做补偿。这个校准流程每次改版式都要跑一遍不要觉得一次调完就万事大吉。4.4 Android新机抓帧一片黑权限一直弹现象同一套代码在编辑器里正常装到华为、小米等新手机上抓出来的帧全是黑色或者相机权限反复弹窗。原因ARFoundation各版本的相机纹理权限要求不一致部分SoC在用RenderTexture方式抓帧时拿不到YUV平面数据。还有厂商ROM在分屏、小窗模式下会把相机流切走导致TryAcquireLatestImage返回空。解决不要用Camera.Render去抓AR相机改用ARCameraManager.TryAcquireLatestImage。相机权限要在启动AR Session之前就请求不能等识别到图了才想起要权限。AndroidManifest里声明CAMERA权限运行时用PermissionUtility申请这样新机第一次进入就会弹授权而不是识别到一半才黑屏。4.5 纹理内存暴涨水印也参与取色现象跑10分钟后内存站到200MB以上偶尔闪退而且模型上出现黑色或白色方块。原因每次抓帧都生成全尺寸Texture2D但不释放导致NativeArray堆了一堆待回收对象。如果还在用Unity试玩版水印本身渲染在相机画面里取色裁剪时会把水印区域也包进去颜色表里就混进了脏色。解决抓帧统一降采样到最长边640用using块确保NativeArray及时DisposeTexture2D用完马上调Destroy并置空引用。水印问题回到第一章说的用合法授权的Unity版本开发这个坑可以直接避免。5. 从Demo到产品颜色分类算法与涂色页模板规范跑通Demo之后接踵而至的问题是小朋友涂色根本不会按区块规矩来蜡笔涂出边界、叠色、深浅不一模型上出来的颜色脏得没法看。这时候要从Demo思维切到产品思维把算法和美术规范一起定下来。5.1 为什么需要“颜色分类”而不是“平均色”平均色会把涂成红黄蓝叠加的一团蜡笔色算成灰绿脏色所以产品级方案必须做颜色分类而不是简单平均。常见做法是先用HSV按色相分桶每个桶内做连通域取面积最大的簇作为有效颜色如果某区域同时有两个桶面积相近取饱和度更高、面积更大的那个因为用户通常最后涂的是覆盖色覆盖色往往颜色更实。连通域提取可以用BFS但我建议先把区域缩放到64乘64再做否则真机上逐像素BFS会卡顿。伪代码思路是这样private void FloodFillCluster(Texture2D region, int seedX, int seedY) { // 把区域缩放到 64x64用 NativeArray 访问像素 // 从种子像素开始 BFS色相距离小于 8 度的像素并入同一簇 // 记录簇的像素数量、平均色、最大色相偏差 // 面积最大或饱和度最高的簇作为该区域主色 }逻辑说明这个函数的核心是“色相距离”而不是RGB距离RGB距离对光照敏感色相距离在白平衡锁死后相对稳定。参数说明色相距离阈值8度比较合适太大会把红和黄并到一起太小会把一个绿色涂块拆成三块。这一步不是每次上色都跑它是在抓帧后对每个区域做离线计算所以可以放松性能要求。5.2 涂色页模板规范给美术和印刷的一套清单从Demo到产品涂色页不能再由美术随手画要有规范。我给团队的清单是页面尺寸A4或16开涂色区四周离边至少15毫米四角各放一个10毫米以上的高对比特征图形印刷灰度不要低于120线纸质尽量哑光避免蜡笔反光影响取色每个涂色区块在模板背景里隐藏一个低可见度的网格角点便于取色时对齐出稿用PSD分层识别层、涂色层、角标层分开Unity里用同一张源图生成识别图、掩码贴图、UI缩略图避免三张图各自为政导致版式漂移。这套规范最大的价值不是好看是让算法有一个不需要临场调整的稳定输入。纸张换成铜版纸、印刷改成照片打印取色结果都会变所以规范里还要写明“样张校色用的纸质和印刷参数”换印刷厂要重新跑一遍场景。5.3 适配Pico4、AR眼镜和微信小游戏打包的差别同样是AR涂色跑手机和跑Pico4、AR眼镜是两码事。Pico4开发Unity时设备是透视相机看实景运算在设备端帧预算比手机Android还要紧Bake颜色这种操作不能放主线程要丢到协程或者分帧做完。AR眼镜主要是光波导方案环境穿透率低看到的画面颜色饱和度比手机低很多校准卡要专门做高饱和版本不然用户会觉得模型颜色很淡。如果要做Unity微信小游戏打包要提前做好心理准备小游戏环境里TryAcquireLatestImage这类原生相机API可能不可用ReadPixels也可能被限制最稳妥的做法是在微信开发者工具里先跑一个抓帧真机预览确认能拿到像素再继续做取色逻辑。每个平台的抓帧方式差异很大我一般用宏定义分隔#if UNITY_ANDROID // 用 ARCameraManager.TryAcquireLatestImage #elif UNITY_IOS // 用 ARKit 的 frame 取色 #elif UNITY_WEBGL // 用小游戏插件的相机纹理 #endif逻辑说明平台差异集中在“拿到彩色像素”这一步后面取色、分类、烘焙完全共用。用宏定义把帧源隔离后换平台时只需要改一小块。参数说明测试时再加一个Mock模式用编辑器里固定的假颜色表替代真机抓帧美术调色不用天天扑在真机上。5.4 工程上的平台差异处理与测试开关平台差异处理的一个实用技巧是给工程加一个开发宏比如MOCK_COLOR_MODE。编辑器环境下AR相机不会真的出图像跑着跑着抓帧全是Null调试取色算法很痛苦。加了Mock模式后颜色表直接走固定数据只有真机才走完整链路。这样美术可以坐在电脑前调掩码贴图不用反复装包看效果。发布Relase包时这个宏在打包配置里关掉不用删代码也不会误伤真机分支。6. 验证上色效果一张灰度校准卡快速定位偏差这一章给一套我在项目里反复用的验证方法做一张灰度校准卡用来判断取色链路到底准不准。卡片上放三行色块第一行是五个灰阶第二行是红黄蓝绿紫五个纯色块第三行放纸的颜色和印刷网点参考块。运行App后把抓帧得到的颜色和相册里的参考值一起打印出来看。实现上可以写一个调试脚本每次取色后输出各参考块的实际RGB和理想RGB。我一般约定色差值大于12就判定偏色达不到阈值说明取色链路有问题先检查白平衡锁定再检查Linear转换如果灰阶色块偏色但纯色还正常说明问题在曝光而不是颜色空间如果所有颜色刚度都偏低多半是蜡笔反光导致过曝让用户把手机离纸远一点再试。Debug.Log($target: {targetR:F2},{targetG:F2},{targetB:F2} $actual: {actualR:F2},{actualG:F2},{actualB:F2} $deltaE: {deltaE:F2});这是我做AR涂色踩过最久的坑之后养成的习惯先校准、再调试永远不要用“目测差不多”来判断颜色对不对。这套校准卡还可以交给测试团队让他们在换手机、换纸张后都能给出统一的量化结论而不是一句“好像偏黄了”。做AR涂色的价值在于真实世界的颜色是可验证的只要校准链路做扎实后面的算法和美术规范都能对齐。希望帮到你。本文还有配套的精品资源点击获取