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

* `WebGLRenderingContext` (en-US)
* `WebGL2RenderingContext` (en-US) 
Experimental
* `WebGLActiveInfo` (en-US)
* `WebGLBuffer` (en-US)
* `WebGLContextEvent` (en-US)
* `WebGLFramebuffer` (en-US)
* `WebGLProgram` (en-US)
* `WebGLQuery` (en-US) 
Experimental
* `WebGLRenderbuffer` (en-US)
* `WebGLSampler` (en-US) 
Experimental
* `WebGLShader` (en-US)
* `WebGLShaderPrecisionFormat` (en-US)
* `WebGLSync` (en-US) 
Experimental
* `WebGLTexture` (en-US)
* `WebGLTransformFeedback` (en-US) 
Experimental
* `WebGLUniformLocation` (en-US)
* `WebGLVertexArrayObject` (en-US) 
Experimental
### Extensões

* `ANGLE_instanced_arrays`
* `EXT_blend_minmax` (en-US)
* `EXT_color_buffer_float` (en-US)
* `EXT_color_buffer_half_float` (en-US)
* `EXT_disjoint_timer_query` (en-US)
* `EXT_frag_depth` (en-US)
* `EXT_sRGB` (en-US)
* `EXT_shader_texture_lod` (en-US)
* `EXT_texture_filter_anisotropic` (en-US)
* `OES_element_index_uint` (en-US)
* `OES_standard_derivatives` (en-US)
* `OES_texture_float` (en-US)
* `OES_texture_float_linear` (en-US)
* `OES_texture_half_float` (en-US)
* `OES_texture_half_float_linear` (en-US)
* `OES_vertex_array_object` (en-US)
* `WEBGL_color_buffer_float` (en-US)
* `WEBGL_compressed_texture_astc` (en-US)
* `WEBGL_compressed_texture_atc`
* `WEBGL_compressed_texture_etc` (en-US)
* `WEBGL_compressed_texture_etc1` (en-US)
* `WEBGL_compressed_texture_pvrtc` (en-US)
* `WEBGL_compressed_texture_s3tc` (en-US)
* `WEBGL_compressed_texture_s3tc_srgb` (en-US)
* `WEBGL_debug_renderer_info` (en-US)
* `WEBGL_debug_shaders` (en-US)
* `WEBGL_depth_texture` (en-US)
* `WEBGL_draw_buffers` (en-US)
* `WEBGL_lose_context` (en-US)
### Eventos

* `webglcontextlost`
* `webglcontextrestored`
* `webglcontextcreationerror`
### Constantes e tipos

* Constantes em WebGL (en-US)
* Tipos em WebGL (en-US)
### 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:

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

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 (en-US): 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 (en-US): Dicas e sugestões para melhorar seu conteúdo WebGL.
* Usando extensões (en-US): Como usar as extensões disponíveis em WebGL.
### Tutoriais avançados

* Modelo, visualização e projeção em WebGL (en-US): 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 (en-US): 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 |

Compatibilidade com navegadores
-------------------------------

### api.WebGLRenderingContext

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### api.WebGL2RenderingContext

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* Canvas
* Informações de compatibilidade para extensões WebGL (en-US)