WebGPU on Last Stand

3D球场项目 (一)

Fri, 29 May 2026 08:54:50 +0800

介绍

2025 H2，我们开始进行技术规划。体育的现状是版权不够丰富，关注对于非版权比赛，只有两种方式:

图文直播: 就只有一个气泡文字展示
文字直播：类似消息板的文字滚动

这两个形式提现都很一般，完全激不起用户的任何兴趣。竞品如爱奇艺，对于非版权赛事，也是类似的效果：

我们脑暴了一个使用 3D 来展示的计划。

规划阶段

最初我们计划在图文直播的基础上做一个增强，在特定情境下，如进球、得分等场景下，播放一个固定的 3D 动画。起初我们打算使用 PAG 形式，这个是最简单的，而且我们之前也有了一定的了解，PAG 文件支持一定程度的自定义，PAG 里面的文字、颜色，图片等等都可以替换。但是交互性相对使用 3D 模型差一些，无法实现调整视角、旋转等等，这个方案技术挑战也不足，所以很快放弃了。

我后来又想使用 Filament 来播 3D 模型，腾讯视频 NBA 直播间曾经使用这个项目做过球员专属的进场特效，支持用户调整视角，互动性更强。

但是我们想到了几个问题：

谁来做这些动画呢？我们没有 3D 资产库，这意味着我们要让设计给每个球队设计一个球队，还有动画，我们的设计团队支持不了；
做到最后还是只是一个播动画，虽然交互比 PAG 提高了，但还是很单调，这个想作为一个卖点，还是有点单薄；

我们决定扩展一下这个项目，不再是图文项目的一个增强项目，而是构建一个图文直播的平替：

构建一套端到端的 AI 文生 3D 动画直播生成系统;
实现输入一段自然语言文本描述（如剧情、场景、动作、情感等），或标准序列化的 event数据（如网球 opta 数据），自动生成对应的3D动画内容，包括：剧本情节、3D角色与场景模型，以及带有镜头、动作与交互，可在客户端高性能展示的完整动画展示；

我们最后选择网球来落地这个项目，是基于以下的几点考量：

腾讯体育是釆买了 WTA 以及澳网 OPTA 数据的版权，相比原来的图文直播，3D 直播显然能给用户提供更好的临场感；
与篮球、足球相比，网球球员较少，场面没有那么复杂，不需要投入很多的额外精力进行性能优化（虽然我们后面还是做了一些）；

实际上国外已经有这种动画直播了：

澳网 3D 动画直播：

索尼体育 NFL 直播方案：

3D球场项目 (五)

Sat, 30 May 2026 22:40:08 +0800

3D球场项目 (四) 把服务端推到了线上：导演 Agent 把每个 Point 切成 SERVE / RALLY / CONCLUSION 三段，配齐了动作、机位、位置、比分、解说，按 seq 单调下发到客户端。本篇回到客户端，看 Cocos 这一侧拿到 Script 之后，是怎么把它变成屏幕上一拍接一拍的比赛画面的。

整个客户端改造分四层落地，本篇只讲和 3D 球场主干业务直接相关的内容：

CocosEngine 层：场景加载架构升级（进度 / 传参 / Delegate¹ 回调 / JSBridge² 内存语义）；
MagicDanmaku 层：3D 球场的核心业务代码（数据流、状态机、动画 / 球轨迹 / 相机 / 观众）；
MagicDanmaku iOS 层：场景加载回调的演化，以及 CocosPlayer 在调用链里的角色；
业务层：腾讯体育 App 的 SwiftUI³ 视图把上面三层包成一个标准组件。

每一层和业务流程脱钩的内容（性能优化、稳定性 / crash 修复、构建工程化）统一抽到了 3D球场项目 (六)：客户端工程化与优化。

下面这张图先把四层的位置关系和数据流向摆出来，读者可以把它当作整篇文章的导航—— 箭头是数据流方向（服务端 Script 自顶向下灌进引擎、引擎事件自底向上回到 SwiftUI），每个节点旁标了对应章节：

3D球场项目 (六)：客户端工程化与优化

Sun, 31 May 2026 09:00:00 +0800

3D球场项目 (五) 把客户端的核心业务流讲完了：Native 推送 → DataManager 队列 → ScenePlayer 章节调度 → GameController 状态机 → Handler → 渲染层。功能闭环跑通之后，真正的硬仗是 “工程化"和"性能”——前者保证项目能稳定上线（编译跑通、退出不崩、Swift 调用顺手），后者保证在中低端机上画面流畅。

第一版上线时遇到了两类问题：

稳定性 / 工程化：modulemap 编译报错、lipo 架构冲突、A11 设备启动 crash、 Cocos 退出期 OpenAL 资源竞争 crash……这些都不是"画面卡"，但每一个都能让用户体验归零；
性能：中端 iPhone 在比赛回合渲染期间，GPU 和 CPU 都偶尔抖到 80%+，帧率掉到 30 fps 出头。

本篇按这两类拆成两部分，所有改动都遵循一条原则：不动玩法，只把工程问题和帧时间解决掉。

架构改动一览

3D球场项目 (二) 介绍过弹幕引擎的四层架构（腾讯视频 APP / MagicDanmakuiOS / MagicDanmaku / cocos-engine）。这一阶段 每一层都动了——3D 球场不是单点改造，而是一次自上而下的纵贯。下面这张图是把 PartTwo 那张原始架构图重画一遍，改动的节点用蓝色、新增的节点用绿色，没动的节点保持白色：