2淘寶Vision背后的XR

應(yīng)?研發(fā)?案探索與實(shí)踐2025XR

應(yīng)?的技術(shù)挑戰(zhàn)我們的解法(XRAppOS)未來展望?錄淘寶Vision

介紹1.0.0

美區(qū)發(fā)布2.0.0

國區(qū)發(fā)布3.0.0

發(fā)布2024.04.122024.06.192024.09.10淘寶?發(fā)上線

得到了?戶?致好評淘寶完全體上線登錄、消息、?付淘寶與多品牌合作

打造沉浸式的購物體驗(yàn)19TH

D2

TERMINALTECHNOLOGY

CONFERENCE第十九屆D2終端技術(shù)大會演講內(nèi)容中插?視頻格式：mp4分辨率：不低于1920*1080淘寶Vision

介紹7XR

應(yīng)?的技術(shù)挑戰(zhàn)最初我們想開發(fā)?款XR

應(yīng)?如果開發(fā)的不是游戲，?是應(yīng)??基礎(chǔ)中間件下載分享圖?消息?絡(luò)?頻路由視頻存儲監(jiān)控埋點(diǎn)安全?付權(quán)限登錄定位邏輯編輯Native

邏輯/JS

動態(tài)化交互層?GUI系統(tǒng)(WebUI/NativeUI)交互?式(?勢/?柄/近場/遠(yuǎn)場)沉浸體驗(yàn)屏幕巨屏 球幕環(huán)繞(

180/360

)Billboard-

游戲引擎采?的是全局實(shí)時更新-

傳統(tǒng)應(yīng)?開發(fā)更傾向于局部刷新(DirtyRect)機(jī)制，只進(jìn)?必要重繪確保更?性能UI

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

UI控件和組件庫，構(gòu)建

復(fù)雜應(yīng)?的UI

相?專?的應(yīng)?研發(fā)框架更為繁瑣。3D

渲染外的應(yīng)功能實(shí)現(xiàn)XR應(yīng)?的復(fù)雜性遠(yuǎn)不?

3D

渲染，例如電商應(yīng)?中的分享、登錄、?付等關(guān)鍵功能需要?量改造才能整合進(jìn)Unity,成本遠(yuǎn)超傳統(tǒng)開發(fā)模式性能和資源消耗游戲引擎設(shè)計(jì)?來?持?規(guī)模的實(shí)時渲染和計(jì)算，對于常規(guī)應(yīng)?來說，這樣的處理能?容易引發(fā)應(yīng)?發(fā)熱等。主線程優(yōu)化復(fù)雜性游戲引擎的GamePlay主線程必須既能處理復(fù)雜且多樣的游戲邏輯，?要保持穩(wěn)定?效的渲染能?。需要更專業(yè)化的技術(shù)棧和

優(yōu)化策略，以保證在復(fù)雜場景下的表現(xiàn)。游戲引擎做應(yīng)?的弊端編程結(jié)構(gòu)和邏輯Unity

基于渲染幀驅(qū)

動，開發(fā)者需理解并利?每?幀的回調(diào)時機(jī)iOS/Android

事件或通知機(jī)制，更直觀的UI

和事件處理流程??刷新機(jī)制我們的解法(XRAppOS)3低?檻弱化平臺差異&

降低3D

上?難度好體驗(yàn)快迭代跨平臺VisionOS、Oculus、Pico、Android

XR“沉浸式效果”研發(fā)解決?案研發(fā)效率&

動態(tài)化241VisionOS

的「同」與「新」開發(fā)框架「同」構(gòu)：與iOS

接近，iOS

開發(fā)者和應(yīng)?可以快速遷移到visionOS

平臺?部分iOS

SDK

通過少量修改可適配到visionOS

平臺iOSFRAMEWORKSSPATIALFRAMEWORKSMULTI-APP

3D

ENGINEFOVEATED

RENDERERSPATIALAUDIOENGINEREAL-TIME

SUBSYSTEMCORE

OSUI

框架UIKitSwiftUIAR內(nèi)容ARKitRealityKit?視頻AVFoundation定位coreLocation基礎(chǔ)能?FoundationVisionOS

的「同」與「新」應(yīng)?形態(tài)「新」范式：Window：顯示2D

內(nèi)容，可以?由擺放，數(shù)量不限Volume：顯示3D

