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

VR設(shè)備上大前端技術(shù)的探索胡鵬字節(jié)跳動/web創(chuàng)新方向負責(zé)人GMTC全球大前端技術(shù)大會InfoG大綱-VR設(shè)備應(yīng)用開發(fā)技術(shù)現(xiàn)狀-VR設(shè)備與移動終端上的技術(shù)差異點-移動端大前端技術(shù)在VR設(shè)備上的應(yīng)用前景和挑戰(zhàn)-字節(jié)跳動在VR設(shè)備大前端技術(shù)上的探索-后續(xù)規(guī)劃和展望GriTC全球大前端技術(shù)大會VR行業(yè)(2021?2022)Facebook改名為Metao2021年oculusquest2銷量700?800萬。字節(jié)跳動收購PICOo百度發(fā)布元宇宙應(yīng)用“希壤”。阿里巴巴投資Nrealo十四五規(guī)劃中數(shù)字經(jīng)濟重點產(chǎn)業(yè)：云計算、大數(shù)據(jù)、物聯(lián)網(wǎng)、工業(yè)互聯(lián)網(wǎng)、區(qū)塊鏈、人工智能、虛擬現(xiàn)實與增量現(xiàn)實。GriTC全球大前端技術(shù)大會

VR設(shè)備的發(fā)展VR一體機的總用戶量已經(jīng)達到千萬數(shù)量級GriTC infoQ全球大前端技術(shù)大會 vr—體機與移動終端上的技術(shù)差異展示形式的差異（VRVS平面）-渲染性能要求上的差異交互方式與事件處理流程的差異GriTC全球大前端技術(shù)大會

vr—體機展示方式的差異VR設(shè)備上通過左右眼不同角度的屏幕投影圖像來產(chǎn)生立體效果GriTC全球大前端技術(shù)大會InfoGVR—體機性能要求上的差異每秒渲染幀圖像數(shù)量移動端應(yīng)用滿足基本體驗要求的渲染幀率為60fps。VR設(shè)備上72fps?90fps才能滿足基本體驗要求。-VR—體機每幀需要提交左右眼兩張不同的渲染結(jié)果。-VR—體機上發(fā)生掉幀時，處于沉浸式體驗的用戶會有明顯的眩暈感。180 150 120 906030 移動端 VR一體機GriTC全球大前端技術(shù)大會GriTC全球大前端技術(shù)大會vr—體機父互方式的差異PC移動端VR鼠標屏幕手勢手柄鍵盤手勢3D空間與2d平面的事件處理方式也存在差異GriTC全球大前端技術(shù)大會vr—體機上應(yīng)用開發(fā)方式主流VR—體機都是android系統(tǒng)，支持原生android應(yīng)用。VR應(yīng)用依賴廠商提供的0penXRsdk或者其他nativesdk。VR設(shè)備上的2D應(yīng)用是當前過渡階段產(chǎn)物，本文只聚焦VR應(yīng)用。2dVRNativeNativeforOpenXRUnityUnrealEngineWeb(browser/PWA)WebXR大刖端技術(shù)-大前端技術(shù)在移動端孕育和快速發(fā)展。-將移動端大前端開發(fā)生態(tài)引入到VR領(lǐng)域，對VR內(nèi)容生態(tài)具有重大意義。-VR設(shè)備與移動端在展示形式、性能和交互等方面存在技術(shù)差異。?VR大前端技術(shù)如何選型？GriTC全球大前端技術(shù)大會移動端大刖端技術(shù)移動端大刖端技術(shù)Javascript/HTML+Native，如React-Native、Weex。自渲染，如Flutter。原生Web以及相關(guān)容器技術(shù)。GriTC全球大前端技術(shù)大會RN系列interfaceframeworkrendererNativeGriTC全球大前端技術(shù)大會自渲染I II IJS/HTML/DartI IReact/Vue/WidgetsVM(V8/Dart/JSCore)I IFlutterengine原生Web:Chromium/WebkitI這三類技術(shù)之間的界限越來越模糊，存在很多融合和變種。移動終端大前端技術(shù)在VR設(shè)備上的應(yīng)用-RN在VR-體機上應(yīng)用的可行性-Flutter在VR-體機上面臨的挑戰(zhàn)-Web在VR上的現(xiàn)狀與遇到的問題GriTC

RN在VR—體機上的可行性reactjavascriptbridgenative缺少VR3DUI支持GriTC全球大前端技術(shù)大會InfoGGriTC全球大前端技術(shù)大會InfoGFlutter在VR—體機上面臨的挑戰(zhàn)platformthreadOnPlatformEventGriTC全球大前端技術(shù)大會

