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) ExperimentalWebGLActiveInfo
(en-US)WebGLBuffer
(en-US)WebGLContextEvent
(en-US)WebGLFramebuffer
(en-US)WebGLProgram
(en-US)WebGLQuery
(en-US) ExperimentalWebGLRenderbuffer
(en-US)WebGLSampler
(en-US) ExperimentalWebGLShader
(en-US)WebGLShaderPrecisionFormat
(en-US)WebGLSync
(en-US) ExperimentalWebGLTexture
(en-US)WebGLTransformFeedback
(en-US) ExperimentalWebGLUniformLocation
(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
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:
- 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: 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
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