WebGL

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

• webglcontextlost
• webglcontextrestored
• webglcontextcreationerror

Constantes e tipos

• Constantes em WebGL
• Tipos em WebGL

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 completose 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

Compatibilidade em navegadores

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

• Canvas
• Informações de compatibilidade para extensões WebGL