Jogos 3D na WEB

A documentação e as especificações do projeto WebGL é mantida pelo Grupo Khronos, 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.

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.

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 Explicando a teoria 3D básica para todas as informações que você precisar

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.

É 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 GLSL Shaders para aprender mais sobre eles.

É 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:

• Detecção de colisão 2D
• Detecção de colisão 3D

O conceito de realidade virtual não é novo, mas está crescendo na web devido os avanços de hardware, tal como o Oculus Rift, e a (atualmente experimental) WebVR API 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 WebVR — Realidade Virtual para a Web.

Também há o artigo Desenvolvendo uma demo básica com A-Frame que te mostra como é fácil construir ambientes 3D para realidade virtual usando o framework A-Frame.

Codificar WebGL diretamente é bem complexo, mas você vai querer se familiarizar com isso a longo prazo quando seus projetos avançarem (veja nossa documentação WebGL 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.

A biblioteca JavaScript 3D mais popular é Three.js, 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-Frame, PlayCanvas e Babylon.js estão entre os mais reconhecidos, com belas documentações, editores online e comunidades ativas.

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 Desenvolvendo uma demo básica com A-Frame para o passo-a-passo da criação de uma demo.

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 Desenvovlendo uma demo básica com Babylon.js 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.

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 Desenvolvendo uma demo básica com PlayCanvas para detalhes mais avançados e encontrar outros artigos mostrando como usar a bilbioteca PlayCanvas e o editor online.

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 Desenvolvendo uma demo básica com Three.js para o passo-a-passo da criação de uma demo.

Tanto Unity quanto Unreal podem exportar o seu jogo para WebGL com asm.js, então você estará livre para usar suas ferramentas e técnicas para desenvolvimento de jogos que serão exportados para a web.

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.

Você pode encontrar todo o código fonte para esta série de demos no GitHub.

• Canvas API
• WebGL API
• WebVR API

• Three.js
• Whitestorm.js (baseado em Three.js)
• PlayCanvas
• Babylon.js
• A-Frame

• Desenvolvendo uma demo básica com Three.js
• Desenvolvendo uma demo básica com Whitestorm.js
• Desenvolvendo uma demo básica com PlayCanvas
• Desenvovlendo uma demo básica com Babylon.js
• Desenvolvendo uma demo básica com A-Frame