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

112

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

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

html html5-canvas webgl Ali Shakiba
fuente
5
Por cierto: si bien no puede usar la API de contexto 2d y 3d en el mismo lienzo, aún puede combinarlos utilizando varios lienzos. WebGL puede usar lienzos 2d como texturas y los lienzos 2d pueden usar lienzos WebGL como fuentes para drawImage.
Philipp

Respuestas:

83

Mirando esta pregunta desde otro lado:
¿cómo elige un desarrollador 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-independiente

Así que discutiré las diferencias entre las API de canvas y webGL con respecto a estas cualidades.

Tanto canvas como webGL son API de JavaScript. Son más o menos lo mismo con respecto a la integración (enlace). Ambos son compatibles con una serie de bibliotecas que podrían acelerar su codificación. Las diferentes bibliotecas le brindan diferentes formas de organizar su código, por lo que la elección de la biblioteca dicta cómo se estructuran sus API de dibujo, pero sigue siendo más o menos lo mismo (cómo el resto del código se une a él). Si usa la biblioteca, la facilidad para escribir código depende de la propia biblioteca.

Si escribe código desde cero, la API de lienzo es mucho más fácil de aprender y comprender. Requiere un conocimiento mínimo de matemáticas y el desarrollo es rápido y sencillo.

Trabajar con la API de WebGL requiere sólidas habilidades matemáticas y una comprensión completa del proceso de renderizado. Las personas con estas habilidades son más difíciles de encontrar, la producción es más lenta (debido al tamaño y la complejidad de dicha base de código) y, por lo tanto, cuesta más.

WebGL es más rápido y tiene más capacidades. No hay duda de eso. Es una API 3D nativa que le brinda acceso completo a la canalización de renderizado, el código y los efectos se ejecutan más rápido y son más 'modificables'. Con webGL realmente no hay límite.

Tanto canvas como webGL son beneficios de html5. Por lo general, los dispositivos que admiten uno admitirán y el otro.

Así que para resumir:

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

Espero que esto ayude.

PD: Abierto para discusión.

Algoritmo abstracto
fuente
@Abstract, ¿Dónde están los buenos tutoriales para web GL y cuántas horas tomará?
Pacerier
1
@Pacerier solo busca en Google, los primeros resultados probablemente sean lo suficientemente buenos. Sin embargo, tomará semanas y meses volverse bueno en la programación de gráficos y webgl en general, y años para ser realmente bueno. No es solo una "biblioteca" aleatoria para la que necesita aprender API y eso es todo.
Algoritmo abstracto
@AbstractAlgorithm, quiero decir, si ya eres un maestro con lienzo de programación, ¿cuántas horas te llevará cambiar a web GL?
Pacerier
@Pacerier eso depende del desarrollador y, como Abstract ya dijo, las habilidades matemáticas del desarrollador involucrado. Realmente no hay una cuantificación que se pueda hacer.
scrappedcola
32

La mayor ventaja es la capacidad de programación de la canalización y el rendimiento. Por ejemplo, supongamos que está dibujando 2 cuadros uno encima del otro y uno está oculto, algunas implementaciones de GL tienen margen para descartar el cuadro oculto.

En cuanto a las comparaciones, dado 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.

Mesa

Prabindh
fuente
Re "algunas implementaciones de GL tienen margen para descartar el cuadro oculto", pero ¿no podría detectar esa parte anulada en JS y, por lo tanto, no volver a dibujar lo que no se necesita?
Pacerier
16

Hablando por experiencia en mis propias aplicaciones , los sombreadores de gráficos han sido la única razón por la que he requerido soporte para WebGL. La facilidad de uso tiene poca importancia para mí, ya que ambos marcos se pueden abstraer con three.js. Suponiendo que no necesito sombreadores, permito el uso de cualquier marco para maximizar el soporte del navegador / máquina.

16807
fuente
16

¿Qué capacidad 2D ofrece WebGL que no ofrece el lienzo 2D? El más grande en mi humilde opinión son los sombreadores de fragmentos programables en el hardware de gráficos. Por ejemplo, en WebGL, uno puede implementar Game of Life 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 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 web. Este es solo un ejemplo, por supuesto, todo tipo de efectos 2D interesantes se pueden implementar con sombreadores.

