initial commit

1 files changed, 109 insertions, 0 deletions

diff --git a/files/pt-br/games/techniques/3d_on_the_web/index.html b/files/pt-br/games/techniques/3d_on_the_web/index.html
new file mode 100644
index 0000000000..dda4322bdd
--- /dev/null
+++ b/files/pt-br/games/techniques/3d_on_the_web/index.html
@@ -0,0 +1,109 @@
+---
+title: Jogos 3D na WEB
+slug: Games/Techniques/3D_on_the_web
+tags:
+  - 3D
+  - Jogos
+  - graficos
+translation_of: Games/Techniques/3D_on_the_web
+---
+<div>{{GamesSidebar}}</div>
+
+<p class="summary"> A melhor arma para desenvolver ótimas experiências em jogos na WEB é WebGL, que é renderizada em HTML {{htmlelement("canvas")}}. WebGL é, basicamente, uma OpenGL ES 2.0 para a Web — é uma API JavaScript que fornece ferramentas para construir animações ricas e, logicamente, jogos. Você pode gerar e renderizar gráficos dinâmicos em 3D com JavaScript acelerado por hardware.</p>
+
+<h2 id="Documentação_e_suporte_para_navegadores">Documentação e suporte para navegadores</h2>
+
+<p>A documentação e as especificações do projeto <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> é mantida pelo <a href="https://www.khronos.org/">Grupo Khronos</a>, não o W3C como a maioria das APIs Web. O suporte nos navegadores modernos é muito bom, até mesmo em mobile, portanto você não terá que se preocupar muito com isso. Todos os navegadores comuns suportam WebGL e tudo mais que você precisar para que possa focar em otimizar o desempenho nos dispositivos que usar.</p>
+
+<p>Há um esforço contínuo em liberar WebGL 2.0 (baseado na OpenGL ES 3.0) em um futuro próximo para, além de trazer muitas melhorias, também ajudar  os desenvolvedores a construir jogos para a Web "moderna", usando hardware atual e poderoso.</p>
+
+<h2 id="Explicando_a_teoria_3D_básica">Explicando a teoria 3D básica</h2>
+
+<p>O básico da teoria 3D gira em torno de formas representadas em um espaço 3D, que corresponde a um sistema de coordenadas usadas para calcular suas posições. Veja noss artigo <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Basic_theory">Explicando a teoria 3D básica</a> para todas as informações que você precisar</p>
+
+<h2 id="Conceitos_avançados">Conceitos avançados</h2>
+
+<p>Você pode fazer muito mais com WebGL. Há alguns conceitos avançados que você deve se aprofundar e aprender mais — como shaders, detecção de colisão, ou o mais recente tópico em alta — realidade virtual na web.</p>
+
+<h3 id="Shaders">Shaders</h3>
+
+<p>É importante mencionar os shaders, que tem uma história separada por sí próprios. Shaders usam GLSL, uma "Linguagem de Sombreamento" OpenGL especial com sintaxe similar a C, que é executada diretamente pelos pipelines de gráficos. Podem ser divididos em Vertex Shaders e Fragment Shaders (ou Pixel Shaders) — o primeiro transforma as posições das formas em coordenadas reais de desenho 3D, enquanto o segundo calcula cores de renderização e outros atributos. Recomendamos fortemente que você veja o artigo <a href="/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders">GLSL Shaders </a>para aprender mais sobre eles.</p>
+
+<h3 id="Detecção_de_Colisão">Detecção de Colisão</h3>
+
+<p>É difícil de imaginar um jogo sem detecção de colisão — nós sempre precisamos trabalhar com algo batendo em alguma outra coisa. Temos informações disponíveis para você aprender em:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Games/Techniques/2D_collision_detection">Detecção de colisão 2D</a></li>
+ <li><a href="/en-US/docs/Games/Techniques/3D_collision_detection">Detecção de colisão 3D</a></li>
+</ul>
+
+<h3 id="WebVR">WebVR</h3>
+
+<p>O conceito de realidade virtual não é novo, mas está crescendo na web devido os avanços de hardware, tal como o <a href="https://www.oculus.com/en-us/rift/">Oculus Rift</a>, e a (atualmente experimental) <a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a> para capturar informações de hardware via Realidade Virtual (RV) e tonaná-la acessível para uso em aplicações JavaScript. Para mais informações, leia <a href="/en-US/docs/Games/Techniques/3D_on_the_web/WebVR">WebVR — Realidade Virtual para a Web</a>.</p>
+
+<p>Também há o artigo <a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">Desenvolvendo uma demo básica com A-Frame</a> que te mostra como é fácil construir ambientes 3D para realidade virtual usando o framework <a href="http://aframe.io/">A-Frame</a>.</p>
+
+<h2 id="O_surgimentos_de_bibliotecas_e_frameworks">O surgimentos de bibliotecas e frameworks</h2>
+
+<p>Codificar WebGL diretamente é bem complexo, mas você vai querer se familiarizar com isso a longo prazo quando seus projetos avançarem (veja nossa <a href="/en-US/docs/Web/API/WebGL_API">documentação WebGL</a> para começar). Para projetos do mundo real você provavelmente também usará um framework para acelerar o desenvolvimento e ajudar na administração do projeto em que estiver trabalhando. Usar um framework para jogos 3D também ajuda muito a otimizar o desempenho, assim você pode focar no desenvolvimento do jogo.</p>
+
+<p>A biblioteca JavaScript 3D mais popular é <a href="http://threejs.org/">Three.js</a>, uma ferramenta multiuso que deixa técnicas 3D comuns mais simples de serem implementadas. Há outras bibliotecas de desenvolvimento de jogos populares e alguns frameworks que valem a pena serem checados também; <a href="https://aframe.io">A-Frame</a>, <a href="https://playcanvas.com/">PlayCanvas</a> e <a href="http://www.babylonjs.com/">Babylon.js</a> estão entre os mais reconhecidos, com belas documentações, editores online e comunidades ativas.</p>
+
+<h3 id="Desenvolvendo_uma_demo_básica_com_A-Frame">Desenvolvendo uma demo básica com A-Frame</h3>
+
+<p>A-Frame é um framework web para desenvolvimento 3D e experiências de RV. Visto mais afundo, é um framework three.js com um padrão componente-entidade declarativo, significando que podemos construir cenas apenas com HTML. Veja a página <a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">Desenvolvendo uma demo básica com A-Frame</a> para o passo-a-passo da criação de uma demo.</p>
+
+<h3 id="Desenvolvendo_uma_demo_básica_com_Babylon.js">Desenvolvendo uma demo básica com Babylon.js</h3>
+
+<p><span class="seosummary">Babylon.js é um dos mais populares motores de jogos 3D usados por desenvolvedores. Assim como qualquer outra biblioteca 3D, ela fornece funções integradas para te ajudar a implementar funcionalidades tridimensionais comuns mais rapidamente. Veja a página </span><a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js">Desenvovlendo uma demo básica com Babylon.js</a><span class="seosummary"> para saber o básico de Babylon.js, incluindo configurações do ambiente de desenvolvimento, estruturar o HTML necessário e escrever o código JavaScript.</span></p>
+
+<h3 id="Desenvolvendo_uma_demo_básica_com_PlayCanvas">Desenvolvendo uma demo básica com PlayCanvas</h3>
+
+<p>PlayCanvas é um popular motor de jogos 3D WebGL de código aberto no GitHub, com um editor acessível online e com boa documentação. Veja a página <a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas">Desenvolvendo uma demo básica com PlayCanvas</a> para detalhes mais avançados e encontrar outros artigos mostrando como usar a bilbioteca PlayCanvas e o editor online.</p>
+
+<h3 id="Desenvolvendo_uma_demo_básica_com_Three.js">Desenvolvendo uma demo básica com Three.js</h3>
+
+<p>Three.js, assim como qualquer outra biblioteca, lhe fornece uma enorme vantagem: ao invés de escrever centenas de linhas do código WebGL para construir qualquer coisa interessante, te permite usar as funções auxiliares integradas para desenvolver o que quiser muito mais rápido e fácil. Veja a página <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Desenvolvendo uma demo básica com Three.js</a> para o passo-a-passo da criação de uma demo.</p>
+
+<h3 id="Outras_ferramentas">Outras ferramentas</h3>
+
+<p>Tanto <a href="http://unity3d.com/">Unity</a> quanto <a href="https://www.unrealengine.com/">Unreal</a> podem exportar o seu jogo para <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> com <a href="/en-US/docs/Games/Tools/asm.js">asm.js</a>, então você estará livre para usar suas ferramentas e técnicas para desenvolvimento de jogos que serão exportados para a web.</p>
+
+<p><img alt="" src="http://end3r.github.io/MDN-Games-3D/A-Frame/img/shapes.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<h2 id="Para_onde_ir_agora">Para onde ir agora</h2>
+
+<p>Com esse artigo nós apenas arranhamos a superfície do que é possível fazer com as tecnologias disponíveis atualmente. Você pode desenvolver jogos imersivos, belos e rápidos na WEB usando WebGL, e as bibliotecas e frameworks construídos sobre ele.</p>
+
+<h3 id="Código-fonte">Código-fonte</h3>
+
+<p>Você pode encontrar todo o código fonte para esta série de <a href="http://end3r.github.io/MDN-Games-3D/">demos no GitHub</a>.</p>
+
+<h3 id="APIs">APIs</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Canvas_API">Canvas API</a></li>
+ <li><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a></li>
+ <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a></li>
+</ul>
+
+<h3 id="Frameworks">Frameworks</h3>
+
+<ul>
+ <li><a href="http://threejs.org/">Three.js</a></li>
+ <li><a href="https://github.com/WhitestormJS/whs.js">Whitestorm.js</a> (baseado em Three.js)</li>
+ <li><a href="https://playcanvas.com/">PlayCanvas</a></li>
+ <li><a href="http://www.babylonjs.com/">Babylon.js</a></li>
+ <li><a href="http://aframe.io/">A-Frame</a></li>
+</ul>
+
+<h3 id="Tutoriais">Tutoriais</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Desenvolvendo uma demo básica com Three.js</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Whitestorm.js">Desenvolvendo uma demo básica com Whitestorm.js</a></li>
+ <li><a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas">Desenvolvendo uma demo básica com PlayCanvas</a></li>
+ <li><a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js">Desenvovlendo uma demo básica com Babylon.js</a></li>
+ <li><a href="/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">Desenvolvendo uma demo básica com A-Frame</a></li>
+</ul>