Unity摄像头实时抠像：基于Shader的色度键控方案

1. 摄像头抠像到底在解决什么问题

第一次接触摄像头抠像，是在一个虚拟演播场景的预研里。当时的需求很直接：用普通USB摄像头拍人，把背景实时去掉，合成到另一个场景里。听起来像是直播行业玩烂了的东西，但真动手才发现，从“能抠”到“抠得干净”中间隔着一整条鸿沟。

Unity_ChromaKeyKit这个项目，核心就是干一件事：在Unity里，把摄像头采集到的画面做实时色度键控（Chroma Key），也就是我们常说的绿幕抠像。它解决的不是“怎么把绿色变透明”这么简单的问题，而是在消费级硬件、非专业灯光环境下，如何让抠像结果看起来不像是用脚做的。

适合谁来参考？三类人最需要：一是做虚拟直播、虚拟形象驱动但预算有限的独立开发者；二是需要在Unity里集成摄像头抠像功能但不想从零写Shader的TA；三是做互动装置、体感应用，需要把真人实时合成进3D场景的创意开发者。如果你只是想在OBS里拉个绿幕，那不用往下看，但如果你需要在Unity运行时动态处理摄像头画面，并且对边缘质量、实时性有要求，这个项目的思路值得拆一拆。

我见过太多人上来就找一个Chroma Key Shader，往材质上一挂，发现边缘全是绿边、头发丝糊成一团、阴影区域全是噪点，然后就开始怀疑人生。问题不在Shader本身，而在于整个处理链路的设计。摄像头抠像是一个系统工程，从采集、色彩空间转换、键控算法、边缘处理到合成，每一步都在影响最终结果。

2. 整体方案设计与技术选型拆解

2.1 为什么不用Unity自带的背景移除组件

Unity确实有类似Background Removal的功能，但那是给AR Foundation用的，依赖特定的人体分割模型，跑在移动端上帧率感人，而且它做的是“人像分割”不是“色度键控”。色度键控的优势在于：计算量极小、延迟极低、不需要神经网络推理。你用一个像素级的颜色距离判断就能跑满60帧，而分割模型在移动端能跑到15帧就算不错了。

所以这个项目的技术路线很明确：基于Shader的像素级色度键控，不依赖任何机器学习模型，纯GPU计算。这意味着它可以在任何支持Shader的平台上跑，包括PC、移动端、甚至WebGL。

2.2 采集端的选择：WebCamTexture还是Native插件

Unity自带的WebCamTexture是最省事的方案，一行代码就能拿到摄像头画面。但它有几个坑：第一，它返回的是RGB格式，而色度键控在YUV空间做会更准；第二，它的分辨率切换有时候不生效，取决于驱动；第三，在某些Android设备上，WebCamTexture的帧率会被强制锁到30帧。

如果项目对延迟极其敏感，比如虚拟形象直播，那可能需要走Native插件路线，直接拿摄像头的NV12或YUY2数据，在GPU上做YUV到RGB的转换，省掉一次CPU拷贝。但大多数场景下，WebCamTexture够用了。这个项目选择的是WebCamTexture方案，理由是跨平台一致性最好，代码量最少，维护成本最低。

2.3 色彩空间的选择：为什么必须在YUV里做键控

这是很多人忽略的关键点。你在RGB空间里算颜色距离，和在人眼感知均匀的色彩空间里算，结果完全不一样。举个简单的例子：纯绿(0,255,0)和暗绿(0,128,0)在RGB欧氏距离里差得很远，但在人眼看来它们都是绿色，都应该被抠掉。如果你在RGB空间做键控，暗绿区域就会残留。

正确的做法是转到YCbCr空间，只对Cb和Cr两个色度分量做距离判断，忽略Y（亮度）分量。这样无论绿幕是亮是暗，只要色度接近，就能被正确识别。这个项目在Shader里做了一次RGB到YCbCr的转换，转换公式用的是BT.601标准：

Y = 0.299R + 0.587G + 0.114B Cb = -0.169R - 0.331G + 0.500B + 0.5 Cr = 0.500R - 0.419G - 0.081B + 0.5

