path: root/files/pt-br/web/api/webgl_api/index.html

---
title: WebGL
slug: Web/API/WebGL_API
tags:
  - WebGL
translation_of: Web/API/WebGL_API
---
<div>{{WebGLSidebar}}</div>

<div class="summary">
<p>WebGL (Web Graphics Library) é uma API do JavaScript para renderizar gráficos 3D e 2D dentro de um <span id="result_box" lang="pt"><span>navegador web compatível sem o uso de plug-ins</span></span>. <span id="result_box" lang="pt"><span>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</span></span> {{HTMLElement("canvas")}}.</p>
</div>

<p>O suporte para WebGL está presente no <a href="/en-US/Firefox" title="Firefox 4 for developers">Firefox</a> 4+, <a href="http://www.google.com/chrome/" title="http://www.google.com/chrome/">Google Chrome</a> 9+, <a href="http://www.opera.com/" title="http://www.opera.com/">Opera</a> 12+, <a href="http://www.apple.com/safari/" title="http://www.apple.com/fr/safari/">Safari </a>5.1+ e <a href="http://windows.microsoft.com/en-us/internet-explorer/browser-ie" title="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a> 11+. N<span id="result_box" lang="pt"><span>o entanto, o dispositivo do usuário também deve ter um hardware que suporte esses recursos.</span></span></p>

<p>O elemento {{HTMLElement("canvas")}} é também usado pelo <a href="/en-US/docs/Web/API/Canvas_API">Canvas 2D</a> para renderizar gráficos 2D em páginas web.</p>

<h2 id="Referências">Referências</h2>

<h3 id="Interfaces_padrão"><span class="short_text" id="result_box" lang="pt"><span>Interfaces padrão</span></span></h3>

<div class="index">
<ul>
 <li>{{domxref("WebGLRenderingContext")}}</li>
 <li>{{domxref("WebGL2RenderingContext")}} {{experimental_inline}}</li>
 <li>{{domxref("WebGLActiveInfo")}}</li>
 <li>{{domxref("WebGLBuffer")}}</li>
 <li>{{domxref("WebGLContextEvent")}}</li>
 <li>{{domxref("WebGLFramebuffer")}}</li>
 <li>{{domxref("WebGLProgram")}}</li>
 <li>{{domxref("WebGLQuery")}} {{experimental_inline}}</li>
 <li>{{domxref("WebGLRenderbuffer")}}</li>
 <li>{{domxref("WebGLSampler")}} {{experimental_inline}}</li>
 <li>{{domxref("WebGLShader")}}</li>
 <li>{{domxref("WebGLShaderPrecisionFormat")}}</li>
 <li>{{domxref("WebGLSync")}} {{experimental_inline}}</li>
 <li>{{domxref("WebGLTexture")}}</li>
 <li>{{domxref("WebGLTransformFeedback")}} {{experimental_inline}}</li>
 <li>{{domxref("WebGLUniformLocation")}}</li>
 <li>{{domxref("WebGLVertexArrayObject")}} {{experimental_inline}}</li>
</ul>
</div>

<h3 id="Extensões">Extensões</h3>

<div class="index">
<ul>
 <li>{{domxref("ANGLE_instanced_arrays")}}</li>
 <li>{{domxref("EXT_blend_minmax")}}</li>
 <li>{{domxref("EXT_color_buffer_float")}}</li>
 <li>{{domxref("EXT_color_buffer_half_float")}}</li>
 <li>{{domxref("EXT_disjoint_timer_query")}}</li>
 <li>{{domxref("EXT_frag_depth")}}</li>
 <li>{{domxref("EXT_sRGB")}}</li>
 <li>{{domxref("EXT_shader_texture_lod")}}</li>
 <li>{{domxref("EXT_texture_filter_anisotropic")}}</li>
 <li>{{domxref("OES_element_index_uint")}}</li>
 <li>{{domxref("OES_standard_derivatives")}}</li>
 <li>{{domxref("OES_texture_float")}}</li>
 <li>{{domxref("OES_texture_float_linear")}}</li>
 <li>{{domxref("OES_texture_half_float")}}</li>
 <li>{{domxref("OES_texture_half_float_linear")}}</li>
 <li>{{domxref("OES_vertex_array_object")}}</li>
 <li>{{domxref("WEBGL_color_buffer_float")}}</li>
 <li>{{domxref("WEBGL_compressed_texture_astc")}}</li>
 <li>{{domxref("WEBGL_compressed_texture_atc")}}</li>
 <li>{{domxref("WEBGL_compressed_texture_etc")}}</li>
 <li>{{domxref("WEBGL_compressed_texture_etc1")}}</li>
 <li>{{domxref("WEBGL_compressed_texture_pvrtc")}}</li>
 <li>{{domxref("WEBGL_compressed_texture_s3tc")}}</li>
 <li>{{domxref("WEBGL_compressed_texture_s3tc_srgb")}}</li>
 <li>{{domxref("WEBGL_debug_renderer_info")}}</li>
 <li>{{domxref("WEBGL_debug_shaders")}}</li>
 <li>{{domxref("WEBGL_depth_texture")}}</li>
 <li>{{domxref("WEBGL_draw_buffers")}}</li>
 <li>{{domxref("WEBGL_lose_context")}}</li>
