Question

对于webgl中fps性能很重要的游戏，制作2D HUD的最有效方法是什么？我可以想到3个选项，但我不清楚每个选项的性能成本是多少，哪些是最有效的。

那么以下3个选项之间的相对性能成本是多少：

A：使用正交相机在3D中渲染具有多边形的hud并混合在原始场景上。优点是先进的opengl效果是可能的，代价是手动安排容器。

B：在html / css中构建HUD并让浏览器进行合成。在这种情况下，浏览器组合会有很大的影响吗？

C：在3D画布上绘制2D画布，让浏览器进行合成。这是否可能，我是否会在画布之间传播事件，例如鼠标事件和焦点。

非常感谢！

Answer 1

选项A 可能技术最快，但会带来一大堆您需要手动处理的其他问题。如果你正在更新文本（健康，弹药等），你将不得不想出一个文本渲染例程，至少可以说这些是非常重要的。如果您通过鼠标或键盘与UI进行交互，则需要自己处理，并且您实现这一目标的可能性足够高，实际上可以产生比本机浏览器小部件更好的体验。重点是，为了更快一点的潜力，需要做很多工作。

在我看来，

选项B 是要走的路。虽然浏览器非常擅长合成，但即使它会因此而受到打击，除非你正在做一个非常疯狂的详细HUD，我猜想与你的应用程序的其他部分（如JS逻辑）相比，命中率可以忽略不计。此外，随着时间的推移，这条路线应该“神奇地”变得更好，而浏览器在他们所做的事情上变得更有效率。 IMO最大的缺点是你可能会遇到一些渲染错误，如果你正在使用一些最新的和最好的CSS效果来按照你想要的方式设置你的HUD样式，但是随着时间的推移它会再次消失。

据我所知，

选项C 在单个画布中是不可能的。你可以将一个单独的2D画布分层放在你的3D画布上并绘制你的HUD，但此时你继承了A和B的所有问题而没有任何好处。我认为没有理由推荐它。

我认为WebGL在许多原生3D平台上的一大优势在于它可以轻松访问地球上最广泛使用和最灵活的UI框架之一（HTML）。忽视这种优势将是一项巨大的努力，而且收效甚微。使用您可以使用的工具，并且因为它而不会过多地关注丢失的毫秒数。我向你保证，你在游戏过程中会面临更大的问题，你花费的时间和精力要比尝试重新发明这个特定的轮子要好得多。

Answer 2

虽然我同意在大多数情况下首选选项B，但选项C是可行的，并且对于WebVR中的HUD可能是选项C（除非您想使用DOM2AFrame之类的东西将DOM渲染为纹理）。

我发现this blog关于如何使用Three.js实现选项C。它在原始场景的顶部为HUD创建了一个单独的场景，并使用2D画布生成HUD纹理。这是一个Codepen link的示例，请参见第57-78行，从以下开始：

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

Aframe还具有可以使用的预构建UI组件，请参见ex. 1，ex. 2

建议在webgl中制作2d HUD的方法

2 个答案: