Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.
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_arraysEXT_blend_minmaxEXT_color_buffer_floatEXT_color_buffer_half_floatEXT_disjoint_timer_queryEXT_frag_depthEXT_sRGBEXT_shader_texture_lodEXT_texture_filter_anisotropicOES_element_index_uintOES_standard_derivativesOES_texture_floatOES_texture_float_linearOES_texture_half_floatOES_texture_half_float_linearOES_vertex_array_objectWEBGL_color_buffer_floatWEBGL_compressed_texture_astcWEBGL_compressed_texture_atcWEBGL_compressed_texture_etcWEBGL_compressed_texture_etc1WEBGL_compressed_texture_pvrtcWEBGL_compressed_texture_s3tcWEBGL_compressed_texture_s3tc_srgbWEBGL_debug_renderer_infoWEBGL_debug_shadersWEBGL_depth_textureWEBGL_draw_buffersWEBGL_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
- Sylvester Uma biblioteca de código aberto para manipular vetores e matrizes. Não é otimizada para WebGL mas é extremamente robusta.
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 valorfalsepor padrão. webgl.disable_extensions- Uma propriedade booleana que, quando configurada para
true, desabilita todas as extensões WebGL. Esta propriedade tem o valorfalsepor padrão.