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


112

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?


5
A propósito: embora você não possa usar a API de contexto 2d e 3D na mesma tela, ainda pode combiná-las usando várias telas. WebGL pode usar telas 2d como texturas e telas 2d podem usar telas WebGL como fontes para drawImage.
Philipp

Respostas:


83

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.


@Abstract, Onde estão os bons tutoriais para web GL e quantas horas isso vai levar?
Pacerier

1
@Pacerier pesquise no Google, os primeiros acessos provavelmente são bons o suficiente. No entanto, levará semanas e meses para ficar bom em webgl e programação gráfica em geral, e anos para ser realmente bom. Não é apenas uma "biblioteca" aleatória para a qual você precisa aprender a API e é isso.
Algoritmo abstrato de

@AbstractAlgorithm, quero dizer, se você for um mestre com tela de programação, quantas horas levará para mudar para o GL da web?
Pacerier,

@Pacerier que depende do dev e como Resumo já disse as habilidades matemáticas do dev envolvido. Realmente não há uma quantificação que possa ser feita.
scrappedcola

32

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.

Tabela


Sobre "algumas implementações de GL têm espaço para descartar a caixa oculta", mas você não conseguiu detectar essa parte substituída em JS e, portanto, não redesenhar o que não é necessário?
Pacerier

16

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.


16

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.


2
Assim, em comparação ao canvas, o WebGL é mais ou menos oneroso para o sistema operacional?
Pacerier

Estou curioso para saber se toda a tela acaba fazendo webgl de qualquer maneira; se ele usa o caso de uso comum pré-compilado webgl, que seria mais eficiente do que o webgl direto; ou se não estiver fazendo interface com o opengl de nenhuma forma, a menos que você use o webgl.
Dmitry

1
@Dmitry é uma ótima pergunta, e diferentes navegadores estão livres para fazer diferentes abordagens para esse problema. Mas, não importa como eles aceleram o Canvas 2D API, o Canvas 2D API em si não oferece sombreadores programáveis ​​ou buffers de matriz de vértice. É uma API "tagarela" (uma chamada de JavaScript para nativo por elemento desenhado), enquanto a API do WebGL permite o carregamento de dados em massa e processamento personalizado baseado em GPU.
emackey

14

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.


Especialmente em um dispositivo como um tablet Android, onde a CPU fica sobrecarregada rapidamente em javascript, o principal motivo para usar o WebGL é transferir a carga de renderização para a GPU.
Curtis

1
@ Xk0n, Re "oferece a possibilidade de codificar sombreadores, iluminação e zoom", mas isso não se torna dependente da GPU?
Pacerier

Você ainda pode aplicar zoom com setTransform em um contexto de tela 2D. No entanto, tenho tido dificuldade com sangramento de textura em canvas 2D ao dimensionar folhas de sprite, e é por isso que estou recorrendo ao WebGL. Eu vi um tutorial que impede a amostragem do vizinho mais próximo de sair do retângulo de origem, o que deve resolver meu problema de sangramento.
Frank

7

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


7

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.


Btw O WebGL é multithread? Você pode ter dois threads desenhando duas partes da tela simultaneamente?
Pacerier

Acho que a resposta é "sim e não", uma vez que os navegadores da web são inerentemente single-threaded, então copiar os dados a serem renderizados para a GPU não é multi-thread. Mas, você está usando a paralelização massiva da placa de vídeo uma vez que os shaders começam a renderizar, o que basicamente desenha em várias partes da tela ao mesmo tempo. Por favor, corrija-me se eu estiver errado, alguém.
Kent Weigel

2

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?


1

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.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.