用 WebGPU 复刻 90 年代视频混音器：一个硬核的实操分享

把一个 30 年前的硬件设备搬进浏览器，最难的不是画出那个面板，而是复刻它的“脾气”。这次折腾的对象是 Panasonic WJ-MX50，一个早期的数字视频混音器。这玩意儿在 90 年代是婚庆摄影师的神器，但在 VJ 圈子里，它其实是个极其出色的实时演奏乐器。

这次复刻（web-mx-50）我没用任何框架和打包工具，纯 TypeScript + WebGPU 处理视频路径，Web Audio 处理音频，总共 5700 行代码。最有趣的地方在于，我把那本 40 页的硬件操作手册直接当成了“技术需求文档”和“测试用例”。

架构逻辑：把硬件链路代码化

硬件设备的信号流向是固定的，这决定了它的行为逻辑。MX50 的链路是：
源输入 -> 总线分配 -> 色彩校正 -> 数字特效 -> 混叠/擦除 -> 下游键 -> 淡出 -> 程序输出

为了保证行为一致，我直接在代码里把这个顺序写死成一个不可更改的渲染序列（Sequence of Passes）。比如，因为下游键（Downstream Key）在特效之后，所以即使画面被马赛克特效覆盖，叠加的标题依然清晰。这种物理链路的顺序决定了它在不同操作下的表现，不能随便用某种灵活的图结构去替代。

状态机比 GPU 更关键

很多初学者复刻硬件容易陷入“怎么写 Shader”的死胡同，但实际上，这类设备的灵魂在于状态转移。

手册里记录了大量极其琐碎的逻辑，比如：

• 按一下 A 键，LED 闪烁，色度键激活；
• 再按一下，LED 常亮，RGB 摇杆生效；
• 如果总线选择了 Matte 模式又按了直接输出键，设备会输出闪烁的替代源。

这些逻辑跟 GPU 没关系，全部由状态机（State Machine）控制。我把手册里的每一条描述都转译成了场景测试，用肌肉记忆去验证代码实现是否正确。

技术栈实操要点

• 渲染管线： 采用 WebGPU 实现低延迟的视频处理，确保每一帧的 Pass 严格按照硬件链路执行。
• 状态管理： 放弃复杂的 Redux 类库，直接用简单的状态机管理 LED 闪烁和功能互斥。
• 代码结构：

// 伪代码：模拟硬件信号链路的顺序执行
class VideoPipeline {
  render(sources: Source[]) {
    let signal = this.busAssignment(sources);
    signal = this.colorCorrection(signal);
    signal = this.digitalEffect(signal);
    signal = this.mixWipe(signal);
    signal = this.downstreamKey(signal);
    signal = this.fade(signal);
    return this.programOut(signal);
  }
}

这次实战最大的感触是，最好的技术文档往往就是产品说明书。当你把说明书里的每一个“如果...那么...”都变成代码逻辑时，这个虚拟设备才真正地“活”了过来。