Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

WebGL (Web Graphics Library) é uma API do JavaScript para renderizar gráficos 3D e 2D dentro de um navegador web compatível sem o uso de plug-ins. O WebGL faz isso introduzindo uma API que está de acordo com o OpenGL ES 2.0 e que pode ser usada em elementos do HTML5 <canvas>.

O suporte para WebGL está presente no Firefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+ e Internet Explorer 11+. No entanto, o dispositivo do usuário também deve ter um hardware que suporte esses recursos.

O elemento <canvas> é também usado pelo Canvas 2D para renderizar gráficos 2D em páginas web.

Referências

Interfaces padrão

Extensões

Eventos

Constantes e tipos

WebGL 2

O WebGL 2 é uma atualização importante para o WebGL, que é fornecida através da interface WebGL2RenderingContext. Baseia-se no OpenGL ES 3.0 e os novos recursos incluem:

Veja também os posts WebGL 2 lands in Firefox e webglsamples.org/WebGL2Samples para alguns exemplos de demonstração.

Guias e tutoriais

  • Tutorial WebGL: Um guia para iniciantes nos conceitos principais do WebGL. Um bom lugar para iniciar se você não tem experiência prévia em WebGL.
  • Melhores práticas em WebGL: Dicas e sugestões para melhorar seu conteúdo WebGL.
  • Usando extensões: Como usar as extensões disponíveis em WebGL.

Tutoriais avançados

  • Modelo, visualização e projeção em WebGL: Uma explicação detalhada das três matrizes principais tipicamente usadas para representar uma visualização em 3D de um objeto: as matrizes de modelo, de visualização e de projeção.
  • Matemática matricial para a web: Um guia útil sobre como matrizes de transformação 3D funcionam e como podem ser usadas na web — tanto para cálculos em WebGL quanto para transformações em CSS3.

Recursos

  • WebGL puro: Uma introdução ao WebGL Uma conversa com Nick Desaulniers que introduz o básico de WebGL. Este é um ótimo lugar para iniciar se você nunca trabalhou com programação de baixo nível para gráficos.
  • Site WebGL do Khronos O site principal para WebGL do Grupo Khronos.
  • Aprendendo WebGL Um site com tutoriais de uso do WebGL.
  • Fundamentos de WebGL Um tutorial básico com os fundamentos do WebGL.
  • Playground do WebGL Uma ferramenta online para criar e compartilhar projetos em WebGL. Boa para protótipos rápidos e experimentação.
  • Academia WebGL Um editor HTML/JavaScript com tutoriais para aprender o básico de programação em WebGL.
  • WebGL Stats Um site com estatísticas sobre as funcionalidades do WebGL em navegadores de diferentes plataformas.

Bibliotecas

  • glMatrix Biblioteca em JavaScript de Matrizes e Vetores para aplicações WebGL de Alta Performance
  • Sylvester Uma biblioteca de código aberto para manipular vetores e matrizes. Não é otimizada para WebGL mas é extremamente robusta.

Especificações

Especificação Status Comentário
WebGL 1.0 Recomendação Definição inicial. Baseada em OpenGL ES 2.0
WebGL 2.0 Rascunho editorial Criada com base no WebGL 1. Baseada em OpenGL ES 3.0.
OpenGL ES 2.0 Padrão  
OpenGL ES 3.0 Padrão  

Compatibilidade em navegadores

Estamos convertendo nossos dados de compatibilidade para o formato JSON. Esta tabela de compatibilidade ainda usa o formato antigo, pois ainda não convertemos os dados que ela contém. Descubra como você pode ajudar!
Recurso Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Suporte básico 9 (Yes) 4.0 (2.0) 11 12 5.1
WebGL 2 56 Não suportado 51 (51) Não suportado 43 Não suportado
Recurso Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suporte básico 25 (Yes) 4 Não suportado 12 8.1
WebGL 2 ? ? ? ? ? ?

Notas sobre compatibilidade

Além do navegador, a própria GPU também precisa suportar o recurso. Por exemplo, o S3 Texture Compression (S3TC) só está disponível em tablets baseados em Tegra. A maioria dos navegadores disponibiliza o contexto WebGL usando o nome de contexto webgl, mas navegadores antigos também precisam do nome de contexto experimental-webgl. Além disso, o futuro WebGL 2 é totalmente retrocompatível e terá o nome de contexto webgl2.

Notas sobre o Gecko

Debugando e testando WebGL

Iniciando com o Gecko 10.0 (Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7), há duas preferências disponíveis que permitem controlar as funcionalidades do WebGL, para efeitos de teste:

webgl.min_capability_mode
Uma propriedade booleana que, quando configurada para true, habilita um modo de capacidade mínima. Neste modo, o WebGL é configurado para suportar somente um conjunto básico de recursos e funcionalidades requeridos pela especificação WebGL. Isto garante que o código WebGL funcione em qualquer dispositivo ou navegador, independente de suas funcionalidades. Esta propriedade tem o valor false por padrão.
webgl.disable_extensions
Uma propriedade booleana que, quando configurada para true, desabilita todas as extensões WebGL. Esta propriedade tem o valor false por padrão.

Veja também

Etiquetas do documento e colaboradores

Etiquetas: 
Colaboradores desta página: julio-elipse, MarceloBRN, fscholz, teoli, fvargaspf@gmail.com
Última atualização por: julio-elipse,