manera recomendada de hacer un 2do HUD en webgl

Question

Para un juego en webgl donde el rendimiento de fps es importante, ¿cuál es la forma más eficiente de hacer un HUD en 2D? Puedo pensar en 3 opciones, pero no está claro para mí cuál es el costo de rendimiento de cada una y cuál se recomienda como la más eficiente.

Entonces, ¿cuál es el costo de rendimiento relativo entre los 3 siguientes opciones:

A: hacer que el HUD con polígonos en 3D utilizando una cámara ortográfica y mezcla sobre la escena original. La ventaja es que los efectos opengl avanzados son posibles, al costo de la disposición manual de los contenedores.

B: construye el HUD en html/css y deja que el navegador haga la composición. En este caso, ¿hay un gran impacto en el rendimiento con la composición del navegador?

C: dibuje sobre un lienzo 2D sobre el lienzo 3D y deje que el navegador lo haga. ¿Es esto posible? ¿Tendría problemas con la propagación de eventos entre lienzos como los eventos del mouse y el foco?

¡Muchas gracias!

Answer 1

Opción A es probablemente técnicamente el más rápido, pero traerá consigo toda una serie de otros temas que se necesitan para manejar manualmente. Si está actualizando texto (salud, munición, etc.) tendrá que crear una rutina de representación de texto, y eso no es trivial, por decir lo menos. Si interactúa con la interfaz de usuario a través de un mouse o teclado, tendrá que manejarlo usted mismo, y las posibilidades de que lo haga con la robustez y eficiencia suficientes para ofrecer una mejor experiencia que los widgets nativos del navegador son escasas. El hecho es que es mucho trabajo para que el potencial sea un poco más rápido.

Opción B es, en mi opinión, el camino a seguir. El navegador es bastante bueno para la composición y aunque habrá un golpe de percusión debido a que a menos que estés haciendo un HUD detallado realmente loco, yo diría que el golpe será insignificante en comparación con otras partes de tu aplicación (como la lógica JS). Además, esta es una ruta que debería mejorar "mágicamente" a medida que pasa el tiempo y los navegadores se vuelven más eficientes en lo que hacen. OMI: la desventaja más grande aquí es que puede encontrar algunos errores de representación si está utilizando algunos de los últimos y mejores efectos de CSS para darle un estilo a su HUD de la manera que desee, pero una vez más, esto desaparecerá con el paso del tiempo.

La opción C es, que yo sepa, imposible dentro de un solo lienzo. Podría tener un lienzo en 2D separado en capas sobre su 3D y dibujar su HUD, pero en ese momento está heredando todos los problemas de A y B sin ninguno de los beneficios. No veo ninguna buena razón para recomendarlo.

Creo que una de las grandes ventajas que tiene WebGL en muchas plataformas nativas 3D es que tiene acceso trivial a uno de los marcos de interfaz de usuario más utilizados y más flexibles del planeta (HTML). Ignorar esa ventaja va a ser un esfuerzo colosal con muy poco beneficio tangible. Use las herramientas que están disponibles para usted, y no se preocupe demasiado por los milisegundos perdidos por eso. Te prometo que hay problemas mucho más grandes que enfrentarás mientras trabajas en tu juego, y tu tiempo y esfuerzo se gastarían mejor allí que tratar de reinventar esta rueda en particular.