然后在Cb-Cr平面上计算当前像素与键控颜色的距离。这个距离用一个阈值来控制，距离小于阈值的判定为背景，大于阈值的判定为前景，中间区域做平滑过渡。

2.4 边缘处理的策略：硬阈值还是软过渡

硬阈值就是非黑即白，距离小于阈值alpha=0，大于阈值alpha=1。结果就是边缘锯齿严重，头发丝直接消失。软过渡是在阈值附近做一个渐变区间，比如距离在0.1到0.2之间时，alpha从0线性过渡到1。这样边缘会柔和很多，但会引入半透明的绿色残留。

这个项目采用的是双阈值+平滑步进的方案：设置一个内阈值和一个外阈值，内阈值以内完全透明，外阈值以外完全不透明，中间用smoothstep做平滑。同时引入一个溢色抑制（Spill Suppression）步骤，把前景边缘上残留的绿色分量压下去。具体做法是：如果像素的G分量明显高于R和B的平均值，就把G拉低到那个平均值附近。

2.5 性能考量：全屏Blit还是CommandBuffer

最朴素的方案是每帧把WebCamTexture画到一个RenderTexture上，然后用一个全屏的Graphics.Blit做键控。这个方案简单直接，但在移动端上，每帧一次全屏Blit的带宽开销不小。优化方案是用CommandBuffer把键控操作插入到渲染管线里，避免额外的RT切换。但这个项目为了保持代码的可读性和跨平台兼容性，选择了Graphics.Blit方案，在PC上跑1080p@60帧毫无压力，在移动端上720p@30帧也稳得住。

3. 核心Shader实现与参数调优细节

3.1 Shader的整体结构

这个项目的核心是一个片元着色器，输入是摄像头纹理，输出是带Alpha通道的抠像结果。Shader的Properties块里暴露了几个关键参数：

Properties { _MainTex ("Camera Texture", 2D) = "white" {} _KeyColor ("Key Color", Color) = (0, 1, 0, 1) _InnerThreshold ("Inner Threshold", Range(0, 1)) = 0.1 _OuterThreshold ("Outer Threshold", Range(0, 1)) = 0.2 _SpillSuppress ("Spill Suppression", Range(0, 1)) = 0.5 _EdgeSoftness ("Edge Softness", Range(0.001, 0.1)) = 0.01 }

_KeyColor是键控颜色，默认是纯绿。_InnerThreshold和_OuterThreshold控制透明区域的范围。_SpillSuppress控制溢色抑制的强度。_EdgeSoftness是边缘羽化的额外控制。

3.2 色度距离的计算过程

片元着色器的主逻辑分四步。第一步，采样摄像头纹理，拿到RGB值。第二步，把RGB转到YCbCr空间，提取Cb和Cr分量。第三步，计算当前像素的CbCr与键控颜色的CbCr之间的欧氏距离。第四步，根据距离和阈值计算Alpha，并做溢色抑制。

距离计算的代码大概长这样：

float2 keyCbCr = RGBtoCbCr(_KeyColor.rgb); float2 pixelCbCr = RGBtoCbCr(col.rgb); float dist = distance(pixelCbCr, keyCbCr); float alpha = smoothstep(_InnerThreshold, _OuterThreshold, dist);

这里有个细节：distance函数算的是欧氏距离，但在CbCr平面上，有时候用曼哈顿距离或者加权距离效果更好。因为人眼对Cb和Cr的敏感度不一样，Cr的偏差比Cb的偏差更容易被察觉。所以可以给Cr分量加一个权重，比如1.2，让Cr的偏差对距离的贡献更大。这个项目用的是标准欧氏距离，但在实际调参时，如果发现红色区域残留多，可以手动调高Cr的权重。

3.3 溢色抑制的具体做法

溢色抑制是抠像质量的分水岭。没有这一步，前景边缘会有一圈绿色的光晕，尤其是在头发和半透明物体上。做法是：对于被判定为前景的像素，检查它的G分量是否异常高。如果是，就把G分量压到R和B的某个统计值附近。