</ul>
</div>

<h3 id="Eventos">Eventos</h3>

<ul>
 <li>{{Event("webglcontextlost")}}</li>
 <li>{{Event("webglcontextrestored")}}</li>
 <li>{{Event("webglcontextcreationerror")}}</li>
</ul>

<h3 id="Constantes_e_tipos">Constantes e tipos</h3>

<ul>
 <li><a href="/en-US/docs/Web/API/WebGL_API/Constants">Constantes em WebGL</a></li>
 <li><a href="/en-US/docs/Web/API/WebGL_API/Types">Tipos em WebGL</a></li>
</ul>

<h3 id="WebGL_2">WebGL 2</h3>

<p><span id="result_box" lang="pt"><span>O WebGL 2 é uma atualização importante para o WebGL, que é fornecida através da interface </span></span><span lang="pt"><span>{{domxref ("WebGL2RenderingContext")}}.</span> <span>Baseia-se no OpenGL ES 3.0 e os novos recursos incluem:</span></span></p>

<ul>
 <li><a href="/en-US/docs/Web/API/WebGL2RenderingContext/texImage3D">Texturas 3D</a></li>
 <li><a href="/en-US/docs/Web/API/WebGLSampler">Objetos Sampler</a></li>
 <li><a href="/en-US/docs/Web/API/WebGL2RenderingContext#Uniform_buffer_objects">Objetos Uniform Buffer</a></li>
 <li><a href="/en-US/docs/Web/API/WebGLSync">Objetos Sync</a></li>
 <li><a href="/en-US/docs/Web/API/WebGLQuery">Objetos Query</a></li>
 <li><a href="/en-US/docs/Web/API/WebGLTransformFeedback">Objetos Transform Feedback</a></li>
 <li>Extensões que agora fazem parte da especificação principal do WebGL 2: <a href="/en-US/docs/Web/API/WebGLVertexArrayObject">Objetos Vertex Array</a>, <a href="/en-US/docs/Web/API/WebGL2RenderingContext/drawArraysInstanced">instanciação</a>, <a href="/en-US/docs/Web/API/WebGL2RenderingContext/drawBuffers">múltiplas metas de renderização</a>, <a href="/en-US/docs/Web/API/EXT_frag_depth">profundidade de fragmentos</a>.</li>
</ul>

<p>Veja também os posts <a href="https://hacks.mozilla.org/2017/01/webgl-2-lands-in-firefox/">WebGL 2 lands in Firefox</a> e <a href="http://webglsamples.org/WebGL2Samples/">webglsamples.org/WebGL2Samples</a> para alguns exemplos de demonstração.</p>

<h2 id="Guias_e_tutoriais">Guias e tutoriais</h2>

<ul>
 <li><a href="/en-US/docs/Web/API/WebGL_API/Tutorial">Tutorial WebGL</a>: 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.</li>
 <li><a href="/en-US/docs/Web/API/WebGL_API/WebGL_best_practices">Melhores práticas em WebGL</a>: Dicas e sugestões para melhorar seu conteúdo WebGL.</li>
 <li><a href="/en-US/docs/Web/API/WebGL_API/Using_Extensions">Usando extensões</a>: Como usar as extensões disponíveis em WebGL.</li>
</ul>

<h3 id="Tutoriais_avançados">Tutoriais avançados</h3>

<ul>
 <li><a href="/en-US/docs/Web/API/WebGL_API/WebGL_model_view_projection">Modelo, visualização e projeção em WebGL</a>: 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.</li>
 <li><a href="/en-US/docs/Web/API/WebGL_API/Matrix_math_for_the_web">Matemática matricial para a web</a>: 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.</li>
</ul>

<h2 id="Recursos">Recursos</h2>

<ul>
 <li><a href="https://www.youtube.com/embed/H4c8t6myAWU/?feature=player_detailpage">WebGL puro: Uma introdução ao WebGL</a> 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.</li>
 <li><a href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">Site WebGL do Khronos</a> O site principal para WebGL do Grupo Khronos.</li>
 <li><a href="http://learningwebgl.com/blog/?page_id=1217" title="http://learningwebgl.com/blog/">Aprendendo WebGL</a> Um site com tutoriais de uso do WebGL.</li>
 <li><a href="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/" title="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/">Fundamentos de WebGL</a> Um tutorial básico com os fundamentos do WebGL.</li>
 <li><a href="http://webglplayground.net" title="http://webglplayground.net">Playground do WebGL</a> Uma ferramenta online para criar e compartilhar projetos em WebGL. Boa para protótipos rápidos e experimentação.</li>
 <li><a href="http://www.webglacademy.com" title="http://www.webglacademy.com">Academia WebGL</a> Um editor HTML/JavaScript com tutoriais para aprender o básico de programação em WebGL.</li>
 <li><a href="http://webglstats.com/">WebGL Stats</a> Um site com estatísticas sobre as funcionalidades do WebGL em navegadores de diferentes plataformas.</li>
