Utilizando o Three.js Para Desenvolvimento de Jogos

Three.js é uma biblioteca/API JavaScript open-source utilizada para criar e apresentar gráficos animados 3D em um navegador, compatível com o elemento canvas do HTML5, WebGL e SVG. Neste artigo vamos analisar os recursos desta game engine e compartilhar alguns informações e sugestões para ajudar você a começar a desenvolver games com o Three.js.

Este post faz parte do projeto que participo de tradução dos artigos dos blogs da Envato, Webdesigntuts+, Gamedevelopmenttuts+ e Nettuts+.

Link para artigo original: How to Learn Three.js for Game Development
Autor do artigo original: Lee Stemkoski
Link da envato para o artigo traduzido: Aprenda a Utilizar o Three.js Para Desenvolvimento de Jogos

Porque utilizar o Three.js?

Desde que o Three.jsfoi lançado pelo desenvolvedor Ricardo Cabello noGitHub em 2010, sua base de código tem recebido constantes manutenções e otimizações graças a uma comunidade crescente e prestativa. O número de recursos disponíveis para o Three.js é extensa e inclui:

  • rederizadores (Canvas, WebGL, and SVG)
  • cenas – scenes (pode ser alterada no runtime, importada e exportada)
  • cameras (perspectiva e ortografia)
  • luz (ponto, spot, direcional, e ambiente; objetos podem receber sombra)
  • textura e materiais (Lambert, Phong, etc., inclui suporte a mapas)
  • geometrias (incluindo linhas, cubos, esferas, poligonos, cilindros, particulas de sistemas e texto 3D)
  • Recursos para ajudar a exportar e importar os arquivos JSON compatível com o Three.js para outros softwares de modelagem 3D (como o Blender, 3ds Max ou Maya e Wavefront (.obj) ou Collada (.dae)) direto na cena.
  • shaders (Acesso completo ao OpenGL Shading Language para melhor controle direto dos gráficos)
  • uma biblioteca para o pós-processamento de shaders (incluindo bloom, blur, reconhecimento de edge, Fresnel, sepia, e vignette)
  • uma biblioteca de efeitos esterioscópicos (Anaglyph, Parallax/Cross-eyed, e Oculus Rift)

Mais de 100 exemplos ilustrando os recursos do Three.js estão disponíveis no repositório e muitos outros sites fornecem exemplos de utilização da biblioteca com o código disponível atualmente. No mais, a biblioteca é escrita em JavaScript, o que quer dizer que você não vai ter muito trabalho para testar e utilizar a biblioteca (basta utilizar um navegador e um editor de códigos para web).

Jogos notáveis e visualizações

HexGL

Um jogo de corrida futurista criador por Thibaut Despoulain:


Trigger Rally

Um jogo automotivo criado por Jasmine Kent:


Artigos de desenvolvimento relacionados podem ser encontrados no blog da Jasmine Gamasutra.

ChuClone

Uma plataforma 2.5D renderizada em 3D, com um live editor incluso criado pelo Mario Gonzalez:


Marble Table

Um jogo de futebol criado por Jerome Etienne:

Aprenda a utilizar o Three.js para desenvolvimento de jogos - Web Social Dev

Astray

Um jogo de adivinhar criado porRye Terrell:

Aprenda a utilizar o Three.js para desenvolvimento de jogos - Web Social Dev

CubeSlam

Um jogo de ping-pong 3D que com um chat de vídeo incorporado ao jogo, criado pelo Google:


Mais informações podem ser encontradas napágina de experimentos do Google Chrome e neste artigo.

Encontre o seu caminho para OZ

Uma jornada interativa criada por Walt Disney e UNIT9


Mais informações disponíveis napágina do jogo nos experimentos do Google.

Introdução

Como o Three.js é uma biblioteca JavaScript, prepara um ambiente de desenvolvimento para testes não requer tanto conhecimento técnico além de precisarmos apenas de um editor de códigos e um navegador. Com isso em mente, editores de códigos com funcionalidades como sinalizador de sintaxe, mapear documento para pesquisa, auxilio no fechamento de tags como o Notepad++ ou Sublime Text podem prover uma experiência mais agradável.

Em relação aos navegadores, tanto o Google Chrome quanto o Mozilla Firefox tem suporte ao WebGL. O Google Chrome tem algumas ferramentas exclusivas nas ferramentas de desenvolvedor do navegador que podem ajudar a otimizar e simplificar o workflow, como o console que pode ser utilizado para debugar e inspecionar valores e objetos JavaScript e a ferramenta de configuração de Workflow que habilita a edição de arquivos direto da ferramenta de desenvolvedor. Mais informações podem ser encontradas no site do Chrome DevTools.

Dica: Também é possível programar com o Three.js em um ambiente online, utilizando serviços como jsFiddle, como demonstrado neste exemplo. Por outro lado, este tipo de opção é recomendada apenas quando você deseja compartilhar o conteúdo com um grupo de pessoas.

Para configurar o Three.js, primeiro vá até página do repositório no GitHub. Na parte inferior direita do layout tem um botão chamado “Download ZIP” que possibilita baixar todo o repositório em um arquivo compactado. (Existem outros métodos para baixar o pacote do Three.js, como clonar o repositório ou dar um fork nele utilizando Git, mas geralmente esses métodos são utilizados para contrubuir em algum projeto ou para gerar documentação online.)

