背景介绍

「元宇宙」概念的火速出圈，引发了大众对「元宇宙」的无限畅想。虎牙直播基于直播内容生态，也在做着自己的探索和尝试。回归到目前的内容生态，我们发现直播实时性、沉浸式体验、互动社交等特点与「元宇宙」有着异曲同工之处，直播可以很好地满足人们在沉浸式场景进行实时交互的需求。那么，如何在直播场景中实现虚拟化的沉浸式体验呢？

虎牙直播作为国内知名的游戏直播平台，在实时内容创作和直播互动技术方面积累了丰富经验，我们结合直播“元宇宙“的畅想，在近期推出了虎牙云蹦迪直播新玩法，让观众化身虚拟形象，足不出户也能沉浸式体验现实蹦迪的五光十色和动人音乐。

1.1 什么是云蹦迪

云蹦迪是通过渲染引擎和3D模型搭建绘制的虚拟直播间场景，包含了粒子效果、舞台颜色变换等多种模拟真实蹦迪场景的特效，并支持用户通过弹幕发送创建随机角色，加入云蹦迪实在互动。云蹦迪中的角色操作是通过弹幕指令触发，例如发送特定弹幕可实现角色换装等。云蹦迪直播间左上角设置了送礼和弹幕次数统计排行榜，排行榜前三的用户可以轮流上DJ台成为云蹦迪DJ，并赋予了DJ特殊指令功能，例如切换歌曲和聚焦场景到某一用户。

云蹦迪是一种无人直播形式，提供虚拟场景让用户自由玩耍，主播的作用更多是在于控制场景特效和组织直播间活动，无人直播的优势在于可以7*24小时不间断开播，只要云蹦迪开启，用户就可以随时进入娱乐。

虎牙云蹦迪测试场景

1.2 云蹦迪的拓展场景

云蹦迪是虚拟社交的其中一种场景互动玩法，其他场景也可加入云蹦迪的思路，实在虚拟互动。例如云课堂，观众不再是单纯面对资料和导师视频画面，通过构建虚拟的课堂场景，每个用户的虚拟角色错落有致的站在台下，通过弹幕指令控制虚拟形象可以生动地与导师交流，甚至可以结合AI人脸识别和肢体驱动获取用户表情和肢体行为控制角色，活跃课堂氛围和调度用户上课积极性。除了云课题的多人场景，还可以叫上三五知己开启云足球直播间，仿佛置身大球场身临其境观看足球赛，云足球还能结合赛事实况触发多种虚拟特效，让观赛体验感提升多一层次。

直播间的互动玩法日益丰富，逐步向泛娱乐的轻游戏化演进，提升了用户在直播间的沉浸式体验。因此场景互动必然是大势所趋，要场景互动就需要更加完善的渲染能力支持，接下来，我将介绍虎牙直播云蹦迪项目的技术实现流程。

虎牙云蹦迪背后的技术实现流程

2.1 整体实现流程

云蹦迪实现流程

实现虎牙云蹦迪主要有四个环节，首先将外部接收的多媒体数据传递给云蹦迪游戏，多媒体文件可在云蹦迪场景内播放。第二，通过前期的素材制作和特效编辑器的配置可导出云蹦迪所需场景资源包，场景和特效的渲染能力则由虎牙自研渲染引擎Tiger提供。接下来，开发者使用TigerLua IDE进行游戏逻辑的编写。TigerLua IDE是Tiger自研引擎的Lua化接口，方便使用Lua调用Tiger的渲染能力。最后，将云蹦迪的音视频流再推送到线上观众端。以下将会逐步拆分详解云蹦迪实现过程中的关键步骤。

2.2 Tiger自研引擎介绍

制作云蹦迪3D互动场景，第一步就是选择渲染引擎。渲染引擎可以简单定义为实现了一系列渲染技术的框架，以云蹦迪的3D舞台场景为例，由美术在设计软件制作模型文件，计算机加载解析读取顶点数据信息，并添加颜色，光照，阴影，材质等内容，最后渲染到屏幕上，这就是渲染引擎的工作过程。

