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

VR设备上⼤前端技术的探索胡鹏字节跳动/web创新⽅向负责⼈VR设备应⽤开发技术现状•••••VR设备与移动终端上的技术差异点移动端⼤前端技术在VR设备上的应⽤前景和挑战字节跳动在VR设备⼤前端技术上的探索后续规划和展望VR⾏业(2021～2022)Facebook改名为Meta。••••••2021年oculus

quest

2销量700～800万。字节跳动收购PICO。百度发布元宇宙应⽤“希壤”。阿⾥巴巴投资Nreal。⼗四五规划中数字经济重点产业：云计算、⼤数据、物联⽹、⼯业互联⽹、区块链、⼈⼯智能、虚拟现实与增量现实。VR设备的发展VR⼀体机的总⽤户量已经达到千万数量级VR⼀体机与移动终端上的技术差异展示形式的差异（VRvs平⾯）渲染性能要求上的差异•••交互⽅式与事件处理流程的差异VR⼀体机展示⽅式的差异移动端VR设备VR设备上通过左右眼不同⻆度的屏幕投影图像来产⽣⽴体效果VR⼀体机性能要求上的差异每秒渲染帧图像数量移动端应⽤满⾜基本体验要求的渲染帧率为60fps。VR设备上72fps～90fps才能满⾜基本体验要求••VR⼀体机每帧需要提交左右眼两张不同的渲染结果。60VR⼀体机上发⽣掉帧时，处于沉浸式体验的⽤户会有明显的眩晕感。300移动端VR⼀体机VR⼀体机交互⽅式的差异PC移动端VR⿏标键盘屏幕⼿势⼿柄⼿势3D空间与2d平⾯的事件处理⽅式也存在差异VR⼀体机上应⽤开发⽅式主流VR⼀体机都是android系统，⽀持原⽣android应⽤。VR应⽤依赖⼚商提供的OpenXR

sdk或者其他native

sdk。VR设备上的2D应⽤是当前过渡阶段产物，本⽂只聚焦VR应⽤。•••2dVRNativeforOpenXRUnityNativeUnreal

EngineWebXRWeb(browser/PWA)⼤前端技术⼤前端技术在移动端孕育和快速发展。••••将移动端⼤前端开发⽣态引⼊到VR领域，对VR内容⽣态具有重⼤意义。VR设备与移动端在展示形式、性能和交互等⽅⾯存在技术差异。VR⼤前端技术如何选型？移动端⼤前端技术Javascript/HTML+Native，如React-Native、Weex。⾃渲染，如Flutter。•••原⽣Web以及相关容器技术。移动端⼤前端技术RN系列

⾃渲染

原⽣WebinterfaceJS/HTML/DartReact/Vue

/WidgetsframeworkVM（V8/Dart

/JSCore）rendererNativeFlutterengine

Chromium/Webkit这三类技术之间的界限越来越模糊，存在很多融合和变种。移动终端⼤前端技术在VR设备上的应⽤RN在VR⼀体机上应⽤的可⾏性Flutter在VR⼀体机上⾯临的挑战Web在VR上的现状与遇到的问题•••RN在VR⼀体机上的可⾏性reactjavascriptbridgenative缺少VR3DUI⽀持nativeUI&eventFlutter在VR⼀体机上⾯临的挑战platformthreadOnPlatformEventDispatchEventUIthreadGenerateLayerTreeRasterCacheskiarasterthreadDrawToSurfaceskiaOpenXRrenderloopFrameBeginGetControllerStateDrawLeftEyeDrawRightEyeFrameEndFluttereventprocessorFlutterrasterflowFlutterrasterflowcustomthreadflutter2d到3dVR的改造2D的eventdispatch和render都是parent->children递归流程。不兼容3D场景。••Skiaisanopensource2DgraphicslibrarywhichprovidescommonAPIsthatworkacrossa

varietyofhardwareandsoftwareplatforms.OpenXR线程模型与flutter存在差异。•解决⽅法：改写event处理流程。•••对layer进⾏合并分组。所有Layer都使⽤skia⽣成RasterCache。DrawToSurface使⽤OpenGL重写。重新改造线程相关流程以及初始化和销毁等逻辑。flutterVR渲染性能移动端60fps；VR设备90*2fps。•••Flutter使⽤direct-render，在⼀次渲染流程中完成所有渲染逻辑，且主要在同⼀个线程中执⾏。flutterrasterthread很难满⾜90*2的帧率要求。拆分render流程变成async-render。将RasterCache⽣成和最后上屏分开两个线程。渲染逻辑拆成两个线程后，OpenGL资源如何跨线程？写⼀套OpenGL多线程交互的逻辑。flutterforVR可能的⽅案不⽀持3D事件

改造事件处理流程改造线程相关逻辑和初始化销毁流程不⽀持3D渲染改造RasterCache与上屏逻辑

改造

构建逻辑LayerTree渲染性能不⾜

direct-render改成async-render

写⼀套OpenGL跨线程逻辑这还是原来的flutter么?Web在VR设备上的现状BrowserPWAWeb在VR设备上的现状VR⼿柄

⿏标VR⼿柄+软键盘