emackey
fuente
2
Por lo tanto, vs canvas, ¿WebGL es más o menos exigente para el sistema operativo?
Pacerier
Tengo curiosidad por saber si todos los lienzos terminan haciendo webgl de todos modos; si usa webgl de casos de uso común precompilado, que sería más eficiente que webgl directo; o si no está interactuando con opengl de ninguna manera a menos que use webgl.
Dmitry
1
@Dmitry es una gran pregunta, y los diferentes navegadores son libres de adoptar diferentes enfoques para ese problema. Pero, sin importar cómo aceleren la API Canvas 2D, la API Canvas 2D en sí no ofrece sombreadores programables o búferes de matriz de vértices. Es una API "habladora" (una llamada de JavaScript a nativo por elemento dibujado), mientras que la API de WebGL permite la carga masiva de datos y el procesamiento personalizado basado en GPU.
emackey
14

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 que es posible que desee elegir WebGL en lugar de lienzo. Ofrece la posibilidad de codificar sombreadores, iluminación y zoom, lo cual es importante si estás haciendo una aplicación de juego comercial. También el lienzo se retrasa después de 50 sprites más o menos.

Xk0nSid
fuente
Especialmente en un dispositivo como una tableta Android donde la CPU se sobrecarga rápidamente en JavaScript, la razón principal para usar WebGL es transferir la carga de renderizado a la GPU.
Curtis
1
@ Xk0n, Re "fiere la posibilidad de codificar sombreadores, iluminación y zoom", pero ¿no se vuelve dependiente de la GPU?
Pacerier
Aún puede hacer zoom con setTransform en un contexto de lienzo 2D. Sin embargo, he estado teniendo dificultades con el sangrado de texturas en el lienzo 2D al escalar desde hojas de sprites, por lo que estoy recurriendo a WebGL. Vi un tutorial que evita que el muestreo vecino más cercano salga de la fuente rect, lo que debería solucionar mi problema de vanguardia.
Frank
7

No hay nada que pueda hacer con Canvas que no pueda hacer con webGL: el lienzo permite aplastar los bytes con get / putImageData, y puede dibujar líneas, círculos, ... mediante programación con webGL.
Pero si está buscando hacer bastantes dibujos, y también algunos efectos a 60 fps, la brecha de rendimiento es tan alta que simplemente no será posible con lienzo, cuando funcionará bien en webGL. El rendimiento es una característica fundamental.

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é funciona?), Y en algunos móviles.
Consulte aquí la compatibilidad: http://caniuse.com/webgl

GameAlchemist
fuente
7

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

  • transformaciones de color (como parpadear un sprite)
  • rellenos de mapa de bits repetidos
  • mosaicos de mapas en rotación (debajo del lienzo, algunas implementaciones crearán costuras)
  • estratificación profunda (muy dependiente de la implementación)
  • mezcla multiplicativa o aditiva

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

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

Las razones para usar el lienzo son que aún tiene mejor soporte y si aprendes a hacer cosas píxel a píxel, también es una lección muy valiosa.

starmole
fuente
Por cierto, ¿WebGL es multiproceso? ¿Puede tener dos hilos dibujando dos partes de la pantalla al mismo tiempo?
Pacerier
Creo que la respuesta es "sí y no", ya que los navegadores web son intrínsecamente de un solo subproceso, por lo que copiar los datos que se procesan en la GPU no es de varios subprocesos. Pero, está utilizando la paralelización masiva de la tarjeta gráfica una vez que los sombreadores comienzan a renderizarse, lo que básicamente consiste en dibujar en varias partes de la pantalla a la vez. Por favor corríjame si me equivoco, cualquiera.
Kent Weigel
2

Como WebGL es una tecnología particularmente nueva y el lienzo HTML5 está más establecido, lo que desee utilizar depende de sus usuarios. Si cree que sus usuarios usarán dispositivos móviles, sugeriría un lienzo HTML5, pero si desea una mejor representación 2D, usaría WebGL. Entonces, lo que podría hacer es si el uso está en el renderizado móvil con HTML5, o si están en una plataforma que admita 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: ¿
forma adecuada de detectar la compatibilidad con WebGL?
¿Cuál es la mejor forma de detectar un dispositivo móvil en jQuery?

MayorMonty
fuente
1

WebGL no se puede utilizar sin una GPU.
Esta dependencia del hardware no es un gran problema porque la mayoría de los sistemas tienen GPU, pero si las arquitecturas de GPU o CPU alguna vez evolucionan, preservar el contenido webgl mediante emulación puede ser un desafío. Ejecutarlo en computadoras viejas (virtualizadas) es problemático.

Pero "Canvas vs WebGL" no tiene por qué ser una opción binaria. De hecho, prefiero usar webgl para efectos, pero hacer el resto en lienzo. Cuando lo ejecuto en una máquina virtual, todavía funciona bien y rápido, solo que sin los efectos.

usuario185953
fuente