float spill = col.g - max(col.r, col.b); spill = max(0, spill); col.g -= spill * _SpillSuppress;

这个逻辑的意思是：如果绿色分量比红蓝的最大值还高，说明有绿色溢出，把超出的部分乘以抑制系数减掉。_SpillSuppress设为0.5时，减掉一半的溢出量；设为1时，完全消除溢出。但完全消除会导致前景颜色失真，所以一般设在0.5到0.8之间。

3.4 阈值调参的实操经验

_InnerThreshold和_OuterThreshold这两个参数，是整个项目里最需要花时间调的。调参的逻辑是这样的：先把_InnerThreshold设为0，_OuterThreshold设为1，这时候整个画面全透明。然后慢慢提高_InnerThreshold，直到背景开始变得不透明。再慢慢降低_OuterThreshold，直到前景开始变得透明。最后在两者之间找一个平衡点。

我自己的经验值是：如果绿幕质量好、灯光均匀，_InnerThreshold可以设到0.15，_OuterThreshold设到0.25。如果绿幕有褶皱、光照不均，_InnerThreshold要降到0.08，_OuterThreshold降到0.18，否则褶皱处的阴影会被误判为前景。

注意：阈值调得越宽，边缘越柔和，但半透明残留越多。阈值调得越窄，边缘越锐利，但锯齿越明显。没有完美的参数，只有针对当前场景的最优解。

3.5 摄像头纹理的采样优化

WebCamTexture的采样有个坑：它的纹理坐标原点和Unity的UI系统是反的。在PC上，摄像头画面是上下颠倒的，需要手动翻转Y坐标。在移动端上，有些设备是左右镜像的，需要翻转X坐标。这个项目在Shader里加了一个_FlipY和_FlipX的开关，根据平台自动设置。

另外，WebCamTexture的过滤模式建议设为Bilinear，不要用Point。因为摄像头画面本身有噪点，用Point采样会把噪点放大成马赛克。Bilinear会稍微模糊一点，但噪点会被平滑掉，反而对抠像有利。

4. 完整实操流程与关键环节实现

4.1 环境准备与项目结构

这个项目不依赖任何第三方插件，纯Unity原生实现。创建一个新的3D项目，目录结构建议这样组织：

Assets/ ChromaKeyKit/ Scripts/ ChromaKeyController.cs WebCamManager.cs Shaders/ ChromaKey.shader Materials/ ChromaKeyMat.mat Scenes/ Demo.unity

ChromaKeyController.cs是核心控制脚本，负责驱动Shader参数。WebCamManager.cs负责摄像头的初始化、播放、暂停和释放。ChromaKey.shader是键控着色器。ChromaKeyMat.mat是使用该Shader的材质。

4.2 摄像头初始化的完整代码

WebCamManager的初始化逻辑需要处理几个边界情况：设备没有摄像头、用户拒绝授权、摄像头被其他应用占用。代码大概长这样：

using UnityEngine; public class WebCamManager : MonoBehaviour { public int requestedWidth = 1280; public int requestedHeight = 720; public int requestedFPS = 30; private WebCamTexture webCamTexture; private bool isInitialized = false; public WebCamTexture Texture => webCamTexture; public bool IsReady => isInitialized && webCamTexture != null && webCamTexture.isPlaying; public void Initialize() { if (WebCamTexture.devices.Length == 0) { Debug.LogError("No camera device found."); return; } string deviceName = WebCamTexture.devices[0].name; webCamTexture = new WebCamTexture(deviceName, requestedWidth, requestedHeight, requestedFPS); webCamTexture.Play(); isInitialized = true; } public void Stop() { if (webCamTexture != null && webCamTexture.isPlaying) { webCamTexture.Stop(); } } private void OnDestroy() { Stop(); } }

这里有个细节：WebCamTexture的构造函数里传的宽高和帧率只是“请求值”，实际生效的值可能不同。你需要在Play()之后检查webCamTexture.width和webCamTexture.height，用实际值来更新材质的分辨率参数。

4.3 键控材质的参数绑定

ChromaKeyController负责把摄像头纹理和用户调节的参数传给材质：

