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↳HTML45 conteúdosA importância do HTML e CSS para quem trabalha com UI Design e Design SystemProduto & UX · dez 2024Como hostear seu site HTML gratuitamente com GitHub PagesDev (Back & Front) · jun 2025SQL Server – Como criar um versionamento de código das suas Stored Procedures em HTML e com comentários da alteraçãoData · nov 2020Ver tudo em Dev (Back & Front) →, 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↳Gestão de projetos10 conteúdosGestão de Projetos em 2030: como eu vejo o futuroGestão Dev & TI · jun 2025Da pressão dos prazos ao controle do orçamento: como simplificar a gestão de projetos para desenvolvedoresGestão Dev & TI · abr 2025Como crio controles que funcionam: um método simples de governança e projetosGestão Dev & TI · dez 2025Ver tudo em Gestão Dev & TI → 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↳UX33 conteúdosUX e IA: Transformando Experiências Digitais com Inteligência ArtificialProduto & UX · jan 2025UX, IA e Front-End: quando experiência, inteligência e código se encontram para criar o futuro digitalProduto & UX · jul 2025Novidades em UX/UI para 2025: O futuro do design de experiências digitaisProduto & UX · abr 2025Ver tudo em Produto & UX → (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).

Links importantes:

• Site: http://gdgsp.org/
• MeetUp: http://www.meetup.com/pt-BR/GDG-SP/
• Slack: http://html5studygroup.herokuapp.com
• Trello: https://trello.com/b/qUnX0Fn4/blog
• GitHub: https://github.com/gdg-sp/html5studygroup
• Google+: https://plus.google.com/+GdgspOrg
• YouTube: Google Developers Channel
• Twitter: https://twitter.com/GDGSaoPaulo/
• Instagram: https://www.instagram.com/gdgsp/