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.
对于webgl中fps性能很重要的游戏,制作2D HUD的最有效方法是什么?我可以想到3个选项,但我不清楚每个选项的性能成本是多少,哪个是最有效的。
So what is the relative performance cost between the 3 following options:
那么以下3个选项之间的相对性能成本是多少:
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.
答:使用正交相机在3D中渲染具有多边形的hud并混合在原始场景上。优点是先进的opengl效果是可能的,代价是手动安排容器。
B: build the HUD in html/css and let the browser do compositing. Inthis case is there a big perf hit with browser composition?
B:在html / css中构建HUD并让浏览器进行合成。在这种情况下,浏览器构成有很大的影响吗?
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.
C:在3D画布上绘制2D画布,让浏览器进行合成。这是否可能,我是否会在画布之间传播事件,例如鼠标事件和焦点。
Many thanks!
1 个解决方案
#1
40
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.
选项A在技术上可能是最快的,但会带来一大堆您需要手动处理的其他问题。如果你正在更新文本(健康,弹药等),你将不得不想出一个文本渲染例程,至少可以说这些是非常重要的。如果您通过鼠标或键盘与UI进行交互,则需要自己处理,并且您实现这一目标的可能性足够高,实际上可以产生比本机浏览器小部件更好的体验。重点是,为了更快一点的潜力,需要做很多工作。
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.
在我看来,选项B是要走的路。浏览器非常擅长合成,即使它会因为它而受到打击,除非你正在做一个非常疯狂的详细HUD,我猜想与你的应用程序的其他部分(如JS逻辑)相比,命中率可以忽略不计。此外,随着时间的推移,浏览器应该“神奇地”变得更好,并且浏览器在他们所做的事情上变得更有效率。 IMO最大的缺点是你可能会遇到一些渲染错误,如果你正在使用一些最新的和最好的CSS效果来按照你想要的方式设置你的HUD样式,但是随着时间的推移它应该会消失。
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.
据我所知,选项C在单个画布中是不可能的。你可以将一个单独的2D画布分层放在你的3D画布上并绘制你的HUD,但此时你继承了A和B的所有问题而没有任何好处。我认为没有理由推荐它。
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与许多原生3D平台相比具有的一大优势是,它可以轻松访问地球上最广泛使用和最灵活的UI框架之一(HTML)。忽视这种优势将是一项巨大的努力,几乎没有实际的好处。使用您可以使用的工具,并且因为它而不会过多地关注丢失的毫秒数。我向你保证,在你的游戏中你会遇到更大的问题,你花费的时间和精力会比尝试重新发明这个特定的*更好。
#1
40
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.
选项A在技术上可能是最快的,但会带来一大堆您需要手动处理的其他问题。如果你正在更新文本(健康,弹药等),你将不得不想出一个文本渲染例程,至少可以说这些是非常重要的。如果您通过鼠标或键盘与UI进行交互,则需要自己处理,并且您实现这一目标的可能性足够高,实际上可以产生比本机浏览器小部件更好的体验。重点是,为了更快一点的潜力,需要做很多工作。
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.
在我看来,选项B是要走的路。浏览器非常擅长合成,即使它会因为它而受到打击,除非你正在做一个非常疯狂的详细HUD,我猜想与你的应用程序的其他部分(如JS逻辑)相比,命中率可以忽略不计。此外,随着时间的推移,浏览器应该“神奇地”变得更好,并且浏览器在他们所做的事情上变得更有效率。 IMO最大的缺点是你可能会遇到一些渲染错误,如果你正在使用一些最新的和最好的CSS效果来按照你想要的方式设置你的HUD样式,但是随着时间的推移它应该会消失。
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.
据我所知,选项C在单个画布中是不可能的。你可以将一个单独的2D画布分层放在你的3D画布上并绘制你的HUD,但此时你继承了A和B的所有问题而没有任何好处。我认为没有理由推荐它。
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与许多原生3D平台相比具有的一大优势是,它可以轻松访问地球上最广泛使用和最灵活的UI框架之一(HTML)。忽视这种优势将是一项巨大的努力,几乎没有实际的好处。使用您可以使用的工具,并且因为它而不会过多地关注丢失的毫秒数。我向你保证,在你的游戏中你会遇到更大的问题,你花费的时间和精力会比尝试重新发明这个特定的*更好。