字節(jié)跳動(dòng)+VR設(shè)備上大前端技術(shù)的探索（演講PPT）

VR設(shè)備上?前端技術(shù)的探索胡鵬字節(jié)跳動(dòng)/web創(chuàng)新?向負(fù)責(zé)?VR設(shè)備應(yīng)?開發(fā)技術(shù)現(xiàn)狀?????VR設(shè)備與移動(dòng)終端上的技術(shù)差異點(diǎn)移動(dòng)端?前端技術(shù)在VR設(shè)備上的應(yīng)?前景和挑戰(zhàn)字節(jié)跳動(dòng)在VR設(shè)備?前端技術(shù)上的探索后續(xù)規(guī)劃和展望VR?業(yè)(2021～2022)Facebook改名為Meta。??????2021年oculus

quest

2銷量700～800萬。字節(jié)跳動(dòng)收購(gòu)PICO。百度發(fā)布元宇宙應(yīng)?“希壤”。阿?巴巴投資Nreal。?四五規(guī)劃中數(shù)字經(jīng)濟(jì)重點(diǎn)產(chǎn)業(yè)：云計(jì)算、?數(shù)據(jù)、物聯(lián)?、?業(yè)互聯(lián)?、區(qū)塊鏈、??智能、虛擬現(xiàn)實(shí)與增量現(xiàn)實(shí)。VR設(shè)備的發(fā)展VR?體機(jī)的總?戶量已經(jīng)達(dá)到千萬數(shù)量級(jí)VR?體機(jī)與移動(dòng)終端上的技術(shù)差異展示形式的差異（VRvs平?）渲染性能要求上的差異???交互?式與事件處理流程的差異VR?體機(jī)展示?式的差異移動(dòng)端VR設(shè)備VR設(shè)備上通過左右眼不同?度的屏幕投影圖像來產(chǎn)??體效果VR?體機(jī)性能要求上的差異每秒渲染幀圖像數(shù)量移動(dòng)端應(yīng)?滿?基本體驗(yàn)要求的渲染幀率為60fps。VR設(shè)備上72fps～90fps才能滿?基本體驗(yàn)要求??VR?體機(jī)每幀需要提交左右眼兩張不同的渲染結(jié)果。60VR?體機(jī)上發(fā)?掉幀時(shí)，處于沉浸式體驗(yàn)的?戶會(huì)有明顯的眩暈感。300移動(dòng)端VR?體機(jī)VR?體機(jī)交互?式的差異PC移動(dòng)端VR?標(biāo)鍵盤屏幕?勢(shì)?柄?勢(shì)3D空間與2d平?的事件處理?式也存在差異VR?體機(jī)上應(yīng)?開發(fā)?式主流VR?體機(jī)都是android系統(tǒng)，?持原?android應(yīng)?。VR應(yīng)?依賴?商提供的OpenXR

sdk或者其他native

sdk。VR設(shè)備上的2D應(yīng)?是當(dāng)前過渡階段產(chǎn)物，本?只聚焦VR應(yīng)?。???2dVRNativeforOpenXRUnityNativeUnreal

EngineWebXRWeb(browser/PWA)?前端技術(shù)?前端技術(shù)在移動(dòng)端孕育和快速發(fā)展。????將移動(dòng)端?前端開發(fā)?態(tài)引?到VR領(lǐng)域，對(duì)VR內(nèi)容?態(tài)具有重?意義。VR設(shè)備與移動(dòng)端在展示形式、性能和交互等??存在技術(shù)差異。VR?前端技術(shù)如何選型？移動(dòng)端?前端技術(shù)Javascript/HTML+Native，如React-Native、Weex。?渲染，如Flutter。???原?Web以及相關(guān)容器技術(shù)。移動(dòng)端?前端技術(shù)RN系列

?渲染

原?WebinterfaceJS/HTML/DartReact/Vue

/WidgetsframeworkVM（V8/Dart

/JSCore）rendererNativeFlutterengine

