Nesse artigo vou mostrar como criar o seu próprio modelo 3D para ser renderizado na web usando o o motor Web GL, um novo API em Javascript disponível no HTML5.
Web GL é um recurso fantástico o qual está sendo pouco explorado mas pode encher os olhos de qualquer cliente que busca inovação para sua comunicação na rede.
Tudo que aprendi em transformar modelos 3D em código foi estudando artigos em inglês. Foi assim que resolvi criar esse blog ajudando em português nossos profissionais de Front End.
Uso
Existe um visualizador online o qual estou testando. A versão gratuíta tem algumas limitações. É só fazer o upload dos arquivos do modelo 3D para ele renderizar, estou tendo problemas com o Normal Maps nesse programa, no mais mesmo a versão gratuíta atende expectativas.http://p3d.in/
Softwares Necessários
Editores
Vou sugerir alguns editores de texto ou html adequados gratuítos.
Usuários de Windows o Notepad++.
Para Mac Os tem o Komodo, o Sublime Text também e suas ferramentas de bordo.
Um navegador que suporte Web GL
Acredito que mais de 90% dos navegadores atuais suporte Web GL, os 10% que não suportam são as versões mais antigas do Internet Explorer e navegadores de dispositivos móveis que em grande parte não suportam ainda. Sabemos que 3D exige bastante de um processador.
Pela minha experiência como desenvolvedora o melhor motor para 3D e o mais rápido é o Google Chrome.
MAMP e XAMPP
Mamp e Xampp são ferramentas de desenvolvimento para testar websites localmente criando ambientes para scripts e PHP. Está disponível para Mac, Windows, Linux e até para o Solaris gratuítamente.
Blender
Sempre usei o Blender por três motivos, é gratuíto, uma programa de ótima qualidade e open source o que possibilita modificar seu código conforme necessidade.
http://www.blender.org/
Filezilla
O Filezilla é um programa eficaz para publicar arquivos via FTP. Ainda mais rápido que alguns softwares proprietários como o Dreamweaver e está disponível para Windows, Linux e Mac OS X.
Já ficou entre os 7 programas mais populares do SourceForge.net.
Three.js
https://github.com/mrdoob/three.js
Baixe a pasta ".zip".
http://www.blender.org/
Filezilla
O Filezilla é um programa eficaz para publicar arquivos via FTP. Ainda mais rápido que alguns softwares proprietários como o Dreamweaver e está disponível para Windows, Linux e Mac OS X.
Já ficou entre os 7 programas mais populares do SourceForge.net.
Three.js
https://github.com/mrdoob/three.js
Baixe a pasta ".zip".
Criando a estrutura do site
Vá para a sua pasta de trabalho e crie duas subpastas chamada "js" e outra "models". Claro que você pode renomear com nomes diferentes, mas tenha em mente que você vai ter que ajustar o caminho nos seus arquivos HTML. Para os iniciantes eu recomendo deixar a estrutura conforme imagem abaixo. Com o editor de texto ou HTML, crie um arquivo chamado index.html.
O HTML
Iniciaremos com o corpo básico mais simples em HTML5. Na sua pasta principal abra o arquivo index.html no seu editor e cole o script abaixo nele.
<!doctype html>
<html lang="pt-BR">
<head>
<title>Teste de WebGL</title>
<meta charset="utf-8">
</head>
<body style="margin: 0;">
<script src="js/three.min.js"></script>
// Cole seu código da parte 2 aqui
</script>
</body>
</html>
Copie o arquivo three.min.js da pas three.js master folder para dentro da sua pasta "js" criada. Este prompt vai incluir o script no seu arquivo HTML.<script src="js/three.min.js"></script>
Para não ficar muito cansativo, encerro aqui a primeira parte desse aprendizado. Na segunda parte vamos seguir em frente e fazer nosso próprio código WebGL.
Se você tiver alguma dúvida, sinta-se livre para deixar um comentário.
Se você tiver alguma dúvida, sinta-se livre para deixar um comentário.
