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

VR设备上前端技术的探索胡鹏字节跳动/web 创新向负责VR设备应开发技术现状VR设备与移动终端上的技术差异点移动端前端技术在VR设备上的应前景和挑战字节跳动在VR设备前端技术上的探索后续规划和展望VR业(20212022)Facebook改名为Meta。2021年oculus quest 2销量700800万。字节跳动收购PICO。百度发布元宇宙应“希壤”。阿巴巴投资Nreal。四五规划中数字经济重点产业：云计算、数据、物联、业互联、区块链、智能、虚拟现实与增量现实。VR设备的发展VR体机的总户量已经达到千万数量级VR体机与移动终端上的技术差异展示形式的差异（VR vs 平）渲染性能要求上的差异 交互式与事件处理流程的差异VR体机展示式的差异VR设备上通过左右眼不同度的屏幕投影图像来产体效果移动端VR设备VR体机性能要求上的差异移动端应满基本体验要求的渲染帧率为60fps。VR设备上72fps90fps才能满基本体验要求。VR体机每帧需要提交左右眼两张不同的渲染结果。VR体机上发掉帧时，处于沉浸式体验的户会有明显的眩晕感。每秒渲染帧图像数量0306090120150180移动端VR体机VR体机交互式的差异PC移动端VR标屏幕势柄键盘势3D空间与2d平的事件处理式也存在差异VR体机上应开发式2dVRNativeNative for OpenXRUnityUnreal EngineWeb(browser/PWA)WebXR主流VR体机都是android系统，持原android应。VR应依赖商提供的OpenXR sdk或者其他native sdk。VR设备上的2D应是当前过渡阶段产物，本只聚焦VR应。前端技术前端技术在移动端孕育和快速发展。将移动端前端开发态引到VR领域，对VR内容态具有重意义。VR设备与移动端在展示形式、性能和交互等存在技术差异。VR前端技术如何选型？移动端前端技术Javascript/HTML+Native，如React-Native、Weex。渲染，如Flutter。原Web以及相关容器技术。移动端前端技术interfaceframeworkrendererJS/HTML/DartRN系列渲染原WebReact/Vue/WidgetsVM（V8/Dart/JSCore）NativeFlutter engineChromium/Webkit这三类技术之间的界限越来越模糊，存在很多融合和变种。移动终端前端技术在VR设备上的应RN在VR体机上应的可性 Flutter在VR体机上临的挑战 Web在VR上的现状与遇到的问题RN在VR体机上的可性reactjavascriptbridgenativenative UI&event缺少VR 3D UI持Flutter在VR体机上临的挑战GenerateLayerTreeRasterCache DrawToSurface UI threadraster threadskiaskiaplatform threadOnPlatformEventDispatchEventOpenXR render loopFrameBeginFrameEndGetControllerStateDrawLeftEyeDrawRightEyecustom threadFlutter event processorFlutter raster flowFlutter raster flowflutter 2d到3d VR的改造2D的event dispatch和render都是parent-children递归流程。不兼容3D场景。Skia is an open source 2D graphics library which provides common APIs that work across a variety of hardware and software platforms.OpenXR线程模型与flutter存在差异。解决法：改写event处理流程。所有Layer都使skia成RasterCache。DrawToSurface使OpenGL重写。重新改造线程相关流程以及初始化和销毁等逻辑。对layer进合并分组。flutter VR渲染性能移动端60fps；VR设备90*2 fps。Flutter使direct-render，在次渲染流程中完成所有渲染逻辑，且主要在同个线程中执。flutter raster thread很难满90*2的帧率要求。拆分render流程变成async-render。将RasterCache成和最后上屏分开两个线程。渲染逻辑拆成两个线程后，OpenGL资源如何跨线程？写套OpenGL多线程交互的逻辑。flutter for VR可能的案不持3D事件不持3D渲染渲染性能不改造事件处理流程改造线程相关逻辑和初始化销毁流程改造RasterCache与上屏逻辑direct-render改成async-render改造LayerTree构建逻辑写套OpenGL跨线程逻辑这还是原来的flutter么?Web在VR设备上的现状BrowserPWAWeb在VR设备上的现状VR柄标VR柄+软键盘键盘受限于VR柄点击准确度，VR上的输体验差于PC和机端。Web在VR设备上的问题Web的展示式仍然是2D平为主。传统的Web交互式在VR设备上体验较差。需要对现有的Web进改造才能满VR场景需求。WebXR是web for VR的曙光？nativewebOpenGL ESWebGLOpenXRWebXRWebXR为WebGL提供XR能持WebXRWebXRXR render loop与VR头显姿态同步。左右眼渲染缓冲区管理。VR柄事件持。WebGL3D 内容的渲染能=+基于WebXR构建VR设备上的前端案也是个可选项字节跳动在 VR 设备前端技术探索基于WebXR的前端路线。案设想 与其他技术案的优劣对 基于浏览器内核的路线。浏览器内核案介绍 浏览器渲染管线简介 VR 场景性能渲染管线的设计 事件与交互的设计 字节跳动 VR 设备前端技术的思考降低VR设备上的开发槛。将量前端开发群体带VR开发领域。为VR设备引更多的内容。基于WebXR的前端路线renderer threadbrowser main threadGPU threadOpenXR threadWebXR interfaceXR serverRenderLoopWebGL3D DrawingSendToXRWebXR在浏览器内核中的渲染管线：WebXR的渲染流线性能时间CPU主频GPUV8 BindingGPUCallXR uplaodWebGLCallV8 BindingGPUCallXR uplaodWebGLCallV8 BindingGPUCallXR uplaodWebGLCallCPUGPUWebXR可能的性能瓶颈会出现在前端JS耗时上。基于WebXR的前端路线业务逻辑前端框架前端渲染引擎javascript engine(v8)WebXRnative 3d render engineGPUWebXR路线的优缺点可以充分利现有的技术。前端使灵活度很，想象空间。3D化能强，展示效果好。图内容以及css等持难度。性能瓶颈较严重。法与应内其他内容混合渲染。优势：缺陷：基于浏览器内核的VR前端路线XR化的3D css能持：将元素剥离独展示到XR空间任意位置。XR空间3D 模型渲染持：使HTML语法在XR空间展示3D模型。Web内容的3D化，XR化：基于浏览器内核的VR前端路线XR WebViewunity pluginXR PWAscenarioHTMLWebXR3D content extensioninterfaceweb frameworkBlinknative 3D enginecoreOpenXRPICO sdkoculus sdkplatformapplication3d CSS能的持浏览器内核的异步渲染架构。适应VR体机的性能渲染管线设计。如何基于浏览器渲染管线持3D css。3D css在浏览器内核数据结构的变化。3D css在事件的持。flutterdirect render浏览器内核异步渲染LayoutPaintLayerTreeStartCommitOnVsyncSubmitFrameCompositerenderer threadcomposite threadbrowser main threadVIZ thread内容更新循环合成上屏循环GenerateLayerTreeDrawToSurfaceRasterCach浏览器内核VR性能渲染管线设计LayoutPaintLayerTreeStartCommitOnVsyncSubmitFrameVR renderrenderer threadcomposite threadbrowser main threadVIZ threadVR surfacesOpenXR threadComposite排版、内容更新、点击等事件处理动画、滑动等事件处理XR上屏3D css的持LayoutPaintLayerTreeStartCommitOnVsyncSubmitFrameVR renderrenderer threadcomposite threadbrowser main threadVIZ threadVR surfacesOpenXR threadComposite与其他内容混合显示依据css对renderObject/layer进分组transform:translate3d(0px,0px,90px)rotate3d(0,0,1,360deg)3D css的持rootLayerlayerlayerlayerlayerlayerrootLayerlayerlayer(own surface)layerlayerlayer3D css的持RootRenderPassDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadRenderPassDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadRenderPassDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadRootRenderPassRenderPassDrawQuadrootLayerlayerlayerlayerlayerlayerrootLayerlayerlayer(own surface)layerlayerlayerRenderPassDrawQuad3D css的持RenderPassDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadRenderPassDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadDrawQuadRootRenderPassRenderPassDrawQuadRenderPassDrawQuadVRSurface texture geometryVRSurface texture geometry纹理资源的跨线程/进程传递跨线程传递式：texture-eglImage-texture跨进程依赖：surfaceTexture、aHardwareBuffer多线程/进程同步式：eglFence、ANDROID_native_fence_sync3D css的事件持在layerTree中记录3D css对应dom元素的node id。通过渲染管线将node id传递到VRSurface中。每帧计算VR柄射线与各个VRSurface的交点。通过chromium原有事件逻辑处理事件。传递事件时加上对应node id。blink中HitTest以及事件响应不再针对整个tree，是针对node id 对应的subTree。3d模型渲染持Page：so