Chromium/Webkit這三類技術(shù)之間的界限越來越模糊，存在很多融合和變種。移動(dòng)終端?前端技術(shù)在VR設(shè)備上的應(yīng)?RN在VR?體機(jī)上應(yīng)?的可?性Flutter在VR?體機(jī)上?臨的挑戰(zhàn)Web在VR上的現(xiàn)狀與遇到的問題???RN在VR?體機(jī)上的可?性reactjavascriptbridgenative缺少VR3DUI?持nativeUI&eventFlutter在VR?體機(jī)上?臨的挑戰(zhàn)platformthreadOnPlatformEventDispatchEventUIthreadGenerateLayerTreeRasterCacheskiarasterthreadDrawToSurfaceskiaOpenXRrenderloopFrameBeginGetControllerStateDrawLeftEyeDrawRightEyeFrameEndFluttereventprocessorFlutterraster?owFlutterraster?owcustomthread?utter2d到3dVR的改造2D的eventdispatch和render都是parent->children遞歸流程。不兼容3D場(chǎng)景。??Skiaisanopensource2DgraphicslibrarywhichprovidescommonAPIsthatworkacrossa

varietyofhardwareandsoftwareplatforms.OpenXR線程模型與?utter存在差異。?解決?法：改寫event處理流程。???對(duì)layer進(jìn)?合并分組。所有Layer都使?skia?成RasterCache。DrawToSurface使?OpenGL重寫。重新改造線程相關(guān)流程以及初始化和銷毀等邏輯。?utterVR渲染性能移動(dòng)端60fps；VR設(shè)備90*2fps。???Flutter使?direct-render，在?次渲染流程中完成所有渲染邏輯，且主要在同?個(gè)線程中執(zhí)?。?utterrasterthread很難滿?90*2的幀率要求。拆分render流程變成async-render。將RasterCache?成和最后上屏分開兩個(gè)線程。渲染邏輯拆成兩個(gè)線程后，OpenGL資源如何跨線程？寫?套OpenGL多線程交互的邏輯。?utterforVR可能的?案不?持3D事件

改造事件處理流程改造線程相關(guān)邏輯和初始化銷毀流程不?持3D渲染改造RasterCache與上屏邏輯

改造

構(gòu)建邏輯LayerTree渲染性能不?

direct-render改成async-render

寫?套OpenGL跨線程邏輯這還是原來的?utter么?Web在VR設(shè)備上的現(xiàn)狀BrowserPWAWeb在VR設(shè)備上的現(xiàn)狀VR?柄

?標(biāo)VR?柄+軟鍵盤

鍵盤受限于VR?柄點(diǎn)擊準(zhǔn)確度，VR上的輸?體驗(yàn)差于PC和?機(jī)端。Web在VR設(shè)備上的問題Web的展示?式仍然是2D平?為主。??傳統(tǒng)的Web交互?式在VR設(shè)備上體驗(yàn)較差。需要對(duì)現(xiàn)有的Web進(jìn)?改造才能滿?VR場(chǎng)景需求。WebXR是webforVR的曙光？nativeOpenGLESOpenXRwebWebGLWebXRWebXR為WebGL提供XR能??持WebXRWebXRXRrenderloop與VR頭顯姿態(tài)同步。左右眼渲染緩沖區(qū)管理。VR?柄事件?持。???+

=WebGL3D內(nèi)容的渲染能??基于WebXR構(gòu)建VR設(shè)備上的?前端?案也是?個(gè)可選項(xiàng)字節(jié)跳動(dòng)在VR設(shè)備基于WebXR的前端路線。?案設(shè)想?與其他技術(shù)?案的優(yōu)劣對(duì)?基于瀏覽器內(nèi)核的路線。瀏覽器內(nèi)核?案介紹?瀏覽器渲染管線簡(jiǎn)介VR場(chǎng)景?性能渲染管線的設(shè)計(jì)事件與交互的設(shè)計(jì)字節(jié)跳動(dòng)VR設(shè)備?前端技術(shù)的思考降低VR設(shè)備上的開發(fā)?檻。???將?量前端開發(fā)群體帶?VR開發(fā)領(lǐng)域。為VR設(shè)備引?更多的內(nèi)容?；赪ebXR的前端路線WebXR在瀏覽器內(nèi)核中的渲染管線：GPUthread

rendererthread

browsermainthread

OpenXRthreadWebXR

interfaceWebGLXRserverRenderLoopSendToXR3DDrawingWebXR的渲染流?線WebGLCall

WebGLCall

WebGLCallV8Binding

V8Binding

V8BindingCPU主頻GPUGPUCall

GPUCall

GPUCallCPUGPUXRuplaodXRuplaodXRuplaod時(shí)間基于WebXR的前端路線業(yè)務(wù)邏輯前端框架前端渲染引擎javascriptengine(v8)WebXRnative3drender

engineGPUWebXR路線的優(yōu)缺點(diǎn)優(yōu)勢(shì)：缺陷：可以充分利?現(xiàn)有的技術(shù)。圖?內(nèi)容以及css等?持難度?。??前端使?靈活度很?，想象空間?。