渲染引擎只是将模型绘制出来，但是云蹦迪还有互动逻辑，这里就需要脚本系统，说到这里，有人会觉得渲染引擎和游戏引擎很相似，是的，渲染引擎更像是游戏引擎的子集，一个很重要的子集，在实现的时候都会参考游戏引擎的架构设计和功能特点。如果云蹦迪只是一个单独运行的程序应用，是非常适合使用Unity或者Unreal游戏引擎，毕竟游戏商用引擎有成熟稳定的工作流和参考示例，但是商用游戏引擎作为第三方SDK嵌入有较大的技术成本和性能成本。

为了让云蹦迪在移动端、云服务器等多端流畅运行万人同屏，我们决定使用自研渲染引擎Tiger。Tiger长期服务于虎牙直播跨平台多端的美颜特效和互动玩法，并且拥有完善的生产链路和生产工具，至今已支持数百种美颜特效和几十种直播互动玩法，对于虎牙直播的业务耦合性极好。以下，我们将会详细介绍Tiger引擎的架构和能力。

虎牙云蹦迪使用的渲染引擎是虎牙自研跨平台渲染引擎Tiger，自研引擎的优势在于深度定制结合业务场景，轻量化，功能快速迭代和优秀性能。Tiger已经落地到虎牙的各个产品中，比如虎牙直播，虎牙助手，海外直播平台Nimo等，而覆盖的应用场景包含，直播特效，视频编辑，互动玩法等。以下是Tiger引擎功能架构。

Tiger架构

2.3 特效编辑器

由于渲染引擎和设计软件的光照、材质等存在差异，美术用户在制作场景素材和特效资源的时候需要一种所见即所得的编辑+预览效果，来保证上线效果符合设计预期。为此，我们研发虎牙特效编辑器MagicEditor，其内置多种美颜特效模板，例如AR贴纸，美妆美颜，3D礼物特效等等，支持多种光照类型和材质，例如平行光，点光源，玻璃材质，毛绒材质等等，美术用户只需打开对应的特效模板，拖入新制作的序列帧或者模型素材，通过简单的参数配置即可产出新款特效，因为MagicEditor使用Tiger引擎渲染效果，美术在预览配置素材场景的时候，就能保证与上线效果一致，极大促进特效资源更新产出，也减少额外的美术返工和沟通成本，虎牙直播线上数量众多且款式各异的特效就是由此工作链生产。

下图即是虎牙直播特效从生产到上线的完整工作流程。

MagicEditor特效生产流程

2.3.1 场景搭建

MagicEditor并不只制作特效，还能进行3D场景编辑，虎牙云蹦迪的舞台场景就是用此搭建的。在MagicEditor中可以用鼠标拖拽来控制模型的平移、旋转和放缩，方便美术用户的场景布局，并且还可以所见即所得调整相机的视角和坐标信息，在3D场景渲染中，相机是控制渲染的可见区域，最终3D场景的观察视角和整体效果便是由相机观察所得。

在MagicEditor中除了内置材质还有自定义材质，自定义材质支持读取OpenGLes3.0 语法的shader，用户可以通过编写shader来实现独特效果，shader效果可以实时修改和预览，云蹦迪舞台的颜色变换和闪烁便是使用MagicEditor的自定义材质实现。

MagicEditor场景编辑

在云蹦迪DJ台上摇摆的射灯是由模型动画制作的，Tiger引擎支持MagicEditor的动画组件系统和动画关键帧编辑。美术用户将动画模型拖入编辑器可生成对应的AnimationClip资源，在对应模型节点新建Animator组件，通过动画组件选择动画资源，便可即时预览动画在3D场景模型的效果，方便美术用户调整动画效果。

MagicEditor动画组件

2.3.2 粒子特效制作

