WebGL

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.
  • PhiloGL é um WebGL framework para Visualização de Dados, Código Criativo, e Desenvolvimento de Jogos.
  • Pixi.js é um renderizador gráfico 2D, rápido e com código aberto, que utiliza WebGL.
  • PlayCanvas motor de jogos com código aberto.
  • Sylvester Uma biblioteca de código aberto para manipular vetores e matrizes. Não é otimizada para WebGL mas é extremamente robusta.
  • three.js é uma biblioteca WebGL 3D com recursos completos de código aberto.
  • Phaser é um framework rápido de código aberto, gratuita e divertida para jogos em navegadores baseados em Canvas e WebGL.

Especificações

Specification
WebGL Specification
# 5.14
WebGL 2.0 Specification
# 3.7

Compatibilidade com navegadores

api.WebGLRenderingContext

BCD tables only load in the browser

api.WebGL2RenderingContext

BCD tables only load in the browser

Veja também