前端如何快速实现 3D 虚拟形象

1. 支付宝体验科技沙龙 · 数金荟前端如何快速实现 3D 虚拟形象基于 Oasis 引擎的 Ark 方舟虚拟形象解决方案演讲人：桐伦

2. 个人简介

3. 个人简介 • 桐伦，流体模拟专业博士，蚂蚁互动引擎 Oasis 核心开发者，负责物理引擎和光照

4. 个人简介 • 桐伦，流体模拟专业博士，蚂蚁互动引擎 Oasis 核心开发者，负责物理引擎和光照 • 虚拟人平台 Ark 方舟核心开发者

5. 个人简介 • 桐伦，流体模拟专业博士，蚂蚁互动引擎 Oasis 核心开发者，负责物理引擎和光照 • 虚拟人平台 Ark 方舟核心开发者 • 热爱探索前沿图形技术，Vulkan，WebGPU和物理仿真

6. 大纲 1. 实现虚拟形象的步骤和技术原理 2. 低代码实现虚拟形象开发 3. 未来关键技术展望

7. Lil Miquela 洛天依初音ミク/ Hatsune Miku yoyo鹿鸣 Shining Nikki闪耀暖暖 AYAYI

8. 工作流编辑素材创建素材捏脸美术标准导出海报截图服装创建项目素材质量前端组件动画 GLTF文方舟SDK 精细化编辑算法人脸映射动作捕获

9. 从建模软件到实时渲染

10. 从建模软件到实时渲染

11. 从建模软件到实时渲染

12. 从建模软件到实时渲染

13. GLTF文件的组织方式 • https://oasisengine.cn/gltf-viewer • https://gltf-viewer.donmccurdy.com

14. GLTF文件的组织方式 • https://oasisengine.cn/gltf-viewer • https://gltf-viewer.donmccurdy.com

15. GLTF文件的组织方式脊椎 • https://oasisengine.cn/gltf-viewer • https://gltf-viewer.donmccurdy.com

16. GLTF文件的组织方式脊椎 • https://oasisengine.cn/gltf-viewer • https://gltf-viewer.donmccurdy.com 头部

17. GLTF文件的组织方式脊椎 • https://oasisengine.cn/gltf-viewer • https://gltf-viewer.donmccurdy.com 头部

18. GLTF文件的组织方式脊椎 • https://oasisengine.cn/gltf-viewer • https://gltf-viewer.donmccurdy.com 头部服装

19. 前快实

20.

21. Oasis提供了什么通用引擎能力？

22. Oasis提供了什么通用引擎能力？形变动画

23. Oasis提供了什么通用引擎能力？形变动画渲染材质

24. Oasis提供了什么通用引擎能力？形变动画渲染材质蒙皮动画

25. 组件系统 Oasis 引擎基础能力代码添加实体组件系统架创建相机 Transform Entity 实体 MeshRenderer Animation Script … 添加模型

26. 渲染系统 1. 材质 1. PBR材质 2. SSS次表面散射 3. 各向异性材质 4. ⻛格化材质 2. 光照 1. HDR环境光 2. 动态阴影 3. 多光源 Oasis 引擎基础能力

27. 渲染系统 1. 材质 1. PBR材质 2. SSS次表面散射 3. 各向异性材质 4. ⻛格化材质 2. 光照 1. HDR环境光 2. 动态阴影 3. 多光源 Oasis 引擎基础能力

28. 渲染系统 1. 材质 1. PBR材质 2. SSS次表面散射 3. 各向异性材质 4. ⻛格化材质 2. 光照 1. HDR环境光 2. 动态阴影 3. 多光源 Oasis 引擎基础能力

29. 渲染系统 1. 材质 1. PBR材质 2. SSS次表面散射 3. 各向异性材质 4. ⻛格化材质 2. 光照 1. HDR环境光 2. 动态阴影 3. 多光源 Oasis 引擎基础能力

30. 渲染系统 1. 材质 1. PBR材质 2. SSS次表面散射 3. 各向异性材质 4. ⻛格化材质 2. 光照 1. HDR环境光 2. 动态阴影 3. 多光源 Oasis 引擎基础能力

31. 渲染系统 1. 材质 1. PBR材质 2. SSS次表面散射 3. 各向异性材质 4. ⻛格化材质 2. 光照 1. HDR环境光 2. 动态阴影 3. 多光源 Oasis 引擎基础能力

32. 渲染系统 1. 材质 1. PBR材质 2. SSS次表面散射 3. 各向异性材质 4. ⻛格化材质 2. 光照 1. HDR环境光 2. 动态阴影 3. 多光源 Oasis 引擎基础能力

33. 渲染系统 1. 材质 1. PBR材质 2. SSS次表面散射 3. 各向异性材质 4. ⻛格化材质 2. 光照 1. HDR环境光 2. 动态阴影 3. 多光源 Oasis 引擎基础能力

