在 webgl 中制作 2d HUD 的推荐方法

2024-03-14

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

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

答:使用正交相机以 3D 形式渲染具有多边形的 HUD,并混合在原始场景上。优点是可以实现先进的 opengl 效果,但需要手动排列容器。

B:在html/css中构建HUD并让浏览器进行合成。在这种情况下,浏览器组合是否会对性能产生重大影响?

C:在 3D 画布上绘制 2D 画布,并让浏览器进行合成。这是否可能,我是否会遇到画布之间的事件传播问题,例如鼠标事件和焦点。

非常感谢!


Option A可能是技术上最快,但会带来大量您需要手动处理的其他问题。如果您要更新文本(生命值、弹药等),您将必须想出一个文本渲染例程,而这些至少可以说是非常重要的。如果您通过鼠标或键盘与 UI 交互,则需要自己处理,并且足够稳健且高效地执行此操作以实际产生比本机浏览器小部件更好的体验的机会很小。重点是,要提高速度还需要做很多工作。

Option B在我看来,这是要走的路。浏览器非常擅长合成,尽管会因此而产生性能影响,除非你正在做一个非常疯狂的详细 HUD,但我猜与应用程序的其他部分(如 JS 逻辑)相比,影响可以忽略不计。另外,随着时间的推移,这条路线应该“神奇地”变得更好,浏览器的工作效率也会变得更高。 IMO 最大的缺点是,如果您使用一些最新、最好的 CSS 效果来按照您想要的方式设置 HUD 样式,您可能会遇到一些渲染错误,但随着时间的推移,这种情况应该会消失。

Option C据我所知,在单一画布上是不可能的。您可以在 3D 画布上放置一个单独的 2D 画布,并将 HUD 绘制到其上,但此时您将继承 A 和 B 的所有问题,但没有任何好处。我看不出有什么充分的理由推荐它。

我认为 WebGL 相对于许多原生 3D 平台的一大优势是,它可以轻松访问地球上使用最广泛、最灵活的 UI 框架之一 (HTML)。忽视这一优势将是一项巨大的努力,但几乎没有什么实际好处。使用可用的工具,不要太担心因此而损失的毫秒。我向您保证,您在开发游戏时将面临更大的问题,花在这方面的时间和精力比尝试重新发明这个特定的轮子要好得多。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 webgl 中制作 2d HUD 的推荐方法 的相关文章

随机推荐