字节跳动+VR设备上大前端技术的探索（演讲PPT）

VR设备上大前端技术的探索胡鹏字节跳动/web创新方向负责人GMTC全球大前端技术大会InfoG大纲-VR设备应用开发技术现状-VR设备与移动终端上的技术差异点-移动端大前端技术在VR设备上的应用前景和挑战-字节跳动在VR设备大前端技术上的探索-后续规划和展望GriTC全球大前端技术大会VR行业(2021〜2022)Facebook改名为Metao2021年oculusquest2销量700〜800万。字节跳动收购PICOo百度发布元宇宙应用“希壤”。阿里巴巴投资Nrealo十四五规划中数字经济重点产业：云计算、大数据、物联网、工业互联网、区块链、人工智能、虚拟现实与增量现实。GriTC全球大前端技术大会

VR设备的发展VR一体机的总用户量已经达到千万数量级GriTC infoQ全球大前端技术大会 vr—体机与移动终端上的技术差异展示形式的差异（VRVS平面）-渲染性能要求上的差异交互方式与事件处理流程的差异GriTC全球大前端技术大会

vr—体机展示方式的差异VR设备上通过左右眼不同角度的屏幕投影图像来产生立体效果GriTC全球大前端技术大会InfoGVR—体机性能要求上的差异每秒渲染帧图像数量移动端应用满足基本体验要求的渲染帧率为60fps。VR设备上72fps〜90fps才能满足基本体验要求。-VR—体机每帧需要提交左右眼两张不同的渲染结果。-VR—体机上发生掉帧时，处于沉浸式体验的用户会有明显的眩晕感。180 150 120 906030 移动端 VR一体机GriTC全球大前端技术大会GriTC全球大前端技术大会vr—体机父互方式的差异PC移动端VR鼠标屏幕手势手柄键盘手势3D空间与2d平面的事件处理方式也存在差异GriTC全球大前端技术大会vr—体机上应用开发方式主流VR—体机都是android系统，支持原生android应用。VR应用依赖厂商提供的0penXRsdk或者其他nativesdk。VR设备上的2D应用是当前过渡阶段产物，本文只聚焦VR应用。2dVRNativeNativeforOpenXRUnityUnrealEngineWeb(browser/PWA)WebXR大刖端技术-大前端技术在移动端孕育和快速发展。-将移动端大前端开发生态引入到VR领域，对VR内容生态具有重大意义。-VR设备与移动端在展示形式、性能和交互等方面存在技术差异。•VR大前端技术如何选型？GriTC全球大前端技术大会移动端大刖端技术移动端大刖端技术Javascript/HTML+Native，如React-Native、Weex。自渲染，如Flutter。原生Web以及相关容器技术。GriTC全球大前端技术大会RN系列interfaceframeworkrendererNativeGriTC全球大前端技术大会自渲染I II IJS/HTML/DartI IReact/Vue/WidgetsVM(V8/Dart/JSCore)I IFlutterengine原生Web:Chromium/WebkitI这三类技术之间的界限越来越模糊，存在很多融合和变种。移动终端大前端技术在VR设备上的应用-RN在VR-体机上应用的可行性-Flutter在VR-体机上面临的挑战-Web在VR上的现状与遇到的问题GriTC

RN在VR—体机上的可行性reactjavascriptbridgenative缺少VR3DUI支持GriTC全球大前端技术大会InfoGGriTC全球大前端技术大会InfoGFlutter在VR—体机上面临的挑战platformthreadOnPlatformEventGriTC全球大前端技术大会

OpenXRrenderIloop FrameBegincustomthreadGetControllerStateDrawLeftEyeDrawRightEye ►Fluttereventprocessor ►Flutterrasterflow ►Flutterrasterflow FrameEndGriTC全球大前端技术大会flutter2d到3dVR的改造2D的eventdispatch和render都是parent->children递归流程。不兼容3D场景。Skiaisanopensource2DgraphicslibrarywhichprovidescommonAPIsthatworkacrossavarietyofhardwareandsoftwareplatforms.OpenXR线程模型与flutter存在差异。解决方法：•改写event处理流程。对layer进行合并分组。"所-有—ay5都都使,"」skia成Raster'cachEoDrawiosurTacei使，用openG—^重与o•重新改造线程相关流程以及初始化和销毁等逻辑。GriTC全球大前端技术大会

flutterVR渲染性能移动端60fps；VR设备90*2fps。Flutter使用direct-render，在一次渲染流程中完成所有渲染逻辑，且主要在同一个线程中执行。flutterrasterthread很难满足90*2的帧率要求。拆分render流程变成async-render。将RasterCache生成和最后上屏分开两个线程。GriTC全球大前端技术大会写一套OpenGLGriTC全球大前端技术大会InfoGflutterforVR可能的方案不支持3D事件一改造事件处理流程/改造线程相关逻辑和初始化销毁流程不支持3D渲染＜改造RasterCache与上屏逻辑 ►改造LayerTree构建逻辑渲染性能不足 ►direct-render改成async-render ►写一套OpenGL跨线程逻辑这还是原来的flutter么?InfoQiGriTCInfoQi全球大前端技术大会

Web在VR设备上的现状MetaQuestBrowserX新松恨不高干R.卷竹曲』新力竿5用好收第“£U慮法.打适堵点鳗信心人权“E道士“m主定"伪招土"＜钟•南）Facebook(Beta)9:36PWA9:36PWA•••