34. 渲染系统 1. 材质 1. PBR材质 2. SSS次表面散射 3. 各向异性材质 4. ⻛格化材质 2. 光照 1. HDR环境光 2. 动态阴影 3. 多光源 Oasis 引擎基础能力

35. 渲染系统 1. 材质 1. PBR材质 2. SSS次表面散射 3. 各向异性材质 4. ⻛格化材质 2. 光照 1. HDR环境光 2. 动态阴影 3. 多光源 Oasis 引擎基础能力

36. 渲染系统 1. 材质 1. PBR材质 2. SSS次表面散射 3. 各向异性材质 4. ⻛格化材质 2. 光照 1. HDR环境光 2. 动态阴影 3. 多光源 Oasis 引擎基础能力

37. 渲染系统 1. 材质 1. PBR材质 2. SSS次表面散射 3. 各向异性材质 4. ⻛格化材质 2. 光照 1. HDR环境光 2. 动态阴影 3. 多光源 Oasis 引擎基础能力

38. 渲染系统 1. 材质 1. PBR材质 2. SSS次表面散射 3. 各向异性材质 4. ⻛格化材质 2. 光照 1. HDR环境光 2. 动态阴影 3. 多光源 Oasis 引擎基础能力

39. 动画系统 Oasis 引擎基础能力

40. 动画系统 Oasis 引擎基础能力

41. 动画系统 Oasis 引擎基础能力 • GPU 形变动画 • 形变 Attribut • 形变纹理

42. 动画系统 Oasis 引擎基础能力 • GPU 形变动画 • 形变 Attribut • 形变纹理 • GPU⻣骼动画 • ⻣骼 Attribut • ⻣骼纹理

43. 动画系统 Oasis 引擎基础能力 • GPU 形变动画 • 形变 Attribut • 形变纹理 • GPU⻣骼动画 • ⻣骼 Attribut • ⻣骼纹理

44. 动画系统 Oasis 引擎基础能力 • GPU 形变动画 • 形变 Attribut • 形变纹理 • GPU⻣骼动画 • ⻣骼 Attribut • ⻣骼纹理

45. 动画系统 Oasis 引擎基础能力 • GPU 形变动画 • 形变 Attribut • 形变纹理 • GPU⻣骼动画 • ⻣骼 Attribut • ⻣骼纹理

46. 动画系统 Oasis 引擎基础能力 • GPU 形变动画 • 形变 Attribut • 形变纹理 • GPU⻣骼动画 • ⻣骼 Attribut • ⻣骼纹理

47. 动画系统 Oasis 引擎基础能力 • GPU 形变动画 • 形变 Attribut • 形变纹理 • GPU⻣骼动画 • ⻣骼 Attribut • ⻣骼纹理

48. 动画系统 Oasis 引擎基础能力 • GPU 形变动画 • 形变 Attribut • 形变纹理 • GPU⻣骼动画 • ⻣骼 Attribut • ⻣骼纹理

49. 从单一模型到多个场景

50. 从单一模型到多个场景

51. 从单一模型到多个场景

