Question

对于在网格的游戏来说,Fps的表演很重要,什么是制作 2D HUD 的最有效方式?我可以想到三个选项,但我不知道每个选项的表演成本是多少,哪些被推荐为效率最高。

以下三种备选办法之间的相对绩效成本是多少:

A:使用正反射照相机与三维多边形交织在一起,在原始场景上混合。先进的开关效果是可能的,以人工排列容器为代价。

B: 在 html/ css 中构建 HUD, 让浏览器进行合成。在这种情况下, 是否有一个大的 perf 被浏览器组成击中?

C: 在 3D 画布上绘制 2D 画布, 并让浏览器进行编译。这甚至可能吗? 我是否会在画布之间出现诸如鼠标事件和焦点等事件传播问题。

非常感谢!

Answer 1

< strong > option A 很可能是技术上最快的 < em > / em >, 但是会随之带来您需要手动处理的全部其它问题。如果您正在更新文本( 健康、弹药等), 您将不得不拿出一个文本进行例行操作, 而那些不是三重的。如果您通过鼠标或键盘与 UI 互动, 您将需要自己处理, 并且您这样做的力度和效率足以带来比本地浏览器部件更好的经验的可能性也很小。指出的是, 潜力要快一点, 需要做很多工作。

在我看来,<强度>Option B 是前进的道路。浏览器非常擅长作曲,而且,尽管除非你正在做一个非常疯狂的详细 HUD,否则会因为它而遭到perf的打击。我想,与你的应用程序的其他部分相比,这个打击将微不足道(如JS逻辑)。此外,这条路线应该“神奇地”随着时间的流逝而变得更好,浏览者也变得效率更高。这里最大的下坡点是,如果你再使用一些最新的和最大的 CSS 效果来按您想要的方式描述你的 HUD 效果,你可能会遇到一些制造错误的错误,但同样应该随着时间的流逝而消失。

据我所知,“强度”可选C

我认为WebGL对于许多本地的3D平台的一大优势在于,它拥有对地球上最广泛使用和最灵活的UI框架(HTML)的微乎其微的接入。忽略这一优势将是一项巨大的努力,其实际效益微乎其微。利用现有的工具,不要太担心失去的毫秒。我向你们保证,你们在努力游戏和时间与努力时,会面临更大的问题,远远胜过重塑这一方向盘。

Answer 2

虽然我同意在多数情况下选择选择B,但选择C是可能的,而且对于WebVR中的HUDs可能也是需要的(除非你想将DOM变成一种纹理,使用DOM2AFrame )。

我发现 < a href=> https://www.evermadade.fi/story/pure- 3-js-hud/" rel="nofollow noreferrer" > 这博客如何使用 three.js实施选项C。它在原始场景的顶端为 HUD 创建一个单独的场景, 并使用 2D 画布生成 HUD 纹理。这是 < a href=> https://codpen.io/sjcobb/ pen/ XWjMdXb" rel= “ nofollown noreferrer” > Cdecepen link , 示例见线 57- 78, 起始于:

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

框架还有可以使用的预建UI组件,见ex. 1 , < a href="https://github.com/caseyyee/aframe-ui-widgets" rel=“nofollown noreferr'>ex. 2

友情链接