?VR設(shè)備應(yīng)用開發(fā)技術(shù)現(xiàn)狀?VR設(shè)備與移動終端上的技術(shù)差異點?移動端大前端技術(shù)在VR設(shè)備上的應(yīng)用前景和挑戰(zhàn)?字節(jié)跳動在VR設(shè)備大前端技術(shù)上的探索?后續(xù)規(guī)劃和展望.字節(jié)跳動收購PlCO。..十四五規(guī)劃中數(shù)字經(jīng)濟重點產(chǎn)業(yè)：云計算、大數(shù)據(jù)、物聯(lián)網(wǎng)、工業(yè)互聯(lián)網(wǎng)、區(qū)塊鏈、人工智能、虛擬現(xiàn)實與增量現(xiàn)實。VR設(shè)備的發(fā)展VR一體機與移動終端上的技術(shù)差異移動端VR一體機展示方式的差異移動端VRVR設(shè)備VR設(shè)備上通過左右眼不同角度的屏幕投影圖像來產(chǎn)生立體效果VR一體機性能要求上的差異每秒渲染幀圖像數(shù)量?移動端應(yīng)用滿足基本體驗要求的渲染幀率為60fps。VR設(shè)備上72fps～90fps才能滿足基本體驗要求。?VR一體機每幀需要提交左右眼兩張不同的渲染結(jié)?VR一體機上發(fā)生掉幀時，處于沉浸式體驗的用戶會0VR一體機交互方式的差異3D空間與2d平面的事件處理方式也存在差異VR一體機上應(yīng)用開發(fā)方式?VR設(shè)備上的2D應(yīng)用是當(dāng)前過渡階段產(chǎn)物，本文只聚焦VR應(yīng)用。2d?大前端技術(shù)在移動端孕育和快速發(fā)展。?將移動端大前端開發(fā)生態(tài)引入到VR領(lǐng)域，對VR內(nèi)容生態(tài)具有重大意義。?VR設(shè)備與移動端在展示形式、性能和交互等方面存在技術(shù)差異。移動端大前端技術(shù)framework移動端大前端技術(shù)這三類技術(shù)之間的界限越來越模糊，存在很多融合和變種。javascriptjavascriptbridgebridgeplatformthreadplatformthreadDispatchEventDispatchEventcustomthreadcustomthread?utter2d到3dVR的改造?OpenXR線程模型與?utter存在差異。?重新改造線程相關(guān)流程以及初始?utterVR渲染性能?移動端60fps；VR設(shè)備90*2fps。?Flutter使?direct-render，在?次渲染流程中完成所有渲染邏輯，且主要在同?個線程中執(zhí)?。??utterrasterthread很難滿?90*2的幀率要求。拆分render流程變成async-render。將RasterCache?成和最后上屏分開兩個線程。?utterforVR可能的?案不?持3D事件改造事件處理流程不?持3D渲染不?持3D渲染改造RasterCache與上屏邏輯改造LayerTree構(gòu)建邏輯渲染性能不?direct-render改成async-render寫?套OpenGL跨線程邏輯這還是原來的?utter么?AVR手柄+軟鍵盤鍵盤VR上的輸入體驗差于PC和手機端。webWebGL???WebXR+WebGL=?將大量前端開發(fā)群體帶入VR開發(fā)領(lǐng)域。RenderLoopRenderLoopGPUthreadrendererthreadbrowsermainthreadOpenXRthreadWebGLCallXRuplaodXRuplaodWebGLCallXRuplaodXRuplaodWebGLCallWebGLCallV8BindingV8Bindingnative3dnative3drenderenginejavascriptjavascriptengine(v8).前端使用靈活度很高，想象空間大。.圖文內(nèi)容以及css等支持難度大。.性能瓶頸較嚴(yán)重。.無法與應(yīng)用內(nèi)其他內(nèi)容混合渣染。?XR化的3Dcss能力支持：將網(wǎng)頁元素剝離獨立展示到XR空間任意位置。?XR空間3D模型渲染支持：使用HTML語法在XR空間展示3D模型。oculusoculussdkapplicationscenariowebframeworkwebframework33Dcontentextensionengine3dCSS能力的支持?3Dcss在瀏覽器內(nèi)核數(shù)據(jù)結(jié)構(gòu)方面的變化。rendererthreadcompositethreRasterCach?utter—directrenderStartCommitrendererthreadcompositethreRasterCach?utter—directrenderStartCommitCompositeComposite合成上屏循環(huán)測覽器內(nèi)核VR高性能渣染管線設(shè)計rendererthreadcompositethreStartCommitbrowsermainthreadCompositeComposite頁面排版、內(nèi)容更新、點擊等事件處理動畫、頁面滑動等事件處理XR上屏依據(jù)css對renderObject/layer進(jìn)行3Dcss的支持依據(jù)css對renderObject/layer進(jìn)行rendererthreadcompositethreStartCommitCompositeCompositetransform:translate3d(0px,0px,90px)rotate3d(0,0,1,360deg)3Dcss的支持(ownsurface)RenderPassDrawQuadRenderPassDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuad3Dcss的支持RenderPassDrawQuadRenderPassDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuad(ownsurface)DrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuad3Dcss的支持DrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadRenderPassDrawQuadRenderPassDrawQuadRenderPassDrawQuadRenderPassDrawQuadgeometryDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadgeometryDrawQuadDrawQuadDrawQuadDrawQuadDrawQuad紋理資源的跨線程/進(jìn)程傳遞3Dcss的事件支持?每幀計算VR手柄射線與各個VRSurface的交點。DispatchEventRenderModelDispatchEventRenderModel<div><p>sometext</p><modelid="m"src="..."></ttEngine.addModel(m)CompositeFrameCompositeFrame Modelmatrix：{}DispatchEventRenderModelDispatchEventRenderModel<div><p>sometext</p><modelid="m"src="..."></ttEngine.addModel(m)CompositeFrameCompositeFramematrix：{}CompositeCompositeOpenXRthreadrenderer