如何在浏览器中实时抠绿幕Oil Motion 的 WebGL 色键视频渲染完全指南【免费下载链接】oil-motion设计并实现随滚动、拖动、指针或状态变化响应的网页动画覆盖素材、时间轴和运行时。项目地址: https://gitcode.com/gh_mirrors/oi/oil-motionOil Motion 是一个交互动画 Skill负责设计动作、生成连续画面并把结果接入网页的滚动、鼠标和触摸操作。其中最有意思的能力之一是在浏览器中实时抠掉绿幕视频里的人物或产品站在绿色背景上页面加载时却直接呈现出透明效果的主体背后可以换成任意背景。这篇指南带你读懂 Oil Motion 的 WebGL 色键视频渲染原理不需要任何图形学基础。为什么要在浏览器里实时抠绿幕传统做法有两个问题提前抠好的透明图集太大把几百帧画面逐帧抠成透明图Alpha WebP 图集文件体积和内存占用都很高长动画根本放不下。直接放绿幕视频太丑绿色背景会直接暴露给用户无法与页面融合。Oil Motion 的折中方案是视频保留绿色背景但在网页上用 WebGL 逐帧实时抠色。绿色背景只是运输包装到了浏览器里立刻被剥掉只留下透明主体。这样视频压缩率极高绿幕视频非常好压页面又能获得任意背景。这条路线的完整说明在 references/chroma-video.md 中它明确规定只有当背景归属页面background_owner: page且预算脚本选中chroma-video时才走这条路。渲染流程一张图看懂 4 步整个实时抠色过程可以概括为 4 步全部在 GPU 上完成取帧从隐藏的video元素中取出当前画面作为纹理上传给 WebGL。判断像不像绿对画面中的每个像素比较它和抠色目标色的距离距离越近越透明。修正溢色绿色背景会反光污染主体边缘算法会把主体边缘偏绿的部分拉回来。输出透明 Canvas把处理后的画面画进透明画布页面背景从画布后面透出来。对应的两个核心文件是渲染器源码assets/chroma-video-renderer.ts帧控制器负责按交互定位帧assets/interactive-motion.ts核心原理GPU 着色器如何判断绿色抠色的大脑是一个片段着色器Fragment Shader它会被 GPU 对画面的每个像素执行一次。Oil Motion 使用的算法叫dominance-v2分三层判断第一层色度距离。不是简单比较 RGB 值而是先把颜色转换到色度空间再计算它与抠色目标色的距离。这样即使绿色背景存在明暗变化亮绿、暗绿也能被稳定识别。距离小于similarity阈值的像素直接变透明similarity smoothness范围内的像素做半透明过渡形成柔和边缘。第二层主导度Dominance。如果一个像素的绿色通道明显压过红蓝通道说明它是纯绿色残留——这类像素即使颜色略有偏差也必须抠掉。着色器通过比较G - max(R, B)来检测这种主导性防止绿幕边缘留下脏边。第三层溢色抑制Spill Removal。绿色背景的光会反射到主体边缘让人物轮廓泛绿。着色器会把受污染像素的绿色分量混入红蓝通道视觉上洗掉这层绿雾。这三个参数similarity、smoothness、spill都来自编译期写入的配置文件页面不允许自己乱调。为什么因为编译阶段已经用同一套参数逐帧模拟过抠色效果页面再改参数就会导致实际效果与验收结果不一致。编译阶段抠色在发布前就要验收实时抠色不是碰运气。视频在编译进页面之前scripts/compile_scroll_video.py 会做一次完整的预演编译动作目的按策略保留原始帧或插帧控制动画节奏与体积检查整段代表帧的色键颜色与边缘均匀度确保绿幕足够均匀逐帧模拟运行时抠色用与 WebGL 相同的dominance-v2参数检查残留、误删和溢色生成 Alpha 接触表和静态降级图出问题时的兜底素材如果模拟结果显示绿幕块残留、边缘溢色或主体内部被误抠母版会被直接拒收——禁止靠放大阈值来掩盖素材缺陷。这套硬门规则同样写在 references/chroma-video.md 的抠色硬门一节。最终编译产物compile.json中会带上runtime.keying参数和background-matrix浏览器运行时只读取这些配置不做任何创造性发挥。页面接入隐藏视频 透明画布页面结构非常简单只有两个元素一个隐藏的video负责解码色键视频用户永远看不到它。一个透明 CanvasWebGL 把抠好色的主体画在这里页面背景CSS 设置的--page-background从画布后面透出来。这意味着一个好处更换页面背景不需要重新生成任何素材——背景本来就不在视频里改 CSS 即可。运行时还有两个贴心设计逐帧定位滚动条移动时控制器调用render(frame)精确 seek 到对应帧动画严格跟随手势前进、后退或停住。自动降级如果 WebGL 创建失败、视频解码失败或用户开启了减少动态效果prefers-reduced-motion页面会显示编译时准备好的静态 Alpha 降级图绝不让用户看到绿色母版。什么时候该用色键视频不是所有动画都适合实时抠色。Oil Motion 用 scripts/motion_budget.py 根据显示尺寸、帧数和访问时间模式自动决策规则来自 references/delivery-selection.md小尺寸、随机跳转、二维参数→ Alpha WebP 图集构建时抠好随机访问快大尺寸、长一维时间轴、顺序滚动→ 绿幕全关键帧 MP4 WebGL 实时抠色省内存、压缩率高背景与主体必须一起连续→ 直接烘焙场景视频不抠色选型细节还可以参考 assets/motion-manifest.example.json 中的示例清单。小结Oil Motion 的实时绿幕抠色本质是把传统影视后期里的色键工作搬进了 GPU 着色器色度距离找背景、主导度防脏边、溢色抑制洗绿雾再配合编译期的逐帧预验收让绿幕视频 任意网页背景这条路线既省体积又稳定可控。对于想学习 Web 图形学的读者assets/chroma-video-renderer.ts 中那段不足百行的 Shader 是一个极佳的实战样本——它展示了如何用 WebGL 在几毫秒内完成一整帧视频的颜色处理。【免费下载链接】oil-motion设计并实现随滚动、拖动、指针或状态变化响应的网页动画覆盖素材、时间轴和运行时。项目地址: https://gitcode.com/gh_mirrors/oi/oil-motion创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考