研发实战:用WebGL Multiview扩展提升WebXR应用性能

2019-09-19 10:31:30来源:YiVian


查看引用/信息源请点击:映维网

预计各个主要浏览器很快就会默认添加支持

1.什么是multiview?

当VR开始出现的时候,大多数引擎同时通过运行两次渲染阶段来实现对立体渲染的支持。尽管这可行,但非常低效。

无我VR 聚合新闻

每当调用时,renderScene都会设置视口,渲染器和状态。这会翻倍每帧的渲染成本。

然后,为了提高性能表现和最小化状态改变,一些优化开始出现。

无我VR 聚合新闻

即便你能够减少状态改变的次数,但绘制调用的数量依然保持不变:对象数量的两次。

为了解决这个问题,Mozilla开发了Multiview扩展。简单来说,利用这个扩展,你只需通过一次绘制调用即可绘制多个目标,从而减少每次浏览的总负载。

无我VR 聚合新闻

这是通过利用每个视图的信息来调整着色器uniforms,并通过gl_ViewID_OVR来访问它们,原理类似于InstancingAPI。

无我VR 聚合新闻

multiview扩展的结果渲染循环如下所示:

无我VR 聚合新闻

这个扩展可以用于提升多个任务,如级联阴影贴图,渲染力提防贴图,渲染多视口等等,但最为常见的用例的立体渲染。

立体渲染是Mozilla的主要目标,因为你只需对3D引擎进行一定的修改即可改善VR渲染路径的性能。目前,大多数头显都有两个视图,但存在采用超宽视场,采用4个视图的头显原型,而4个视图是目前Muitiview支持的最大视图数。

3.支持multiview的Web引擎

Mozilla在过去一段时间里一直在为努力实现three.js(PR)的multiview支持。目前,只要扩展名可用,并且定义一个没有坑锯齿的WebGL2环境即可:

无我VR 聚合新闻

这里是一个利用multiview的three.js示例(源代码)。

    5.性能提升

    大多数WebGL或WebXR应用程序受CPU限制,场景中的对象越多,提交给GPU的绘制调用越多。Mozilla曾就通过两个视图进行立体渲染进行了基准测试。与传统渲染相比,Mozilla实现了大约40%的持续性能提升。

    如下图所示,需要绘制的立方体(绘制调用)越多,性能就越佳。

    无我VR 聚合新闻

    映维网。