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

VR设备上⼤前端技术的探索 胡鹏 字节跳动/web创新⽅向负责⼈ •VR设备应⽤开发技术现状 •VR设备与移动终端上的技术差异点 •移动端⼤前端技术在VR设备上的应⽤前景和挑战 •字节跳动在VR设备⼤前端技术上的探索 •后续规划和展望 VR⾏业(2021～2022) •Facebook改名为Meta。 •2021年oculusquest2销量700～800万。 •字节跳动收购PICO。 •百度发布元宇宙应⽤“希壤”。 •阿⾥巴巴投资Nreal。 •⼗四五规划中数字经济重点产业：云计算、⼤数据、物联⽹、⼯业互联⽹、区块链、⼈⼯智能、虚拟现实与增量现实。 VR设备的发展 VR⼀体机的总⽤户量已经达到千万数量级 VR⼀体机与移动终端上的技术差异 •展示形式的差异（VRvs平⾯） •渲染性能要求上的差异 •交互⽅式与事件处理流程的差异 移动端 VR设备 VR⼀体机展示⽅式的差异 VR设备上通过左右眼不同⻆度的屏幕投影图像来产⽣⽴体效果 VR⼀体机性能要求上的差异 •移动端应⽤满⾜基本体验要求的渲染帧率为60fps。VR设备上72fps～90fps才能满⾜基本体验要求。 •VR⼀体机每帧需要提交左右眼两张不同的渲染结果。 •VR⼀体机上发⽣掉帧时，处于沉浸式体验的⽤户会有明显的眩晕感。 180 150 120 90 60 30 0 每秒渲染帧图像数量 移动端VR⼀体机 VR⼀体机交互⽅式的差异 PC 移动端 VR ⿏标 屏幕⼿势 ⼿柄 键盘 ⼿势 3D空间与2d平⾯的事件处理⽅式也存在差异 VR⼀体机上应⽤开发⽅式 •主流VR⼀体机都是android系统，⽀持原⽣android应⽤。 •VR应⽤依赖⼚商提供的OpenXRsdk或者其他nativesdk。 •VR设备上的2D应⽤是当前过渡阶段产物，本⽂只聚焦VR应⽤。 2d VR Native NativeforOpenXR Unity UnrealEngine Web(browser/PWA) WebXR ⼤前端技术 •⼤前端技术在移动端孕育和快速发展。 •将移动端⼤前端开发⽣态引⼊到VR领域，对VR内容⽣态具有重⼤意义。 •VR设备与移动端在展示形式、性能和交互等⽅⾯存在技术差异。 •VR⼤前端技术如何选型？ 移动端⼤前端技术 •Javascript/HTML+Native，如React-Native、Weex。 •⾃渲染，如Flutter。 •原⽣Web以及相关容器技术。 移动端⼤前端技术 RN系列 ⾃渲染 原⽣Web re） V8/Dart/JSCo VM（ ets act/Vue/Widg Re t JS/HTML/Dar Chromium/Webkit Flutterengine Native interface framework renderer 这三类技术之间的界限越来越模糊，存在很多融合和变种。 移动终端⼤前端技术在VR设备上的应⽤ •RN在VR⼀体机上应⽤的可⾏性 •Flutter在VR⼀体机上⾯临的挑战 •Web在VR上的现状与遇到的问题 RN在VR⼀体机上的可⾏性 react javascript bridge native 缺na少tivVeRU3ID&UeIv⽀en持t DrawToSurface skia Flutter在VR⼀体机上⾯临的挑战 GenerateLayerTree platformthreadOnPlatformEvent UIthread RasterCache rasterthread skia DispatchEvent OpenXRrenderloop FrameBegin FrameEnd DrawRightEye DrawLeftEye GetControllerState Fluttereventprocessor customthread Flutterrasterflow Flutterrasterflow flutter2d到3dVR的改造 •2D的eventdispatch和render都是parent->children递归流程。不兼容3D场景。 •Skiaisanopensource2DgraphicslibrarywhichprovidescommonAPIsthatworkacrossavarietyofhardwareandsoftwareplatforms. •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与上屏逻辑 direct-render改成async-render 改造LayerTree构建逻辑写⼀套OpenGL跨线程逻辑 这还是原来的flutter么? Web在VR设备上的现状 BrowserPWA Web在VR设备上的现状 VR⼿柄⿏标 VR⼿柄+软键盘键盘 受限于VR⼿柄点击准确度， VR上的输⼊体验差于PC和⼿机端。 Web在VR设备上的问题 •Web的展示⽅式仍然是2D平⾯为主。 •传统的Web交互⽅式在VR设备上体验较差。 需要对现有的Web进⾏改造才能满⾜VR场景需求。 WebXR是webforVR的曙光？ native web OpenGLES WebGL OpenXR WebXR WebXR为WebGL提供XR能⼒⽀持 WebXR WebXR •XRrenderloop与VR头显姿态同步。 •左右眼渲染缓冲区管理。 •VR⼿柄事件⽀持。 += WebGL •3D内容的渲染能⼒ 基于WebXR构建VR设备上的⼤前端⽅案也是⼀个可选项 字节跳动在VR设备⼤前端技术探索 •基于WebXR的前端路线。 ⽅案设想 与其他技术⽅案的优劣对⽐ •基于浏览器内核的路线。 浏览器内核⽅案介绍浏览器渲染管线简介 VR场景⾼性能渲染管线的设计事件与交互的设计 字节跳动VR设备⼤前端技术的思考 •降低VR设备上的开发⻔槛。 •将⼤量前端开发群体带⼊VR开发领域。 •为VR设备引⼊更多的内容。 基于WebXR的前端路线 WebXR在浏览器内核中的渲染管线： GPUthread rendererthreadbrowsermainthread OpenXRthread WebXRinterface RenderLoop WebGL SendToXR 3DDrawing XRserver 性能 WebXR的渲染流⽔线 CPU主频 GPU WebGLCallWebGLCallWebGLCall CPU GPU GPUCall GPUCall GPUCall V8Binding V8Binding V8Binding XRuplaod XRuplaod XRuplaod 时间 基于WebXR的前端路线 业务逻辑 前端渲染引擎 javascriptengine(v8) 前端框架 WebXR native3drenderengine GPU WebXR路线的优缺点 优势：缺陷： •可以充分利⽤现有的技术。 •前端使⽤灵活度很⾼，想象空间⼤。 •3D化能⼒强，展示效果好。 •图⽂内容以及css等⽀持难度⼤。 •性能瓶颈较严重。 •⽆法与应⽤内其他内容混合渲染。 基于浏览器内核的VR⼤前端路线 Web内容的3D化，XR化： •XR化的3Dcss能⼒⽀持：将⽹⻚元素剥离独⽴展示到XR空间任意位置。 •XR空间3D模型渲染⽀持：使⽤HTML语法在XR空间展示3D模型。 基于浏览器内核的VR⼤前端路线 webframework application XRWebView unityplugin XRPWA scenario HTML WebXR 3Dcontentextension interface Blink native3Dengine core OpenXR PICOsdk oculussdk platform 3dCSS能⼒的⽀持 •浏览器内核的异步渲染架构。 •适应VR⼀体机的⾼性能渲染管线设计。 •如何基于浏览器渲染管线⽀持3Dcss。 •3Dcss在浏览器内核数据结构⽅⾯的变化。 •3Dcss在事件⽅⾯的⽀持。 浏览器内核异步渲染 rendererthread compositethread browsermainthread VIZthread OnVsync StartCommit Layout LayerTree Composite Paint SubmitFrame flutter—directrender DrawToSurface GenerateLayerTree RasterCach 内容更新循环 合成上屏循环 浏览器内核VR⾼性能渲染管线设计 rendererthread compositethread browsermainthread VIZthread OpenXRthread OnVsync StartCommit Layout VRsurfaces VRrender LayerTree Paint Composite SubmitFrame ⻚⾯排版、内容更新、点击等事件处理动画、⻚⾯滑动等事件处理XR上屏 3Dcss的⽀持 rendererthread compositethread browsermainthread VIZthread OpenXRthread OnVsync StartCommit Layout VRsurfaces VRrender LayerTree Paint 依据css对renderObject/layer进⾏分组 SubmitFrame Composite 与其他内容混合显示 transform:translate3d(0px,0px,90px)rotate3d(0,0,1,360deg) 3Dcss的⽀持 layer layer layer (ownsurface) rootLayer rootLayer layerlayer layer layer layer layer layer 3Dcss的⽀持 DrawQuad DrawQuad DrawQuad DrawQuad DrawQuad DrawQuad rootLayer layer RenderPass layer rootLayer DrawQuad DrawQuad DrawQuad DrawQuad DrawQuad DrawQuad layer layer layer (ownsurface) RenderPass layerlayer layer layer layer DrawQuad DrawQuad DrawQu