using UnityEngine; [RequireComponent(typeof(Renderer))] public class ChromaKeyController : MonoBehaviour { public WebCamManager webCamManager; public Color keyColor = Color.green; [Range(0, 1)] public float innerThreshold = 0.1f; [Range(0, 1)] public float outerThreshold = 0.2f; [Range(0, 1)] public float spillSuppress = 0.5f; private Material material; private void Start() { material = GetComponent<Renderer>().material; if (webCamManager != null) { webCamManager.Initialize(); } } private void Update() { if (webCamManager == null || !webCamManager.IsReady) return; material.SetTexture("_MainTex", webCamManager.Texture); material.SetColor("_KeyColor", keyColor); material.SetFloat("_InnerThreshold", innerThreshold); material.SetFloat("_OuterThreshold", outerThreshold); material.SetFloat("_SpillSuppress", spillSuppress); } }

注意GetComponent<Renderer>().material会创建一个材质实例，而不是直接引用共享材质。这是必要的，因为每个摄像头实例可能需要不同的参数。但这也意味着你需要手动管理这个实例的销毁，否则会有内存泄漏。在OnDestroy里加一句Destroy(material)。

4.4 Shader的完整实现

下面是Shader的核心部分，省略了标准的头部声明：

sampler2D _MainTex; float4 _MainTex_ST; fixed4 _KeyColor; float _InnerThreshold; float _OuterThreshold; float _SpillSuppress; float2 RGBtoCbCr(float3 rgb) { float cb = -0.169 * rgb.r - 0.331 * rgb.g + 0.500 * rgb.b + 0.5; float cr = 0.500 * rgb.r - 0.419 * rgb.g - 0.081 * rgb.b + 0.5; return float2(cb, cr); } v2f vert(appdata v) { v2f o; o.pos = UnityObjectToClipPos(v.vertex); o.uv = TRANSFORM_TEX(v.uv, _MainTex); return o; } fixed4 frag(v2f i) : SV_Target { fixed4 col = tex2D(_MainTex, i.uv); float2 keyCbCr = RGBtoCbCr(_KeyColor.rgb); float2 pixelCbCr = RGBtoCbCr(col.rgb); float dist = distance(pixelCbCr, keyCbCr); float alpha = smoothstep(_InnerThreshold, _OuterThreshold, dist); float spill = col.g - max(col.r, col.b); spill = max(0, spill); col.g -= spill * _SpillSuppress; return fixed4(col.rgb, alpha); }

这个Shader的渲染队列要设为Transparent，混合模式设为SrcAlpha OneMinusSrcAlpha。另外，ZWrite要关掉，否则透明区域会遮挡后面的物体。

4.5 场景搭建与合成测试

在场景里创建一个Quad或者Plane，把ChromaKeyMat挂上去。在Quad后面放一个3D场景或者另一张图片作为背景。运行后，如果一切正常，你应该能看到摄像头画面里的人像被合成到了背景上。

但第一次跑起来大概率不会完美。常见的情况是：边缘有绿边、头发丝消失、阴影区域有噪点。这时候就需要进入调参环节。我的建议是先把_SpillSuppress设为0，专心调阈值。等阈值调好了，再慢慢加溢色抑制。

4.6 分辨率与帧率的平衡

WebCamTexture的分辨率不是越高越好。1080p的摄像头画面在移动端上做全屏Blit，带宽开销很大。实测下来，720p是一个比较平衡的选择：抠像质量够用，性能压力可控。如果设备性能更弱，可以降到640x480，但边缘质量会明显下降。

帧率方面，WebCamTexture的requestedFPS设为30就够了。60帧的摄像头画面在抠像后合成到30帧的渲染管线里，反而会造成帧率不稳。Unity的渲染帧率和摄像头采集帧率是独立的，如果摄像头帧率高于渲染帧率，会出现画面撕裂；如果低于渲染帧率，会出现卡顿。所以最好让两者匹配。

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

5.1 边缘绿边严重怎么办