键盘受限于VR⼿柄点击准确度，VR上的输⼊体验差于PC和⼿机端。Web在VR设备上的问题Web的展示⽅式仍然是2D平⾯为主。••传统的Web交互⽅式在VR设备上体验较差。需要对现有的Web进⾏改造才能满⾜VR场景需求。WebXR是webforVR的曙光？nativeOpenGLESOpenXRwebWebGLWebXRWebXR为WebGL提供XR能⼒⽀持WebXRWebXRXRrenderloop与VR头显姿态同步。左右眼渲染缓冲区管理。VR⼿柄事件⽀持。•••+

=WebGL3D内容的渲染能⼒•基于WebXR构建VR设备上的⼤前端⽅案也是⼀个可选项字节跳动在VR设备基于WebXR的前端路线。⽅案设想•与其他技术⽅案的优劣对⽐基于浏览器内核的路线。浏览器内核⽅案介绍•浏览器渲染管线简介VR场景⾼性能渲染管线的设计事件与交互的设计字节跳动VR设备⼤前端技术的思考降低VR设备上的开发⻔槛。•••将⼤量前端开发群体带⼊VR开发领域。为VR设备引⼊更多的内容。基于WebXR的前端路线WebXR在浏览器内核中的渲染管线：GPUthread

rendererthread

browsermainthread

OpenXRthreadWebXR

interfaceWebGLXRserverRenderLoopSendToXR3DDrawingWebXR的渲染流⽔线WebGLCall

WebGLCall

WebGLCallV8Binding

V8Binding

V8BindingCPU主频GPUGPUCall

GPUCall

GPUCallCPUGPUXRuplaodXRuplaodXRuplaod时间基于WebXR的前端路线业务逻辑前端框架前端渲染引擎javascriptengine(v8)WebXRnative3drender

engineGPUWebXR路线的优缺点优势：缺陷：可以充分利⽤现有的技术。图⽂内容以及css等⽀持难度⼤。••前端使⽤灵活度很⾼，想象空间⼤。

性能瓶颈较严重。•••3D化能⼒强，展示效果好。⽆法与应⽤内其他内容混合渲染。•基于浏览器内核的VR⼤前端路线Web内容的3D化，XR化：XR化的3Dcss能⼒⽀持：将⽹⻚元素剥离独⽴展示到XR空间任意位置。XR空间3D模型渲染⽀持：使⽤HTML语法在XR空间展示3D模型。••基于浏览器内核的VR⼤前端路线applicationscenariointerfacewebfraXRWebView

unitypluginXRPWA3DcontentextensionHTMLWebXRcorenative3DengineBlinkplatformOpenXRPICOsdkoculussdk3dCSS能⼒的⽀持浏览器内核的异步渲染架构。•••••适应VR⼀体机的⾼性能渲染管线设计。如何基于浏览器渲染管线⽀持3Dcss。3Dcss在浏览器内核数据结构⽅⾯的变化。3Dcss在事件⽅⾯的⽀持。浏览器内核异步渲染rendererthreadcompositethread

browsermainthread

VIZthreadflutter—directrenderDrawToSurfaceOnVsyncStartCommitLayoutGenerateLayerTreeCompositeLayerTreeRasterCachPaintSubmitFrame内容更新循环合成上屏循环浏览器内核VR⾼性能渲染管线设计OpenXRthreadrendererthreadcompositethread

browsermainthreadVIZthreadOnVsyncStartCommitLayoutVRsurfacesVRrenderLayerTreeCompositePaintSubmitFrame⻚⾯排版、内容更新、点击等事件处理动画、⻚⾯滑动等事件处理XR上屏3Dcss的⽀持OpenXRthreadrendererthreadcompositethread

browsermainthreadVIZthreadOnVsyncStartCommitLayoutVRsurfacesVRrenderLayerTreeCompositePaint与其他内容混合显示SubmitFrame依据css对renderObject/layer进⾏分组transform:translate3d(0px,0px,90px)rotate3d(0,0,1,360deg)3Dcss的⽀持rootLayerrootLayerlayerlayer(ownsurface)layerlayerlayerlayerlayerlayerlayerlayer3Dcss的⽀持rootLayerrootLayerlayerlayer(ownsurface)layerlayerlayerlayerlayer

layerlayer

layerRootRenderPassRenderPassRenderPassRootRenderPassRenderPassDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadRenderPassDrawQuad3Dcss的⽀持RootRenderPassRenderPassDrawQuadRenderPassDrawQuadVRSurfacetexturegeometryRenderPassDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadVRSurfacetexturegeometryRenderPassDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuad纹理资源的跨线程/进程传递跨线程传递⽅式：texture->eglImage->texture•••跨进程依赖：surfaceTexture、aHardwareBuffer多线程/进程同步⽅式：eglFence、ANDROID_native_fence_sync3Dcss的事件⽀持在layerTree中记录3Dcss对应dom元素的nodeid。通过渲染管线将nodeid传递到VRSurface中。•••••每帧计算VR⼿柄射线与各个VRSurface的交点。通过chromium原有事件逻辑处理事件。传递事件时加上对应nodeid。blink中HitTest以及事件响应不再针对整个tree，⽽是针对nodeid对应的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