Após baixar e descompactar o arquivo no diretório escolhido, precisamos fazer mais uma configuração para que você possa executar os exemplos em seu computador. Muitos projetos com Three.js envolvem arquivos externos, de outras fontes, como imagens, mas como questão de segurança este recurso é bloqueado por navegadores por padrão. Existem duas maneiras de contornar esta situação, uma é diminui a segurança do seu navegador ou executar os arquivos localmente ou em um servidor local.

A opção formal é a mais simples (por exemplo, vode pode alterar as configurações do Google Chrome para o Windows criando um atalho para o Google Chrome com os parametros

--allow-file-access-from-files

que ativa a flag para aceitar este tipo de recurso, no caso execução de arquivos locais através do navegador). Intruções para os dois métodos podem ser encontradas na wiki oficial, na página de título “Como rodar recursos localmente”.

JavaScript

O Three.js é escrito em JavaScript, então é recomendado que você tenha o minimo de conhecimento na linguagem. Existem vários recursos gratuitos disponíveis na internet que podem te ajudar nesta introdução ao JavaScript; duas que se destacam são:

  • Codecademy, que contém um grande número de exercicios interativos com feedbacks responsáveis e inteligentes. Este com cursos em Portugues BR.
  • Eloquent Javascript, é um livro digital grátis escrito por Marijn Haverbeke, que possui um ambiente de desenvolvimento que executa todos os exemplos inclusos e permite que o leitor edite e teste os exemplos com seu próprio código.

Three.js

Para aprender a configurar uma cena básica com o Three.js (incluindo disscussões sobre cenas, cameras, renderizadores e animações, visite o Manual Oficial

. Outro ótimo recurso de introdução a criação de cenas é este artigo Introdução ao Three.js do Paul Lewis.

Uma introdução mais detalhada das capacidades do Three.js é esta excelente apresentação do James Williams (vídeo com slides) intitulada Introdução ao WebGL e ao Three.js

Uma introdução mais detalhada das capacidades do Three.js é esta excelente apresentação do James Williams (vídeo com slides) intitulada Introdução ao WebGL e ao Three.js.

Próximos passos

A documentação do Three.js está disponível no endereço http://threejs.org/docs/, ainda em desenvolvimento mais mesmo assim um ótimo recurso para ter ideia das diversas funções disponíveis na bilbioteca.

Uma maneira mais aprofundade de conhecer o funcionamento da biblioteca é cair de cabeça na no código fonte da coleção oficial de exemplos no link http://threejs.org/examples/, que estão agrupados por titulo de acordo com a funcionalidade na biblioteca. Outro recurso, consiste em analisar os exemplos comentados para iniciantes, neste coleção http://stemkoski.github.io/Three.js/. Além destes, muitos projetos são compartilhados no Twitter com a hashtag #ThreeJS ou no Three.js subreddit.

Two particularly impressive and inspirational collections of advanced Three.js projects are:

Duas coleções particulamente impressionantes e inpiradoras de projetos avançados com Three.js são:

Alguns websites e blogs que discutem desenvolvimento e frenquentemente apresentam algum projeto incluindo Three.js:

Para aprender mais sobre os fundamentos de gráficos 3D, visite Gráficos 3D interativos, um curso online grátis (em inglês) ministrado pelo Eric Haines que apresenta um video palestra com exercicios interativos utilizando o Three.js.

Se você precisar incorporar alguma funcionalidade além do que o Three.js tem a ofecer você vai notar como é fácil e recomendado a incorporação de bibliotecas JavaScript como:

  • Tween.js: uma biblioteca para interpolar valores, ideal para animações suaves
  • Physi.js: uma engine física para utilizar o Three.js
  • dat.GUI: uma leve interface gráfica para editar variáveis
  • Gamepad.js: uma biblioteca que simplifica o processo de input de botões para joysticks.

Se voc~e quer criar efeitos gráficos avançados além daquelas que estão inclusos com o Three.js, você vai precisar aprender a programar shaders que são funções que são executadas direto na GPU. Duas excelentes introduções a shaders, escritas especificamente para usuários do Three.js, são:

Finalmente, se você está interessado em implementar o seu projetos em dispositivos Android ou iOS, o CocoonJS da Ludei é uma plataforma que faz justamente isso. O processo é muito bem documentado e relativamente simples, já que a maior parte do serviço é automatizado pelo sistema de compilação na nuvem do CocoonJS.

Onde buscar ajuda

Se você tem dúvidas que não consegue sanar mesmo analisando os exemplos apresentados, o melhor lugar para pedir ajuda é o Stack Overflow, o popular site de perguntas e respostas para programadores entusiastas. Premeiro pesquise se sua dúvida já não foi encaminhada anteriormente por outro usuário, se não, crie uma conta no serviço e encaminhe sua questão!

Conclusão

Com estes recursos a sua disposição, é hora começar a produzir! O Three.js tem uma comunidade bem vibranet e ativa, então você pode se sentir livre para fazer perguntas, se integrar as discussões, e mostrar o seu trabalho. Boa sorte para você!