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

~~unsupported templ: event~~
~~unsupported templ: event~~
~~unsupported templ: event~~

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:

Texturas 3D
Objetos Sampler
Objetos Uniform Buffer
Objetos Sync
Objetos Query
Objetos Transform Feedback
Extensões que agora fazem parte da especificação principal do WebGL 2: Objetos Vertex Array, instanciação, múltiplas metas de renderização, profundidade de fragmentos.

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