</ul>

<h3 id="Bibliotecas">Bibliotecas</h3>

<ul>
 <li><a class="link-https" href="https://github.com/toji/gl-matrix" title="https://github.com/toji/gl-matrix">glMatrix</a> Biblioteca em JavaScript de Matrizes e Vetores para aplicações WebGL de Alta Performance.</li>
 <li><a href="http://senchalabs.github.com/philogl/">PhiloGL</a> é um WebGL <em>framework</em> para Visualização de Dados, Código Criativo, e Desenvolvimento de Jogos.</li>
 <li><a href="http://www.pixijs.com/">Pixi.js</a> é um renderizador gráfico 2D, rápido e com código aberto, que utiliza WebGL.</li>
 <li><a href="https://playcanvas.com/">PlayCanvas</a> motor de jogos com código aberto.</li>
 <li><a href="http://sylvester.jcoglan.com/" title="http://sylvester.jcoglan.com/">Sylvester</a> Uma biblioteca de código aberto para manipular vetores e matrizes. Não é otimizada para WebGL mas é extremamente robusta.</li>
 <li><a href="https://threejs.org/">three.js</a> é uma biblioteca WebGL 3D com recursos completose de código aberto.</li>
 <li><a href="https://phaser.io/">Phaser</a> é um <em>framework</em> rápido de código aberto, gratuita e divertida para jogos em navegadores baseados em Canvas e WebGL.</li>
</ul>

<h2 id="Especificações">Especificações</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificação</th>
   <th scope="col">Status</th>
   <th scope="col">Comentário</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('WebGL')}}</td>
   <td>{{Spec2('WebGL')}}</td>
   <td>Definição inicial. Baseada em OpenGL ES 2.0</td>
  </tr>
  <tr>
   <td>{{SpecName('WebGL2')}}</td>
   <td>{{Spec2('WebGL2')}}</td>
   <td>Criada com base no WebGL 1. Baseada em OpenGL ES 3.0.</td>
  </tr>
  <tr>
   <td>{{SpecName('OpenGL ES 2.0')}}</td>
   <td>{{Spec2('OpenGL ES 2.0')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('OpenGL ES 3.0')}}</td>
   <td>{{Spec2('OpenGL ES 3.0')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidade_em_navegadores">Compatibilidade em navegadores</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Recurso</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Suporte básico</td>
   <td>9</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("2.0")}}</td>
   <td>11</td>
   <td>12</td>
   <td>5.1</td>
  </tr>
  <tr>
   <td>WebGL 2</td>
   <td>56</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoDesktop("51")}}</td>
   <td>{{CompatNo}}</td>
   <td>43</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Recurso</th>
   <th>Chrome for Android</th>
   <th>Edge</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Suporte básico</td>
   <td>25</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>4</td>
   <td>{{CompatNo}}</td>
   <td>12</td>
   <td>8.1</td>
  </tr>
  <tr>
   <td>WebGL 2</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h3 id="Notas_sobre_compatibilidade">Notas sobre compatibilidade</h3>

<p>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 <code>webgl</code>, mas navegadores antigos também precisam do nome de contexto <code>experimental-webgl</code>. Além disso, o futuro <a href="/en-US/docs/Web/API/WebGL2RenderingContext">WebGL 2</a> é totalmente retrocompatível e terá o nome de contexto <code>webgl2</code>.</p>

<h3 id="Notas_sobre_o_Gecko">Notas sobre o Gecko</h3>

<h4 id="Debugando_e_testando_WebGL">Debugando e testando WebGL</h4>

<p>Iniciando com o Gecko 10.0 {{geckoRelease("10.0")}}, há duas preferências disponíveis que permitem controlar as funcionalidades do WebGL, para efeitos de teste:</p>

<dl>
 <dt><code>webgl.min_capability_mode</code></dt>
 <dd>Uma propriedade booleana que, quando configurada para <code>true</code>, 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 <code>false</code> por padrão.</dd>
 <dt><code>webgl.disable_extensions</code></dt>
 <dd>Uma propriedade booleana que, quando configurada para <code>true</code>, desabilita todas as extensões WebGL. Esta propriedade tem o valor <code>false</code> por padrão.</dd>
</dl>

<h2 id="Veja_também">Veja também</h2>

<ul>
 <li><a href="/en-US/docs/Web/API/Canvas_API">Canvas</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/getSupportedExtensions#Browser_compatibility">Informações de compatibilidade para extensões WebGL</a></li>
</ul>