Há algum motivo para usar WebGL em vez de 2D Canvas para jogos / aplicativos 2D?

Existe algum motivo, exceto desempenho, para usar WebGL em vez de 2D-Canvas para jogos / aplicativos 2D ?

Em outras palavras, quais funcionalidades 2D são oferecidas pelo WebGL que não são possíveis de alcançar facilmente com 2D-Canvas?

Olhando para esta questão de outro lado:
como um desenvolvedor escolhe uma tecnologia em vez de outra?

• integra-se melhor em seu sistema já construído
• é mais fácil de usar
• é mais rápido
• tem mais recursos ou atende melhor às suas necessidades
• custo
• mais platfrom-independente

Portanto, discutirei as diferenças entre APIs de tela e webGL com relação a essas qualidades.

Tanto canvas quanto webGL são APIs de JavaScript. Eles são praticamente os mesmos em relação à integração (vinculação). Ambos são suportados por uma série de bibliotecas que podem acelerar sua codificação. Bibliotecas diferentes fornecem maneiras diferentes de organizar seu código, portanto, a escolha da biblioteca determina como as APIs de desenho são estruturadas, mas ainda é praticamente a mesma coisa (como o resto do código se liga a ele). Se você usa uma biblioteca, a facilidade de escrever código depende da própria biblioteca.

Se você escrever código do zero, a API do canvas será muito mais fácil de aprender e entender. Requer um mínimo de conhecimento matemático e o desenvolvimento é rápido e direto.

Trabalhar com a API WebGL requer fortes habilidades matemáticas e um entendimento completo do pipeline de renderização. Pessoas com essas habilidades são mais difíceis de encontrar, a produção é mais lenta (devido ao tamanho e à complexidade dessa base de código) e, portanto, custa mais.

O WebGL é mais rápido e tem mais recursos. Não há dúvida acerca disso. É uma API 3D nativa que dá acesso total ao pipeline de renderização, o código e os efeitos são executados mais rapidamente e são mais 'ajustáveis'. Com o webGL realmente não há limites.

Tanto o canvas quanto o webGL são guloseimas em HTML5. Normalmente, os dispositivos que suportam um suportarão o outro.

Entao, para resumir:

• mesclando o código da API de desenho e o resto (integração): semelhante
• fácil de usar:
  • (com biblioteca) canvas = webGL
  • (do zero) webGL << canvas
• velocidade: webGL> canvas
• recursos: webGL> canvas
• custo: webGL é muito mais caro
• plataforma: muito semelhante

Espero que isto ajude.

PS Aberto para discussão.

A maior vantagem é a programação do pipeline e o desempenho. Por exemplo, digamos que você está desenhando 2 caixas uma acima da outra e uma está oculta, algumas implementações de GL têm espaço para descartar a caixa oculta.

Quanto às comparações, como não há uma maneira rápida de criar uma tabela aqui, acabei de fazer o upload de uma imagem da tabela de comparação abaixo. Adicionado Three.js apenas para integridade.

Falando por experiência própria em meus próprios aplicativos , os shaders gráficos têm sido o único motivo pelo qual solicitei suporte para WebGL. A facilidade de uso tem pouca importância para mim, já que ambos os frameworks podem ser abstraídos com three.js. Presumindo que não preciso de shaders, permito o uso de qualquer uma das estruturas para maximizar o suporte do navegador / máquina.

Que capacidade 2D o WebGL oferece que a tela 2D não oferece? O maior deles, IMHO, são os shaders de fragmento programáveis ​​no hardware gráfico. Por exemplo, em WebGL, pode-se implementar Game of Life de Conway em um shader em seu hardware 3D:

http://glslsandbox.com/e#207.3

Esse tipo de exibição 2D funcionaria apenas na CPU, não na GPU, com uma tela 2D. Todos os cálculos seriam implementados em JavaScript e não seriam tão paralelos quanto a GPU, mesmo com a ajuda de web workers. Este é apenas um exemplo, é claro, todos os tipos de efeitos 2D interessantes podem ser implementados com shaders.

Bem, o desempenho seria um dos maiores motivos, porque quando você está programando um jogo, ele tem que ser rápido. Mas há alguns outros motivos pelos quais você pode querer escolher WebGL em vez de tela. Ele oferece a possibilidade de codificar shaders, iluminação e zoom, o que é importante se você estiver fazendo um aplicativo de jogo comercial. Além disso, o canvas fica lento após 50 sprites ou mais.

Não há nada que você possa fazer com o Canvas que não possa fazer com o webGL: o canvas permite esmagar os bytes com get / putImageData, e você pode desenhar linhas, círculos, ... programaticamente com webGL.
Mas se você está procurando fazer alguns desenhos, e também alguns efeitos a 60 fps, a diferença de desempenho é tão alta que não será possível com o canvas, quando ele rodará bem no webGL. O desempenho é um recurso fundamental.

Ainda assim, o webGL é bastante complicado de programar: veja se o canvas é bom o suficiente para você ou procure uma biblioteca que irá aliviar a dor ...
Outra desvantagem: ele não funciona no IE (mas o que funciona?) E em alguns celulares.
Veja aqui para compatibilidade: http://caniuse.com/webgl

Como você deseja especificamente algumas coisas 2d clássicas que não funcionam bem com o canvas:

• transformações de cor (como piscar um sprite)
• repetir preenchimentos de bitmap
• mapas lado a lado sob rotação (sob a tela, algumas implementações criarão costuras)
• camadas profundas (muito dependente da implementação)
• mistura multiplicativa ou aditiva

... mas é claro que você tem acesso a pixels, então você pode fazer qualquer coisa, incluindo o acima, manualmente. Mas isso pode ser muito, muito lento. Você poderia emscripten Mesa openGl para renderizar em tela em teoria.

Outro grande motivo para usar o webGL seria que o resultado é muito fácil de transportar para qualquer outro lugar. O que também torna a habilidade mais valiosa.

As razões para usar o canvas são que ele ainda tem melhor suporte e, se você aprender a fazer as coisas pixel por pixel, essa também é uma lição muito valiosa.

Como WebGL é uma tecnologia particularmente nova e a tela HTML5 é mais estabelecida, o que você deseja usar depende de seus usuários. Se você acha que seus usuários usarão dispositivos móveis, eu sugeriria o canvas HTML5, mas se você quiser uma renderização 2D melhor, eu usaria WebGL. Portanto, o que você pode fazer é se o uso for em renderização móvel com HTML5, caso contrário, se eles estiverem em uma plataforma que suporte WebGL.

Por exemplo:

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

Fontes:
maneira adequada de detectar o suporte WebGL?
Qual é a melhor maneira de detectar um dispositivo móvel no jQuery?

WebGL não pode ser usado sem uma GPU.
Essa dependência de hardware não é um grande problema porque a maioria dos sistemas tem GPUs, mas se as arquiteturas de GPU ou CPU evoluírem, preservar o conteúdo webgl por emulação pode ser um desafio. Executá-lo em computadores antigos (virtualizados) é problemático.

Mas "Canvas vs WebGL" não precisa ser uma escolha binária. Na verdade, prefiro usar webgl para efeitos, mas fazer o resto na tela. Quando eu o executo em uma VM, ele ainda funciona bem e rápido, mas sem os efeitos.