Ambientes 3D usando HTML5 e Javascript com Canvas

Já ouvi dezenas e dezenas de programadores de interface dizendo que Flash vai morrer com o html5, do mesmo jeito que flash ía morrer quando jQuery se tornou popular. Entretanto, a intenção da W3C, é sim tanto Flash quanto Silverlight e Unity serem “desnecessários”. Segundo eles, um browser deve ser auto-suficiente e não é correto este cenário de hoje onde precisamos de algum plugin pra ter uma funcionalidade extra no navegador. Todas as funcionalidades deveriam estar incorporadas no browser. Com o HTML5, CSS3 e Javascript V8 podemos (ou poderemos) trabalhar com áudio, vídeo, webcam, aceleração por hardware, armazenamento offline, etc… talvez esse cenário de “flash morrer” vire realidade um dia daqui uns 10 anos, quem sabe? Porém, até isso acontecer, temos que evoluir muito em Javascript, MUITO! Frameworks 3D em javascript estão começando a aparecer. E com o “apoio” da apple ao HTML5 simplesmente bloqueando o flash nos Ipads / Iphones, parece que agora é o momento ideal para o “Programador HTML” se tornar uma profissional respeitado e bem pago no Brasil, assim como já é nos Estados Unidos e na Europa, ou será que vão “botar o estágiário que faz mail marketing” pra fazer uma aplicação 3D usando o Notepad++ ?

No post de hoje, não vou falar de código, só quero mostrar parte do que temos atualmente de mais avançado em html5 / javascript. Vou mostrar alguns cases de ambientes 3D programados em javascript com o auxilio de Canvas:

3DTim

Impressiona! Feito em canvas, a aplicação permite desenhar objetos 3D e manipular tanto o objeto quanto a câmera, visualizando o objeto criado em qualquer ângulo. Além de Canvas, o case explora outras propriedades de html5 como armazenamento offline e as novas propriedade / métodos de Javascript.

aplicação permite desenhar objetos 3D em HTML5

Canvas 3D

Usando canvas, a aplicação mostra uma espécie de exposição de fotos em 3D e roda bem. Na minha máquina com Firefox com 20 extensões, batia em média 28 frames por segundo. No chrome 8 / IE9 batia 44 frames por segundo, navegando e andando em 3D.

exposição de fotos em 3D com HTML5

Wolfenstein 3D com DOM

O primeiro foi feito por programadores do Opera, é uma simulação do Wolfenstein 3D feito com Javascript manipulando objetos em DOM e em Canvas, eles fizeram um tutorial passo a passo de como desenvolveram o jogo. O game roda bem, porém como foi feito em DOM, o processamento dele é meio pesado. Manipular tantos objetos ao mesmo tempo é complicado. Se fosse feito em canvas rodaria muito melhor, em compensação roda (lento e sem o mapa) até em IE6!

Wolfenstein 3D em Javascript

Mandatory upgrade (Parallax 3D)

Outro case no dhteumeuleu, o que mais impressiona é que foi feito em abril de 2008! Quando html5 engatinhava, já tinha gente em jobs complexos usando canvas.

Parallax 3D com canvas

Wolfenstein 3D com 1kb de Javscript

Este foi um case para o JS1K, um concurso que desafiava criar coisas mais interessantes usando apenas 1kb de js. E conseguiram fazer um ambiente 3D em Javascript. É tosco, ok, mas tem 1kb!

Wolfenstein 3D com 1kb de Javscript

Canvas 3D engine

Um experimento feito com uma lib para aplicações 3D em javascript chamado Clay3D, é simples a lib e fornece diversos métodos para criar e manipular objetos de diversas formas geométricas além de permitir rotacionar a câmera em qualquer ângulo / zoom.
Canvas 3D engine

Se alguém lembrar de algum case do tipo que eu não mostrei, deixe comentário. =)
[]s,

This entry was posted in Javascript by Danilo. Bookmark the permalink.

About Danilo

Danilo é desenvolvedor front end e back end. Gosta de tênis, de acompanhar o Corinthians e de jogar futebol de videogame (no futebol de verdade ele é muito ruim).

3 thoughts on “Ambientes 3D usando HTML5 e Javascript com Canvas

  1. Nossa, apesar de ser dificil criar os primeiros canvas na mão, é algo muito elegante e inteligente, e que dá um excelente resultado final. Li no wikipedia que a Adobe vai parar de desenvolver o flash para aplicativos móveis, e pelo visto daqui a alguns anos o HTML5(e versões futuras) vão tomar conta da web.

  2. Hoje por exemplo, já não é mais necessario flash ou arquivos de imagem + javascript para fazer um jogo ou algum conteúdo interativo, pois tudo isso já pode ser feito com canvas. Eu estou estudando o contexto 2d, espero poder contribuir com a web dando meu produto e que todos possam fazer exceente proveito.
    Abraços.

  3. Fala Danilo, tranquilo ?
    Você sabe de algum tutorial que ensine a criar uma galeria de espoxição de fotos parecida com essa acima com o titulo “Canvas 3D” ?

Leave a Reply

Your email address will not be published. Required fields are marked *