我们把“电影景深”塞进了浏览器：基于 Depth Anything V2 Small 与 WebGPU 的本地视频编辑实践

过去，想给普通照片或视频增加电影感景深，通常需要服务器推理、人物分割，或者依赖专业剪辑软件手工制作蒙版。

这一次，我们在开源视频编辑器 Timeline Studio 中实现了一条不同的路线：

直接在浏览器运行 Depth Anything V2 Small，通过 WebGPU 分析场景深度，并将深度结果用于实时景深预览和视频导出。

整个过程不要求把用户素材上传到服务器。照片和视频的深度分析、效果预览以及最终合成都可以在浏览器本地完成。

项目已开源，欢迎体验、Star 和参与共建：

• GitHub 仓库：MartinDelophy/ai-video-editor
• 在线体验：Timeline Studio

为什么选择 Depth Anything V2 Small

电影景深并不是简单地“把背景模糊”。

一张画面中可能同时存在近景人物、中景物体和远处背景。如果只依赖人物蒙版，系统只能区分“人物”和“非人物”，无法理解画面的空间层次。

Depth Anything V2 Small 输出的是连续的场景深度：

• 较近区域对应一组深度值
• 焦点区域保持清晰
• 远离焦点的区域逐渐模糊
• 前景与背景可以拥有不同的虚化程度
• 调整焦点位置时，可以模拟真实镜头的拉焦效果

这使景深效果从二元蒙版升级成了真正的空间效果。

我们最终选择 Small 版本，主要考虑以下几点：

• 模型体积适合浏览器分发
• Q4F16 量化版本可以降低下载和缓存压力
• Transformers.js 已经具备较成熟的调用路径
• 可以使用 WebGPU 在用户设备上执行
• Apache-2.0 许可证便于在产品中集成
• 项目原本已经使用 @huggingface/transformers，接入成本相对可控

用户看到的“电影景深”

我们在 Timeline Studio 的 Effects 工作区中增加了第五张能力卡片——“电影景深”。

这并不是一张静态占位卡片：

• 默认展示未经处理的原始画面
• 鼠标悬停或键盘聚焦时切换为景深效果
• 触屏设备可以自动展示效果预览
• 卡片结构、密度和交互方式与现有 Face Swap 能力保持一致

选择卡片后，桌面端会打开独立的 Effects 属性面板，移动端则打开聚焦式属性抽屉。

用户可以调整：

• 焦点距离
• 清晰范围
• 镜头虚化强度
• 高光散景
• 快速、标准、精细三档分析质量
• 效果启用、取消和重置

这些参数不会导致模型被重复下载。完成第一次初始化后，模型和深度分析结果都可以被复用。

浏览器中的处理流程

电影景深的整体流程可以概括为：

选择图片或视频
       ↓
准备 Depth Anything V2 Small
       ↓
通过 WebGPU 执行深度推理
       ↓
生成并缓存深度帧
       ↓
根据焦点参数计算模糊程度
       ↓
在编辑器中实时预览
       ↓
复用相同参数完成视频导出

对于图片，只需要分析一帧。

对于视频，我们不会简单地只分析封面，也不会对每一个原始视频帧都执行一次昂贵推理。系统会根据质量档位进行时间采样，生成一组带有时间信息的深度帧，然后在播放和导出过程中进行匹配和复用。

这种设计平衡了三个目标：

• 深度变化能够跟随视频内容
• 浏览器不会因为过密推理失去响应
• 预览和导出可以复用同一份分析结果

景深不是一张简单的模糊图层

很多简化方案采用的是二元处理：

人物区域 → 清晰
背景区域 → 模糊

这种方式在纯人像场景中可能有效，但遇到栏杆、桌面、前景树叶、多人画面或者复杂空间时，就很容易失去真实感。

我们的处理方式更接近真实镜头：

模糊程度 = 当前区域深度与焦点距离之间的差异

概念上可以表示为：

const distanceFromFocus = Math.abs(
  depth - focusDistance
);

const blurAmount = Math.max(
  0,
  distanceFromFocus - focusRange
) * lensBlur;

处于焦点范围内的区域保持清晰；距离焦平面越远，虚化越明显。

在此基础上，还可以增强高亮区域，模拟镜头散景。它并不是完整的物理镜头模拟，但相比“人物清晰、背景统一模糊”，已经能够表现更加自然的空间过渡。

预览与导出必须一致

AI 编辑功能很容易出现一个问题：编辑器里看起来正确，导出后却变成另一种效果。

为了避免这种情况，我们没有为预览和导出分别实现两套景深逻辑，而是让它们共享同一组数据：

• 相同的深度分析帧
• 相同的焦点距离
• 相同的焦点范围
• 相同的镜头模糊参数
• 相同的散景设置
• 相同的片段级效果状态

目前，这套效果已经接入：

• 主 Visuals 轨道
• Overlay／画中画轨道
• 编辑器实时预览
• 确定性视频导出
• 兼容性视频导出
• 项目保存与恢复

电影景深是绑定到具体剪辑片段的。调整某个 Overlay 的景深，不会错误地修改主轨道素材。

模型下载也需要产品化

让模型“能够下载”并不意味着它已经适合真正的产品。

我们对模型加载增加了几层处理。

1. 双模型源

针对不同网络环境，模型可以从 ModelScope 或 Hugging Face 获取。

