html5 - videojuegos - phaser2

¿Hay alguna razón para usar WebGL en lugar de 2D Canvas para juegos/aplicaciones en 2D?

Question

¿Hay alguna razón, excepto el rendimiento, para usar WebGL en lugar de 2D-Canvas para juegos / aplicaciones en 2D ?

En otras palabras, ¿qué funcionalidades 2D ofrece WebGL que no son posibles de lograr fácilmente con 2D-Canvas?

Answer 1

¿Qué capacidad 2D ofrece WebGL que el lienzo 2D no ofrece? El más grande en mi humilde opinión es el sombreador de fragmentos programable en el hardware de gráficos. Por ejemplo, en WebGL, uno puede implementar el Juego de la vida de Conway en un sombreador en su hardware 3D:

http://glslsandbox.com/e#207.3

Este tipo de pantalla 2D solo se ejecutaría en la CPU, no en la GPU, con un lienzo en 2D. Todos los cálculos se implementarían en JavaScript, y no serían tan paralelos como la GPU, incluso con la ayuda de los trabajadores de la web. Este es solo un ejemplo, por supuesto, todo tipo de efectos 2D interesantes se pueden implementar con sombreadores.

Answer 2

Bueno, el rendimiento sería una de las principales razones porque cuando estás codificando un juego, tiene que ser rápido. Pero hay un par de otras razones por las cuales es posible que desee elegir WebGL sobre lienzo. Ofrece la posibilidad de codificar sombreadores, iluminación y zoom, lo cual es importante si está haciendo una aplicación de juego comercial. También el lienzo se queda holgazante después de 50 sprites más o menos.

Answer 3

Como WebGL es una tecnología particularmente nueva y el lienzo HTML5 está más establecido, lo que quiere usar depende de sus usuarios. Si crees que tus usuarios usarán dispositivos móviles, te sugiero un lienzo HTML5, pero si quieres una mejor renderización 2D, usaría WebGL. Entonces, lo que podría hacer es si el uso está en el procesamiento móvil con HTML5 else si están en una plataforma que admite WebGL.

Por ejemplo:

 if (window.WebGLRenderingContext) {
webGLcanvasApp()
} else if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
html5CanvasAppFMobile()
} else {
html5CanvasApp()
}

Fuentes:
¿La forma correcta de detectar el soporte de WebGL?
¿Cuál es la mejor forma de detectar un dispositivo móvil en jQuery?

Answer 4

Como desea específicamente algunas cosas clásicas de 2d que no funcionan bien con el lienzo:

• transformaciones de color (como parpadear un sprite)
• repetir rellenos de mapa de bits
• mosaico de mapas bajo rotación (en el lienzo algunas implementaciones crearán costuras)
• capas profundas (muy dependiente de la implementación)
• mezcla multiplicativa o aditiva

... pero, por supuesto, tiene acceso a píxeles, por lo que puede hacer cualquier cosa, incluido lo anterior, de forma manual. Pero eso puede ser realmente, muy lento. Podría escribir emscripten Mesa openGl para renderizar en lienzo en teoría.

Otra gran razón para usar webGL sería que el resultado es muy fácil de transportar a cualquier otro lugar. Lo cual también hace que la habilidad sea más valiosa.

Las razones para utilizar el lienzo son que todavía está mejor respaldado y si aprende a hacer cosas píxel por píxel, eso también es una lección muy valiosa.

Answer 5

Hablando de la experiencia en mis propias aplicaciones , los sombreadores de gráficos han sido la única razón por la que he necesitado soporte para WebGL. La facilidad de uso tiene poco que ver conmigo ya que ambos frameworks se pueden abstraer con three.js. Asumiendo que no necesito sombreadores, permito el uso de cualquiera de los marcos para maximizar el soporte de navegador / máquina.

Answer 6

La mayor ventaja es la programabilidad de la tubería y el rendimiento. Por ejemplo, supongamos que está dibujando 2 cuadros uno encima del otro y uno está oculto, algunas implementaciones GL tienen alcance para descartar el cuadro oculto.

En cuanto a las comparaciones, ya que no hay una forma rápida de crear una tabla aquí, acabo de subir una imagen de la tabla de comparación a continuación. Se agregó Three.js solo para completar.

Answer 7

Mirando esta pregunta desde otro lado:
¿cómo un desarrollador elige una tecnología sobre otra?

• se integra mejor en su sistema ya construido
• es más fácil de usar
• es más rápido
• tiene más capacidades o se adapta mejor a sus necesidades
• costo
• más platfrom-independant

Por lo tanto, analizaré las diferencias entre Canvas y las API de webGL con respecto a estas cualidades.

Ambos canvas y webGL son API de JavaScript. Por lo tanto, son más o menos lo mismo con respecto a la integración (enlace). Ambos tienen varias bibliotecas / motores que podrían acelerar su codificación. Las diferentes bibliotecas le dan diferentes formas de organizar su código, por lo que difiere en cómo se estructura el código alrededor de la API de dibujo, pero sigue siendo más o menos lo mismo (cómo el resto del código se une con él).

Si usa la biblioteca, la facilidad de escribir el código depende de la biblioteca misma.
Pero si escribe código desde cero, Canvas ''API es mucho más fácil de aprender y comprender, requiere un conocimiento matemático mínimo. El desarrollo es rápido y directo. WebGL necesita un desarrollador con sólidas habilidades matemáticas que entienda completamente el proceso de renderizado y sepa qué está haciendo. Esas personas son más difíciles de encontrar, la producción es más lenta (debido al tamaño del código y la complejidad para integrarlo en el resto) y, por lo tanto, cuesta más.

WebGL es más rápido y tiene más capacidades. Sin duda eso. Es una API nativa de 3D y te da acceso completo a la canalización de renderizado, y todo el código y los efectos se ejecutan más rápido y más modificable. Con webGL realmente no hay límite.

Tanto canvas como webGL son buenos html5. Por lo general, los dispositivos que admiten uno son compatibles y el otro.

Así que para resumir:

• fusionando el código API de dibujo y el resto (integración): similar
• facilidad de uso:
  • (con biblioteca) canvas = webGL
  • (desde cero) webGL << canvas
• velocidad: webGL> lienzo
• capacidades: webGL> canvas
• costo: webGL es mucho más caro
• plataforma: muy similar

Espero que esto ayude.

PD Abierto para discusión.

Answer 8

No hay nada que puedas hacer con Canvas que no puedas hacer con webGL: el lienzo permite aplastar los bytes con get / putImageData, y puedes dibujar líneas, círculos, ... programáticamente con webGL.
Pero si intenta hacer algunos dibujos, y también algunos efectos a 60 fps, la brecha de rendimiento es tan alta que no será posible con canvas, cuando se ejecutará bien en webGL. El rendimiento es una característica raíz.

Sin embargo, webGL es bastante complicado de programar: vea si canvas es lo suficientemente bueno para usted o busque una biblioteca que alivie el dolor ...
Otro inconveniente: no funciona en IE (¿pero qué hace?), Y en algunos móviles.
Consulte aquí para obtener compatibilidad: http://caniuse.com/webgl