•••9:49OBrowserGriTC全球大前端技术大会InfoGWeb在VR设备上的现状VR手柄►鼠标2wrbltt端是么的Q”tjLunJBft么格式VR手柄+Q”tjLunJBft么格式VR手柄+软键盘►键盘H23QGriTC全球大前端技术大会InfoGWeb在VR设备上的问题•Web的展示方式仍然是2D平面为主。-传统的Web交互方式在VR设备上体验较差。需要对现有的Web进行改造才能满足VR场景需求。GriTC全球大前端技术大会InfoGWebXR是webforVR的曙光?nativewebnativewebOpenGLESWebGLOpenXRWebXRWebXR为WebGL提供XR能力支持InfoQiGriTCInfoQi全球大前端技术大会

WebXRXRrenderloop与VR头显姿态同步。左右眼渲染缓冲区管理。VR手柄事件支持。+WelcometoBrushworkVR!•3D内容的渲染能力基于WebXR构建VR设备上的大前端方案也是一个可选项WelcometoBrushworkVR!•3D内容的渲染能力GriTC全球大前端技术大会字节跳动在字节跳动在VR设备大前端技术探索基于WebXR的前端路线。-方案设想-与其他技术方案的优劣对比基于浏览器内核的路线。-浏览器内核方案介绍-浏览器渲染管线简介-VR场景高性能渲染管线的设计-事件与交互的设计GriTC全球大前端技术大会字节跳动vr设备大前端技术的思考降低VR设备上的开发门槛。-将大量前端开发群体带入VR开发领域。为VR设备引入更多的内容。GriTC

基于WebXR的前端路线WebXR在浏览器内核中的渲染管线:GPUthreadrendererthreadbrowsermainthreadOpenXRthreadWebXRinterfacevXRserver►RenderLoopGriTC全球大前端技术大会

WebXR的渲染流水线WebGLCallV8BindingWebGLCallV8BindingWebGLCallV8BindingGPUCallGPUCallGPUCallCPUGPUXRuplaodXRuplaodXRuplaod时间GriTC全球大前端技术大会InfoQ基于WebXR的前端路线业务逻辑前端框架前端渲染引擎javascriptengine(v8)WebXRnative3drenderengineWebXRnative3drenderengineGriTCGriTC全球大前端技术大会GPU

WebXR.路线的优缺点缺陷:缺陷:优势:可以充分利用现有的技术。 -前端使用灵活度很高，想象空间大。-3D化能力强，展示效果好。 •图文内容以及css等支持难度大。性能瓶颈较严重。无法与应用内其他内容混合渲染。GriTC全球大前端技术大会基于浏览器内核的vr大前端路线Web内容的3D化，XR化：-XR化的3Dcss能力支持：将网页元素剥离独立展示到XR空间任意位置。-XR空间3D模型渲染支持：使用HTML语法在XR空间展示3D模型。GriTC全球大前端技术大会

基于浏览器内核的VR大前端路线applicationwebframeworkscenarioXRWebViewunitypluginXRPWAinterfaceHTMLWebXR3DcontentextensioncoreBlinknative3DengineplatformOpenXRPICOsdkoculussdkGriTC全球大前端技术大会3dCSS能力的支持-浏览器内核的异步渲染架构。-适应VR—体机的高性能渲染管线设计。•如何基于浏览器渲染管线支持3Dcss。-3Dcss在浏览器内核数据结构方面的变化。•3Dcss在事件方面的支持。GriTC全球大前端技术大会

浏览器内核异步渲染rendererthreadcompositethreadbrowsermainthreadVIZthreadOnVsyncCompositeSubmitFrame—►内容更新循环—►合成上屏循环GriTC全球大前端技术大会InfoG浏览器内核VR高性能渲染管线设计—►页面排版、内容更新、点击等事件处理―►动画、页面滑动等事件处理GriTC全球大前端技术大会OpenXRthreadVRrenderXR上屏InfoG3Dcss的支持OpenXRthreadVRrender■A与其他内容混合显示transform:translate3d(0px,0px,90px)rotate3d(0J0,1,360deg)GriTC全球大前端技术大会InfoG3Dcss3Dcss的支持layerlayerGriTC全球大前端技术大会rootLayerlayerrootLayerlayerlayerlayerGriTC全球大前端技术大会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全球大前端技术大会当当

a

o

f

n纹理资源的跨线程/进程传递跨线程传递方式：texture->eglImage->texture跨进程依赖：surfaceTexture、aHardwareBuffer多线程/进程同步方式：eglFence、ANDROID_native_fence_syncGriTC全球大前端技术大会3Dcss的事件支持在layerTree中记录3Dcss对应dom元素的nodeid。通过渲染管线将nodeid传递到VRSurface中。每帧计算VR手柄射线与各个VRSurface的交点。通过chromium原有事件逻辑处理事件。传递事件时加上对应nodeid。blink中HitTest以及事件响应不再针对整个tree,而是针对nodeid对应的subTree。GriTC全球大前端技术大会GriTC全球大前端技术大会当当，afo伸穿孚：一话几视，具为笑上的K何其玩合遇电又称有配K的这應值•是短••，箱再极束的述薄不长结嚇叙至便时来不地人頻场迎看淡动検一就也淡以訓，服遍外足这片我几B却•录过>身悪面纪而是ffitwis的匆崛起的荊戏遗憶在生活里是让人"沦GriTC全球大前端技术大会3d模型渲染支持Page：<body><div><p>sometext</p></div>vmodelid="m"src="..."x/model></body>GriTC全球大前端技术大会htmlrenderingttEngine.addModel(m)ACompositeFrameScenematrix：{}OpenXRrenderloopDispatchEventRenderHtmlRenderModelGriTC全球大前端技术大会3d模型渲染支持OpenXRrenderloopu IDispatchEventPage：RenderHtmlPage：RenderHtml.CompositeFrame一― ———————————————