在webgl中制作2D HUD的推荐方法 [英] recommended way to make a 2d HUD in webgl

问题描述

对于在webgl中fps性能至关重要的游戏，制作2D HUD的最有效方法是什么?我可以想到3个选择，但我不清楚每个选择的性能成本是多少，建议将其作为最有效的选择.

For a game in webgl where fps performance is important, what is the most efficient way to make a 2D HUD? I can think of 3 options, but its unclear to me what is the performance cost of each and which would be recommended as most efficient.

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

So what is the relative performance cost between the 3 following options:

A:使用正交摄影机在3D中用多边形渲染集线器，并在原始场景上混合.优点是可以实现先进的opengl效果，但需要以手动方式布置容器.

A: render the hud with polygons in 3D using an orthographic camera and blend over the original scene. Advantage is advanced opengl effects are possible, at cost of manual arangement of containers.

B:在html/css中构建HUD，然后让浏览器进行合成.在这种情况下，浏览器的性能会有很大的帮助吗?

B: build the HUD in html/css and let the browser do compositing. Inthis case is there a big perf hit with browser composition?

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

C: draw on a 2D canvas over the 3D canvas and let browser do compositing. Is this even possible and would I have issues with event propagation between canvases such as mouse events and focus.

非常感谢！

推荐答案

选项A 在技术上可能是最快的，但会带来很多其他问题您将需要手动处理.如果要更新文本(健康状况，弹药等)，则必须提出一个文本呈现例程，至少可以说这是不平凡的.如果您通过鼠标或键盘与UI进行交互，则需要您自己进行处理，并且与本地浏览器小部件相比，您进行健壮和有效的操作的机会足以产生更好的体验.要点是，要使速度更快一点，还有很多工作要做.

Option A is probably technically the fastest, but will bring with it a whole slew of other issues that you will need to handle manually. If you are updating text (health, ammo, etc) you'll have to come up with a text rendering routine, and those are non-trivial to say the least. If you interacting with the UI via a mouse or keyboard you'll need to handle that yourself, and the chances of you doing that robustly and efficiently enough to actually yield a better experience than the native browser widgets is slim. Point being, it's a lot of work for the potential to be a little faster.

选项B 是可行的方法.该浏览器非常擅长于合成，即使因为它而会造成性能上的损失，除非您正在做一个非常疯狂的详细HUD，我想与应用程序的其他部分(如JS逻辑)相比，该影响可以忽略不计.另外，随着时间的流逝，这条路线应该神奇地"变得更好，并且浏览器的工作效率也更高.IMO的最大缺点是，如果您使用一些最新最好的CSS效果按照所需的方式对HUD进行样式设置，则可能会遇到一些渲染错误，但是随着时间的流逝，这种情况应该会消失.

Option B is, in my opinion, the way to go. The browser is quite good at compositing and even though there will be a perf hit because of it unless you are doing a really crazy detailed HUD I would guess that the hit will be negligible compared to other parts of your app (like JS logic). Plus this is a route that should "magically" get better as time goes on and Browsers become more efficient at what they do. IMO the biggest downside here is that you may encounter some rendering bugs if you're using some of the latest and greatest CSS effects to style your HUD the way you want it, but again that should go away as time goes on.

选项C 在单个画布中是不可能的.您可以在3D画布上叠加一个单独的2D画布并在其中绘制HUD，但是到那时，您将继承A和B的所有问题，而没有任何好处.我认为没有充分的理由推荐它.

Option C is, to my knowledge, not possible within a single canvas. You could have a separate 2D canvas layered over your 3D one and draw your HUD to it, but at that point you're inheriting all of the problems of A and B with none of the benefits. I can see no good reason to recommend it.

我认为WebGL与许多本机3D平台相比的一大优势在于，它可以轻松访问地球上使用最广泛，最灵活的UI框架之一(HTML).忽略这种优势将是一项巨大的努力，几乎没有任何实质性的利益.使用可用的工具，不要因此而在丢失的毫秒中过分担心自己.我向您保证，在开发游戏时会遇到更大的问题，并且比在尝试重新发明这个特殊的轮子上花费更多的时间和精力.

I think one of the big advantages WebGL has over many native 3D platforms is that it has trivial access to one of the most widely used and most flexible UI frameworks on the planet (HTML). Ignoring that advantage is going to be a colossal effort with very little tangible benefit. Use the tools that are available to you, and don't concern yourself too much over lost milliseconds because of it. I promise you that there are much larger issues that you'll be facing while working on your game and your time and effort would be far better spent there than trying to reinvent this particular wheel.

这篇关于在webgl中制作2D HUD的推荐方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！