2025淘宝Vision背后的XR应用研发方案

2淘宝Vision背后的XR

应⽤研发⽅案探索与实践2025XR

应⽤的技术挑战我们的解法(XRAppOS)未来展望⽬录淘宝Vision

介绍1.0.0

美区发布2.0.0

国区发布3.0.0

发布2024.04.122024.06.192024.09.10淘宝⾸发上线

得到了⽤户⼀致好评淘宝完全体上线登录、消息、⽀付淘宝与多品牌合作

打造沉浸式的购物体验19TH

D2

TERMINALTECHNOLOGY

CONFERENCE第十九届D2终端技术大会演讲内容中插⼊视频格式：mp4分辨率：不低于1920*1080淘宝Vision

介绍7XR

应⽤的技术挑战最初我们想开发⼀款XR

应⽤如果开发的不是游戏，⽽是应⽤•基础中间件下载分享图⽚消息⽹络⾳频路由视频存储监控埋点安全⽀付权限登录定位逻辑编辑Native

逻辑/JS

动态化交互层⾯GUI系统(WebUI/NativeUI)交互⽅式(⼿势/⼿柄/近场/远场)沉浸体验屏幕巨屏 球幕环绕(

180/360

)Billboard-

游戏引擎采⽤的是全局实时更新-

传统应⽤开发更倾向于局部刷新(DirtyRect)机制，只进⾏必要重绘确保更⾼性能UI

框架游戏引擎通常缺少成熟的

UI控件和组件库，构建

复杂应⽤的UI

相⽐专⻔的应⽤研发框架更为繁琐。3D

渲染外的应功能实现XR应⽤的复杂性远不⽌

3D

渲染，例如电商应⽤中的分享、登录、⽀付等关键功能需要⼤量改造才能整合进Unity,成本远超传统开发模式性能和资源消耗游戏引擎设计⽤来⽀持⼤规模的实时渲染和计算，对于常规应⽤来说，这样的处理能⼒容易引发应⽤发热等。主线程优化复杂性游戏引擎的GamePlay主线程必须既能处理复杂且多样的游戏逻辑，⼜要保持稳定⾼效的渲染能⼒。需要更专业化的技术栈和

优化策略，以保证在复杂场景下的表现。游戏引擎做应⽤的弊端编程结构和逻辑Unity

基于渲染帧驱

动，开发者需理解并利⽤每⼀帧的回调时机iOS/Android

事件或通知机制，更直观的UI

和事件处理流程⻚⾯刷新机制我们的解法(XRAppOS)3低⻔槛弱化平台差异&

降低3D

上⼿难度好体验快迭代跨平台VisionOS、Oculus、Pico、Android

XR“沉浸式效果”研发解决⽅案研发效率&

动态化241VisionOS

的「同」与「新」开发框架「同」构：与iOS

接近，iOS

开发者和应⽤可以快速迁移到visionOS

平台⼤部分iOS

SDK

通过少量修改可适配到visionOS

平台iOSFRAMEWORKSSPATIALFRAMEWORKSMULTI-APP

3D

ENGINEFOVEATED

RENDERERSPATIALAUDIOENGINEREAL-TIME

SUBSYSTEMCORE

OSUI

框架UIKitSwiftUIAR内容ARKitRealityKit⾳视频AVFoundation定位coreLocation基础能⼒FoundationVisionOS

的「同」与「新」应⽤形态「新」范式：Window：显示2D

内容，可以⾃由摆放，数量不限Volume：显示3D

内容，可以⾃由摆放，数量不限Immersive

Space：更⾼级别的沉浸形态，融合在真实世界中，全局唯⼀全新的应⽤形态丰富的平台新特性，需要定制⼀些新的中间件VisionOS

的「同」与「新」应⽤形态「新」范式：Window：显示2D

内容，可以⾃由摆放，数量不限Volume：显示3D

内容，可以⾃由摆放，数量不限Immersive

Space：更⾼级别的沉浸形态，融合在真实世界中，全局唯⼀全新的应⽤形态丰富的平台新特性，需要定制⼀些新的中间件窗⼝管理器导航器弱化平台差异-⼯程架构淘宝iOS中间件⽹络库登录图⽚库安全库存储淘宝visionOS中间件启动器导航器窗⼝管理器UI

组件库权限管理Weex容器JavaScript业务逻辑WebUINative容器UIKitSwiftUI业务逻辑Weex

容器、Native

容器（API

跨容器归⼀）基于visionOS

特性定制的中间件复⽤的淘宝iOS中间件终端3D

开发难点-学习曲线⾼终端3D

开发难点-3D

引擎⽣命周期差异终端3D

开发难点-主线程优化的复杂性⾯向终端⼯程师的应⽤式3D

开发解耦&易⽤：解耦2D与3D两个复杂的引擎系统(内存、线程、状态同步等)实现Native/JS

环境下均可使⽤的「事件型3D

API」线程安全：业务⽅可在「任意线程」调⽤3D

API，⽆需关注底层实现性能：拆分冷热数据，按需同步底层3D

渲染引擎⽀持批处理同步，⽽⾮实时同步，提升性能XRAppOSCoreXRPluginXRCoreAceNNR

BackendNNR

BackendWeexAceNNRNNRXRAnimationXRColliderXRInputTargetXRNodeXRGeometryXRAnimatorXRViewAttachmentXRComponentXRSceneMath场景逻辑树场景渲染树我们的解法(XRAppOS)3低⻔槛弱化平台差异&

