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

•VR设备应用开发技术现状•VR设备与移动终端上的技术差异点•移动端大前端技术在VR设备上的应用前景和挑战•字节跳动在VR设备大前端技术上的探索•后续规划和展望.字节跳动收购PlCO。..十四五规划中数字经济重点产业：云计算、大数据、物联网、工业互联网、区块链、人工智能、虚拟现实与增量现实。VR设备的发展VR一体机与移动终端上的技术差异移动端VR一体机展示方式的差异移动端VRVR设备VR设备上通过左右眼不同角度的屏幕投影图像来产生立体效果VR一体机性能要求上的差异每秒渲染帧图像数量•移动端应用满足基本体验要求的渲染帧率为60fps。VR设备上72fps～90fps才能满足基本体验要求。•VR一体机每帧需要提交左右眼两张不同的渲染结•VR一体机上发生掉帧时，处于沉浸式体验的用户会0VR一体机交互方式的差异3D空间与2d平面的事件处理方式也存在差异VR一体机上应用开发方式•VR设备上的2D应用是当前过渡阶段产物，本文只聚焦VR应用。2d•大前端技术在移动端孕育和快速发展。•将移动端大前端开发生态引入到VR领域，对VR内容生态具有重大意义。•VR设备与移动端在展示形式、性能和交互等方面存在技术差异。移动端大前端技术framework移动端大前端技术这三类技术之间的界限越来越模糊，存在很多融合和变种。javascriptjavascriptbridgebridgeplatformthreadplatformthreadDispatchEventDispatchEventcustomthreadcustomthreadflutter2d到3dVR的改造•OpenXR线程模型与flutter存在差异。•重新改造线程相关流程以及初始flutterVR渲染性能•移动端60fps；VR设备90*2fps。•Flutter使⽤direct-render，在⼀次渲染流程中完成所有渲染逻辑，且主要在同⼀个线程中执⾏。•flutterrasterthread很难满⾜90*2的帧率要求。拆分render流程变成async-render。将RasterCache⽣成和最后上屏分开两个线程。flutterforVR可能的⽅案不⽀持3D事件改造事件处理流程不⽀持3D渲染不⽀持3D渲染改造RasterCache与上屏逻辑改造LayerTree构建逻辑渲染性能不⾜direct-render改成async-render写⼀套OpenGL跨线程逻辑这还是原来的flutter么?AVR手柄+软键盘键盘VR上的输入体验差于PC和手机端。webWebGL•••WebXR+WebGL=•将大量前端开发群体带入VR开发领域。RenderLoopRenderLoopGPUthreadrendererthreadbrowsermainthreadOpenXRthreadWebGLCallXRuplaodXRuplaodWebGLCallXRuplaodXRuplaodWebGLCallWebGLCallV8BindingV8Bindingnative3dnative3drenderenginejavascriptjavascriptengine(v8).前端使用灵活度很高，想象空间大。.图文内容以及css等支持难度大。.性能瓶颈较严重。.无法与应用内其他内容混合渣染。•XR化的3Dcss能力支持：将网页元素剥离独立展示到XR空间任意位置。•XR空间3D模型渲染支持：使用HTML语法在XR空间展示3D模型。oculusoculussdkapplicationscenariowebframeworkwebframework33Dcontentextensionengine3dCSS能力的支持•3Dcss在浏览器内核数据结构方面的变化。rendererthreadcompositethreRasterCachflutter—directrenderStartCommitrendererthreadcompositethreRasterCachflutter—directrenderStartCommitCompositeComposite合成上屏循环测览器内核VR高性能渣染管线设计rendererthreadcompositethreStartCommitbrowsermainthreadCompositeComposite页面排版、内容更新、点击等事件处理动画、页面滑动等事件处理XR上屏依据css对renderObject/layer进行3Dcss的支持依据css对renderObject/layer进行rendererthreadcompositethreStartCommitCompositeCompositetransform:translate3d(0px,0px,90px)rotate3d(0,0,1,360deg)3Dcss的支持(ownsurface)RenderPassDrawQuadRenderPassDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuad3Dcss的支持RenderPassDrawQuadRenderPassDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuad(ownsurface)DrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuad3Dcss的支持DrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadRenderPassDrawQuadRenderPassDrawQuadRenderPassDrawQuadRenderPassDrawQuadgeometryDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadgeometryDrawQuadDrawQuadDrawQuadDrawQuadDrawQuad纹理资源的跨线程/进程传递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