(这个问题并不特定于 Three.js,但我会用它作为例子)
我最近一直在使用 Three.js 开发 Web 应用程序界面,并在 WebGL 和 Canvas 渲染器(针对桌面浏览器)之间编写了一些不错的后备程序。
但现在的问题变成了如何正确检测设备能力,问题有两个方面:
-
浏览器功能(静态功能,如 webgl/canvas):这在很大程度上是在 Web 社区中使用简单的功能检测来解决的。
-
设备能力:这是困难的部分,在无法直接访问设备的硬件信息的情况下,我们需要一些方法来判断是否应该回退到对硬件要求较低的代码。
一个值得注意的例子:Firefox mobile/Opera mobile 声称支持 WebGL,但存在缺陷或受设备硬件限制。
到目前为止我想出的一些解决方法:
-
使用共同特征作为性能指标- 例如,触摸设备的硬件通常功能较弱。缺点:它不是面向未来的。
-
将已知有问题的浏览器/设备列入黑名单- UA 嗅探将是不可避免的,并且可能很难维护。
-
性能测试- 因此问题是,除了运行代码和测量帧率之外,还有更好的选择吗?
或者也许不必这么难,还有其他建议吗?
我最终在一个项目中使用了性能测量方法,我们希望利用高规格 CPU/GPU 桌面以及低速设备(例如桌子和手机)上可用的画布功能。
基本上,我们从最小的场景复杂性开始,如果渲染循环花费的时间少于 33 毫秒,我们会增加复杂性(如果渲染循环稍后开始花费太长时间,我们也会降低复杂性)。
我想在你的情况下,你可能需要运行快速的 canvas 和 webgl 性能测试,然后选择一个。花了一些时间研究这个问题后,我还没有遇到一些棘手的非显而易见的技术可以更好地解决这个问题。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)