Google Developers São Paulo – Gráficos e Animações 3D no browser com HTML5 WebGL e Three.js

Nesse artigo vamos falar sobre uma tecnologia cada vez mais relevante no mercado de TI, o WebGL, que através do novo elemento canvas> do HTML5, permite renderizar gráficos 2D e 3D, estáticos ou animados, utilizando a mesma estrutura disponibilizada pelo padrão OpenGL ES 2.0 e já sendo nativamente acelerada pela GPU, tornando o processamento bem reduzido e o resultado impressionante, sem para tal, complicar o trabalho do desenvolvedor.

Nessa talk realizada em um evento do Google Developers Group São Paulo, na trilha de HTML5, Pedro Emilio Guglielmo nos explica como utilizar a biblioteca facilitadora Three.js.

HTML5 WebGL com Three.js

O WEBGL é uma API Javascript para trabalhar com gráficos 3D no navegador, usando canvas. Para tornar o desenvolvimento mais rápido, utilizaremos uma biblioteca, chamada THREE.JS. Com ela, podemos gerar cidades, jogos, entre outras experiencias 3D interativas no navegador.

A compatibilidade foi inserida gradualmente nos browser e, atualmente, qualquer pessoa que possua um dos navegadores abaixo já consegue executar de maneira natural e sem plugins os gráficos e animações WebGL, inclusive com aceleração gráfica da placa de vídeo. O que era um grande limitador de possibilidades na época da animação puramente Javascript ou flash, que consumiam processamento puro da CPU, desperdiçando a capacidade da placa de vídeo.

Atualmente o cenário de compatibilidade é o seguinte:

Internet Explorer 11
Mozilla Firefox 4+
Safari 5.1+
Google Chrome 8+
Opera 12+

Isso possibilitou brincadeiras como abaixo, em que portaram o clássico Final Fantasy 7 para o WebGL no browser.

Neste CodeLab realizado, mostramos como fazer o básico, criar um cenário, colocar objetos, texturas, luzes e câmera, além de explicar um pouco sobre animação.

Para começar, faça o download da biblioteca em http://threejs.org/ e da biblioteca dat.gui em
https://github.com/dataarts/dat.gui.

O Google Developers São Paulo

A iniciativa Google Developers tem como intuito unir as comunidades de desenvolvedores com foco em inovação, novas tecnologias e obviamente, tecnologias Google.

Conforme as últimas estatísticas, existem 610 GDGs espalhados por 103 países, nos quais foram realizados 4.700 eventos nos últimos seis meses.

Desses 610 GDGs, temos o orgulho de ser o 2º no mundo, ficando atrás apenas de New York. Valeu comunidade dev brasileira!

A 7COMm, nosso host da vez

A 7COMm é uma das empresas mais tradicionais no ramo de tecnologia no Brasil. Com 30 anos de mercado, está presente nas maiores e mais influentes organizações brasileiras e disponibiliza seu espaço para eventos da comunidade de tecnologia sobre os mais diversos assuntos, sempre estimulando a evolução profissional e pessoal de todos. Metade dos organizadores do Google Developers São Paulo trabalham na 7COMm.

Equipe:

Pedro Emilio Guglielmo: Designer, formado pela FAU-USP, trabalha com front-end faz 7 anos, atualmente em uma empresa própria, a RCKT.

Fernando Rychlewski: Mais de 16 anos de desenvolvedor curioso (Nerd) e mais de 8 anos de experiência em Análise e Gerência de Projetos de Sistemas em arquiteturas Web/Cloud, atua na elaboração de evoluções tecnológicas e arquiteturas em sistemas de grandes corporações no mercado.
Também Organizador e Palestrante de eventos para a comunidade de Desenvolvedores brasileiros (Google Developers São Paulo, NetCoders, iMasters, etc), além de 12 anos de experiência com design gráfico (CEO de uma gráfica, seu Hobbie).

Benedito Batista: Web Developer na 7COMm, Android developer por diversão, Co-organizer do GDG-SP Há mais de 20 anos tentando aprender alguma coisa

Thuany Serpa: Atua como Designer de Interação, com especialização e conhecimento sólido em experiência do usuário (Wireframes e protótipos navegáveis, criação de personas, testes e controle de qualidade) e interface para plataformas online (WebApps com foco em Webstandards e Acessibilidade).

De 0 a 10, o quanto você recomendaria este artigo para um amigo?

Powered by: