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 (en-US). 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

Tutoriais avançados

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

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 com navegadores

api.WebGLRenderingContext

BCD tables only load in the browser

api.WebGL2RenderingContext

BCD tables only load in the browser

Veja também