对于 fps 性能很重要的 webgl 游戏，制作 2D HUD 的最有效方法是什么？我可以想到 3 个选项，但我不清楚每个选项的性能成本是多少，哪些是最有效的。
那么以下 3 个选项之间的相对性能成本是多少：
A：使用正交相机在 3D 中渲染带有多边形的 hud，并混合原始场景。优点是可以实现高级的 opengl 效果，代价是手动排列容器。
B：在html/css中构建HUD，让浏览器进行合成。在这种情况下，浏览器组合是否会对性能产生很大影响？
C：在 3D 画布上绘制 2D 画布，让浏览器进行合成。这甚至可能吗？我是否会遇到画布之间的事件传播问题，例如鼠标事件和焦点。
非常感谢！
从技术上讲，选项 A可能是最快的，但它会带来一系列您需要手动处理的其他问题。如果您要更新文本（健康、弹药等），您将不得不提出一个文本渲染例程，至少可以说这些都不是微不足道的。如果您通过鼠标或键盘与 UI 进行交互，您将需要自己处理，并且您足够强大和有效地执行此操作以实际产生比本机浏览器小部件更好的体验的机会很小。重点是，要使速度更快一些，需要做很多工作。
在我看来，选项 B是可行的方法。浏览器非常擅长合成，即使因为它会产生性能影响，除非你正在做一个非常疯狂的详细 HUD，我猜想与你应用程序的其他部分（如 JS 逻辑）相比，这种影响可以忽略不计。另外，随着时间的推移，这条路线应该会“神奇地”变得更好，并且浏览器会变得更有效率。IMO 最大的缺点是，如果您使用一些最新最好的 CSS 效果来按照您想要的方式设置 HUD 样式，您可能会遇到一些渲染错误，但随着时间的推移，这种情况应该会消失。
据我所知，选项 C在单个画布中是不可能的。您可以在 3D 画布上叠加一个单独的 2D 画布并将 HUD 绘制到上面，但此时您继承了 A 和 B 的所有问题而没有任何好处。我看不出有什么好的理由推荐它。
我认为 WebGL 相对于许多原生 3D 平台的一大优势是它可以轻松访问地球上使用最广泛、最灵活的 UI 框架之一 (HTML)。忽视这一优势将是一项巨大的努力，几乎没有什么切实的好处。使用您可用的工具，不要因此而过多地担心丢失的毫秒数。我向您保证，您在开发游戏时将面临更大的问题，您的时间和精力会花在上面比尝试重新发明这个特定的轮子要好得多。
虽然我同意选项 B 在大多数情况下是首选，但选项 C 是可能的，并且可能需要用于 WebVR 中的 HUD（除非您想使用类似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')