OpenXRrenderIloop FrameBegincustomthreadGetControllerStateDrawLeftEyeDrawRightEye ?Fluttereventprocessor ?Flutterrasterflow ?Flutterrasterflow FrameEndGriTC全球大前端技術(shù)大會flutter2d到3dVR的改造2D的eventdispatch和render都是parent->children遞歸流程。不兼容3D場景。Skiaisanopensource2DgraphicslibrarywhichprovidescommonAPIsthatworkacrossavarietyofhardwareandsoftwareplatforms.OpenXR線程模型與flutter存在差異。解決方法：?改寫event處理流程。對layer進行合并分組。"所-有—ay5都都使,"」skia成Raster'cachEoDrawiosurTacei使，用openG—^重與o?重新改造線程相關(guān)流程以及初始化和銷毀等邏輯。GriTC全球大前端技術(shù)大會

flutterVR渲染性能移動端60fps；VR設(shè)備90*2fps。Flutter使用direct-render，在一次渲染流程中完成所有渲染邏輯，且主要在同一個線程中執(zhí)行。flutterrasterthread很難滿足90*2的幀率要求。拆分render流程變成async-render。將RasterCache生成和最后上屏分開兩個線程。GriTC全球大前端技術(shù)大會寫一套OpenGLGriTC全球大前端技術(shù)大會InfoGflutterforVR可能的方案不支持3D事件一改造事件處理流程/改造線程相關(guān)邏輯和初始化銷毀流程不支持3D渲染＜改造RasterCache與上屏邏輯 ?改造LayerTree構(gòu)建邏輯渲染性能不足 ?direct-render改成async-render ?寫一套OpenGL跨線程邏輯這還是原來的flutter么?InfoQiGriTCInfoQi全球大前端技術(shù)大會

Web在VR設(shè)備上的現(xiàn)狀MetaQuestBrowserX新松恨不高干R.卷竹曲』新力竿5用好收第“￡U慮法.打適堵點鰻信心人權(quán)“E道士“m主定"偽招土"＜鐘?南）Facebook(Beta)9:36PWA9:36PWA???

???9:49OBrowserGriTC全球大前端技術(shù)大會InfoGWeb在VR設(shè)備上的現(xiàn)狀VR手柄?鼠標2wrbltt端是么的Q”tjLunJBft么格式VR手柄+Q”tjLunJBft么格式VR手柄+軟鍵盤?鍵盤H23QGriTC全球大前端技術(shù)大會InfoGWeb在VR設(shè)備上的問題?Web的展示方式仍然是2D平面為主。-傳統(tǒng)的Web交互方式在VR設(shè)備上體驗較差。需要對現(xiàn)有的Web進行改造才能滿足VR場景需求。GriTC全球大前端技術(shù)大會InfoGWebXR是webforVR的曙光?nativewebnativewebOpenGLESWebGLOpenXRWebXRWebXR為WebGL提供XR能力支持InfoQiGriTCInfoQi全球大前端技術(shù)大會

WebXRXRrenderloop與VR頭顯姿態(tài)同步。左右眼渲染緩沖區(qū)管理。VR手柄事件支持。+WelcometoBrushworkVR!?3D內(nèi)容的渲染能力基于WebXR構(gòu)建VR設(shè)備上的大前端方案也是一個可選項WelcometoBrushworkVR!?3D內(nèi)容的渲染能力GriTC全球大前端技術(shù)大會字節(jié)跳動在字節(jié)跳動在VR設(shè)備大前端技術(shù)探索基于WebXR的前端路線。-方案設(shè)想-與其他技術(shù)方案的優(yōu)劣對比基于瀏覽器內(nèi)核的路線。-瀏覽器內(nèi)核方案介紹-瀏覽器渲染管線簡介-VR場景高性能渲染管線的設(shè)計-事件與交互的設(shè)計GriTC全球大前端技術(shù)大會字節(jié)跳動vr設(shè)備大前端技術(shù)的思考降低VR設(shè)備上的開發(fā)門檻。-將大量前端開發(fā)群體帶入VR開發(fā)領(lǐng)域。為VR設(shè)備引入更多的內(nèi)容。GriTC

基于WebXR的前端路線WebXR在瀏覽器內(nèi)核中的渲染管線:GPUthreadrendererthreadbrowsermainthreadOpenXRthreadWebXRinterfacevXRserver?RenderLoopGriTC全球大前端技術(shù)大會

WebXR的渲染流水線WebGLCallV8BindingWebGLCallV8BindingWebGLCallV8BindingGPUCallGPUCallGPUCallCPUGPUXRuplaodXRuplaodXRuplaod時間GriTC全球大前端技術(shù)大會InfoQ基于WebXR的前端路線業(yè)務(wù)邏輯前端框架前端渲染引擎javascriptengine(v8)WebXRnative3drenderengineWebXRnative3drenderengineGriTCGriTC全球大前端技術(shù)大會GPU

WebXR.路線的優(yōu)缺點缺陷:缺陷:優(yōu)勢:可以充分利用現(xiàn)有的技術(shù)。 -前端使用靈活度很高，想象空間大。-3D化能力強，展示效果好。 ?圖文內(nèi)容以及css等支持難度大。性能瓶頸較嚴重。無法與應(yīng)用內(nèi)其他內(nèi)容混合渲染。GriTC全球大前端技術(shù)大會基于瀏覽器內(nèi)核的vr大前端路線Web內(nèi)容的3D化，XR化：-XR化的3Dcss能力支持：將網(wǎng)頁元素剝離獨立展示到XR空間任意位置。-XR空間3D模型渲染支持：使用HTML語法在XR空間展示3D模型。GriTC全球大前端技術(shù)大會

基于瀏覽器內(nèi)核的VR大前端路線applicationwebframeworkscenarioXRWebViewunitypluginXRPWAinterfaceHTMLWebXR3DcontentextensioncoreBlinknative3DengineplatformOpenXRPICOsdkoculussdkGriTC全球大前端技術(shù)大會3dCSS能力的支持-瀏覽器內(nèi)核的異步渲染架構(gòu)。-適應(yīng)VR—體機的高性能渲染管線設(shè)計。?如何基于瀏覽器渲染管線支持3Dcss。-3Dcss在瀏覽器內(nèi)核數(shù)據(jù)結(jié)構(gòu)方面的變化。?3Dcss在事件方面的支持。GriTC全球大前端技術(shù)大會

瀏覽器內(nèi)核異步渲染rendererthreadcompositethreadbrowsermainthreadVIZthreadOnVsyncCompositeSubmitFrame—?內(nèi)容更新循環(huán)—?合成上屏循環(huán)GriTC全球大前端技術(shù)大會InfoG瀏覽器內(nèi)核VR高性能渲染管線設(shè)計—?頁面排版、內(nèi)容更新、點擊等事件處理―?動畫、頁面滑動等事件處理GriTC全球大前端技術(shù)大會OpenXRthreadVRrenderXR上屏InfoG3Dcss的支持OpenXRthreadVRrender■A與其他內(nèi)容混合顯示transform:translate3d(0px,0px,90px)rotate3d(0J0,1,360deg)GriTC全球大前端技術(shù)大會InfoG3Dcss3Dcss的支持layerlayerGriTC全球大前端技術(shù)大會rootLayerlayerrootLayerlayerlayerlayerGriTC全球大前端技術(shù)大會rootLayerrootLayerilayerlayerlayerlayer(ownsurface)layerlayerRootRenderPassDrawQuad.?一■w? Iww *1I?一■<vWW、-■?<1I?一■<vww、-■— <v<1W?；layerRenderPassDrawQuad.,■>-^vWw、―— IWW '^X'lI?一■<vWW、-■?I?一■<Vww、-■— <V<1Jw? —i_r^layerlayerRenderPassRootRenderPassDrawQuad.?一■>-^vWw、―— >-^v IWW ■^X'lI?一■<vWW、-■?I?一■<vWW、-■— <V<1Jw? —i_r^RenderPassDrawQuadRenderPassDrawQuadRootRenderPassRenderPassDrawQuadRenderPassDrawQuadRenderPassDrawQuad.ww ■^X'lI—1^?—RenderPassDrawQuad.ww ■^X'lIRenderPassDrawQuadRenderPassDrawQuadRenderPassDrawQuad.ww ■^X'lI—1^?—RenderPassDrawQuad.ww ■^X'lIWW'^■N^—1^?—IWW ^1^1Iw■ —1^?—f]wwFVRSurfacetexturegeometryVRSurfacetexturegeometryGriTC全球大前端技術(shù)大會當當

a

o

f

n紋理資源的跨線程/進程傳遞跨線程傳遞方式：texture->eglImage->texture跨進程依賴：surfaceTexture、aHardwareBuffer多線程/進程同步方式：eglFence、ANDROID_native_fence_syncGriTC全球大前端技術(shù)大會3Dcss的事件支持在layerTree中記錄3Dcss對應(yīng)dom元素的nodeid。通過渲染管線將nodeid傳遞到VRSurface中。每幀計算VR手柄射線與各個VRSurface的交點。通過chromium原有事件邏輯處理事件。傳遞事件時加上對應(yīng)nodeid。blink中HitTest以及事件響應(yīng)不再針對整個tree,而是針對nodeid對應(yīng)的subTree。GriTC全球大前端技術(shù)大會GriTC全球大前端技術(shù)大會當當，afo伸穿孚：一話幾視，具為笑上的K何其玩合遇電又稱有配K的這應(yīng)值?是短??，箱再極束的述薄不長結(jié)嚇敘至便時來不地人頻場迎看淡動検一就也淡以訓(xùn)，服遍外足這片我?guī)譈卻?錄過>身悪面紀而是ffitwis的匆崛起的荊戲遺憶在生活里是讓人"淪GriTC全球大前端技術(shù)大會3d模型渲染支持Page：<body><div><p>sometext</p></div>vmodelid="m"src="..."x/model></body>GriTC全球大前端技術(shù)大會htmlrenderingttEngine.addModel(m)ACompositeFrameScenematrix：{}OpenXRrenderloopDispatchEventRenderHtmlRenderModelGriTC全球大前端技術(shù)大會3d模型渲染支持OpenXRrenderloopu IDispatchEventPage：RenderHtmlPage：RenderHtml.CompositeFrame一― ———————————————