內(nèi)容，可以?由擺放，數(shù)量不限Immersive

Space：更?級別的沉浸形態(tài)，融合在真實(shí)世界中，全局唯?全新的應(yīng)?形態(tài)豐富的平臺新特性，需要定制?些新的中間件VisionOS

的「同」與「新」應(yīng)?形態(tài)「新」范式：Window：顯示2D

內(nèi)容，可以?由擺放，數(shù)量不限Volume：顯示3D

內(nèi)容，可以?由擺放，數(shù)量不限Immersive

Space：更?級別的沉浸形態(tài)，融合在真實(shí)世界中，全局唯?全新的應(yīng)?形態(tài)豐富的平臺新特性，需要定制?些新的中間件窗?管理器導(dǎo)航器弱化平臺差異-?程架構(gòu)淘寶iOS中間件?絡(luò)庫登錄圖?庫安全庫存儲淘寶visionOS中間件啟動器導(dǎo)航器窗?管理器UI

組件庫權(quán)限管理Weex容器JavaScript業(yè)務(wù)邏輯WebUINative容器UIKitSwiftUI業(yè)務(wù)邏輯Weex

容器、Native

容器（API

跨容器歸?）基于visionOS

特性定制的中間件復(fù)?的淘寶iOS中間件終端3D

開發(fā)難點(diǎn)-學(xué)習(xí)曲線?終端3D

開發(fā)難點(diǎn)-3D

引擎?命周期差異終端3D

開發(fā)難點(diǎn)-主線程優(yōu)化的復(fù)雜性?向終端?程師的應(yīng)?式3D

開發(fā)解耦&易?：解耦2D與3D兩個復(fù)雜的引擎系統(tǒng)(內(nèi)存、線程、狀態(tài)同步等)實(shí)現(xiàn)Native/JS

環(huán)境下均可使?的「事件型3D

API」線程安全：業(yè)務(wù)?可在「任意線程」調(diào)?3D

API，?需關(guān)注底層實(shí)現(xiàn)性能：拆分冷熱數(shù)據(jù)，按需同步底層3D

渲染引擎?持批處理同步，??實(shí)時同步，提升性能XRAppOSCoreXRPluginXRCoreAceNNR

BackendNNR

BackendWeexAceNNRNNRXRAnimationXRColliderXRInputTargetXRNodeXRGeometryXRAnimatorXRViewAttachmentXRComponentXRSceneMath場景邏輯樹場景渲染樹我們的解法(XRAppOS)3低?檻弱化平臺差異&

降低3D

上?難度好體驗(yàn)快迭代跨平臺VisionOS、Oculus、Pico、Android

XR“沉浸式效果”研發(fā)解決?案研發(fā)效率&

動態(tài)化421萬能淘寶-多樣的空間?程序形態(tài)?疆??機(jī)-虛擬試??吉拉-虛擬逛店空間紅包?互動??SU7-虛擬試?空間容器?程序#1?程序#2空間?程序:不同?程序由不同團(tuán)隊(duì)完成開發(fā)所有空間?程序運(yùn)?在同?個ImmersiveSpace下多個空間?程序可以共存框架層需要管理不同空間?程序的?命周期ImmersiveSpace空間容器?程序#1?程序#2空間?程序(SpatialApp):所有空間?程序運(yùn)?在同?個Immersive

Space下。多個空間?程序可以共存?？蚣軐有枰芾聿煌臻g?程序的?命周期。ImmersiveSpace空間容器基于空間容器的動態(tài)化業(yè)務(wù)體系空間容器ImmersiveSpace資源下載權(quán)限管理App管理消息通道資源沙箱業(yè)務(wù)代碼?程序

?程序資源沙箱業(yè)務(wù)代碼運(yùn)?階段開發(fā)階段集成發(fā)布空間容器前端腳?架聲明資產(chǎn)列表業(yè)務(wù)邏輯開發(fā)資源下載器App切換器代碼包/資產(chǎn)包App啟動我們的解法(XRAppOS)1低?檻弱化平臺差異&

降低3D

上?難度好體驗(yàn)快迭代跨平臺VisionOS、Oculus、Pico、Android

XR“沉浸式效果”研發(fā)解決?案研發(fā)效率&