（1）粒子系统
云蹦迪场景中闪烁的射灯光柱、绚丽多彩的地面光斑、五彩缤纷的烟花效果，作为气氛担当烘托了蹦迪场景嗨翻天的氛围，这些都是由粒子系统实现的。粒子特效在直播特效、PK互动、游戏场景中起到锦上添花的作用。

自研的粒子系统是Tiger渲染引擎中非常重要的部分，其框架由控制管理器、渲染器、工具类模块等组成。内部实现了一系列如内存管理回收机制、渲染缓冲机制、独立渲染等技术。粒子系统内部通过InstanceChunk、InstanceContainer、InstanceGroup、Instance来统一分配和回收每个实例的内存，使用内存池的方式，通过各个容器、组之间配合减少内存碎片化，使得分配内存更加快速。粒子系统内部采用多线程机制，使用双DrawCell缓冲技术，由两个前后DrawCell Buffer不断交替更新，使得渲染方面有了很大的性能提升。

粒子系统作为模拟模糊现象的技术，其功能模块需要负责实现粒子的初始阶段、模拟更新阶段、渲染阶段的处理工作，下面是Tiger粒子系统的功能模块架构图。

Tiger粒子系统的功能模块图

（2）粒子效果编辑器
所谓工欲善其事，必先利其器。功能模块涉及到粒子特效的制作，将粒子系统的功能模块嵌入到3D粒子效果编辑器当中，面向所有的美术设计师，让更多的设计人员参与其中制作自己的粒子特效。

考虑到软件的易用性和界面的友好性，我们参考市面上成熟的商用引擎如UE4、U3D、Godot等，最终选择了U3D中的粒子系统功能模块作为我们的参考，将功能模块API、编辑器UI与Unity对齐，这样可以减少美术设计人员的学习成本和对接成本。下图是Tiger粒子编辑器复刻Unity3D火焰粒子效果的对比图，左为Tiger粒子特效，右为U3D粒子特效。

火焰粒子效果的对比图

（3）粒子特效制作流程
为了方面与Unity引擎粒子互通，我们将后续开放U3D粒子导出脚本供美术制作人员进行使用，将自动实现将Unity粒子特效导入到Tiger渲染引擎中。

粒子特效制作流程图

2.4 Tiger引擎LuaIDE

云蹦迪场景搭建完后，就需要考虑如何编写互动逻辑，云蹦迪的互动逻辑即是用户和主播在云蹦迪中的互动玩法和对于渲染资源的调度使用，在Unity中游戏逻辑是通过C#的脚本系统实现的，Tiger引擎同样有一个”麻雀虽小五脏俱全“的脚本系统——TigerLua。

TigerLua实际上是Tiger渲染引擎接口的Lua化，方便开发者通过Lua脚本编写业务逻辑和调用Tiger渲染能力，为此我们开发vscode插件——TigerScriptingTools，开发者可以根据TigerLua的脚本调用事件来组织游戏逻辑，虎牙直播的线上互动玩法均是均是用此编写。

Lua脚本框架

云蹦迪的难点和解决方案

云蹦迪开发遇到最大的难点便是如何流畅运行万人同屏，对此我们从两个方面来优化性能，一方面是项目逻辑优化，在符合业务需求的前提下，如何精打细算地编写Lua脚本逻辑。另一方面是渲染引擎的优化，优化方向是减少CPU压力。

3.1 项目逻辑优化

当参与云蹦迪的人数较大的时候，云蹦迪程序会收到大量下发的弹幕和礼物数据，由于项目的逻辑架构是单线程同步的，处理这些数据的时候可能会卡顿阻塞，于是使用了以下三种方式解决性能问题。

1. 高并发导致卡顿：分帧优化，把弹幕、礼物数据放在队列里面，每帧取一些出来处理进行负载均衡
2. 气泡创建销毁开销：设置可视性和调整层级，每条弹幕过来就不需要额外的创建销毁
3. 减少大量的findNode：角色强引用角色相关的对象，减少findNode调用

3.2 渲染性能优化

3.2.1 UI气泡优化

