推薦的方式在webgl中製作2d HUD

Question

對於webgl中fps性能很重要的遊戲，製作2D HUD的最有效方法是什麼？我可以考慮3個選項，但我不清楚每個選項的性能成本是多少，哪個建議最有效。

那麼，什麼是以下3個選項之間的相對性能開銷：

答：渲染使用正視相機的3D多邊形的HUD和混合了原始場景。優點是先進的opengl效果是可能的，以手動排列容器爲代價。 B：在html/css中構建HUD並讓瀏覽器進行合成。在這種情況下，瀏覽器組合是否會帶來很大的性能損失？ C：在3D畫布上繪製2D畫布，讓瀏覽器進行合成。這甚至是可能的，我會有畫布之間事件傳播的問題，如鼠標事件和焦點。

非常感謝！

Answer 1

選項A可能是技術上最快的，但將帶來的，你將需要手動處理其他問題一大堆。如果你正在更新文本（健康，彈藥等），你將不得不提出一個文本渲染例程，至少可以說這些是不重要的。如果您通過鼠標或鍵盤與UI進行交互，則需要自己處理，並且您可以以足夠強大有效的方式進行操作，從而實現比原生瀏覽器窗口小部件更好的體驗。要指出的是，潛力要快一點，這是很多工作。

選項B是在我看來，要走的路。瀏覽器在合成方面非常出色，即使它會因爲它而出現性能下降，除非你正在做一個非常瘋狂的HUD，但我猜測與你應用的其他部分（比如JS邏輯）相比，這個命中可以忽略不計。此外，這是一條應該隨着時間的推移「神奇地」變得更好的路線，並且瀏覽器在他們所做的事情上變得更有效率。 IMO最大的缺點是，如果你使用一些最新和最好的CSS效果來按照你想要的方式來設計你的HUD，那麼你可能會遇到一些渲染錯誤，但是隨着時間的推移它又會消失。

就我所知，選項C在單個畫布中是不可能的。你可以將一個單獨的2D畫布分層放在你的3D畫布上，然後畫出你的HUD，但是在那時你繼承了A和B的所有問題，而沒有任何好處。我看不出有什麼好的理由來推薦它。

我認爲WebGL與許多本地3D平臺相比具有的一大優勢就是它可以輕鬆訪問地球上最廣泛使用和最靈活的UI框架之一（HTML）。忽視這一優勢將會是一項巨大的努力，而且沒有什麼實實在在的好處。使用你可以使用的工具，並且不要因爲失去了毫秒而擔心太多。我向你保證，在你的遊戲中你會遇到很多更大的問題，你花費的時間和精力比嘗試重新發明這個特定的方法要好得多。