在WebGL中制作2D HUD的推荐方式

Question

在需要高帧率性能的WebGL游戏中，制作2D HUD的最有效方法是什么？我可以想到3个选项，但我不清楚每个选项的性能成本以及哪个选项被推荐为最有效。

那么以下3个选项之间的相对性能成本如何：

A：使用正交相机在3D中用多边形渲染HUD，并混合原始场景。优点是可以使用高级OpenGL效果，缺点是需要手动排列容器。

B：在html / css中构建HUD，并让浏览器进行合成。在这种情况下，使用浏览器合成是否会导致性能大幅下降？

C：在3D画布上绘制2D画布，并让浏览器进行合成。这是否可行，还是会出现诸如鼠标事件和焦点等事件传播方面的问题？

非常感谢！

- JayDee

Answer 1

选项A 可能在技术上是最快的，但会带来一系列其他问题，需要您手动处理。如果您更新文本（健康、弹药等），您将需要想出一个文本渲染例程，而这些例程至少都不是微不足道的。如果您通过鼠标或键盘与UI交互，您将需要自己处理，而您能够稳定高效地处理好此类事件并为用户提供更好的体验的机会相对较小。总之，这需要付出很多努力才能实现微小的速度提升。 选项B 在我看来是比较好的选择。浏览器非常擅长合成，即使因此存在性能损失，除非您正在制作一个非常复杂的HUD，否则我认为这种损失可以忽略不计，与应用程序中的其他部分（如JS逻辑）相比可以忽略不计。此外，随着时间的推移和浏览器变得更加高效，这种方法应该会“神奇地”变得更好。在我看来，最大的缺点是，如果您正在使用一些最新最潮的CSS效果来样式化您的HUD，则可能会遇到一些渲染错误，但这也会随着时间的推移而消失。 选项C 就我所知，在单个画布中不可能实现。您可以在 3D 画布上面叠加一个单独的 2D 画布，并在其上绘制您的 HUD，但此时您将继承 A 和 B 的所有问题而没有任何好处。我无法找到支持它的充分理由。

我认为 WebGL 相对于许多本地 3D 平台的一个重要优势是，它可以轻松访问全球最广泛使用和最灵活的 UI 框架之一（即 HTML）。忽略这种优势会是巨大的浪费，而带来的实际利益微乎其微。使用可用的工具，不要过于担心因此而丢失几毫秒。我向您保证，您将在开发游戏时面临更大的问题，您的时间和精力将更好地用于解决那些问题，而不是试图重新发明这个特定的轮子。

- Toji

---

请注意，如果您选择选项C（在3D画布上覆盖2D画布），则在iOS 8上性能会受到相当大的影响。这种方法使我的帧速率减半！ - lazd

Answer 2

虽然我同意在大多数情况下优先选择选项B，但是在WebVR的HUD中可能需要使用选项C（除非您想使用DOM2AFrame之类的东西将DOM呈现为纹理）。

我在这篇博客上找到了如何使用Three.js实现选项C。它为HUD创建了一个单独的场景，覆盖在原始场景之上，并使用2D画布生成HUD纹理。这里有一个Codepen链接提供示例，查看57-78行，从以下内容开始：

var hudCanvas = document.createElement('canvas')
hudCanvas.width = width
hudCanvas.height = height
var hudBitmap = hudCanvas.getContext('2d')

Aframe 还拥有预先构建的 UI 组件可供使用，参见 ex. 1, ex. 2。

- sjcobb