云蹦迪还有发弹幕的功能，当运行万人同屏时会发出大量的随机弹幕，而这种弹幕是以UI气泡的形式显示出来。这些弹幕气泡都是十分相似的，区别可能只是文字不同、颜色不同、大小不同、背景不同等，普通的引擎做法是一个气泡先画背景再画文字，即一个气泡画两次，如果有一千个气泡就要画两千次，CPU调度GPU次数相应会增加了上千倍，CPU性能也会变得很差，随之会造成画面的卡顿。

Tiger自研引擎可以很好的解决上述问题，1.Tiger自研引擎能提供新型绘制UI气泡的方式：即在一段文字Label中设置背景，引擎底层会将文字和背景合成一张纹理，这样就能背景文字同时绘制，即一个气泡只需要画一次，比其他引擎少绘制了一次。2.Tiger自研引擎还提供了一个自动合批渲染的功能，将场景下挂载类型为AutoBatchNode节点，引擎会将此节点的所有材质相同的子节点进行一个合批操作，只要把一千个气泡挂到AutoBatchNode节点下就能合批，一千个气泡就只需要画一次。经过UI气泡的合并优化后，CPU处理耗时减少10%，DrawCall数量较少30%，提升画面流畅度。

云蹦迪弹幕气泡示例

云蹦迪气泡的合并流程图

3.2.2 角色渲染优化

虎牙云蹦迪渲染单个角色包含两种要素：2D网格面片和半透明材质，那么在云蹦迪场景渲染成千上万角色的时候就会面临一个问题，要如何处理2D角色在3D场景的深度混乱问题，因为2D角色是单纯的面片，并不像舞台场景是3D模型有z方向深度，因此我们需要在CPU针对半透明2D面片按照深度进行渲染顺序排序（深度最大最先渲染）。

由于每个角色的动作都是单独计算，相关的材质信息也是独立的，那么成千上万的角色对于GPU渲染调用性能的消耗是巨大的，因此为了让虎牙云蹦迪能够实现跨平台多端万人同屏的效果，我们需要对DrawCall进行合并处理。

将DrawCall合并分为两个维度的合批，一方面，使用相同材质的多个连续深度的角色可以合批成一次drawcall，如下图所示，前后相邻且同样材质的角色就会进行合批处理，意味着他们共享相同的材质，减少不必要的DrawCall。

角色材质合批

另一方面，合批处理的基础上在GPU使用4通道的UV坐标，映射多个材质（在shader中使用多个纹理），从而可以稳定合批更多材质。

经过UI气泡优化和渲染角色优化后，万人同屏场景的DrawCall数量较少80%，平均渲染耗时减少60%，在无独立显卡的PC端开启万人同屏云蹦迪，画面帧率保持在30帧以上。

总结和展望

基于虎牙在实时内容创作和直播互动技术领域的持续创新，虎牙自研引擎Tiger已经深度支持虎牙直播的特效礼物生产和互动玩法业务，也是对直播「元宇宙」的一种尝试。未来，我们考虑从两个方面去拓展自研引擎Tiger的业务影响力，一方面，面向更多企业用户，提供Tiger引擎商业合作方案，将成熟的自研渲染引擎能力以低成本的方式推广出去，提升行业内音视频互动玩法的创造效率和积极性。

另一方面，面向行业市场，开放TigerLua插件TigerScriptingTools和特效编辑器MagicEditor的下载方式和相关文档介绍，提供成熟的特效资源制作流程，方便每个用户和开发者设计独一无二的特效渲染效果和互动玩法。

“路漫漫其修远兮”，距离实现真正的「元宇宙」还非常遥远，但经过尝试，我们更加相信直播可以成为当下人们探索「元宇宙」的有效方式之一。相信随着探索的深入，也将推动虚拟化沉浸式媒体设备和实时音视频技术的良性发展，为直播的未来带来全新的体验。

来源：LiveVideoStack
链接：https://www.livevideostack.cn/news/huya-live-cloud-disco-with-10000-people-on-the-same-screen/