如何在硬件性能方面实现WebGL兼容性

How to target WebGL compatibility solely in terms of hardware performance

本文关键字：实现 WebGL 兼容性方面性能硬件更新时间：2023-09-26

最近我一直在用Three.js来渲染WebGL中的3D场景。作为退路，我还维护了使用Three的CanvasRenderer的版本，虽然它们没有那么多的多边形，照明技术或效果，但仍然可以在没有WebGL功能的浏览器中运行(如果用户拒绝启用WebGL，也可以在Safari中运行)。

然而，今天我意识到兼容性不仅仅是用户的浏览器是否支持WebGL的问题，还包括用户的硬件是否足够严格，能够首先完美地渲染WebGL(即以60 fps运行)。虽然有很多数据说明了使用哪种浏览器的人口比例，但我很难找到那些运行计算机的用户版本，他们的计算机运行能力超过了运行WebGL的能力。

究竟有多少人——假设他们使用的是支持WebGL的浏览器——能够以60帧/秒的速度运行你的WebGL页面?如果有很多人在WebGL中挣扎，那么检测硬件缺陷的最佳方法是什么?javascript的解决方案将是理想的，因为我们已经在使用该语言的Three。

很有可能我可能误解了这种情况，因为这似乎不是一个在WebGL开发世界中广泛讨论的问题。如果是这样的话，请让我知道，以便我更好地了解将来如何与Three合作。

我在Android上也遇到了同样的问题——在硬件加速的Android操作系统发布之前，我们有一个3D密集型应用程序，它在一些手机上运行得很顺利，而在另一些手机上运行得很糟糕。这个问题出现在任何开放平台上，如Android或Windows。iphone/iPad有非常明确的硬件设置，但在PC上，你将获得一系列显卡。

如果你使用Cg/HLSL着色器，你编译到一个特定的硬件配置文件，它描述了顶点，几何和像素着色器的下界。然而，我猜你正在使用GLSL着色器和编译在运行时?GLSL不针对硬件配置文件，如果硬件无法运行它，则编译着色器将失败。

当然，这只能告诉您程序是否可以执行，而不能告诉您执行得有多好。着色器可以很好地编译并以5fps运行。

我担心用户会看到糟糕的图像体验，所以在我们的应用第一次运行时，我将一个模型呈现给屏幕外的目标很短的时间，并获得平均FPS，然后如果分数太低就关闭3D部分。你知道吗?用户讨厌它。他们中的许多人都有3D功能的手机，他们觉得自己被欺骗了，因为他们无法看到屏幕截图中的3D部分。我推送了一个更新，删除了检查，所以现在如果你的硬件不好，你会看到3D场景运行缓慢。实际上，我们对这种体验的抱怨更少了，尽管我讨厌它看起来多么不优雅。

积极的一面是，OS X和Windows(从Vista开始)都支持操作系统中的硬件加速合成(GL/D3D现在将所有窗口渲染到屏幕上)。这促使大多数PC厂商在他们的电脑中加入3D加速功能。所以我认为假设人们有3D卡是一个安全的赌注——他们是否有WebGL将更多地是一个限制因素。各种各样的硬件和驱动程序也会让你在一台机器上出现奇怪的渲染错误，这些错误在其他机器上是看不到的——PC游戏开发者在发布之前会在一系列的卡上进行测试，试图缓解这个问题。但是这些古怪的bug最多只是你用户的一小部分，而且通常是微不足道的，所以不值得担心，除非用户抱怨。

如果你还在担心性能，PC上的标准解决方案是允许用户调整图形设置，以减少像素着色器的复杂性/屏幕上三角形的数量等。确保查看大多数客户拥有的硬件的真实数据，并使用该范围进行定位和测试。

无论如何，有一个现实世界的轶事，HTH

如果你使用three.js，你可以查询扩展名:

gl = renderer.getContext();
exts = gl.getSupportedExtensions();

如果你没有得到像浮动纹理这样的东西，你会知道你在处理什么。WebGL是围绕最小公分母构建的。