動態(tài)化243演講內(nèi)容中插?視頻格式：mp4分辨率：不低于1920*1080全景漫游介紹全景漫游是?種全虛擬的內(nèi)容展示形態(tài)通過360全景圖將?戶“傳送”到預(yù)設(shè)的場景中帶來?不出戶逛商場、逛景點(diǎn)的奇妙體驗(yàn)全景漫游-加載性能挑戰(zhàn)：單張圖像超1億像素內(nèi)存占?超800MB根本跑不起來！PNG/JPGKTX?件??內(nèi)存占?渲染速度?絡(luò)傳輸時間使?KTX壓縮紋理內(nèi)存占?下降約70%全景漫游-加載性能下載1X

KTX下載2X

KTX下載4X

KTX?成1X

USDA?成2X

USDA?成4X

USDA更新天空盒材質(zhì)挑戰(zhàn)：單張圖像超1億像素內(nèi)存占?超800MB根本跑不起來！使?KTX壓縮紋理內(nèi)存占?下降約70%3.8MB15MB60MB三級漸進(jìn)式加載加載兼顧清晰度和加載時?全景漫游-地標(biāo)點(diǎn)位精準(zhǔn)貼合挑戰(zhàn)：全景圖缺失3D

相關(guān)的深度信息地標(biāo)點(diǎn)位難以貼合?標(biāo)位置動態(tài)計(jì)算動態(tài)獲取地標(biāo)相對?眼的?向信息。貼合模擬在此?向的很遠(yuǎn)處，例如(1000?)放置地標(biāo)組件并將地標(biāo)組件放?相應(yīng)的倍數(shù)，以使得看起來和真實(shí)世界的物體???致。演講內(nèi)容中插?視頻格式：mp4分辨率：不低于1920*1080空間視頻是有空間?體感的視頻能夠讓觀眾感受到?體的縱深可以提供更加沉浸真實(shí)的體驗(yàn)空間視頻介紹空間視頻與普通視頻的差異分辨率碼率形狀?數(shù)交互720P/

1080P2

~

10

Mbps矩形平?單?彈幕/選項(xiàng)4K

/

8K20

~

100

Mbps平?/曲?/180半球?/

360球?雙?空間特效/全景漫游模擬雙眼視差的兩個不同但相似的畫??分辨率才可以營造的真實(shí)感各種各樣的展示平?：平?/曲?/180

半球?/360

球?空間視頻的播放Side

By

Side

格式的空間視頻，還有MV-HEVC

等空間視頻格式播放時需要分別將左右眼的視頻，正確的分配到設(shè)備的左右眼顯示的屏幕上XRAppOS

沉浸式模塊-空間視頻播放器DecoderControllerRendererVideoDecodeAudioDecodeBuffer

ManagerSeekerPreloaderFileReaderStreamReaderPlaying

StateControllerMessage

QueueAV

SynchronizationPerformance

TrackerAudioStereo

SoundSpatial

SoundGraphicFilterCustomizedEffectsOutputReshaperRenderer

ShaderColor

Space

ManagerVisionPro

/

Quest

/

PICO跨平臺使?場景更全??持在球?、半球?渲染?持嵌套在2D??中擴(kuò)展性更好?持添加?定義特效?持?定義解碼器在2D

UI

上展示空間視頻空間視頻播放界?尺?單位：?（m）空間維度：3

維遮擋關(guān)系：空間位置窗?繪制空間尺?單位：點(diǎn)（pt）空間維度：2

維遮擋關(guān)系：畫家模型空間視頻與窗?同步單位不同，需要找到合適的轉(zhuǎn)換關(guān)系。遮擋關(guān)系不同，UI層級的配合需要正確處理。形狀不同，空間視頻播放的??需要配合窗?做改動空間視頻的播放界?空間視頻的播放界?是三維空間的物品，透視關(guān)系與窗?同級。三維空間中的單位為真實(shí)世界的“?”，與2D

空間中的

“點(diǎn)”不同?？臻g視頻表現(xiàn)為?個懸浮在窗?上的薄?，會遮擋窗?展示的內(nèi)容。我們的解法(XRAppOS)1低?檻弱化平臺差異&

降低3D

上?難度好體驗(yàn)快迭代跨平臺VisionOS、Oculus、Pico、Android

XR“沉浸式效果”研發(fā)解決?案研發(fā)效率&

動態(tài)化2432D

UI

框架的對?XR