国内或中文环境优先使用 ModelScope，失败后再尝试 Hugging Face。其他环境则可以根据网络情况使用对应来源。

2. 固定模型版本

生产环境不会直接依赖随时可能变化的 main 分支，而是固定到不可变的 revision。

这样可以避免模型仓库更新后，浏览器突然下载到一组与当前代码不兼容的文件。

3. 统一缓存身份

虽然模型存在两个下载来源，但它们在浏览器中代表的是同一份模型。

因此，缓存身份不能简单地绑定下载地址。否则用户从 ModelScope 切换到 Hugging Face 后，浏览器会重复下载相同文件。

我们为不同来源建立了统一、与提供商无关的缓存身份。

4. 明确的进度和错误信息

界面会明确区分：

• 模型准备
• 深度分析
• 当前已完成帧数
• 当前进度
• 取消操作
• 可恢复的网络错误
• 不支持 WebGPU 的设备错误

我们不会把浏览器底层的 Failed to fetch 直接展示给普通用户。

多语言不是发布前再补翻译

电影景深功能同步接入了项目支持的全部界面语言。

除了功能标题，还包括：

• 功能描述
• 模型准备状态
• 深度分析阶段
• 质量档位
• 焦点参数
• 取消与重试
• WebGPU 不可用提示
• 模型下载失败提示
• 图片和视频的差异说明

日语、韩语等语言出现问题，往往不是少翻译了一行，而是组件内部直接写死了中文或英文，或者新增键值没有加入完整语言表。

因此，我们把国际化当成功能实现的一部分，而不是发布前的装饰工作。

如何看待浏览器端性能

视频深度分析速度与很多因素有关：

• GPU 型号
• 浏览器的 WebGPU 实现
• 视频长度
• 视频分辨率
• 采样帧率
• 分析质量档位
• 模型是否已经下载并初始化

所以我们没有给用户承诺一个适用于所有设备的固定处理时间。

第一次使用通常包含模型下载、浏览器缓存和 WebGPU 初始化；再次处理时可以直接复用缓存，速度会明显不同。

从产品角度看，比追求一个漂亮但不可靠的数字更重要的是：

• 让模型只下载一次
• 让初始化状态清晰可见
• 让视频按照质量档位采样
• 让深度帧可以跨预览和导出复用
• 让用户能够取消长时间分析
• 避免每次调整景深参数都重新推理

焦点距离、清晰范围和虚化强度属于效果参数。深度分析完成后，调整这些参数应当立即生效，而不是重新运行模型。

深度模型还能带来什么

电影景深只是场景深度能力的第一个落点。

同一份深度数据还可以继续用于更多视频编辑能力。

2.5D 照片动画

将前景、主体和背景分层，通过不同速度和方向的移动形成视差动画。

深度感知文字与贴纸

让文字或贴纸真正进入场景空间，例如一部分位于人物身后，另一部分出现在人物前方。

空间转场

根据深度顺序逐层擦除画面，或者制作近景先离开、背景后离开的空间推进效果。

智能构图

Smart Frame 不再只依赖人物框或目标框，还可以优先保留视觉前景和重要空间层次。

深度拉焦

通过动画改变焦点距离，让清晰区域从前景移动到背景，模拟真实镜头的 Rack Focus 效果。

这些能力可以共用同一种基础资产：随时间变化的场景深度。

浏览器本地 AI 编辑正在变得可行

过去，浏览器端 AI 经常被当作功能演示：模型虽然跑起来了，但没有完整的交互、缓存、取消、导出和移动端适配。

真正把深度模型放进视频编辑器后，我们发现模型推理只占工作的一部分。

剩下的工作还包括：

• 能力入口与交互设计
• 桌面端和移动端适配
• 模型镜像与版本固定
• 浏览器缓存
• 分析进度与取消操作
• 视频时间同步
• 多轨道状态绑定
• 项目持久化
• 预览与导出一致性
• 多语言错误处理
• WebGPU 能力检测

当这些部分组合起来，Depth Anything 才不再只是一个深度估计 Demo，而成为用户真正可以使用的“电影景深”编辑能力。

写在最后

我们很喜欢这次实现，因为它展示了一种更有吸引力的浏览器 AI 方向：

AI 模型不一定需要把用户素材上传到云端，也不一定只能存在于独立的生成页面中。它可以成为剪辑器里一项自然、可调整、可保存、可复用、可导出的基础能力。

模型在本地运行，源素材留在用户设备中，分析结果可以重复利用，预览和导出保持一致。

这才是我们理解的浏览器本地 AI 视频编辑。

开源地址

Timeline Studio 已在 GitHub 开源。项目包含浏览器本地 AI 视频编辑、WebGPU 推理、电影景深、AI 音乐、AI 配音、字幕、数字人以及视频导出等能力。

• GitHub：https://github.com/MartinDelophy/ai-video-editor
• 在线体验：https://video-editor.ai-creator.top/

如果这个项目对你有帮助，欢迎在 GitHub 点一个 Star，也欢迎提交 Issue、功能建议或参与共建。

本文介绍的电影景深功能仅用于合法、授权的图片和视频编辑。使用者应确保拥有相关素材及人物肖像的合法使用权，不得将生成内容用于违法、侵权、虚假、误导或身份冒用行为，也不应将经过 AI 处理的内容冒充真实影像。违规使用所产生的责任由使用者承担。