性能瓶頸較嚴(yán)重。???3D化能?強(qiáng)，展示效果好。?法與應(yīng)?內(nèi)其他內(nèi)容混合渲染。?基于瀏覽器內(nèi)核的VR?前端路線Web內(nèi)容的3D化，XR化：XR化的3Dcss能??持：將??元素剝離獨(dú)?展示到XR空間任意位置。XR空間3D模型渲染?持：使?HTML語法在XR空間展示3D模型。??基于瀏覽器內(nèi)核的VR?前端路線applicationscenariointerfacewebfraXRWebView

unitypluginXRPWA3DcontentextensionHTMLWebXRcorenative3DengineBlinkplatformOpenXRPICOsdkoculussdk3dCSS能?的?持瀏覽器內(nèi)核的異步渲染架構(gòu)。?????適應(yīng)VR?體機(jī)的?性能渲染管線設(shè)計(jì)。如何基于瀏覽器渲染管線?持3Dcss。3Dcss在瀏覽器內(nèi)核數(shù)據(jù)結(jié)構(gòu)??的變化。3Dcss在事件??的?持。瀏覽器內(nèi)核異步渲染rendererthreadcompositethread

browsermainthread

VIZthread?utter—directrenderDrawToSurfaceOnVsyncStartCommitLayoutGenerateLayerTreeCompositeLayerTreeRasterCachPaintSubmitFrame內(nèi)容更新循環(huán)合成上屏循環(huán)瀏覽器內(nèi)核VR?性能渲染管線設(shè)計(jì)OpenXRthreadrendererthreadcompositethread

browsermainthreadVIZthreadOnVsyncStartCommitLayoutVRsurfacesVRrenderLayerTreeCompositePaintSubmitFrame??排版、內(nèi)容更新、點(diǎn)擊等事件處理動(dòng)畫、??滑動(dòng)等事件處理XR上屏3Dcss的?持OpenXRthreadrendererthreadcompositethread

browsermainthreadVIZthreadOnVsyncStartCommitLayoutVRsurfacesVRrenderLayerTreeCompositePaint與其他內(nèi)容混合顯示SubmitFrame依據(jù)css對(duì)renderObject/layer進(jìn)?分組transform:translate3d(0px,0px,90px)rotate3d(0,0,1,360deg)3Dcss的?持rootLayerrootLayerlayerlayer(ownsurface)layerlayerlayerlayerlayerlayerlayerlayer3Dcss的?持rootLayerrootLayerlayerlayer(ownsurface)layerlayerlayerlayerlayer

layerlayer

layerRootRenderPassRenderPassRenderPassRootRenderPassRenderPassDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadRenderPassDrawQuad3Dcss的?持RootRenderPassRenderPassDrawQuadRenderPassDrawQuadVRSurfacetexturegeometryRenderPassDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadVRSurfacetexturegeometryRenderPassDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuad紋理資源的跨線程/進(jìn)程傳遞跨線程傳遞?式：texture->eglImage->texture???跨進(jìn)程依賴：surfaceTexture、aHardwareBuffer多線程/進(jìn)程同步?式：eglFence、ANDROID_native_fence_sync3Dcss的事件?持在layerTree中記錄3Dcss對(duì)應(yīng)dom元素的nodeid。通過渲染管線將nodeid傳遞到VRSurface中。?????每幀計(jì)算VR?柄射線與各個(gè)VRSurface的交點(diǎn)。通過chromium原有事件邏輯處理事件。傳遞事件時(shí)加上對(duì)應(yīng)nodeid。blink中HitTest以及事件響應(yīng)不再針對(duì)整個(gè)tree，?是針對(duì)nodeid對(duì)應(yīng)的subTree。3d模型渲染?持OpenXRrenderloopDispatchEventRenderHtmlhtmlrenderingPage：CompositeFrame<body><div><p>sometext</p></div><modelid="m"src="..."></model>ScenettEngine.addModel(m)...RenderModel</body>Modelmatrix：{}3d模型渲OpenXRrenderloopDispatchEventRenderHtmlhtmlrenderingPage：CompositeFrame<body><div><p>sometext</p></div><modelid="m"src="..."></model>ScenettEngine.addModel(m)...RenderModel</body>Modelmatrix：{}?

與其他??元素渲染流程分離，互操作與交互存在問題。?

Css屬性以及animation等?法借?原有邏輯。3d模型渲染新?案OpenXRthreadrendererthreadcompositethreadbrowsermainthreadVIZthr