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
ANGLE_instanced_arrays
EXT_blend_minmax
EXT_color_buffer_float
EXT_color_buffer_half_float
EXT_disjoint_timer_query
EXT_frag_depth
EXT_sRGB
EXT_shader_texture_lod
EXT_texture_filter_anisotropic
OES_element_index_uint
OES_standard_derivatives
OES_texture_float
OES_texture_float_linear
OES_texture_half_float
OES_texture_half_float_linear
OES_vertex_array_object
WEBGL_color_buffer_float
WEBGL_compressed_texture_astc
WEBGL_compressed_texture_atc
WEBGL_compressed_texture_etc
WEBGL_compressed_texture_etc1
WEBGL_compressed_texture_pvrtc
WEBGL_compressed_texture_s3tc
WEBGL_compressed_texture_s3tc_srgb
WEBGL_debug_renderer_info
WEBGL_debug_shaders
WEBGL_depth_texture
WEBGL_draw_buffers
WEBGL_lose_context
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:
- 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
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
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 valorfalse
por padrão. webgl.disable_extensions
- Uma propriedade booleana que, quando configurada para
true
, desabilita todas as extensões WebGL. Esta propriedade tem o valorfalse
por padrão.