降低3D

上⼿难度好体验快迭代跨平台VisionOS、Oculus、Pico、Android

XR“沉浸式效果”研发解决⽅案研发效率&

动态化421万能淘宝-多样的空间⼦程序形态⼤疆⽆⼈机-虚拟试⻜⻢吉拉-虚拟逛店空间红包⾬互动⼩⽶SU7-虚拟试⻋空间容器⼦程序#1⼦程序#2空间⼦程序:不同⼦程序由不同团队完成开发所有空间⼦程序运⾏在同⼀个ImmersiveSpace下多个空间⼦程序可以共存框架层需要管理不同空间⼦程序的⽣命周期ImmersiveSpace空间容器⼦程序#1⼦程序#2空间⼦程序(SpatialApp):所有空间⼦程序运⾏在同⼀个Immersive

Space下。多个空间⼦程序可以共存。框架层需要管理不同空间⼦程序的⽣命周期。ImmersiveSpace空间容器基于空间容器的动态化业务体系空间容器ImmersiveSpace资源下载权限管理App管理消息通道资源沙箱业务代码⼦程序

⼦程序资源沙箱业务代码运⾏阶段开发阶段集成发布空间容器前端脚⼿架声明资产列表业务逻辑开发资源下载器App切换器代码包/资产包App启动我们的解法(XRAppOS)1低⻔槛弱化平台差异&

降低3D

上⼿难度好体验快迭代跨平台VisionOS、Oculus、Pico、Android

XR“沉浸式效果”研发解决⽅案研发效率&

动态化243演讲内容中插⼊视频格式：mp4分辨率：不低于1920*1080全景漫游介绍全景漫游是⼀种全虚拟的内容展示形态通过360全景图将⽤户“传送”到预设的场景中带来⾜不出户逛商场、逛景点的奇妙体验全景漫游-加载性能挑战：单张图像超1亿像素内存占⽤超800MB根本跑不起来！PNG/JPGKTX⽂件⼤⼩内存占⽤渲染速度⽹络传输时间使⽤KTX压缩纹理内存占⽤下降约70%全景漫游-加载性能下载1X

KTX下载2X

KTX下载4X

KTX⽣成1X

USDA⽣成2X

USDA⽣成4X

USDA更新天空盒材质挑战：单张图像超1亿像素内存占⽤超800MB根本跑不起来！使⽤KTX压缩纹理内存占⽤下降约70%3.8MB15MB60MB三级渐进式加载加载兼顾清晰度和加载时⻓全景漫游-地标点位精准贴合挑战：全景图缺失3D

相关的深度信息地标点位难以贴合⽬标位置动态计算动态获取地标相对⼈眼的⽅向信息。贴合模拟在此⽅向的很远处，例如(1000⽶)放置地标组件并将地标组件放⼤相应的倍数，以使得看起来和真实世界的物体⼤⼩⼀致。演讲内容中插⼊视频格式：mp4分辨率：不低于1920*1080空间视频是有空间⽴体感的视频能够让观众感受到⽴体的纵深可以提供更加沉浸真实的体验空间视频介绍空间视频与普通视频的差异分辨率码率形状⽬数交互720P/

1080P2

~

10

Mbps矩形平⾯单⽬弹幕/选项4K

/

8K20

~

100

Mbps平⾯/曲⾯/180半球⾯/

360球⾯双⽬空间特效/全景漫游模拟双眼视差的两个不同但相似的画⾯⾼分辨率才可以营造的真实感各种各样的展示平⾯：平⾯/曲⾯/180

半球⾯/360

球⾯空间视频的播放Side

By

Side

格式的空间视频，还有MV-HEVC

等空间视频格式播放时需要分别将左右眼的视频，正确的分配到设备的左右眼显示的屏幕上XRAppOS

沉浸式模块-空间视频播放器DecoderControllerRendererVideoDecodeAudioDecodeBuffer

ManagerSeekerPreloaderFileReaderStreamReaderPlaying

StateControllerMessage

QueueAV

SynchronizationPerformance

TrackerAudioStereo

SoundSpatial

SoundGraphicFilterCustomizedEffectsOutputReshaperRenderer

ShaderColor

Space

ManagerVisionPro

/

Quest

/

PICO跨平台使⽤场景更全⾯⽀持在球⾯、半球⾯渲染⽀持嵌套在2D⻚⾯中扩展性更好⽀持添加⾃定义特效⽀持⾃定义解码器在2D

UI

上展示空间视频空间视频播放界⾯尺⼨单位：⽶（m）空间维度：3

维遮挡关系：空间位置窗⼝绘制空间尺⼨单位：点（pt）空间维度：2

维遮挡关系：画家模型空间视频与窗⼝同步单位不同，需要找到合适的转换关系。遮挡关系不同，UI层级的配合需要正确处理。形状不同，空间视频播放的⾯⽚需要配合窗⼝做改动空间视频的播放界⾯空间视频的播放界⾯是三维空间的物品，透视关系与窗⼝同级。三维空间中的单位为真实世界的“⽶”，与2D

空间中的

“点”不同。空间视频表现为⼀个悬浮在窗⼝上的薄⽚，会遮挡窗⼝展示的内容。我们的解法(XRAppOS)1低⻔槛弱化平台差异&

降低3D

上⼿难度好体验快迭代跨平台VisionOS、Oculus、Pico、Android

XR“沉浸式效果”研发解决⽅案研发效率&

动态化2432D

UI

框架的对⻬XR