initial commit

4 files changed, 614 insertions, 0 deletions

diff --git a/files/pt-br/web/api/webgl_api/index.html b/files/pt-br/web/api/webgl_api/index.html
new file mode 100644
index 0000000000..97e1e97857
--- /dev/null
+++ b/files/pt-br/web/api/webgl_api/index.html
@@ -0,0 +1,278 @@
+---
+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>
diff --git a/files/pt-br/web/api/webgl_api/tutorial/adicionando_conteudo_2d_a_um_contexto_webgl/index.html b/files/pt-br/web/api/webgl_api/tutorial/adicionando_conteudo_2d_a_um_contexto_webgl/index.html
new file mode 100644
index 0000000000..7b4f6384f6
--- /dev/null
+++ b/files/pt-br/web/api/webgl_api/tutorial/adicionando_conteudo_2d_a_um_contexto_webgl/index.html
@@ -0,0 +1,226 @@
+---
+title: Adicionando conteúdo 2D a um contexto WebGL
+slug: Web/API/WebGL_API/Tutorial/Adicionando_conteudo_2D_a_um_contexto_WebGL
+tags:
+  - Tutorial
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context
+---
+<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL")}}</p>
+
+<p>Uma vez que você tenha  <a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL">criado um contexto WebGL</a> com sucesso, você pode iniciar a renderizar nele. O mais simples que podemos fazer é desenhar um objeto 2D não texturizado. Então vamos começar por aí, construindo o código necessário para se desenhar um quadrado.</p>
+
+<h2 id="Desenhando_a_cena">Desenhando a cena</h2>
+
+<p>A coisa mais importante para se entender antes de começarmos é que, mesmo que estejamos só renderizando um objeto bidimensional nesse exemplo, nós ainda estamos desenhamos em um espaço 3d. Portanto, ainda precisamos estabelecer os shaders que irão criar a cor para a nossa cena simples, assim como desenhar o objeto. Eles irão estabelecer como o quadrado irá aparecer na tela.</p>
+
+<h3 id="Inicializando_os_shaders">Inicializando os shaders</h3>
+
+<p>Shaders são especificados ao usar a <a class="external" href="http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf" title="http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf">Linguagem de Shading OpenGL ES</a>. Com o intuito de tornar mais fácil para manter e atualizar nosso conteúdo, nós podemos escrever nosso código que carrega os shaders para buscá-los no documento HTML, ao invés de termos de criar tudo em JavaScript. Vamos dar uma olhada na nossa rotina <code>initShaders()</code>, que cuida dessa tarefa:</p>
+
+<pre class="brush: js">function initShaders() {
+  var fragmentShader = getShader(gl, "shader-fs");
+  var vertexShader = getShader(gl, "shader-vs");
+
+  // Cria o progrma shader
+
+  shaderProgram = gl.createProgram();
+  gl.attachShader(shaderProgram, vertexShader);
+  gl.attachShader(shaderProgram, fragmentShader);
+  gl.linkProgram(shaderProgram);
+
+  // Se falhar ao criar o progrma shader, alerta
+
+  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
+    alert("Não foi possível inicializar o programa shader.");
+  }
+
+  gl.useProgram(shaderProgram);
+
+  vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
+  gl.enableVertexAttribArray(vertexPositionAttribute);
+}
+
+</pre>
+
+<p>Dois programas estão sendo inicializados por essa rotina; o primeiro, fragment shader, é carregado a partir do elemento HTML com o id "shader-fs". O segundo, vertex shader, é carregado pelo elemento HTML com o id "shader-vs". Nós vamos analisar a função getShader() no próximo tutorial; Essa rotina, na verdade, lida com a parte de puxar os programas shader da DOM.</p>
+
+<p>Então nós criamos o programa shader chamando do objeto WebGL a função createProgram(), anexamos dois shaders nele e fazemos o link com o programa shader. Depois de fazer isso, o parametro LINK_STATUS do objeto g1 é checado para ter certeza de que o link foi criado com sucesso; Se sim, nós ativamos o novo programa shader.</p>
+
+<h3 id="Carregando_os_shaders_da_DOM">Carregando os shaders da DOM</h3>
+
+<p><code>A rotina getShader()</code> busca um programa shader com o nome específico do DOM, retornando o programa shader compilado para o requisitante, ou null se ele não pode ser carregado ou compilado.</p>
+
+<pre class="brush: js">function getShader(gl, id) {
+  var shaderScript, theSource, currentChild, shader;
+
+  shaderScript = document.getElementById(id);
+
+  if (!shaderScript) {
+    return null;
+  }
+
+  theSource = "";
+  currentChild = shaderScript.firstChild;
+
+  while(currentChild) {
+    if (currentChild.nodeType == currentChild.TEXT_NODE) {
+      theSource += currentChild.textContent;
+    }
+
+    currentChild = currentChild.nextSibling;
+  }
+</pre>
+
+<p>Uma vez que o elemento com o ID específico é encontrado, seu texto é lido na variável theSource.</p>
+
+<pre class="brush: js">  if (shaderScript.type == "x-shader/x-fragment") {
+    shader = gl.createShader(gl.FRAGMENT_SHADER);
+  } else if (shaderScript.type == "x-shader/x-vertex") {
+    shader = gl.createShader(gl.VERTEX_SHADER);
+  } else {
+     // <code>Tipo de shader desconhecido</code>
+     return null;
+  }</pre>
+
+<p>Uma vez que o código para o shader tenha sido lido, nós observamos o tipo MIME do objeto shader para determinar se é um sombreamento de vértice (MIME type "x-shader/x-vertex") ou um fragmento de shader (MIME type "x-shader/x-fragment"), em seguinda crie um tipo de shader apropriado para a partir do código fonte recuperado.</p>
+
+<pre class="brush: js">  gl.shaderSource(shader, theSource);
+
+  // Compile o programa shader
+  gl.compileShader(shader);
+
+  // Veja se ele compila com sucesso
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+      alert("Um erro ocorreu ao compilar os shaders: " + gl.getShaderInfoLog(shader));
+      return null;
+  }
+
+  return shader;
+}
+</pre>
+
+<p>Finalmente, a fonte é passada para o shader e compilada. Se um erro ocorrer enquanto o shader estiver compilando, nós mostraremos um alerta e retornaremos null; Caso contrário, o shader recém compilado é retornado para o requisitante.</p>
+
+<h3 id="Os_shaders">Os shaders</h3>
+
+<p>Agora, nós precisamos adicionar os programas shaders ao HTML para descrever nosso documento. Os detalhes sobre como os shaders trabalham estão além do escopo deste artigo, assim como a sintaxe da linguagem do shader.</p>
+
+<h4 id="Fragmentos_shader">Fragmentos shader</h4>
+
+<p>Cada pixel é um poligono chamado de fragmento (fragment) na linguagem GL. O trabalho do fragmento de shader é estabelecer a cor de cada pixel. Ness caso, nós estamos apenas definindo a cor branca para cada pixel.</p>
+
+<p>g1_FragColor é um construtor de variável GL que é utilizado para a cor do fragmento. Altere seu valor para definir a cor do pixel, como mostrado abaixo.</p>
+
+<pre class="brush: html">&lt;script id="shader-fs" type="x-shader/x-fragment"&gt;
+  void main(void) {
+    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
+  }
+&lt;/script&gt;
+</pre>
+
+<h4 id="Vértice_do_shader">Vértice do shader</h4>
+
+<p>A vértice (vertex) do shader define a posição e a forma de cada vértice.</p>
+
+<pre class="brush: html">&lt;script id="shader-vs" type="x-shader/x-vertex"&gt;
+  attribute vec3 aVertexPosition;
+
+  uniform mat4 uMVMatrix;
+  uniform mat4 uPMatrix;
+
+  void main(void) {
+    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
+  }
+&lt;/script&gt;
+</pre>
+
+<h2 id="Criando_um_objeto">Criando um objeto</h2>
+
+<p>Before we can render our square, we need to create the buffer that contains its vertices. We'll do that using a function we call <code>initBuffers()</code>; as we explore more advanced WebGL concepts, this routine will be augmented to create more -- and more complex -- 3D objects.</p>
+
+<pre class="brush: js">var horizAspect = 480.0/640.0;
+
+function initBuffers() {
+  squareVerticesBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
+
+  var vertices = [
+    1.0,  1.0,  0.0,
+    -1.0, 1.0,  0.0,
+    1.0,  -1.0, 0.0,
+    -1.0, -1.0, 0.0
+  ];
+
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
+}
+</pre>
+
+<p>This routine is pretty simplistic given the basic nature of the scene in this example. It starts by calling the <code>gl</code> object's <code>createBuffer()</code> method to obtain a buffer into which we'll store the vertices. This is then bound to the context by calling the <code>bindBuffer()</code> method.</p>
+
+<p>Once that's done, we create a JavaScript array containing the coordinates for each vertex of the square. This is then converted into an array of WebGL floats and passed into the <code>gl</code> object's <code>bufferData()</code> method to establish the vertices for the object.</p>
+
+<h2 id="Desenhando_a_cena_2">Desenhando a cena</h2>
+
+<p>Once the shaders are established and the object constructed, we can actually render the scene. Since we're not animating anything in this example, our <code>drawScene()</code> function is very simple. It uses a few utility routines we'll cover shortly.</p>
+
+<pre class="brush: js">function drawScene() {
+  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+  perspectiveMatrix = makePerspective(45, 640.0/480.0, 0.1, 100.0);
+
+  loadIdentity();
+  mvTranslate([-0.0, 0.0, -6.0]);
+
+  gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
+  gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
+  setMatrixUniforms();
+  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+}
+</pre>
+
+<p>The first step is to clear the context to our background color; then we establish the camera's perspective. We set a field of view of 45°, with a width to height ratio of 640/480 (the dimensions of our canvas). We also specify that we only want objects between 0.1 and 100 units from the camera to be rendered.</p>
+
+<p>Then we establish the position of the square by loading the identity position and translating away from the camera by 6 units. After that, we bind the square's vertex buffer to the context, configure it, and draw the object by calling the <code>drawArrays()</code> method.</p>
+
+<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample2/index.html', 670, 510) }}</p>
+
+<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample2">View the complete code</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample2/">Open this demo on a new page</a></p>
+
+<h2 id="Operações_úteis_da_Matrix">Operações úteis da Matrix</h2>
+
+<p>Matrix operations are complicated enough. Nobody really wants to write all the code needed to handle them on their own. Fortunately, there's <a class="external" href="http://sylvester.jcoglan.com/" title="http://sylvester.jcoglan.com/">Sylvester</a>, a very handy library for handling vector and matrix operations from JavaScript.</p>
+
+<p>The <code>glUtils.js</code> file used by this demo is used by a number of WebGL demos floating around on the Web. Nobody seems entirely clear on where it came from, but it does simplify the use of Sylvester even further by adding methods for building special types of matrices, as well as outputting HTML for displaying them.</p>
+
+<p>In addition, this demo defines a few helpful routines to interface with these libraries for specific tasks. What exactly they do is beyond the scope of this demo, but there are plenty of good references on matrices available online; see the {{ anch("See also") }} section for a list of a few.</p>
+
+<pre class="brush: js">function loadIdentity() {
+  mvMatrix = Matrix.I(4);
+}
+
+function multMatrix(m) {
+  mvMatrix = mvMatrix.x(m);
+}
+
+function mvTranslate(v) {
+  multMatrix(Matrix.Translation($V([v[0], v[1], v[2]])).ensure4x4());
+}
+
+function setMatrixUniforms() {
+  var pUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
+  gl.uniformMatrix4fv(pUniform, false, new Float32Array(perspectiveMatrix.flatten()));
+
+  var mvUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
+  gl.uniformMatrix4fv(mvUniform, false, new Float32Array(mvMatrix.flatten()));
+}
+</pre>
+
+<h2 id="Ver_Também">Ver Também</h2>
+
+<ul>
+ <li><a class="external" href="http://mathworld.wolfram.com/Matrix.html" title="http://mathworld.wolfram.com/Matrix.html">Matrices</a> on Wolfram MathWorld</li>
+ <li><a class="external" href="http://en.wikipedia.org/wiki/Matrix_(mathematics)" title="http://en.wikipedia.org/wiki/Matrix_(mathematics)">Matriz</a> na Wikipedia</li>
+</ul>
+
+<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL")}}</p>
diff --git a/files/pt-br/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html b/files/pt-br/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html
new file mode 100644
index 0000000000..4abbd5e304
--- /dev/null
+++ b/files/pt-br/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html
@@ -0,0 +1,71 @@
+---
+title: Começando com WebGL
+slug: Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL
+---
+<p>{{WebGLSidebar("Tutorial")}} {{Next("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context")}}</p>
+
+<p><a class="external" href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">WebGL</a> permite que o contéudo web use uma API baseada em <a class="external" href="http://www.khronos.org/opengles/" title="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0 para realizar renderização 3D em um <a class="internal" href="/en-US/docs/Web/API/Canvas_API"><code>canvas</code></a> HTML em browsers que o suportam sem o uso de plugins. Programas WebGL consistem em um código de controle escrito em JavaScript e códigos de efeitos especiais (shader code) que é executado na Unidade Gráfica de Processamento (GPU) de um computador. Elementos WebGL podem ser utilizados junto com outros elementos HTML e com outras partes da página ou do fundo.</p>
+
+<p>Esse artigo vai introduzir o básico sobre o uso do WebGL. Acredita-se que você já possui entendimento da matemática que envolve os gráficos 3D, e que este artigo não tem a pretensão de tentar ensinar-lhe OpenGL em si.</p>
+
+<p>Os exemplos de código deste tutorial também podem ser encontrados no <a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial">Exemplos de WebGL no repositório do GitHub</a>.</p>
+
+<h2 id="Preparando-se_para_renderizar_em_3D">Preparando-se para renderizar em 3D</h2>
+
+<p><span id="result_box" lang="pt"><span>A primeira coisa que você precisa para para renderização d</span></span><span lang="pt"><span>o WebGL, é a inicialização do canvas.</span> <span>O fragmento HTML abaixo declara um canvas em que nosso exemplo será desenhado.</span></span></p>
+
+<pre class="brush: html">&lt;body&gt;
+  &lt;canvas id="glCanvas" width="640" height="480"&gt;&lt;/canvas&gt;
+&lt;/body&gt;
+</pre>
+
+<h3 id="Preparando_o_contexto_WebGL">Preparando o contexto WebGL</h3>
+
+<p><span id="result_box" lang="pt"><span>A função </span></span><code>main()</code> <span lang="pt"><span> em nosso código JavaScript é chamada quando nosso script é carregado.</span> <span>O objetivo é configurar o contexto do WebGL e começar a renderizar o conteúdo.</span></span></p>
+
+<pre class="brush: js">main();
+
+//
+// começa aqui
+//
+function main() {
+  const canvas = document.querySelector("#glCanvas");
+  // Inicializa o contexto GL
+  const gl = canvas.getContext("webgl");
+
+  // Só continua se o WebGL estiver disponível e funcionando
+  if (!gl) {
+    alert("Incapaz de inicializar o WebGL.Seu navegador ou sua máquina não suporta.");
+    return;
+  }
+
+  // Define a cor para preto totalmente opaca (sem transparência)
+  gl.clearColor(0.0, 0.0, 0.0, 1.0);
+  // Limpa o buffer de cores com uma cor específica
+  gl.clear(gl.COLOR_BUFFER_BIT);
+}
+
+</pre>
+
+<p>A primeira coisa que nós fazemos aqui é obter a referência para o canvas, atribuindo-a para a variável chamada <code>canvas</code>.</p>
+
+<p>Uma vez que nós temos o canvas, nós tentamos obter um <a href="/en-US/docs/Web/API/WebGLRenderingContext">WebGLRenderingContext</a> para ele chamando o <a href="/en-US/docs/Web/API/HTMLCanvasElement/getContext">getContext</a> e passando a string <code>"webgl"</code>. Se o browser não suportar o webgl <code>getContext</code> vai retornar <code>null</code> nesse caso nós mostraremos uma mensagem para o usuário e sair.</p>
+
+<p>Se o contexto for inicializado com sucesso, a variável <code>gl</code> é nossa referência para ele. Nesse caso, nós altermos a cor para preto, e o contexto para aquela cor (redesenhando o canvas com a cor de fundo).</p>
+
+<p>Nesse ponto, você tem código suficiente para o contexto WebGL ser inicializado com sucesso, e você deve visualizar uma grande caixa preta vazia, pronta e esperando para receber conteúdo.</p>
+
+<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample1/index.html', 670, 510) }}</p>
+
+<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample1">Veja o código completo</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample1/">Abra a demo em uma nova página</a></p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="https://dev.opera.com/articles/introduction-to-webgl-part-1/">Uma introdução ao WebGL</a>: Escrito por Luz Caballero, publicado por dev.opera.com. Esse artigo direciona sobre o que o WebGL é, explicando como o WebGL funciona (incluindo o conceito de pipeline de renderização), e introduz algumas bibliotecas do WebGL.</li>
+ <li><a href="http://webglfundamentals.org/">Fundamentos do WebGL</a></li>
+ <li><a href="http://duriansoftware.com/joe/An-intro-to-modern-OpenGL.-Table-of-Contents.html">Uma introdução para o OpenGL moderno:</a> Uma séroe de bons artigos sobre OpenGL escrita por Joe Groff, provendo uma introdução clara para o OpenGL a partir de sua história até os importantes conceitos de pipeline de gráficos, e também inclui alguns exemplos demonstrativos sobre como o OpenGL funciona. Se você não tem ideia do que seja OpenGL, esse é um bom lugar para começar.</li>
+</ul>
+
+<p>{{Next("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context")}}</p>
diff --git a/files/pt-br/web/api/webgl_api/tutorial/index.html b/files/pt-br/web/api/webgl_api/tutorial/index.html
new file mode 100644
index 0000000000..4fa7ba76cf
--- /dev/null
+++ b/files/pt-br/web/api/webgl_api/tutorial/index.html
@@ -0,0 +1,39 @@
+---
+title: WebGL tutorial
+slug: Web/API/WebGL_API/Tutorial
+tags:
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial
+---
+<div>{{WebGLSidebar}}</div>
+
+<div class="summary">
+<p><a class="external" href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">WebGL</a> enables web content to use an API based on <a class="external" href="http://www.khronos.org/opengles/" title="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0 to perform 3D rendering in an HTML {{HTMLElement("canvas")}} in browsers that support it without the use of plug-ins. WebGL programs consist of control code written in JavaScript and special effects code(shader code) that is executed on a computer's Graphics Processing Unit (GPU). WebGL elements can be mixed with other HTML elements and composited with other parts of the page or page background.</p>
+</div>
+
+<p><span class="seoSummary">This tutorial describes how to use the <code>&lt;canvas&gt;</code> element to draw WebGL graphics, starting with the basics. The examples provided should give you some clear ideas what you can do with WebGL and will provide code snippets that may get you started in building your own content.</span></p>
+
+<h2 id="Before_you_start">Before you start</h2>
+
+<p>Using the <code>&lt;canvas&gt;</code> element is not very difficult, but you do need a basic understanding of <a href="/en-US/docs/Web/HTML" title="HTML">HTML</a> and <a href="/en-US/docs/Web/JavaScript" title="JavaScript">JavaScript</a>. The <code>&lt;canvas&gt;</code> element and WebGL are not supported in some older browsers, but are supported in recent versions of all major browsers. In order to draw graphics on the canvas we use a JavaScript context object, which creates graphics on the fly.</p>
+
+<h2 id="In_this_tutorial">In this tutorial</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL">Getting started with WebGL</a></dt>
+ <dd>How to set up a WebGL context.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context">Adding 2D content to a WebGL context</a></dt>
+ <dd>How to render simple flat shapes using WebGL.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL">Using shaders to apply color in WebGL</a></dt>
+ <dd>Demonstrates how to add color to shapes using shaders.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL">Animating objects with WebGL</a></dt>
+ <dd>Shows how to rotate and translate objects to create simple animations.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL">Creating 3D objects using WebGL</a></dt>
+ <dd>Shows how to create and animate a 3D object (in this case, a cube).</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL">Using textures in WebGL</a></dt>
+ <dd>Demonstrates how to map textures onto the faces of an object.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL">Lighting in WebGL</a></dt>
+ <dd>How to simulate lighting effects in your WebGL context.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL">Animating textures in WebGL</a></dt>
+ <dd>Shows how to animate textures; in this case, by mapping an Ogg video onto the faces of a rotating cube.</dd>
+</dl>