1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
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>
|