52. 前快实前快实形变动画蒙皮动画渲染材质注释:此处放注释(内容仅示意）

53. 前快实形变动画蒙皮动画渲染材质注释:此处放注释(内容仅示意）

54. 虚核前是快实形变动画蒙皮动画渲染材质注释:此处放注释(内容仅示意）

55. 前快实形变动画蒙皮动画渲染材质注释:此处放注释(内容仅示意）

56. 如何降低虚拟人的生产成本？前快实形变动画蒙皮动画渲染材质注释:此处放注释(内容仅示意）

57. 如何降低虚拟人的生产成本？形变动画蒙皮动画渲染材质注释:此处放注释(内容仅示意）

58. 如何降低虚拟人的生产成本？形变动画蒙皮动画 • 素材复用渲染材质注释:此处放注释(内容仅示意）

59. 如何降低虚拟人的生产成本？形变动画蒙皮动画 • 素材复用 • 简化素材编辑渲染材质注释:此处放注释(内容仅示意）

60. 如何降低虚拟人的生产成本？形变动画蒙皮动画 • 素材复用 • 简化素材编辑渲染材质 • 可扩展能力注释:此处放注释(内容仅示意）

61. 如何降低虚拟人的生产成本？形变动画 • 素材复用 • 简化素材编辑蒙皮动画替换贴图渲染材质 • 可扩展能力注释:此处放注释(内容仅示意）

62. 如何降低虚拟人的生产成本？形变动画 • 素材复用 • 简化素材编辑 • 可扩展能力蒙皮动画替换贴图渲染材质替换肤色注释:此处放注释(内容仅示意）

63. 如何降低虚拟人的生产成本？替换固定外形模型形变动画 • 素材复用 • 简化素材编辑 • 可扩展能力蒙皮动画替换贴图渲染材质替换肤色注释:此处放注释(内容仅示意）

64. 如何降低虚拟人的生产成本？替换固定外形模型形变动画 • 素材复用 • 简化素材编辑 • 可扩展能力蒙皮动画替换贴图替换蒙皮渲染材质替换肤色注释:此处放注释(内容仅示意）

65. 如何降低虚拟人的生产成本？替换固定外形模型形变动画 • 素材复用 • 简化素材编辑 • 可扩展能力蒙皮动画替换贴图替换蒙皮渲染材质替换⻣骼动画替换肤色注释:此处放注释(内容仅示意）

66. 如何降低虚拟人的生产成本？替换固定外形模型形变动画 • 素材复用 • 简化素材编辑 • 可扩展能力蒙皮动画替换贴图替换蒙皮渲染材质替换⻣骼动画替换肤色⻣骼映射注释:此处放注释(内容仅示意）

67. 如何降低虚拟人的生产成本？替换固定外形模型形变动画 • 素材复用 • 简化素材编辑 • 可扩展能力蒙皮动画替换贴图替换蒙皮渲染材质替换⻣骼动画替换肤色⻣骼映射逆向动力学注释:此处放注释(内容仅示意）

68. 如何降低虚拟人的生产成本？替换固定外形模型形变动画 • 素材复用 • 简化素材编辑 • 可扩展能力蒙皮动画替换贴图替换蒙皮增加动画渲染材质替换⻣骼动画替换肤色⻣骼映射逆向动力学注释:此处放注释(内容仅示意）

69. 如何降低虚拟人的生产成本？替换固定外形模型形变动画 • 素材复用 • 简化素材编辑 • 可扩展能力蒙皮动画替换贴图替换蒙皮增加动画渲染材质替换⻣骼动画物理动画替换肤色⻣骼映射逆向动力学注释:此处放注释(内容仅示意）

70. 眼睛，装备的个性化编辑

71. 眼睛，装备的个性化编辑

72. 眼睛，装备的个性化编辑

73. 胡子，眉毛，腮红的个性化编辑几何轮廓不明显组合多样性

74. 胡子，眉毛，腮红的个性化编辑几何轮廓不明显组合多样性

75. 换装与蒙皮的个性化编辑

76. 换装与蒙皮的个性化编辑

77. 换装与蒙皮的个性化编辑

78. 骨骼映射

79. 骨骼映射

80. 骨骼映射

81. 骨骼映射 • ⻣骼动画的本质在于⻣骼节点的运动（平移，旋转，缩放）

82. 骨骼映射 • ⻣骼动画的本质在于⻣骼节点的运动（平移，旋转，缩放） • 直接替换⻣骼动画导致所有人都会被拉伸到统一尺度

83. 骨骼映射 • ⻣骼动画的本质在于⻣骼节点的运动（平移，旋转，缩放） • 直接替换⻣骼动画导致所有人都会被拉伸到统一尺度 • ⻣骼映射的核心在于映射关键⻣骼节点的旋转以及脊柱的平移

84. 骨骼映射 • ⻣骼动画的本质在于⻣骼节点的运动（平移，旋转，缩放） • 直接替换⻣骼动画导致所有人都会被拉伸到统一尺度 • ⻣骼映射的核心在于映射关键⻣骼节点的旋转以及脊柱的平移

85. 骨骼映射 • ⻣骼动画的本质在于⻣骼节点的运动（平移，旋转，缩放） • 直接替换⻣骼动画导致所有人都会被拉伸到统一尺度 • ⻣骼映射的核心在于映射关键⻣骼节点的旋转以及脊柱的平移

86. 骨骼映射 • ⻣骼动画的本质在于⻣骼节点的运动（平移，旋转，缩放） • 直接替换⻣骼动画导致所有人都会被拉伸到统一尺度 • ⻣骼映射的核心在于映射关键⻣骼节点的旋转以及脊柱的平移

87. 骨骼映射 • ⻣骼动画的本质在于⻣骼节点的运动（平移，旋转，缩放） • 直接替换⻣骼动画导致所有人都会被拉伸到统一尺度 • ⻣骼映射的核心在于映射关键⻣骼节点的旋转以及脊柱的平移

88. 骨骼映射 • ⻣骼动画的本质在于⻣骼节点的运动（平移，旋转，缩放） • 直接替换⻣骼动画导致所有人都会被拉伸到统一尺度 • ⻣骼映射的核心在于映射关键⻣骼节点的旋转以及脊柱的平移

89. 骨骼逆向动力学 IK

90. 骨骼逆向动力学 IK

91. 骨骼逆向动力学 IK

92. 骨骼逆向动力学 IK • 根据末端位置，计算⻣骼关节的姿态

93. 骨骼逆向动力学 IK • 根据末端位置，计算⻣骼关节的姿态 • 自动适配地面

94. 骨骼逆向动力学 IK • 根据末端位置，计算⻣骼关节的姿态 • 自动适配地面 • 自动关注某个点

95. 骨骼逆向动力学 IK • 根据末端位置，计算⻣骼关节的姿态 • 自动适配地面 • 自动关注某个点 • 解析法，FBIK迭代法

96. 骨骼逆向动力学 IK • 根据末端位置，计算⻣骼关节的姿态 • 自动适配地面 • 自动关注某个点 • 解析法，FBIK迭代法

97. 骨骼逆向动力学 IK • 根据末端位置，计算⻣骼关节的姿态 • 自动适配地面 • 自动关注某个点 • 解析法，FBIK迭代法

98. 骨骼逆向动力学 IK • 根据末端位置，计算⻣骼关节的姿态 • 自动适配地面 • 自动关注某个点 • 解析法，FBIK迭代法

99. 骨骼逆向动力学 IK • 根据末端位置，计算⻣骼关节的姿态 • 自动适配地面 • 自动关注某个点 • 解析法，FBIK迭代法

100. 穿模问题

101. 穿模问题

102. 穿模问题

103. 穿模问题 1. 利用物理碰撞组件（PhysX.js）

104. 穿模问题 1. 利用物理碰撞组件（PhysX.js） 2. 利用布料模拟（NvCloth.js）

105. 穿模问题 1. 利用物理碰撞组件（PhysX.js） 2. 利用布料模拟（NvCloth.js） 3. 模型拆分

106. AI端到端

107. AI端到端

108. 创建虚拟人建模资产复用程序生成 AI端到端模型资产动画重定向动作生成材质资产 IK 表情生成动画资产物理材质生成

109. 方舟 - SDK 捏脸能力换装能力动画能力渲染能力

110. 大纲 1. 实现虚拟形象的步骤和技术原理 2. 低代码实现虚拟形象开发 3. 未来关键技术展望

111. 方舟编辑器插件基于 Oasis Editor

112. 方舟编辑器插件基于 Oasis Editor

113. 方舟 - 选择素材虚拟人素材库虚拟道具库自定义上传

114. 方舟 - 素材编辑捏脸服装动作/动画

115. 方舟 - 精细化编辑

116. 动画编排 Oasis 引擎与编辑器基础能力

117. 动画编排 Oasis 引擎与编辑器基础能力

118. 动画编排 Oasis 引擎与编辑器基础能力

119. 方舟 - 前端组件

120. 方舟 - 素材沉淀

121. 蚂蚁虚拟形象架构业务形态虚拟形象系图形技术智能讲解模型资产端内技术基于物理的渲染元宇宙虚拟形象骨骼动画蒙皮动画 AR 互动反向动力学动画 ASR 语音识别 TTS | 声音克隆容器技术（H5/小程序/小游戏）直播捏脸技术换装技术 Oasis Editor 3D场景编辑器 Oasis Engine 互动引擎引擎技术端内算法装扮类互动游戏意图识别动作识别&迁移 AR 能力（ARKit、ARCore）人脸&表情识别语音驱动生成流媒体服务（视频流推送、音视频合成）

122. 大纲 1. 实现虚拟形象的步骤和技术原理 2. 低代码实现虚拟形象开发 3. 未来关键技术展望

123. 前 Oasis编辑器 Oasis引擎快实方舟(Ark)组件方舟(Ark)编辑器

124. 前 Oasis引擎快实 Oasis编辑器 999行实现虚拟形象方舟(Ark)组件方舟(Ark)编辑器

125. 快实 99行实现虚拟形象 999行实现虚拟形象 Oasis编辑器 Oasis引擎前方舟(Ark)组件方舟(Ark)编辑器

126. 快实 9行实现虚拟形象 99行实现虚拟形象 999行实现虚拟形象方舟(Ark)组件 Oasis编辑器 Oasis引擎前方舟(Ark)编辑器

127. 快实 9行实现虚拟形象 99行实现虚拟形象 999行实现虚拟形象方舟(Ark)组件 Oasis编辑器 Oasis引擎前方舟(Ark)编辑器？

128. Oasis引擎 Oasis编辑器方舟(Ark)组件 999行实现虚拟形象 99行实现虚拟形象 9行实现虚拟形象方舟(Ark)编辑器？

129. 未来如何进一步降本提效？ Oasis引擎 Oasis编辑器方舟(Ark)组件 999行实现虚拟形象 99行实现虚拟形象 9行实现虚拟形象方舟(Ark)编辑器？

130.

131.

132. O

133.

134. Oasis 编辑器与方舟组件将于2023年一月开放外部用户使用，敬请期待！

135. Oasis 开源社区群 (钉钉) Oasis 开源社区群管理员 (微信)

136. THANKS