绿边是溢色抑制不够导致的。先检查_SpillSuppress是否设得太低，建议从0.5开始往上加。如果加到0.8还有绿边，说明阈值设得太宽了，边缘的半透明像素太多。把_OuterThreshold降低0.02到0.05，让边缘更锐利一些。

还有一个隐藏原因：摄像头的白平衡不准。如果摄像头的自动白平衡把绿色偏成了黄绿色，那键控颜色也要相应调整。不要死守纯绿(0,1,0)，用取色器从实际画面里取一个绿幕区域的平均颜色作为_KeyColor。

5.2 头发丝和半透明物体抠不干净

这是色度键控的先天缺陷。头发丝是半透明的，它的颜色是头发本色和背景绿色的混合，色度距离处于阈值中间地带，所以alpha值也在中间。结果就是头发丝要么消失，要么带着绿色残留。

解决方案有两个方向：一是接受这个缺陷，用稍微高一点的_InnerThreshold把头发丝区域也抠掉，然后用一个简单的边缘羽化来掩盖；二是引入一个额外的边缘检测Pass，对边缘区域做特殊处理。但这个项目没有做那么复杂，因为大多数虚拟直播场景里，头发丝的细节损失是可以接受的。

5.3 摄像头画面延迟高

WebCamTexture本身有1到2帧的延迟，这是驱动层面的，改不了。如果延迟明显超过3帧，检查一下是不是在Update里做了太多CPU操作。把参数绑定放在Update里没问题，但不要在Update里做GetPixels或者SetPixels，那会强制CPU和GPU同步，延迟直接爆炸。

另外，WebCamTexture的didUpdateThisFrame属性可以用来判断是否有新帧。如果没有新帧，就不要重复绑定纹理，省掉不必要的GPU开销。

5.4 移动端上画面颠倒或镜像

Android前置摄像头默认是镜像的，iOS前置摄像头默认不镜像。这个差异导致同一套代码在不同设备上表现不一致。解决方案是在WebCamManager里根据Application.platform和WebCamTexture.devices的kind属性来判断，然后设置Shader的_FlipX和_FlipY参数。

#if UNITY_ANDROID material.SetFloat("_FlipX", 1); #elif UNITY_IOS material.SetFloat("_FlipX", 0); #endif

5.5 常见问题速查表

5.6 一个容易被忽略的坑：色彩空间

Unity的Project Settings里有一个Color Space选项，默认是Gamma，但建议改成Linear。在Linear空间下，Shader里的颜色计算是线性的，抠像结果更准确。如果留在Gamma空间，暗部区域的色度距离计算会有偏差，导致阴影区域抠不干净。

改Color Space会影响整个项目的渲染，所以要在项目初期就决定好。如果项目已经进行了一半，改Color Space会导致所有材质重新编译，画面效果也会变化，需要重新调参。

5.7 另一个坑：摄像头的自动曝光和自动对焦

消费级摄像头的自动曝光和自动对焦会不断调整画面，导致绿幕的亮度和色度发生变化。今天调好的阈值，明天可能就不适用了。解决方案是：如果摄像头支持，在初始化时关闭自动曝光和自动对焦，手动锁定曝光值。但WebCamTexture没有暴露这些控制接口，需要走Native插件。如果不想折腾，那就接受这个不确定性，把阈值设得宽一点，留出余量。

5.8 性能优化的几个实用技巧

第一，把键控Shader的渲染分辨率降到摄像头分辨率的一半，然后用双线性插值放大。抠像结果会稍微模糊一点，但性能提升接近一倍。第二，如果场景里不需要每帧更新键控参数，把参数绑定从Update移到OnValidate或者手动触发。第三，用CommandBuffer替代Graphics.Blit，减少RT切换开销。第四，在移动端上关闭抗锯齿，因为键控后的边缘本身就有羽化，抗锯齿反而会让边缘更糊。

这个项目后续还可以这样扩展：加入一个简单的背景替换功能，用另一张纹理替代透明区域；或者加入一个边缘光效，在前景边缘叠加一圈轮廓光，让合成结果更自然。但核心的抠像逻辑已经完整了，剩下的都是锦上添花。