Monografia

1
UNIVERSIDADE FEDERAL DO PIAU UFPI CAMPUS SENADOR HELVDIO NUNES DE BARROS - CSHNB BACHARELADO EM SISTEMAS DE INFORMAO
Robert Maxwell Loureno da Silva
WebGL, a inovao em 3D para navegadores
PICOS 2011
Trabalho de Concluso de Curso apresentado ao Curso de Bacharelado em Sistemas de Informao do Campus Senador Helvdio Nunes de Barros da Universidade Federal do Piau como parte para obteno do Grau de Bacharel em Sistemas de Informao. rea de concentrao: Sistemas de Informao. Sob orientao do Professor e Msc. Rayner Gomes Sousa.
PICOS 2011
Trabalho de Concluso de Curso aprovado pelos membros da Banca Avaliadora , aceita pelo Curso de Bacharelado em Sistemas de Informao e homologada pelo Campus Senador Helvdio Nunes de Barros da Universidade Federal do Piau como parte para obteno do Grau de Bacharel em Sistemas de Informao.
Data de Aprovao: ___/___/_____.
Prof. Msc. Rayner Gomes Sousa ____________________________________________UFPI
Prof. Msc. Algeir Prazeres Sampaio__________________________________________UFPI
Profa. Esp. Patrcia Vieira da Silva Barros _____________________________________UFPI
Dedico este trabalho Carmem Regina Arajo Loureno. Saudades...
Agradecimentos
A Deus, pela condio de poder me aperfeioar e por me manter firme mesmo nas dificuldades. A minha famlia, pela tolerncia e compreenso depositada em mim, que me acompanharam sempre nos meus estudos, incentivando e ajudando no que for possvel para que eu possa ter habilidades e capacidades de decidir o meu futuro. Ao meu orientador Rayner, pela sugesto do tema e pela pacincia durante a orientao. Aos meus amigos pelo companheirismo e apoio. Um especial agradecimento aos meus colegas de curso pelos bons e maus bons momentos que passamos juntos e que no foram poucos, superando e ultrapassando cada obstculo que atravessasse pelos nossos caminhos.
O mundo est nas mos daqueles que tem a coragem de sonhar e correr o risco de viver os seus sonhos. Paulo Coelho
Resumo
O presente trabalho apresenta uma viso geral de como a tecnologia 3D est presente nos principais meios de entretenimento, como jogos, cinema e Web, e assim, ressalta a Web, onde so listadas tecnologias que permite a visualizao de contedos 2D e 3D diretamente em navegadores, como a WebGL, objeto de estudo desta monografia. Essa tecnologia permite o desenvolvimento de aplicaes tridimensionais que podem ser visualizadas diretamente em navegadores compatveis. Ainda em relao WebGL, so apresentadas suas caractersticas, estrutura, vantagens, desvantagens, navegadores suportados, frameworks disponveis e so discutidas as suas principais funes relacionadas a contedos 3D. A monografia finaliza com a criao de pequenas prticas de modelagens, elaboradas fazendo uso de um framework em WebGL, o Three.js e com as consideraes finais acerca de todo o trabalho construdo.
Palavras-chave: WebGL, 3D, navegadores.
Lista de Figuras
1. Cartaz do filme The Power of Love, o primeiro filme em 3D .............................................. 17 2. Super Mario Bros, um clssico dos jogos desenvolvidos em plataforma 2D....................... 19 3. Quake I, um marco na histria dos jogos em 3D.................................................................. 19 4. Exemplo de um fogo 3D presente na Web .......................................................................... 21 5. Colheita Feliz, jogo desenvolvido em Flash, disponibilizado na rede social Orkut ............ 24 6. Imagens com e sem retoro ................................................................................................ 26 7. Tela inicial do Unity.............................................................................................................. 27 8. Jogo Quake 2, executado em um navegador ........................................................................ 30 9. Componentes que integram a WebGL .................................................................................. 31 10. Os mecanismos de um ataque WebGL ............................................................................... 36 11. Os navegadores mais utilizados de outubro de 2010 a outubro de 2011 ............................ 37 12. Habilitao da WebGL no navegador Chrome ................................................................... 38 13. Habilitao da WebGL no navegador Firefox .................................................................... 38 14. Objeto 3D do framework C3DL ......................................................................................... 40 15. Objeto 3D do framework CopperLicht ............................................................................... 41 16. Interface do CopperCube.................................................................................................... 42 17. Objeto 3D do framework GLGE ........................................................................................ 42 18. Objetos 3D do framework SpiderGL .................................................................................. 43 19. Arquitetura do SpiderGL .................................................................................................... 44 20. Objeto 3D do framework Three.js ...................................................................................... 44 21. Estrutura do arquivo index.html.......................................................................................... 46 22. As coordenadas de um objeto 3D ....................................................................................... 48 23. Resultado exibido executado em um navegador ................................................................ 55 24. Pasta examples do Three.js ................................................................................................. 56 25. Pasta custom do Three.js .................................................................................................... 57 26. Notepad++ em execuo ................................................................................................... 58 27. Esfera criada a partir da biblioteca Three.js, visualizada no navegador Firefox ................ 60 28. Estrutura do arquivo index.html.......................................................................................... 61 29. Cubo 3D criado a partir da biblioteca Three.js ................................................................... 66
Lista de Tabelas
1. Parte do contedo HTML da pgina especificando o elemento canvas ............................... 50 2. Funo webGLStart .............................................................................................................. 50 3. Funo initBuffers ................................................................................................................ 51 4. Funo drawScene ................................................................................................................ 52 5. Funo initGL ....................................................................................................................... 53 6. Funo initShaders ............................................................................................................... 53 7. O shader-fs e shader-vs ........................................................................................................ 54 8. Primeiras linhas do cdigo em HTML ................................................................................. 58 9. Variveis geomtricas ........................................................................................................... 59 10. Especificao da renderizao e aplicao da cor a esfera ................................................. 59 11. Variveis geomtricas ......................................................................................................... 60 12. Declarao das funes extras do Three.js ......................................................................... 62 13. Variveis globais ................................................................................................................. 62 14. Funo init .......................................................................................................................... 63 15. Funo animate .................................................................................................................. 64 16. Funo onMouseDown ....................................................................................................... 64 17. Funo onMouseMove ........................................................................................................ 64 18. Funo onMouseUp ............................................................................................................ 65 19. Funo onMouseOut ........................................................................................................... 65
10
Lista de Siglas
API CPU C3DL DOM GLSL GPU HTML HTTP OpenGL OpenGL ES PHP SVG UI URL WHATWG WebGL
W3C
Application Programming Interface Central Processing Unity 3D Canvas JS Library Document Object Model OpenGL Shading Language Graphics Processing Unity Hyper Text Markup Language HyperText Transfer Protocol Secure Open Graphics Library Open-GL for Embedded Systems Hypertext Preprocessor Scalable Vector Graphics User Interface Uniform Resource Locator Web Hypertext Application Technology Working Group Web Graphics Library
World Wide Web Consortium
XML
Extensible Markup Language
11
Sumrio
LISTA DE FIGURAS............................................................................................................. 08 LISTA DE TABELAS ........................................................................................................... 09 LISTA DE SIGLAS ............................................................................................................... 10 1. INTRODUO .................................................................................................................. 13 1.1 ORGANIZAO DA MONOGRAFIA ........................................................................ 14 2. TECNOLOGIAS 3D E REAS DE ATUAO ............................................................ 16 2.1 INDSTRIA CINEMATOGRFICA ........................................................................... 17 2.2 JOGOS ............................................................................................................................ 18 2.2.1 Jogos para consoles e PCs ................................................................ 18 2.2.2 Jogos online ....................................................................................... 20 2.3 WEB ............................................................................................................................... 21 3. TECNOLOGIAS GRFICAS PARA NAVEGADORES .............................................. 23 3.1 FLASH ............................................................................................................................ 23 3.2 SILVERLIGHT .............................................................................................................. 25 3.3 SVG ................................................................................................................................ 25 3.4 UNITY ............................................................................................................................ 27 4. WEBGL, 3D DIRETAMENTE NOS NAVEGADORES................................................ 29 4.1 TECNOLOGIAS QUE INTEGRAM A WEBGL ........................................................... 30 4.1.1 OpenGL ............................................................................................. 31 4.1.2 OpenGL ES ....................................................................................... 32 4.1.3 HTML 5 ............................................................................................. 33 4.1.4 Canvas ............................................................................................... 33 4.2 VANTAGENS ................................................................................................................ 34 4.3 DESVANTAGENS ........................................................................................................ 35 4.4 NAVEGADORES QUE SUPORTAM WEBGL ............................................................ 36 4.4.1 Chrome .............................................................................................. 37 4.4.2 Firefox ............................................................................................... 38 4.4.3 Opera ................................................................................................. 39 4.4.4 Safari .................................................................................................. 39 4.5 BIBLIOTECAS DE DESENVOLVIMENTO OU FRAMEWORKS ............................ 40 4.5.1 C3DL ................................................................................................. 40 4.5.2 CopperLicht ....................................................................................... 41 4.5.3 GLGE ................................................................................................ 42 4.5.4 SpiderGL ........................................................................................... 43 4.5.5 Three.js .............................................................................................. 44 5. FUNES PRINCIPAIS EM WEBGL ........................................................................... 45 5.1 CONCEITOS, COMPONENTES E INTERAES ...................................................... 45 5.1.1 Buffer ................................................................................................. 46 5.1.2 Matrizes ............................................................................................. 46
12
5.1.3 Renderizao ..................................................................................... 47 5.1.4 Shader ................................................................................................ 47 5.1.5 Vrtice ............................................................................................... 48 5.2 DESCRIO DO EXEMPLO ....................................................................................... 49 5.3 TABELAS DE CODIFICAO E EXPLICAO ....................................................... 49 5.4 RESULTADOS .............................................................................................................. 55 6. DESENVOLVIMENTO DE OBJETOS 3D COM O THREE.JS .............................. 56 6.1 DESENVOLVIMENTO DE UMA ESFERA SEM MOVIMENTO .............................. 57 6.1.1 Resultados.......................................................................................... 60 6.2 DESENVOLVIMENTO DE UM CUBO 3D INTERATIVO ......................................... 60 6.2.1 Resultados.......................................................................................... 65 7. CONSIDERAES FINAIS .......................................................................................... 67 Anexo A Cdigo Fonte referente ao Captulo 5................................................................. 69 Anexo B Cdigo Fonte referente ao Captulo 6 ................................................................ 72 Anexo C Cdigo Fonte referente ao Captulo 6 ................................................................ 73 REFERNCIAS ..................................................................................................................... 75
13
Captulo 1
Introduo
De acordo com o chefe da International Telecomunication Union [17] (Unio Internacional de Telecomunicaes), Hamadoun Tour1, j no incio de 2011, a quantidade de usurios de Internet j alcanava o nmero de dois bilhes de pessoas. Hoje em dia, boa parte das pessoas utiliza a Internet para acessarem informaes e se conectarem com pessoas e eventos ao redor do mundo a todo o momento. Muitas dessas experincias proporcionadas pela rede mundial de computadores so possveis devido a uma Web aberta que pode ser acessada por qualquer pessoa por meio de um navegador, em qualquer dispositivo conectado Internet no mundo. Segundo Garrott e Ferreira (1999), os dias em que os utilizadores ficavam satisfeitos com as simples pginas estticas do HTML j pertencem ao passado. A Internet est em constante mudana, surgindo com novas funcionalidades e novas tcnicas. Uma dessas tcnicas fornece aplicaes para serem executadas diretamente no browser, como os programas de e-mail e processadores de texto. Os internautas querem mais agilidade e praticidade ao navegar na Web, exemplo disso o desejo de quererem utilizar ferramentas que sejam executadas a partir do navegador a terem que ficar instalando complementos adicionais, os chamados plug-ins. Isso uma das pretenses da tecnologia 3D pra Web. Grficos em 3D podem ser atraentes apresentando aspectos como iluminao, sombras, reflexos e texturas realsticas. Porm, uma dificuldade encontrada, se relaciona ao fato de se apresentar uma experincia em 3D convincente, em especial na Internet, pois criar uma experincia em 3D envolvendo jogos, site e outros meios, exige grandes quantidades de dados para exibir texturas e formas complexas. Nos anos da expanso da Internet, na dcada de 90, essas grandes quantidades de dados exigiam mais largura de banda de Internet e mais capacidade de computao do que boa parte dos sistemas computacionais poderia suportar. Tudo isso para dizer que quanto mais complexo for a geometria do modelo e de materiais utilizado, mais pesado computacionalmente torna o modelo 3D e maior a largura de banda de que este requer quando este for disponibilizado na Web (Sousa, 2001). Com a chegada da tecnologia 3D para os navegadores, a realidade outra. A tecnologia 3D em navegadores cresce devido a diversos fatores e que tem se
1
http://www.itu.int/en/osg/Pages/biography.aspx
14
consolidado com a popularizao da conexo a Internet via banda larga (Ciriaco, 2009). Dessa maneira, as possibilidades para o envio de expressivas quantidades de dados pela rede mundial de computadores, dados esses que so necessrios para exibir experincias realsticas em 3D nos navegadores, melhoraram e permitiram a expanso da tecnologia 3D. Alm disso, os processadores e as memrias com o tempo se aperfeioaram de tal forma, que mesmo um notebook ou desktop padro suportam a complexidade de grficos em 3D. Outro ponto importante, que deve ser destacado que alm das melhorias em relao Internet e aos sistemas computacionais, os grandes avanos conseguidos nas capacidades dos navegadores tiveram um grande impacto. Diversos navegadores modernos adotaram tecnologias como a WebGL, onde os desenvolvedores podem criar efeitos tridimensionais para seus aplicativos da Web, e os usurios podem experiment-los sem a necessidade de plug-ins adicionais. Este trabalho apresenta a WebGL, um novo padro, que ainda encontra-se em fase de elaborao, que traz uma completa srie de recursos 3D diretamente para a Web. Com as pesquisas realizadas surgiram novas descobertas que aumentaram ainda mais o interesse e a motivao, que foi a de buscar outras possibilidades para o desenvolvimento de aplicaes 3D para a exibio em navegadores alm das existentes, como o Flash e Silverlight. Uma nova possibilidade vem com a WebGL, que leva aos desenvolvedores um ambiente de programao e a no necessidade de plug-ins para a criao de seus projetos tridimensionais para que tudo possa ser visualizado em navegadores compatveis com a tecnologia. Os avanos conseguidos at agora com essa tecnologia, tornaram a WebGL mais acessvel aumentando em larga escala, o nmero de utilizadores e a prpria demanda dos mundos virtuais na Internet. Nesse campo, prev-se um avano maior nos prximos tempos, visto que a WebGL se torna mais uma opo aos desenvolvedores de modelagens 3D para Web.
1.1 Organizao da Monografia

Captulo 1: Introduo - Apresenta uma viso geral do trabalho; Captulo 2: Tecnologia 3D e reas de atuao - Este captulo faz uma breve explicao sobre o que venha ser a tecnologia 3D e suas principais reas de atuao; Captulo 3: Tecnologias grficas para navegadores - So apresentadas tecnologias grficas para navegadores, semelhantes WebGL;
15
Captulo 4: WebGL, 3D diretamente para os navegadores - detalhada a WebGL, abordando sua estrutura, caractersticas, vantagens e desvantagens. Destaca-se tambm os navegadores compatveis e frameworks disponveis em WebGL; Captulo 5: Funes principais em WebGL - Seo de funes relacionadas ao desenvolvimento em WebGL; Captulo 6: Desenvolvimento de objetos 3D com o Three.js - So apresentadas prticas de modelao de objetos 3D para a Web fazendo uso da biblioteca Three.js, incluindo as etapas e os resultados conseguidos; Captulo 7: Consideraes Finais - Neste captulo sero apresentadas as concluses e lies aprendidas com a realizao deste trabalho.
16
Captulo 2
Tecnologia 3D e reas de atuao
Ao processo de desenvolvimento de qualquer representao matemtica de um objeto tridimensional, seja ele esttico ou animado, atravs do uso de software especializado, dado o nome de modelagem 3D. O produto desse processo chamado modelo 3D e pode ser exibido como uma imagem bidimensional atravs de um processo chamado renderizao 3D, cujo conceito descrito na seo 5.1.3 do Captulo 5, ou usado em simulao de fenmenos fsicos em computador.
Em trs dimenses pode-se prover uma organizao mais intuitiva de objetos espaciais, utilizando a percepo natural e memria do utilizador referente ao espao e a relao espacial dos objetos representados. A Realidade Virtual tambm pode estimular a atrao e o entendimento do utilizador por meio de sua interatividade e dinamismo (Fosse, 2004).
Os modelos 3D normalmente so criados por programas especializados em modelagem 3D, como o Blender. No entanto, como os modelos 3D so uma coleo de dados, como pontos, faces e outras informaes, eles podem ser criados manualmente, algoritmicamente ou digitalizados. A tecnologia em terceira dimenso est se tornando cada vez mais comum no cotidiano das pessoas e, aos poucos, se consolida como a nova febre do mundo do entretenimento (Giambruno, 2002). So inegveis os grandes avanos conseguidos atravs da insero da tecnologia 3D nos grandes meios de entretenimento. A tecnologia 3D est presente no cinema, televiso, na Web, nos jogos, enfim, nos meios onde mais atraem a ateno das pessoas. A tendncia que em poucos anos, ir ao cinema para assistir a um filme em terceira dimenso deixar de ser um programa especial e ser algo bem natural. Atualmente h muitas reas onde a tecnologia 3D est presente e se expandindo. reas essas, como filmes, jogos, Web e outras que no so mencionadas aqui, que buscam a integrao de diversas mdias (texto, imagem, vdeo, udio, animao) proporcionadas pela tecnologia 3D. Este captulo apresenta brevemente como a tecnologia 3D est atuando entre alguns dos meios de entretenimento existentes, como no cinema, jogos e Web.
17
2.1 Indstria cinematogrfica

O primeiro filme em trs dimenses foi "The Power of Love" de 1922 (ver Figura 1), sobre uma mulher que prometida a um homem que no ama para salvar o pai da bancarrota. No entanto "Bwana Devil" (1952) conhecido como o precursor do gnero.
Fonte: Top Filmes Online, 2011
Fig. 1: Cartaz do filme The Power of Love, o primeiro filme em 3D.
A dcada de 50 ficou marcada nos Estados Unidos pela invaso dos aparelhos de televiso nos lares americanos. As pessoas sumiram das salas de cinema para se aconchegarem no sof de casa. Assim, os produtores dos estdios decidiram criar algo para fazer o pblico voltar s salas de cinema. Surgia a tcnica naturalvision, que consistia em uma imagem anglifa que passa a ter um efeito estereoscpico (tridimensional) quando visualizada por um culos feito de cartolina e lentes de plstico azul e vermelho, os conhecidos culos 3D. O crebro une a imagem da cor vermelha sobreposta cor azul e assim cria a iluso do efeito em trs dimenses. Muitos filmes passaram a ser produzidos no formato 3D. "House of Wax" (1953), "Spooks!" (1953) e "The Stewardesses" (1969) foram alguns deles. Porm, com a baixa qualidade nas produes, o formato foi extinto. Apenas um ttulo e outro como "Tubaro 3D" (1983) e "A Hora do Pesadelo 6 - Pesadelo Final - A Morte de Freddy" (1991) surgiu depois. Se nos anos 50, o advento da TV foi o que afastou o pblico dos cinemas, agora a Internet que faz com que as pessoas passem mais tempo em casa em frente tela do computador. Por
18
isso, o 3D resgatado das cinzas com a promessa de levar as pessoas de volta s salas de projeo e vivenciarem uma incrvel experincia cinematogrfica. O retorno do 3D ao cinema foi em meados de 2000 com a empresa RealD a frente da implantao da tecnologia em salas de cinema. Muitos filmes dessa nova fase so documentrios sobre esportes, natureza e o espao. "Magnificent Desolation: Walking on the Moon 3D" (2005) um exemplo.
2.2 Jogos
Um dos principais meios de entretenimento, os jogos, sem dvidas, foram e esto sendo os mais beneficiados com a tecnologia 3D. O nvel de realismo que a tecnologia 3D proporciona aos jogos, tanto para os jogos online como os para computadores e consoles, o seu maior diferencial. A seguir apresentada uma contextualizao de como a tecnologia 3D est atuando entre os jogos para PCs, consoles e tambm entre os jogos online.
2.2.1 Jogos para consoles e PCs

Como aconteceu na indstria cinematogrfica, a animao 3D demorou em ingressar no mundo dos jogos eletrnicos para PCs e consoles (vdeo-games). O aparecimento do PC (Personal Computer Computador Pessoal) e da indstria dos games para computador permitiu que os jogos eletrnicos se tornassem uma febre na era da informtica. Os jogos aumentaram em quantidade, em variedade de temas e ganharam uma impressionante qualidade grfica com um maior realismo. O impulso da produo de jogos 3D iniciou com a necessidade de aperfeioamento dos tradicionais jogos em 2D, como o Super Mario Bros (ver Figura 2). Antigamente, os jogos eram desenvolvidos em 2D, que ao invs de utilizarem coordenadas vetoriais e o intenso uso de texturas para compor o ambiente 3D, os desenvolvedores se limitavam em utilizar simples bitmaps e ambientes bidimensionais, como grandes papis de paredes para esta tarefa, alm de se basearem em animaes estticas para dar realismo aos personagens. Este arranjo funcionou durante os primeiros tempos, mas com a chegada de recursos computacionais mais poderosos e uma classe de jogadores mais exigentes, inovaes foram necessrias para atenderem essas necessidades e exigncias.
19
Fonte: Portallos, 2011
Fig. 2: Super Mario Bros, um clssico dos jogos desenvolvidos em plataforma 2D.
Logo depois dos jogos 2D e com a evoluo dos computadores e vdeo-games, vieram os jogos em 3D. Nasceram os FPS (First Person Shooter), mais conhecidos como jogos em primeira pessoa, tipo de game onde o jogador possui a mesma perspectiva de viso do personagem, ou seja, ele passa a enxergar o ambiente como se estivesse dentro do prprio jogo. Nos primeiros tempos, surgiram FPS's clssicos consagrados como o Wolfeinstein 3D, o (prprio) Doom, o ROTT, o Hexen, o Duken Nuken 3D, o Heretic, o Blood, o Star Wars, entre outros. Embora fossem excelentes jogos 3D para a poca, a qualidade grfica ainda deixava a desejar, pois os motores grficos eram baseados no uso de texturas fixas de baixa resoluo, causando o efeito visual "pixelado" com a aproximao de qualquer elemento do jogo, seja objeto ou personagens. Em 1996, mais um novo marco na histria dos jogos em 3D surge, o Quake (ver Figura 3). Diferente dos demais jogos FPS do gnero, a plataforma do Quake utilizava coordenadas aritmticas (vrtices) para compor o ambiente 3D, alm da utilizao de texturas para preencher os seus elementos, dando maior realismo e riqueza de detalhes aos cenrios criados. Mas por outro lado, uma srie de complexidades entrou em cena, exigindo maiores conhecimentos tcnicos e habilidades dos programadores, alm de mais recursos de hardware.
Fonte: Hardware, 2011
Fig. 3: Quake I, um marco na histria dos jogos em 3D.
20
O hardware teve que ser otimizado e adaptado a nova realidade em jogos. O uso intensivo de clculos matemticos para criar e renderizar os cenrios e o pesado processamento paralelo executado pela CPU (Central Processing Unity Unidade Central de Processamento) no eram suficientes, pois no possua o poder de clculo necessrio para realizar todo este trabalho. Surge ento, a GPU (Graphics Processing Unity Unidade de Processamento Grfico), uma unidade de processamento aritmtica dedicada especialmente a processar clculos grficos. Diferente das CPUs, as GPUs conseguem realizar um nmero expressivo de clculos, devido sua arquitetura paralelizada. Assim, vrios detalhes das cenas so calculados simultaneamente como construo do ambiente 3D, aplicao de iluminao, sombra e texturas, perspectiva do personagem, sendo finalmente renderizados para gerar as bonitas imagens que se costuma ver. Por trs de todos esses jogos, h um enorme investimento por parte das indstrias de games, cujo objetivo o de melhorar os elementos de hardware e software para que os jogos sejam os mais realsticos possveis.
2.2.2 Jogos online

A Internet evoluiu e ampliou a sua presena nos lares ao redor do mundo. Aplicaes com novas tecnologias, novas ferramentas e mais usabilidade surgem em uma completa linha de produtos e servios que est ao alcance de qualquer um sem que haja a necessidade sequer de sair de casa. A mesma facilitao e diversidade podem ser percebidas em relao disponibilidade de jogos online. Os jogos online, que podem ser rodados diretamente no navegador, se destacam com um grande crescimento. Segundo uma pesquisa divulgada no site do G1 [12], o tamanho do mercado online de jogos ser superior a US$ 13 bilhes em 2012. Muito mais do que simples disponibilizao em um repositrio de jogos, os jogos 3D online dispensam muitos jogadores da compra de mquinas poderosas e de jogos caros, propiciando diverso e entretenimento para uma grande massa de admiradores dos jogos 3D online e liberando-os tambm dos altos custos dos jogos para PC. Com os avanos tecnolgicos disponveis atualmente, os que esto em desenvolvimento, como a WebGL, e os que ainda viro, os arquivos criados sero sempre mais leves e carregados com maior rapidez. Os jogos 3D online futuramente ainda ganharo ainda mais
21
realismo e maior profundidade de cenrios e de cores, e permitiro ainda ao jogador, a experincia de mergulhar verdadeiramente numa realidade virtual.
2.3 Web
A Web outra rea onde os objetos 3D so utilizados frequentemente. Nela, a tecnologia 3D se manifesta das mais variadas formas, tanto como em sites de jogos, como j foi apresentado, bem como em sites de compras. Os produtos virtuais interativos permitem ao utilizador examinar, por exemplo, caractersticas de um fogo (ver Figura 4).
Fonte: Electro-Cesar, 2011
Fig. 4: Exemplo de um fogo 3D presente na Web.
A Web, criada por um grupo de cientistas comandados por Tim Berner-Lee, do CERN (Centre European Research Nucleare), na Sua, que em portugus significa, "Rede de Alcance Mundial", um sistema de documentos em hipermdia que so interligados e executados na Internet. Os documentos podem estar na forma de vdeos, sons, hipertextos e figuras. Para visualizar a informao, pode-se usar um programa de computador chamado navegador para descarregar informaes (tambm chamadas de documentos ou pginas) de servidores web (ou "stios") e mostr-las na tela do usurio. O usurio pode ento seguir as hiperligaes na pgina para outros documentos ou mesmo enviar informaes de volta para o servidor para interagir com ele. O ato de seguir hiperligaes , usualmente, chamado de "navegar" ou "surfar" na Web. A funcionalidade da Web baseada em trs padres:
Um protocolo de transmisso de dados - HTTP; Um sistema de endereamento prprio - URL;
22
Uma linguagem de marcao, para transmitir documentos formatados atravs da rede HTML
Com a ferramenta Web, hoje a Internet ganhou espao e est em qualquer rea desde os comrcios, jogos, filmes, educao, entre outras. Em 1994, os especialistas abordaram a possibilidade de integrar objetos 3D na Web (Ledwidge, 2002). A partir da, esse ano tornou uma nova era para Web, isto porque vrias organizaes especficas juntaram e mobilizaram esforos para criar uma tecnologia capaz de integrar objeto 3D na Web e assim permitir uma maior interao e dinamismo para os usurios. Hoje, a tecnologia 3D para Web uma rea de grande crescimento, permitindo uma visualizao mais interativa e instigante que a tecnologia 2D. Uma das razes para o sucesso de objetos tridimensionais na Web a possibilidade de interao em tempo real, permitindo aos utilizadores desencadear aes como manipular, rodar, etc., o objeto 3D. Hoje, existe uma variedade enorme de plataformas e ferramentas 3D para a Web que permitem a visualizao de objetos 3D online sem qualquer hardware especfico, como a WebGL. Para este trabalho, a Web ter maior destaque sendo abordada especificamente a WebGL, uma biblioteca que permite o desenvolvimento de objetos 3D que possam ser visualizados diretamente nos navegadores. No prximo captulo sero apresentadas outras tecnologias, que assim como a WebGL, permitem a criao de aplicaes 3D para a exibio em navegadores, sendo que a WebGL, objeto de estudo desta monografia, ter um captulo a parte.
23
Captulo 3
Tecnologias grficas para navegadores
As tecnologias que existem atualmente, incluindo as que esto em desenvolvimento, como a WebGL, demonstram melhorias considerveis tanto em nvel de interfaces grficas bem como em ganhos conseguidos em termos de qualidade sobre as imagens e com tecnologia muito mais intuitiva e acessvel para a maioria dos utilizadores. Algumas delas, como o Flash, esto buscando se aperfeioarem para atingirem um maior pblico, cada vez mais exigente. Neste captulo so apresentadas em ordem alfabtica, quatro tecnologias semelhantes WebGL, Flash, Silverlight, SVG e Unity, voltadas para o desenvolvimento de jogos e animaes online que podem ser exibidas diretamente no navegador e que so consideradas suas concorrentes.
3.1 Flash
Em 1995, a Futurewave recebeu inmeros pedidos de usurios para a criao de um software especfico voltado para a criao de animaes. Com a popularizao da Internet, a Futurewave decidiu aprimorar seu programa chamado Smartsketch para usar Java e renderizar um player de Internet e recebeu nome de Cellanimator, e depois tendo o nome mudado para Future Splash Animator. No ano de 1996, a Macromedia uniu-se a Futurewave e comprando-a pouco tempo depois. A Macromedia, ento, mudou o nome do sistema at ento conhecido como Future Splash Animator para Flash 1.0. Em 2005 a Adobe2 compra a Macromedia e em 2007 finalmente lanado para o pblico o Adobe Flash CS3. Em se tratando de popularidade, a WebGL ainda tem muita estrada pra percorrer para alcanar o Flash. Segundo o site da Info [16], ele est presente em 98% dos computadores e apesar de tanta popularidade em relao a grficos vetoriais e animao 2D na Web, ele ainda no possui o suporte para desenvolvimentos em 3D. Segundo Alvares (2004), existem dois tipos de grficos: os grficos vetoriais e em mapa de bits. Os grficos vetoriais, nos quais uma imagem representada a partir de linhas ou
http://www.adobe.com
24
vetores, possuem determinadas propriedades, como cor, espessura, etc. A qualidade deste tipo de grficos no depende do zoom ou do tipo de resoluo com o qual se esteja olhando o grfico. Os grficos de mapa de bits se assemelham a uma espcie de quadrculo no qual cada um dos quadrados (pxels) mostra uma cor determinada. A informao destes grficos salva individualmente para cada pxel e definida pelas coordenadas e cor de tal pxel. Estes tipos de grficos so dependentes da variao do tamanho e resoluo, podendo perder qualidade ao modificar sucessivamente suas dimenses.
Fonte: Google Discovery, 2009
Fig. 5: Colheita Feliz, jogo em 2D desenvolvido em Flash, disponibilizado na rede social Orkut.
Boa parte dos jogos acessados atravs do navegador baseada no formato Flash. A grande presena de jogos e aplicativos desenvolvidos em Flash presentes nas grandes redes sociais, como o Orkut (ver Figura 5) e Facebook uma prova disso. Alm de exportar arquivos com uma grande compactao, a ferramenta acessvel aos desenvolvedores. Isso justifica o fato do Flash possuir legies de programadores e interessados pelo planeta. Como resultado de sua popularidade, o plug-in Flash Player compatvel com praticamente qualquer navegador, como o Firefox, por exemplo, e j vem nativamente instalado em suas verses mais recentes. Independente do sistema operacional utilizado como o Mac, Linux ou Windows, o Flash est sempre atualizado e presente. Ainda cedo pra afirmar que a tecnologia Flash um forte concorrente da WebGL, pois o que a WebGL tem que o Flash ainda no tem suporte para exibio de contedo 3D em navegadores. Uma verso da ferramenta com suporte 3D j foi anunciada pela Adobe, mas, inicialmente, tudo indica que ela suportar apenas formatos de vdeo.
25
3.2 Silverlight
O Silverlight, criado pela Microsoft, um plug-in gratuito com suporte a vrios navegadores e vrias plataformas, destinado a fornecer experincias de mdia, como vdeos e aplicativos interativos, como jogos para a Web. Assim como a WebGL, essa tecnologia nova e ainda est em fase de testes. O Silverlight proporciona um modelo de programao, com suporte, por exemplo, para Ruby e linguagens como C. Entre os recursos de mdia do Silverlight, est a oferta rpida e econmica de udio e vdeo de qualidade para todos os principais navegadores, inclusive Firefox, Safari e Internet Explorer, executados em Mac ou Windows. A ferramenta se agrega a estes navegadores e adiciona novas funes a eles, permitindo que eles sejam capazes de executar filmes e animaes no formato Flash e outros recursos interativos disponveis na Internet. Com anos de tradio o Flash pela primeira vez encontrou um forte concorrente: o Silverlight. So percebveis o bom desempenho e qualidade de transmisso de vdeo do Silverlight, onde uma de suas vantagens o carregamento, bem rpido e com pouco buffer. Empresas de entretenimento especializadas na produo de filmes, sries e animaes, como a Twentieth Century Fox, j esto fazendo uso da tecnologia atravs de testes em trailers. Assim como o SVG, que ser apresentado na prxima seo, o Silverlight permite a criao de grficos vetorizados, como textos, animaes e sobreposies que interagem com grficos e efeitos de boa qualidade. O Silverlight disponvel para download gratuitamente em sua pgina oficial no site da Microsoft3.
3.3 SVG
O SVG (Scalable Vector Graphics Vetor de Grficos Escalvel) um formato de grficos vetoriais que trabalha com a criao de linhas, polgonos, figuras, textos e como a WebGL, permite a exibio desses contedos em navegadores compatveis. Criado pelo W3C4 (World Wide Web Consortium), empresa responsvel pela criao de outros padres, como o HTML, o SVG contem tags especificas para gerar uma imagem vetorizada na sua aplicao. Com tags simples, consegue-se atravs do SVG gerar imagens de qualidade vetorizadas que por mais que sejam alteradas as propores na tela essa no
3 4
http:// www.microsoft.com/silverlight http:// www.w3.org
26
perder qualidade, por ser uma imagem vetorizada. Podendo ser apenas imagem fixa ou animao, o SVG pode ser trabalhado junto ao JavaScript para manipular eventos de imagem. Quando se trabalha com imagens que necessitam de uma grande riqueza de detalhes e com sua exibio em uma aplicao, como por exemplo, uma pgina na Web, essa imagem precisa ser salva com uma grande qualidade, ou seja, essa imagem vai ter um grande tamanho e um maior custo de armazenamento. Agora, caso se queira economizar espao, a imagem vai ser gerada com uma qualidade menor e ao ser expandida, essa imagem ir se distorcer, espalhando os pixels e deixando visvel isso. A Figura 6, exibida a seguir, apresenta duas imagens, uma com distoro e a outra sem distoro.
Fonte: Devmedia, 2011
Fig. 6: Imagens com e sem retoro.
Como no SVG os dados so escalveis, a imagem pode ser redimensionada sem preocupao quanto qualidade e distoro dessa imagem, e ainda por ser apenas um arquivo XML (Extensible Markup Language Linguagem de Marcao Extensvel), apenas texto, o custo de armazenamento muito inferior como o de exibio. Muitas aplicaes para celulares hoje j esto utilizando o SVG, pois como a maioria dos aplicativos no possui um grande potencial de hardware, e menos custoso exibir imagens e armazenar com essa extenso. Da mesma maneira como a WebGL, o SVG um padro aberto, onde qualquer usurio pode utiliz-lo no desenvolvimento das mais diversas aplicaes, sem qualquer restrio, o que no se atribui ao Flash, Silverlight e Unity. WebGL tem linguagem padro, o JavaScript e o SVG, tem linguagem padro o XML.
27
3.4 Unity
Enquanto a plataforma 3D no Flash ainda uma expectativa entre os desenvolvedores e a WebGL ainda encontra-se em desenvolvimento, o Unity (ver Figura 7) tambm conhecido como Unity3D est em plena funcionalidade. Para fazer uso dessa tecnologia, o usurio deve ter seu plug-in instalado no computador para poder ter acesso a jogos com grficos 3D elaborados para serem exibidos diretamente no navegador.
Fonte: Unity Technology, 2011.
Fig. 7: Tela inicial do Unity.
Unity3D possui cinco licenas diferentes, cada uma para certo tipo de desenvolvedor. As licenas so: Unity, Unity Pro, Unity iPhone Basic, Unity iPhone Advanced e Unity Wii. De acordo com a Unity Technologies, em breve mais plataformas sero suportadas, tais como Android. Todas as licenas so brevemente descritas a seguir:
Unity 3D: Esta a verso gratuita da Unity que pode ser usada tanto para estudos quanto para fins comerciais, vlida para empresas que no ganharam 100.000 dlares no ultimo ano fiscal. Ou seja, com um ganho superior a 100.000 dlares deve-se obter a Unity Pro. Esta verso possui menos recursos que a Unity Pro, mas totalmente possvel criar um jogo de qualidade com esta licena. Unity Pro: Esta a verso paga da Unity e possui diversos recursos interessantes, perfeita para estdios ou para o desenvolvedor que tem bons recursos financeiros para investir. Ela custa $1.200 (mil e duzentos dlares). Unity iPhone Basic e Unity iPhone Advanced: Estas verses so para o desenvolvimento para iPhone (dispositivo da Apple). As diferenas entre a Basic e Advanced esto mais na parte de desempenho e customizao tais como o uso de plug-ins feitos em
28
C++. Os preos so respectivamente 300 dlares pela Basic e 1200 dlares pela Advanced. Unity Wii: Esta verso permite o desenvolvimento para o console Nintendo Wii. O usurio que se interessar por esta verso deve ser desenvolvedor autorizado da Nintendo e entrar em contato com a Unity Technologies para obter os preos e para baixar a verso.
O Unity tem compatibilidade com os navegadores: Camino, Chrome, Firefox, Internet Explorer, Opera e Safari. Alm do Unity3D existem outros programas auxiliares para o desenvolvimento de um jogo. Segue aqui uma lista desses programas, sendo gratuitos:
Blender: Ferramenta para modelagem e animao de objetos 3D. Audacity: Editor de audio open source. Gimp: Editor de imagens. Inkscape: Para criao de desenhos. Melody Raiser: Programa de gerao de msica procedural. SFXR: Programa de gerao de efeitos sonoros.
O Unity possui uma verso gratuita, disponvel em seu site oficial na Internet, que contm a maioria das funcionalidades que um desenvolvedor amador necessita para criar jogos e public-los como programa para Windows ou em uma pgina web. Esses jogos para sites funcionam de um modo parecido com os jogos ou animaes para sites criados em Flash, sendo necessrio que a pessoa instale um plug-in para que eles funcionem. Esse plug-in um programa que encontrado no site oficial do Unity5 e semelhante ao plug-in do Flash, ou seja, consegue-se jogar atravs do navegador, como o Internet Explorer e Firefox.
http://www.unity3d.com/webplayer
29
Captulo 4
WebGL, 3D diretamente nos navegadores
A disponibilizao de contedo 3D atravs da plataforma Web passou a ser um tema de interesse de padres, como a OpenGL6 (Open Graphics Library Biblioteca de Grficos Aberta), em virtude do crescimento da capacidade dos computadores pessoais, pois os mesmos tornaram-se suficientemente poderosos para lidar com cenas 3D em tempo real. Muitas tentativas foram feitas para permitirem que o usurio atravs da Web acessasse e interagisse diretamente com objetos tridimensionais, ou, mais especificamente, dentro do browser. No mesmo perodo de tempo em que as GPUs mostraram um expressivo aumento de desempenho e capacidade, a evoluo da tecnologia por trs dos navegadores Web tambm permitiu a expanso do contedo 3D na Web. Assim, de um lado, os componentes de hardware e software atingiram um nvel de eficincia e performance que poderiam atender s exigncias de alta qualidade e renderizao de contedo 3D, do outro, o aumento da largura de banda para acesso Internet permitiu grandes volumes de dados a serem transferidos em uma quantidade de tempo relativamente curta. Neste cenrio, a necessidade de uma API padronizada se tornou um problema de alta prioridade a ser resolvido. O Khronos Group [29], instituio responsvel pela criao e manuteno da OpenGL e de outras bibliotecas, lanou na GDC (Game Developers Conference) 2011 a verso 1.0 da especificao WebGL (Web Graphics Library Biblioteca de Grficos para a Web), que trata-se de uma tecnologia em desenvolvimento que transporta o poder grfico de placas de vdeo de computadores para os navegadores, agora capazes de suportar jogos avanados e outras aplicaes em 3D, at antes reservados a outras tecnologias, como o Silverlight. WebGL considerada uma API (Application Programming Interface - Interface de Programao de Aplicativos), pois trata-se de um conjunto de funes que a permite se comunicar com uma outra biblioteca. Nesse caso, ela se comunica com a OpenGL ES (OpenGL for Embedded Systems OpenGL para Sistemas Embarcados) [23], aproveitando seus recursos. Ela surgiu a partir de pequenas experincias em 3D, fazendo uso do elemento canvas do HTML 5, iniciadas pela Fundao Mozilla7, que faz parte do Khronos Group.
6 7
http:// www.opengl.org http://www.mozilla.org/foundation
30
Mesmo sendo uma tecnologia ainda em desenvolvimento, j existem jogos e outras aplicaes desenvolvidas com a tecnologia WebGL. Exemplo disso a segunda verso do jogo Quake (ver Figura 8), produzido pela Google. Para que o usurio tenha acesso a esse jogo necessrio ter um navegador habilitado com WebGL e uma boa placa de vdeo. Entre os navegadores compatveis com o Quake 2 esto o Firefox 4, Chrome Beta 5.0 e Webkit/Safari: Nightly builds. No site do PlayWebGL8, possvel encontrar esse jogo e outros alm de alguns demos produzidos com tecnologia WebGL.
Fonte: Osnews, 2011
Fig. 8: Jogo Quake 2, executado em um navegador.
4.1 Tecnologias que integram a WebGL

WebGL multi-plataforma, ou seja, desenvolvida fazendo a combinao das tecnologias OpenGL, OpenGL ES, HTML 5 e o elemento canvas. Alm da integrao dessas tecnologias, a WebGL faz interface entre a linguagem JavaScript e OpenGL ES 2.0, uma biblioteca de cdigo nativo que acessa diretamente o hardware de placas grficas e o processamento feito em canvas, uma superfcie de visualizao grfica que faz parte do HTML 5 e est implementado com vrios navegadores. A seguir so apresentados com mais detalhes os elementos que integram a WebGL destacando suas funcionalidades em relao a contedos grficos. A Figura 9 apresenta os componentes que integram a API WebGL.
http://www.playwebgl.com
31
Fig. 9: Componentes que integram a WebGL.
4.1.1 OpenGL
A OpenGL uma especificao que define uma API que permite a escrita de aplicaes utilizando grficos 2D ou 3D. Por se tratar de uma especificao, a OpenGL apenas um documento que descreve um conjunto de funes e seus comportamentos. A partir dessa especificao, fornecedores de hardware desenvolvem suas implementaes e estas so projetadas de modo que a biblioteca esteja de acordo com a especificao. Para que suas implementaes sejam aceitas como uma verso da OpenGL, as bibliotecas criadas pelos fornecedores so submetidas a testes para assegurar sua qualidade. A OpenGL possui implementaes eficientes para as plataformas Mac OS X, Windows, Linux. A OpenGL tambm pode ser usada em software, permitindo que plataformas sem suporte de fornecedores a OpenGL possam executar programas que a usam. Alm de possuir implementaes para diversas plataformas, a OpenGL tambm possui bindings para muitas linguagens, como Delphi, Fortran, Haskell, Java, PHP, Ruby e Visual Basic. A OpenGL foi projetada para realizar apenas a sada grfica e, portanto, apenas fornece funes de renderizao (ver mais sobre renderizao no Captulo 5). Seu ncleo desconhece o conceito de sistemas de janelas, udio ou dispositivos de entrada como mouse. Essa
32
deciso de projeto permite que o processo de renderizao seja completamente independente do sistema operacional utilizado, permitindo o desenvolvimento multiplataforma.
4.1.2 OpenGL ES
WebGL tem sintaxe da OpenGL ES [23], uma verso da OpenGL desenvolvida exclusivamente para ser executado em smathphones ou celulares modernos, de modo que a vizualizao de aplicativos 3D em websites seja possvel tambm em telefones. Muitas das funes presentes no desenvolvimento de aplicaes em 3D na WebGL so oriundas do OpenGL ES, como shader. OpenGL ES uma interface de software que consiste em um conjunto de procedimentos e funes que permite ao programador especificar os objetos e operaes envolvidas na produo de imagens de boa qualidade grfica, mais especificamente imagens coloridas de objetos tridimensionais. Para o programador, OpenGL ES um conjunto de comandos que permite a especificao de objetos geomtricos em duas ou trs dimenses, juntamente com os comandos que controlam o modo como esses objetos so prestados no framebuffer. Framebuffer uma memria especializada em armazenar e transferir para a tela do computador dados de um quadro de imagem. As informaes armazenadas nesta memria consistem basicamente em valores cromticos para cada pixel e suas transparncias. Quanto maior a resoluo da imagem retratada maior ser a memria necessria para o framebuffer armazenar as imagens (Rodrigo Prada, 2009). A sintaxe de OpenGL aplicados a WebGL ser apresentada em detalhes no Captulo 5. OpenGL ES oferece uma interface de modo imediato, o que significa que a especificao de um objeto faz com que seja desenhado. Um programa tpico que usa OpenGL ES comea com chamadas para abrir uma janela para o framebuffer em que o programa vai desenhar. Ento, as chamadas so feitas para alocar um contexto OpenGL ES e associ-lo com a janela. A maioria das verses da OpenGL ES requer a existncia de um framebuffer nos hardwares de grficos especficos. Muitas chamadas OpenGL ES pertencem a objetos de desenho, tais como pontos, linhas e polgonos, mas as maneiras que alguns destes desenhos ocorrem dependem da existncia de um framebuffer. Alm disso, algumas das verses do OpenGL ES dizem respeito especificamente manipulao de framebuffer.
33
4.1.3 HTML 5
A tecnologia HTML 5, assim como a prpria Web, est em constante evoluo, com base nas necessidades e imaginao dos desenvolvedores. Sendo um padro aberto, o HTML 5 incorpora alguns dos melhores aspectos da Web: funciona em qualquer lugar e em qualquer dispositivo com um navegador moderno. HTML a sigla em ingls para Hyper Text Markup Language, que em portugus, significa Linguagem para Marcao de Hipertexto. O conceito de hipertexto admite um nmero de consideraes e discusses. Para o bom entendimento das definies, pode-se resumir hipertexto como todo o contedo inserido em um documento para a Web e que tem como principal caracterstica a possibilidade de se interligar a outros documentos da Web. O que torna possvel a construo de hipertextos so os links, presentes nas pginas dos sites que se visitam quando se est na conectado na Internet. O HTML evoluiu por sete verses que so: HTML, HTML +, HTML 2.0, HTML 3.0, HTML 3.2, HTML 4.0, HTML 4.01 (verso atual), HTML 5 (verso em desenvolvimento, que se relaciona com o WebGL). Uma das novidades do HTML 5 o canvas, novo componente que permite desenhar na pgina, por meio das funes de uma API, tipo de formas, que podero estar animadas e interagir com o usurio.
4.1.4 Canvas
No final da seo anterior foi apresentado que uma das novidades da nova verso do HTML 5 o canvas. Canvas significa em portugus algo como tela, ou seja, uma rea onde se pode desenhar como se fosse uma tela. O elemento canvas permite especificar uma rea da pgina onde se pode, atravs de scripts, desenhar e renderizar imagens, o que amplia notavelmente as possibilidades das pginas dinmicas e permite fazer coisas que at agora estavam reservadas aos desenvolvedores em Flash, por exemplo. O canvas se desenvolveu inicialmente pela Apple para incorpor-lo ao navegador Safari, e logo foi utilizado e padronizado pela organizao WHATWG 9 para integr-lo ao HTML 5. Logo depois, tambm foi adotado por navegadores como Firefox e Opera. Em relao ao Chrome, como um navegador que utiliza o mesmo motor de renderizao que o
9
http://www.whatwg.org/
34
Safari, portanto tambm suporta o elemento canvas. O Internet Explorer at a verso 8.0, no suportava canvas com funes nativas, porm existem projetos e plug-ins que podem ampliar as funcionalidades do navegador para dar suporte a este novo elemento do HTML 5. Por exemplo, existe o projeto Explorer Canvas que preparou um plug-in para que o navegador da Microsoft tenha o suporte para desenho 2D que permite canvas. Entretanto, embora em diversas frentes populares comeassem a se utilizar canvas, a falta de suporte do Internet Explorer faz com que ainda no seja muito recomendvel sua incorporao s aplicaes Web, pois a maioria dos usurios, que utilizam o Internet Explorer, no poderia ver as partes da pgina onde se utiliza canvas. Essa situao pode mudar durante os prximos anos, visto que a incorporao de canvas ao HTML 5 j uma realidade. O Internet Explorer mais cedo ou mais tarde ter que dar suporte a esta utilidade em seu navegador, seno sua utilizao ser descartada por usurios que desejarem acessar aos servios Web mais avanados. O elemento do HTML 5 permite desenhar na pgina e atualizar dinamicamente estes desenhos, por meio de scripts e atendendo s aes do usurio. Isso leva a possibilidades de uso como as disponveis com o plug-in do Flash, no que se refere renderizao de contedos dinmicos. As aplicaes abrangem jogos, efeitos dinmicos em interfaces de usurio, editores de cdigo, editores grficos, aplicaes, efeitos 3D, etc. Atualmente, aplicaes inovadoras para a Web j utilizam canvas para seu funcionamento, onde se destaca a WebGL, objeto de estudo desta monografia.
4.2 Vantagens da WebGL

Uma das vantagens da WebGL a capacidade de ser usada para construir grficos 3D para pginas na Web sem a necessidade de instalao de algum plug-in. Um plug-in uma parte adicional de software, especializada em processar tipos especficos de contedo (Google, 2010). Esses plug-ins esto presentes em similares a WebGL, como o Flash, Unity e o Silverlight. A no necessidade de instao de plug-ins o maior diferencial entre a WebGL e seus concorrentes. Para cumprir tal tarefa sem a necessidade de complementos, a WebGL aumenta a qualidade da renderizao 3D em navegadores, aproveitando o processamento das placas de vdeo compatveis. Alm de no haver necessidade de complementos adicionais, WebGL conta com outra vantagem interessante, que torna um diferencial a respeito dos seus similares. WebGL open source. Open Source significa que a tecnologia WebGL de utilizao livre,
35
para quem quiser desenvolver e se aventurar nesse mundo. E todos podem contribuir com a tecnologia WebGL, seja no seu desenvolvimento, seja na correo de erros, seja na documentao, desde que a condio de liberdade seja mantida. Isso significa maiores possibilidades de resultados e ganhos em termos de produtividade. Resultado disso a grande quantidade de frameworks relacionados WebGL, espalhados pela Internet. Os principais frameworks sero apresentados ainda neste captulo. Pra quem gosta de programao, a WebGL completa. Alm de programar fazendo uso da linguagem de marcao de textos, HTML, o desenvolvedor tambm utiliza linguagem JavaScript. Isso pode ser uma vantagem ou mesmo, uma desvantagem, justamente para quem no tem familiaridade com programao para Web.
4.3 Desvantagens da WebGL

Por ser uma tecnologia que se aproveita de comandos da OpenGL, mais precisamente da OpenGL ES, com integrao de outras tecnologias, a WebGL se apresenta a seus usurios como uma linguagem complexa e com muitos detalhes tcnicos relacionados a contedos grficos. WebGL um ambiente de pura programao. Tem que carregar, compilar, vincular e configurar os shaders (apresentados com mais detalhes no Captulo 5), para manter as formas, e configurar as variveis. Isso refere-se a comandos da OpenGL. O conhecimento em OpenGL muito significativo, mas no tudo. A WebGL destinada principalmente a pessoas com conhecimentos em algoritmos de computao grfica, mas com boa compreenso em termos relacionais a grficos 3D. difcil, quando se v o cdigo pela primeira vez, mesmo se tendo uma boa compreenso da linguagem OpenGL. Alm da linguagem complexa, a WebGL se apresenta como um cdigo malicioso para os navegadores. Pesquisadores de segurana descobriram uma perigosa vulnerabilidade no padro WebGL, presente tanto no Firefox 4 quanto no Chrome, usados para a exibio de grficos 3D. WebGL pode ser uma porta de entrada para crackers invadirem o sistema, infectando-o com vrus ou at roubando dados pessoais do usurio. Segundo o Net Security [21], WebGL permite que programas baseados na Internet acessem componentes grficos de driver e hardware, deixando-os expostos a cdigos maliciosos, como mostra a Figura 10. Em geral, eles no so construdos tendo a segurana como uma das principais preocupaes, pois as empresas confiam que a instruo que chega a tal rea do sistema , invariavelmente, segura. Esses problemas so inerentes especificao
36
da WebGL e exigem mudanas significativas da arquitetura para remedi-los e fizeram com que o Internet Explorer at hoje, no aderisse a nova onda em 3D para navegadores, como o Firefox, Safari, Opera e Chrome fizeram. O usurio, se quiser, pode desabilitar a WebGL, mas isso pode prejudicar sua experincia online. A tendncia que o padro ganhe mais proteo nos prximos anos, j que, se continuar com essas falhas em sua segurana, poder deixar de ser utilizado.
Fonte: Forshaw, 2011
Fig. 10: Os mecanismos de um ataque WebGL
Navegadores que ativam a WebGL por padro, como o Chrome e o Firefox colocam seus usurios em risco com esses problemas. A seguir, so listados os navegadores que j suportam a tecnologia WebGL.
4.4 Navegadores que suportam WebGL

Os objetos 3D so visualizados na Web atravs de um navegador compatvel. Segundo Vaz (2002), navegador uma aplicao utilizada para efetuar pesquisas e consultar informaes que existem nos vrios sites, localizados em servidores remotos para acesso via Internet. Atualmente so compatveis com a tecnologia WebGL, os navegadores Firefox, o Chrome, o Safari e o Opera. O Internet Explorer da Microsoft ainda no anunciou planos para apoiar oficialmente a WebGL, isso acontece por questes de segurana j apresentadas na
37
seo anterior. A Figura 11 representa um grfico que apresenta os navegadores mais utilizados no mundo entre os meses de outubro de 2010 a outubro de 2011, segundo dados estatsticos presentes na pgina na Internet do Stat Counter [26].
Fonte: Stat Counter, 2011
Fig. 11: Os navegadores mais utilizados de outubro de 2010 a outubro de 2011.
Nem sempre a verso oficial destes navegadores suporta WebGL, e sendo assim, torna-se necessrio fazer o download de uma verso do navegador j habilitado com a tecnologia WebGL, ou fazer isso manualmente, atravs de pequenas alteraes em algumas de suas configuraes especficas para tal procedimento.
4.4.1 Chrome
O browser desenvolvido pela Google chegou ao mercado em 2008 e em relao aos navegadores com suporte WebGL, o Chrome um dos navegadores mais utilizados no que diz respeito ao desenvolvimento de objetos tridimensionais. Um bom exemplo disso o site do Chrome Experiments10, que contm uma srie de experimentos 3D em WebGL fazendo uso do navegador. possvel instalar o Chrome nas principais verses do sistema operacional Windows (XP/Vista/7) e tambm no Linux e Mac. A verso 9 do Google Chrome vem com suporte WebGL ativado por padro e por isso no h a necessidade de habilit-lo.
10
http://www.chromeexperiments.com/webgl
38
Para habilitar WebGL em verses antigas do Chrome, deve-se inicializar o Chrome pela linha de comando adicionando a opo -enable-webgl. A linha de comando ser algo como mostra a Figura 12.
Fig. 12: Habilitao da WebGL no navegador Chrome.
4.4.2 Firefox
O Firefox foi o navegador que permitiu as primeiras experincias em WebGL, sendo assim um dos percussores da tecnologia 3D para Web. Desenvolvido pela Fundao Mozilla, chegando ao mercado em novembro de 2004, o Firefox distribudo gratuitamente para usurios dos principais sistemas operacionais. A sua evoluo contnua, destacando-se principalmente no suporte a complementos. Para fazer funcionar WebGL no Firefox, precisa-se baixar sua verso 4 e ser digitado na barra de endereos o comando about:config, como mostra a Figura 13.
Fig. 13: Habilitao da WebGL no navegador Firefox.
Uma lista de configuraes ser aberta que podem ser alteradas. Deve ser encontrado o registro webgl-enabled ou algo assim e valor de false deve ser modificado para true.
39
O navegador Firefox foi o escolhido para as prticas de modelagens o estudo de caso apresentado no captulo 6. Mesmo com WebGL integrada, foi encontrada uma certa dificuldade em habilitar a WebGL no navegador Chrome, o que no aconteceu em relao ao Firefox, e sendo assim, isso influenciou na sua escolha para a visualizao dos contedos criados nas prticas de modelagens logo mais apresentadas.
4.4.3 Opera
O navegador Opera11 criado em 1994, no to popular quanto o Chrome e Firefox. Com o objetivo de aumentar sua popularidade e aumentar a sua participao no mercado, que atualmente de 1,76%, segundo dados do servio de estatsticas StatCounter [26], os desenvolvedores do Opera anunciaram que a verso 12 de seu navegador ter uma melhor acelerao via hardware, indo da mais simples renderizao de pginas de texto, at as mais pesadas animaes. Alm disso, o Opera 12 ter HTML5 e dar suporte a WebGL, o que deixa o Internet Explorer como o nico navegador que no inclui a tecnologia. A acelerao grfica dos navegadores via hardware, alm de uma necessidade para suportar os novos padres da Web, como por exemplo, a tecnologia 3D, uma forma de separar o processamento entre CPU e placa grfica, melhorando o desempenho do computador e at ajudando a economizar energia, com menos processos no CPU, o chip aquece menos e uma menor quantidade de energia desperdiada. A verso completa do Opera 12 estar disponvel no final do ano de 2011.
4.4.4 Safari
Desde o lanamento da WebGL, houve progressos significativos em todos os principais produtos do setor, principalmente em relao ao navegadores, Firefox, Chrome e tambm com o Safari. A comunidade de desenvolvedores da Apple apenas decidiu oficializar os trabalhos com WebGL meses depois do lanamento, oferecendo informaes para seus contribuidores comearem a trabalhar com ela. O navegador da Apple tambm conta com a possibilidade de instalao de extenses, assim como o Firefox. Safari 5.1 tem suporte para WebGL, mas est desativado por padro. Desde outubro de 2009, os nightly builds do WebKit esto sendo liberados com
11
http://www.opera.com/download
40
suporte a WebGL. A verso do navegador com WebGL habilitada encontra-se disponvel para baixar no site12 da WebKit.
4.5 Bibliotecas de desenvolvimento ou frameworks

Para a produo de grficos 3D, WebGL fornece bibliotecas que podem ser aplicadas a qualquer caso de uso. As bibliotecas, ou frameworks, fornecem uma API em cima da WebGL sendo adaptadas a reas especficas, acrescentando assim uma camada de convenincia a WebGL que podem acelerar e simplificar o desenvolvimento. Framework uma abstrao que une cdigos comuns entre vrios projetos de software podendo atingir uma funcionalidade especfica, por configurao, durante a programao de uma aplicao (Cassao, 2011) Mesmo ainda no estando plenamente desenvolvido, j existem frameworks em diversas reas e abordagens especficas, destinados a facilitar a gerao de aplicaes em WebGL. So apresentados em ordem alfabtica alguns frameworks relacionados WebGL.
4.5.1 C3DL
O C3DL [05] (3D Canvas JS Library) uma biblioteca em JavaScript desenvolvida pela rede de pesquisa CATGames que faz uso do elemento canvas, o percussor da WebGL. A Figura 14 apresenta um globo terrestre desenvolvido com C3DL.
Fonte: C3DL, 2011
Fig. 14: Objeto 3D do framework C3DL.

12
http://nightly.webkit.org
41
Essa biblioteca, assim como outros frameworks, trabalha com a manipulao de cenas, contedos matemticos e classes de objetos 3D que faz a API WebGL mais acessvel para os desenvolvedores que desejam produzir contedos 3D no browser sem a necessidade de terem um profundo conhecimento em programao 3D, o que necessrio para seu funcionamento. Sua pgina na Internet contm uma srie de tutoriais e toda a documentao para quem deseja iniciar algum projeto fazendo uso da biblioteca C3DL. O download do framework disponibilizado em seu site oficial na Internet.
4.5.2 CopperLicht
O CopperLicht13 mais uma biblioteca gratuita em JavaScript para a criao de jogos e aplicaes 3D para visualizao diretamente no browser. Desenvolvido pelo Ambiera [01], esse framework faz uso da API WebGL, suportada por navegadores modernos. O CopperLicht vem com um editor 3D, o CopperCube e as caractersticas necessrias para criar jogos em 3D no browser, como manipulao de cores, textura e etc.
Fig. 15: Objeto 3D do framework CopperLicht.
O CopperCube um software pra edio de programas 3D, visualizaes arquitetnicas, simulaes militares (veja Figura 15) e jogos. Esse software converte os modelos 3D criados para serem exibidos em sites atravs de arquivos swf, do Flash ou html, da WebGL. Pra quem no familiarizado com programao e deseja desenvolver aplicaes 3D simples chegando as mais avanadas e sem escrever uma linha de cdigo, o CopperCube
13
http://www.ambiera.com/copperlicht
42
uma opo. O software CopperCube disponibilizado para download no site da Ambiera14.

Fonte: Ambiera, 2011
Fig. 16: Interface do CopperCube.
4.5.3 GLGE
GLGE [11] uma biblioteca de programao em JavaScript destinada a facilitar a utilizao de WebGL, permitindo o uso acelerao do hardware para o desenvolvimento de aplicaes 2D ou 3D sem a necessidade de baixar nenhum plug-in. Suas principais caractersticas so: nevoeiro, sombras com profundidade, reflexes e refraes, animaes e filtros em 2D.
Fig. 17: Objeto 3D do framework GLGE.
O objetivo inicial do GLGE era a criao de jogos em plataforma 2D. Na poca s havia uma biblioteca que serviu como base para seu desenvolvimento, o C3DL, mas no oferecia os recursos necessrios para a produo de jogos. Conforme o tempo passava, mais e mais recursos foram adicionados ao GLGE e a biblioteca rapidamente ultrapassou seus prop14
http://www.ambiera.com/coppercube
43
sitos iniciais e tornou-se mais completa em termos de recursos. Atualmente, o objetivo principal do GLGE ainda o desenvolvimento de jogos. O download gratuito da biblioteca disponibilizado na pgina oficial do GLGE15.
4.5.4 SpiderGL
SpiderGL [25] uma biblioteca de grficos 3D com linguagem JavaScript que adere s especificaes WebGL para renderizao em tempo real. SpiderGL compatvel entre as principais plataformas de desktop (Windows XP/Vista/7 e Linux).
Fonte: SpiderGL, 2011
Fig. 18: Objetos 3D do framework SpiderGL.
Esse framework fornece estruturas de dados e algoritmos para facilitar o uso de WebGL, para definir e manipular formas, para importar modelos 3D em vrios formatos, e para lidar com carregamento de dados assncronos. O framework SpiderGL formado por seis componentes principais. So eles: GL, Math, Space, Mesh, UI e DOM.
GL: Baixo/alto nvel WebGL acessar recursos de renderizao; Math: Matrizes e vetores com funes bsicas, funes de lgebra linear e classes; Space: Estruturas geomtricas e espaciais, classes e algoritmos; Mesh: Conjunto de vrtices com suas informaes de conectividade; UI (User Interface Interface do Usurio): Manipulao de eventos do tipo GLUT. O elemento canvas gera eventos que so interceptados pelo mdulo de UI e expedidos para a objeto registrado; DOM: JS / HTML utilitrios, carregamento de contedo assncrono.
15
http://www.glge.org
44
Fonte: SpiderGL, 2011
Fig. 19: Arquitetura do SpiderGL.
SpiderGL oferece uma interface para desenvolvimento em WebGL, e tambm vrios grficos 3D e recursos de programao geral, que vo desde a lgebra linear at o carregamento de contedo assncrono. Esse framework est disponvel para download em sua pgina16 oficial na Internet.
4.5.5 Three.js
Three.js, assim como as outras bibliotecas, uma interface em JavaScript que busca facilitar o desenvolvimento de objetos 3D tirando proveito da API WebGL. Essa biblioteca foi escolhida para um estudo de caso, onde apresentada com mais detalhes no captulo 6. A Figura 20 mostra um objeto 3D criado com Three.js.
Fig. 20: Objeto 3D do framework Three.js.
16
http://www.spidergl.org
45
Captulo 5
Funes principais em WebGL
Apresenta-se WebGL como uma API de renderizao 3D projetada para a web, derivada do OpenGL ES 2.0. Tem funo de processamento semelhante OpenGL, mas em conjunto com o HTML 5. WebGL estruturada como um ambiente de processamento 3D para o elemento canvas do HTML. Iniciar o desenvolvimento de aplicaes 3D com WebGL no algo simples por vrias razes. Primeiramente, a especificao WebGL simplesmente se refere documentao OpenGL ES e aponta diferenas. Mesmo o desenvolvedor tendo um conhecimento em OpenGL, existem algumas diferenas notveis e indesejveis entre ela e a WebGL. A respeito dos navegadores, pode-se usar qualquer um, desde que esteja habilitado com WebGL, como o Chrome. Tudo deve funcionar em qualquer navegador habilitado com WebGL, caso contrrio deve-se habilitar manualmente. necessrio, antes da criao de um projeto em 3D, verificar se o navegador capaz de exibir uma pgina com WebGL e, para isso, h aplicaes j prontas na Internet justamente com esse intuito. Este captulo apresenta o desenvolvimento de objetos geomtricos, mais especificamente um tringulo e um quadrado, com base no Learning WebGL [18], uma pgina na Internet que apresenta vrios tutoriais de desenvolvimento em WebGL distribudos do mais simples aos mais avanados. O exemplo escolhido faz uso de conceitos especficos relacionados criao de objetos tridimensionais, que integram a API WebGL. O objetivo deste captulo mostrar o funcionamento desses conceitos aplicados ao desenvolvimento de objetos 3D. So explicados apenas trechos do cdigo, destacando as principais funes. O cdigo completo apresentado na pgina 70, no Anexo A.
5.1 Conceitos, Componentes e Interaes

No desenvolvimento em WebGL, de suma importncia tomar-se conhecimento de funes especficas relacionadas criao de objetos tridimensionais. Essas funes relacionam-se ao processo de desenho, colorao, texturizao, renderizao, armazenamento, comprimento e largura, e outras. O conhecimento prvio dessas funes d ao desenvolvedor
46
uma maior clareza quanto estrutura de sua criao. A Figura 21 representa a estrutura do arquivo index.html onde esto presentes as funes em JavaScript.
Fig. 21: Estrutura do arquivo index.html.
5.1.1 Buffer
Um buffer uma regio de memria usada para armazenamento temporrio de dados quando um programa ou dispositivo de hardware necessita de um fluxo ininterrupto de informao. No exemplo apresentado neste captulo, essa regio representada pela funo initBuffers, referindo-se ao espao de memria na placa de vdeo onde sero armazenados os vrtices. Para o exemplo apresentado o buffer est representado pela funo initBuffers.
5.1.2 Matrizes
Em WebGL, no existem funes de matrizes bsicas, portanto, a operao matemtica sobre matrizes deve ser feita pelo implementador. Ao renderizar a cena, h muitas
47
operaes que necessitam de estruturas de matrizes. Para realizar esta operao matemtica consideravelmente difcil e para compreender a execuo de operao matrizes, algum conhecimento de lgebra linear bsica til. Para representar o conceito de matriz, no exemplo apresentado neste captulo, so identificadas as variveis mat4.identity
mat4.perspective e mvMatrix, onde cada uma delas apresenta uma funo especfica. A matriz de perspectiva, mat4.perspective, tem como objetivo fazer as coisas que esto mais distantes parecerem menores. Os movimentos de translaes e rotaes do objeto so realizados em uma matriz, a matriz de identidade, representada por mat4.identity. A matriz usada para apresentar os movimentos realizados por mat4.identity chamada de matriz modelo de exibio, representada pela varivel mvMatrix.
5.1.3 Renderizao
Renderizao o processo de gerao de uma imagem a partir de um modelo utilizando programas de computador. Esse processo pode ser comparado ao ato de tirar uma foto ou o de filmar uma cena na vida real. A renderizao para mdias interativas, como os jogos e simulaes, calculada e exibida em tempo real a taxas entre 20 e 120 quadros por segundo. O objetivo da renderizao em tempo real o de exibir o mximo de informao possvel em um quadro. Dessa forma, a imagem gerada por esse processo no necessariamente representa algo do mundo real, ela apenas pretende exibir algo real o suficiente para que o olho humano possa tolerar. medida que os recursos computacionais avanam o nvel de realismo das imagens renderizadas em tempo real aumenta. Esse processo normalmente auxiliado pela unidade de processamento grfico (GPU) dos computadores. Para realizar a renderizao 3D, possvel usar uma API grfica como WebGL ou pode-se usar um framework, como os apresentados no Captulo 4, que normalmente abstrai muitas operaes de baixo nvel das APIs e permite a gerao mais rpida de cdigo.
5.1.4 Shader
Na WebGL existe um elemento responsvel por explorar toda a funcionalidade de placas de vdeo e transportar essas funes para o desenvolvimento de aplicaes 3D, trata-se do shader. O shader permite atravs do hardware, especificamente a placa de vdeo, a
48
renderizao das imagens graficamente construdas em ambiente 3D, para melhor definio, resoluo e visualizao. Nada acontece em WebGL sem shaders, pois eles pegam os dados e os transformam em pixels na tela. No desenvolvimento do tringulo e quadrado, os shaders esto representados por fragmentShader e vertexShader, apresentadas a seguir:
fragmentShader: O fragmentShader (tambm conhecido como pixelShader) uma funo executada em uma GPU. Com a gerao do vertexShader, os pixels dos objetos so passados para o fragmentShader, que aplicar as propriedades da luz e textura. vertexShader: O vertexShader uma funo, que assim como o fragmentShader, executado na GPU, usada para adicionar efeitos especiais para objetos em um ambiente 3D. O vertexShader executado uma vez para cada vrtice dado ao processador grfico. O objetivo transformar a posio de cada vrtice 3D no espao virtual para a coordenada 2D em que aparece na tela. A funo vertexShader pode manipular propriedades como posio, cor e textura. O vertexShader como os pontos especificados no espao sero distribudos na tela.
5.1.5 Vrtice
WebGL depende de um conceito chamado de vrtice, que definem a posio de como os objetos so desenhados. Um vrtice um nico ponto no espao tridimensional que se expressa por um componente de trs vetores. Cada componente deste vetor corresponde a um eixo no sistema de coordenadas representado como na Figura 22.
Fig. 22: As coordenadas de um objeto 3D.
49
5.2 Descrio do exemplo

O exemplo escolhido para apresentar a relao das funes especficas na criao de objetos 3D encontra-se disponvel na pgina do Learning WebGL na Internet. Trata-se da criao de dois objetos geomtricos, um tringulo e um quadrado para serem exibidos em navegadores. Esse exemplo uma boa introduo aos fundamentos em WebGL, o que dar suporte suficiente para a criao de objetos mais avanados. No site do Learning WebGL, o autor desenvolvedor do exemplo alerta para o nvel de conhecimento em relao a programao e a funes relacionadas a contedos grficos, pois os mesmos so importantes para comear a produzir modelagens 3D para Web. A prxima seo apresenta a explicao das partes mais importantes do cdigo referente ao desenvolvimento dos objetos geomtricos, fazendo referncia s funes particulares relacionadas a modelagens grficas em 3D.
5.3 Tabelas de codificao e explicao

Apresenta-se ao longo desta seo a explicao do cdigo distribuda em tabelas, onde so resumidas em seis passos principais. So eles:
1. Obter o elemento de tela, o canvas. 2. Inicializar a varivel gl para executar o ambiente da OpenGL. 3. Inicializar o vertex shader e fragment shader. Compilar, vincular e carregar o shader para o WebGL. 4. Inicializar os buffers. Ao construir o objeto, h a coordenao dos pontos, textura e cor e estes dados devem ser armazenados nos buffers. Estes dados armazenados so necessrios para o processamento. 5. Desenhar a cena. 6. Definir uma funo webGLStart, que inicia o processamento no arquivo HTML.
A forma mais correta de se comear a desenhar um objeto 3D especificando a rea em HTML, com a altura e largura da rea onde ficaro posicionados os objetos, passando o elemento canvas a varivel trianguloquadrado, isso mostrado na Tabela 1 na linha 3.
50
1 2 3 4 5
<html>; <body>; <canvas id= " trianguloquadrado " style = "border:none;" width = "500" height = "500"></canvas><br/>; <body onload = "webGLStart();">; <head>. Tabela 1: Parte do contedo HTML da pgina especificando o elemento canvas.
Em relao ao HTML, basicamente isso que se precisa, podendo-se adicionar mais linhas de cdigo a pgina. A Tabela 2 apresenta a funo webGLStart, onde WebGL est representado por initGL, na linha 3. Ainda na linha 3, initGL faz uma chamada ao canvas. Alm disso, a funo webGLStart faz uma referncia a outras funes, importantes, como o shader e buffer, representados respectivamente por initShaders (linha 4) e initBuffers (linha 5), cujo conceitos foram j apresentados.
1 2 3 4 5 6 7 8 9 function webGLStart() {; var canvas = document.getElementById("trianguloquadrado"); initGL(canvas); initShaders(); initBuffers(); gl.clearColor(0.0, 0.0, 0.0, 3.0); gl.enable(gl.DEPTH_TEST); drawScene(); }. Tabela 2: Funo webGLStart.
Em webGLStart (Tabela 2) so especificadas as principais funes presentes na criao de um objeto WebGL. A funo initGL (linha 3) responsvel por trazer o elemento canvas para o WebGL, a funo initShaders (linha 4) responsvel pela modelao dos desenhos e a funo initBuffers (linha 5) pelo armazenamento dos dados referentes ao desenho. Ainda em webGLStart feita uma configurao bsica para a tela onde ser exibido o objeto, dizendo que quando a tela for limpa, deve-se transform-la em preto, atravs do comando gl.clearColor (linha 6). A varivel gl.clearColor estruturada com um valor RGBA (Red, Green, Blue, Alpha) que define cada cor para cada pixel do objeto 3D. Seguindo com as chamadas as funes presentes em webGLStart, tem-se ainda initBuffers, apresentada na Tabela 2. Nessa funo so declaradas duas variveis globais, triangleVertexPositionBuffer, linha 1 e squareVertexPositionBuffer, na linha 2.
51
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
var triangleVertexPositionBuffer; var squareVertexPositionBuffer; function initBuffers() {; triangleVertexPositionBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer); var vertices = [; 0.0, 1.0, 0.0,; 0.0,; 0.0; -1.0, -1.0, 1.0, -1.0, ]; gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); triangleVertexPositionBuffer.itemSize = 3; triangleVertexPositionBuffer.numItems = 3; squareVertexPositionBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer); vertices = [; 1.0, -1.0, 1.0, 1.0, 0.0,; 0.0,; 0.0,; 0.0;
1.0, -1.0, -1.0, -1.0, ];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); squareVertexPositionBuffer.itemSize = 3; squareVertexPositionBuffer.numItems = 4; }. Tabela 3: Funo initBuffers.
A varivel triangleVertexPositionBuffer (linha 1) especfica para o tringulo e squareVertexPositionBuffer (linha 2) especfica para o quadrado. Essas variveis referem-se posio dos vrtices do tringulo e quadrado para serem armazenados no buffer. Na funo initBuffers, so definidas as posies dos vrtices. Esses vrtices esto distribudos nos pontos de um tringulo issceles com seu centro em (0,0,0). Nas linhas 5 e 22 dois objetos do tipo Float32Array so criados, para que a WebGL os utilize para ocupar o espao do buffer do triangleVertexPositionBuffer e squareVertexPositionBuffer. Em initBuffers so definidas duas novas propriedades, o itemSize, nas linhas 3 e 23 e numItens, nas linhas 4 e 24. O numItens representa, no caso do tringulo, trs diferentes posies dos vrtices, cada um dos quais composto por trs nmeros (itemSize). O mesmo
52
feito para o quadrado. O quadrado tem quatro posies de vrtices, em vez de trs, como no tringulo, e assim a matriz maior e o numItems diferente. Com a explicao da funo initBuffers finalizada, observa-se agora a funo drawScene, na Tabela 4. Na linha 2, o tamanho da tela, com largura e altura, representadas respectivamente por gl.viewportWidth, gl.viewportHeight, onde ficar localizado o objeto definido usando o mtodo gl.viewport. Em seguida, na linha 3, a tela limpa em preparao para o desenho, atravs do mtodo gl.clear.
1 2 3 4 5 6 7 8 9 function drawScene() {; gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); mat4.perspective(45,gl.viewportWidth/gl.viewportHeight, 0.1,100.0,pMatrix); mat4.identity(mvMatrix); mat4.translate(mvMatrix, [-1.5, 0.0, -7.0]); gl.bindBuffer(gl.ARRAY_BUFFER,triangleVertexPositionBuffer); setMatrixUniforms(); gl.drawArrays(gl.TRIANGLES, 0, triangleVertexPositionBuffer.numItems). Tabela 4: Funo drawScene.
Continuando, so especificadas as matrizes que proporcionaro como o usurio ir visualizar a cena. Em mat4.perspective, como mostra a linha 4, dito que o campo de viso de 45 e que a cena ser visualizada de maneira mais prxima do que 0,1 unidades e mais distante que 100 unidades. Seguindo com o cdigo, a linha 6 mostra o comando responsvel por apresentar o tringulo do lado esquerdo da tela. Move-se o tringulo 1,5 unidades para a esquerda, isto , no sentido negativo ao longo do eixo X, e sete unidades na cena, isto , se afasta do observador, no sentido negativo ao longo do eixo Z. Os passos para o desenho do quadrado so os mesmos para o tringulo, no havendo a necessidade de apresent-los, pois o cdigo completo est presente em Anexo, na pgina 69 desta monografia. Depois de ser apresentado initBuffers e drawScene, nota-se tambm uma referncia a funo initGL em webGLStart, na Tabela 2, j apresentada. Em initGL (Tabela 5), caso o navegador usado para visualizao do objeto que est sendo construdo no for compatvel com WebGL, uma mensagem informar que no possvel a inicializao da WebGL, como mostra a linha 10. Uma vez feito isso, o ambiente da WebGL est configurado
53
e o objeto pronto para ser visualizado no navegador.

1 2 3 4 5 6 7 8 9 10 11 12 var gl; function initGL(canvas) {; try {; gl = canvas.getContext("experimentao-webgl"); gl.viewportWidth = canvas.width; gl.viewportHeight = canvas.height; } catch (e) {; }; if (!gl) {; alert("No foi possvel inicializar WebGL"); }; }. Tabela 5: Funo initGL.
Na Tabela 6, que apresenta a funo initShaders, um mtodo getShader usado para obter dois elementos, o fragmentShader e o vertexShader, e depois atribu-los para WebGL, esse representado por gl, apresentados nas linhas 3 e 4, respectivamente. Ainda nas linhas 3 e 4, so passados os identificadores de fragmentShader e vertexShader, representados respectivamente por shader-fs e shader-vs.
1 2 3 4 5 6 7 8 9 10 11 12 var shaderProgram; function initShaders() {; var fragmentShader = getShader(gl, "shader-fs"); var vertexShader = getShader(gl, "shader-vs"); shaderProgram = gl.createProgram(); gl.attachShader(shaderProgram, vertexShader); gl.attachShader(shaderProgram, fragmentShader); gl.linkProgram(shaderProgram); if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {; alert("No foi possvel inicializar WebGL"); }; gl.useProgram(shaderProgram); Tabela 6: Funo initShaders.
Os shaderVertex e shaderFragment no so escritos em JavaScript, embora a ascendncia da linguagem seja claramente similar. Na verdade, eles so escritos em uma
54
linguagem de chamada de GLSL17 (OpenGL Shading Language) que basicamente linguagem C com outros tipos de dados e funes. No ser necessrio entrar em detalhes a respeito de GLSL, apenas entender o funcionamento dos dois shaders. O shader-fs, apresentado na Tabela 7 na linha 1, tem estruturado o cdigo obrigatrio relacionado placa grfica, est com nmeros de ponto flutuante (linha 3) e simplesmente especifica que tudo o que desenhado ser em branco (linha 6). O segundo shader, o shader-vs, um pouco mais interessante. Associado a ele, h duas variveis do tipo uniform que chamam uMVMatrix e uPMatrix, linhas 11 e 12, respectivamente. Variveis do tipo uniform so teis, pois elas podem ser acessadas de fora do shader. Agora, o shader chamado para cada vrtice, e o vrtice passado para o aVertexPosition (linha 10). O pequeno pedao de cdigo void main, na linha 5, apenas multiplica a posio do uPMatrix com uMVMatrix, e empurra para fora o resultado como a posio final do vrtice, mostrado na linha 14. Assim, webGLStart chama initShaders, que usou getShader para carregar os shaderVertex e shaderFragment de scripts na pgina Web, de modo que WebGL renderize a cena.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <script id="shader-fs" type="x-shader/x-fragment">; #ifdef GL_ES; precision highp float; #endif; void main(void) {; gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); }; </script>; <script id = "shader-vs" type = "x-shader/x-vertex">; attribute vec3 aVertexPosition; uniform mat4 uMVMatrix; uniform mat4 uPMatrix; void main(void) {; gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0); }; </script>. Tabela 7: O shader-fs e shader-vs.
17
http:// www.opengl.org/documentation/glsl
55
5.4 Resultados
O exemplo apresentado neste captulo teve como objetivo explicar funes necessrias quando se deseja construir um objeto 3D em WebGL. Mesmo o exemplo aqui apresentado no sendo um objeto 3D, ele apresenta as mesmas funes, essas essenciais e importantes para se construir algo colorido e com movimento, ou seja, devidamente modelos tridimensionais com WebGL. Percebe-se a necessidade, antes de tudo de se conhecer previamente conceitos relacionados a contedos grficos, como renderizao, por exemplo. A Figura 23 mostra o resultado do exemplo aqui apresentado, quando exibido em um navegador compatvel com WebGL. O efeito desejado foi concretizado. O navegador para exibio o Mozilla Firefox 4.0 Beta 10, escolhido para os testes e construo das modelagens.
Fig. 23: Resultado exibido executado em um navegador.
No prximo Captulo so apresentadas prticas de modelagens fazendo uso de um framework em WebGL, o Three.js, que contempla todas as funes apresentadas at aqui. O cdigo completo referente aos trechos apresentados anteriormente est presente na pgina 70, no Anexo A desta monografia.
56
Captulo 6
Desenvolvimento de objetos 3D com Three.js
Nesse captulo discutido o produto final do trabalho e tambm os resultados obtidos com sua construo, fazendo uso de um framework em WebGL. No Captulo 4, foram listadas algumas das inmeras engines (tambm conhecidas como frameworks) destinadas a facilitar o desenvolvimento de objetos tridimensionais para a web fazendo proveito da tecnologia WebGL. Entre esses frameworks, est o Three.js [30], que como os outros, visa facilitar o desenvolvimento de projetos 3D. Durante o perodo de pesquisas, foram surgindo a todo o momento, vrios frameworks em WebGL, cada um com suas particularidades, especialidades e caractersticas. Um em especial me chamou ateno. Trata-se do framework Three.js. Com esse framework consegue-se criar com facilidade cmeras, objetos, materiais, cenas de iluminao e muito mais. Isso tudo podendo optar como a cena ser desenhada, escolhendo entre Canvas, WebGL ou SVG. A biblioteca completa para download disponibilizada no site de diretrio de arquivos, o Github18, e contm uma srie de exemplos prontos, a fim de mostrarem as grandes possibilidades de desenvolvimento, que vo desde exemplos simples aos mais avanados. Quando feito o download da biblioteca, o usurio se depara com vrias pastas e subpastas. Uma dessas pastas a pasta examples (veja Figura 24), onde so disponibilizados os exemplos criados a partir de plataformas como a WebGL, SVG e propriamente Three.js.
Fig. 24: Pasta examples do Three.js.

18
http://www.github.com/mrdoob/three.js
57
Ainda na biblioteca Three.js so encontradas as plataformas suportadas, como WebGL, SVG e Three.js distribudas na pasta build dentro de uma outra pasta, custom. Three.js fica localizada fora da pasta custom, mas dentro da pasta build, como mostra a Figura 25.
Fig. 25: Pasta custom do Three.js.
Ao iniciar o projeto deve-se escolher, entre as disponveis na biblioteca Three.js, a plataforma que ser utilizada para a implementao no projeto, pois ela d suporte a vrias, como SVG e WebGL. Para esta primeira prtica de modelagem, escolhe-se o Three.js, que contempla funes em WebGL, apresentadas no captulo anterior. Ento, neste primeiro trabalho, apresenta-se de forma minuciosa, a criao de uma forma simples, uma esfera. Essa esfera no tem movimentos, apenas esttica. Antes de tudo, deve-se destacar a escolha do navegador para a exibio da cena em WebGL. Deve-se escolher um com WebGL habilitada por padro, ou fazer isso manualmente. Para a execuo das prticas apresentadas a seguir, foi escolhido o navegador Firefox 4.0 Beta 10, que j vem com WebGL habilitada nativamente.
6.1 Desenvolvimento de uma esfera sem movimento

Neste primeiro projeto, ser apresentado um cdigo simples, relacionado ao desenvolvimento de uma esfera em Three.js. Para a edio da pgina em HTML, foi utilizado o
58
editor de texto e cdigos fonte Notepad++19, mas poderia ser feito com qualquer outro similar, como mostra a Figura 26.
Fig. 26: Notepad++ em execuo.
A Tabela 8 apresenta a configurao simples feita de toda a pgina em HTML, em que destacado o local, onde ser especificada a plataforma escolhida para o desenvolvimento da esfera, no caso Three.js, linha 4. Deve-se haver uma ligao obrigatria da biblioteca Three.js que se deseja trabalhar, com o cdigo para a implementao do projeto.
1 2 3 4 5 6 7 8 <html>; <head>; <title>Esfera</title>; <script src ="libs/Three.js"> </script>; </head>; <body>; <div id="meuobjeto"></div> ; </script>. Tabela 8: Primeiras linhas do cdigo em HTML.
H uma srie de exemplos avanados presentes em Three.js, mas para compreender como as funes especficas funcionam, deve-se comear com um projeto simples. Durante o desenvolvimento, esta implementao foi adaptada e simplificada de forma a torn-la mais compreensvel. Inicialmente, a definio e configurao de algumas variveis devem ser estabelecidas. Variveis principais, como esfera e meuobjeto, foram definidas na lngua por-
19
http:// notepad-plus-plus.org
59
tuguesa, a fim de tornar mais compreensvel as funes quando referenciarem essas variveis, e as demais foram referidas na lngua inglesa.
1 2 3 4 var esfera; var width = 1000, height = 500; var angle = 45, aspect = width/height, near = 0.1, far = 10000; esfera = document.getElementById("meuobjeto"). Tabela 9: Variveis globais.
Inicialmente, a definio e configurao de algumas variveis devem ser estabelecidas, apresentadas na Tabela 9. As variveis apresentadas, definem a largura (linha 2), altura (linha 2) e os detalhes da cmera (linha 3) da esfera. Na linha 03, observa-se os parmetros passados para representar os detalhes da cmera, near e far, que representam respectivamente a proximidade e o distanciamento. Bem no incio do cdigo HTML (Tabela 8, linha 7), foi criado um elemento div com o id de meuobjeto, assim, a varivel esfera o obtm, atravs do comando na linha 4, na Tabela 9. A Tabela 10 apresenta os cdigos relacionados ao processo de renderizao, atravs da criao da varivel renderer, na linha 1.
1 2 3 4 5 6 var renderer = new THREE.WebGLRenderer(); var camera = new THREE.Camera(angle, aspect, near, far); var scene = new THREE.Scene(); camera.position.z = 200; renderer.setSize(width, height); var material = new THREE.MeshBasicMaterial({color: 0xCC0000}). Tabela 10: Especificao da renderizao e aplicao da cor a esfera.
Em relao colorao da esfera, precisa-se criar um material para usar com a forma geomtrica. Neste caso ser usado o MeshBasicMaterial (linha 6), que vai aplicar uma cor vermelha plana a esfera. comum encontrar exemplos de modelagens 3D na Internet representados como formas geomtricas. E no por acaso, pois uma forma geomtrica rene elementos especficos que definem tamanho, largura, centro, raio, vrtices, e outros. Para este caso, esses elementos esto representados por radius, segments e rings, cada um com seus valores determinados, como mostra a Tabela 11, na linha 1.
60
1 2 3
var radius = 50, segments = 16, rings = 16; var mesh = new THREE.Mesh(new THREE.SphereGeometry(radius, segments, rings), material); meuobjeto.appendChild(renderer.domElement). Tabela 11: Variveis geomtricas.
A linha 3 da Tabela 11 mostra a vinculao da cena criada ao elemento DOM (Document Object Model). O DOM essencialmente liga pginas Web a scripts ou linguagens de programao (Mozilla Developer Network, 2011).
6.2 Resultados
Executado no navegador compatvel com WebGL, para este caso foi utilizado o navegador Firefox, o que se v uma simples esfera de cor vermelha. Nada muito avanado, mas o suficiente para perceber o nvel de codificao presente em WebGL aplicado ao Three.js. O cdigo completo, com referncia as funes mais importantes a esta prtica de modelagem, est presente no Anexo B, na pgina 73.
Fig. 27: Esfera criada a partir da biblioteca Three.js, visualizada no navegador Firefox.
6.3 Desenvolvimento de um cubo 3D interativo

Para esta segunda prtica de modelagem, buscou-se o desenvolvimento de um cubo 3D, onde se pode interagir com ele atravs de movimentos com o mouse. Alm das funes j contempladas na ltima prtica de modelagem, esse cubo ter outras funes, como
61
por exemplo, funes relacionadas animao que ir desencadear os movimento e interao atravs do mouse. A Figura 28 apresenta a estrutura do arquivo em forma de diagramas, onde entre os scripts, so declaradas e armazenadas as funes referentes ao desenvolvimento do cubo em JavaScript.
Fig. 28: Estrutura do arquivo index.html.
Como mostra a Tabela 12, nas primeiras linhas do cdigo, so especificadas as funes extras e a biblioteca principal para a criao do cubo 3D. Assim como no desenvolvimento da esfera, o cubo tambm ser criado com o framework Three.js, acompanhado de funes extras. Assim como os outros exemplos apresentados, todo o cdigo apresentado em Anexo na pgina 74.
62
1 2 3 4 5 6 7 8
<html> <head> <title>Cubo</title> <script src="libs/yepnope.1.0.1-min.js"></script> <script src="libs/RequestAnimationFrame.js"></script> <script src="libs/modernizr-1.7.min.js"></script> <script src="libs/Three.js"></script> </head> Tabela 12: Declarao das funes extras do Three.js.
A declarao das variveis globais apresentada na Tabela 13. So declaradas as variveis camera, cena, renderer e cubo na linha 1, e outras com valores passados, como targetRotationX (linha 2) e targetRotationY (linha 3), cujas utilizaes sero apresentadas ao longo deste captulo.
1 2 3 4 5 6 7 8 9 10 11 12 13 var camera, cena, renderer, cubo; var targetRotationX = 0; var targetRotationY = 0; var targetRotationOnMouseDownX = 0; var targetRotationOnMouseDownY = 0; var mouseX = 0; var mouseY = 0; var mouseXOnMouseDown = 0; var mouseYOnMouseDown = 0; var canvasWidth = 1000; var canvasHeight = 500; var canvasHalfX = canvasWidth / 2; var canvasHalfY = canvasHeight / 2. Tabela 13: Variveis globais.
A interao com o cubo ser atravs de movimentos com o mouse. Para isso acontecer, existem funes especficas e algumas variveis so passadas antes de tudo. Nesta modelagem, o diferencial a possibilidade de interao com o mouse, por isso no ser necessrio entrar em detalhes em relao a outras funes, pois as mesmas j foram apresentadas em captulos anteriores. As variveis targetRotationX (linha 2) e targetRotationY (linha 3) sero respectivamente, os alvos na rotao no eixo X e Y e
63
targetRotationOnMouseDownX (linha 4) e targetRotationOnMouseDownY (linha 5), respectivamente sero alvos da rotao no eixo X e Y quando o mouse estiver pressionado. Duas funes principais so declaradas, init (Tabela 14) e animate (Tabela 15). Dentro da funo init sero definidas as propriedades de renderizao, cmera e cores. O cubo formado por seis faces, e por esta razo, criado um vetor com seis posies, que representam as faces do cubo e adiciona cores a essas faces, como mostra a linha 8 da Tabela 14. Foi aplicado um mtodo randmico, onde proporcionar cores diferentes a cada face do cubo quando este for exibido.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 function init () {; var container = document.getElementById("meuobjeto"); camera = new THREE.Camera(70, canvasWidth / canvasHeight, 1, 1000); camera.position.y = 150; camera.position.z = 500; camera.target.position.y = 150; var arrayCor, materiais = new Array(); arrayCor = [Math.random() * 0xffffff0, Math.random() * 0xffffff0, Math.random() * 0xffffff0, Math.random() * 0xffffff0, Math.random() * 0xffffff0, Math.random() * 0xffffff0]; for (var i = 0; i < 6; i++) {; materiais.push( [new THREE.MeshLambertMaterial( { color: arrayCor[i] } ) ] ); }; var mesh = new THREE.Cube(300, 300, 300, 1, 1, 1, materiais); cubo = new THREE.Mesh(mesh, new THREE.MeshFaceMaterial() ); cubo.position.y = 150; cena = new THREE.Scene(); cena.addObject(cubo); renderer = new THREE.CanvasRenderer(); renderer.setSize(canvasWidth, canvasHeight); container.appendChild( renderer.domElement ); container.addEventListener('mousedown', onMouseDown, false); }. Tabela 14: Funo init.
Uma parte interessante do cdigo relaciona-se aos mtodos que levam o usurio a interagir com o objeto tridimensional atravs de movimentos com o mouse. Isso possvel devido a uma lib, ou conjunto de funes, que proporciona esses resultados, a lib RequestAnimationFrame.js.
64
1 2 3 4
function animate () {; requestAnimationFrame(animate); render(); }. Tabela 15: Funo animate.
As funes onMouseDown, onMouseMove, onMouseUp e onMouseOut permitem a movimentao do cubo em posies diferentes sobre a tela. Na Tabela 16, quando a funo onMouseDown for chamada, ela adicionar os eventos que tornaro false as outras posies, e s ela ser executada, e assim, define as posies de X e Y quando o mouse estiver clicado. Isso mostrado nas linhas 3, 4 e 5.
1 2 3 4 5 6 7 8 9 10 function onMouseDown (event) {; event.preventDefault(); document.addEventListener('mousemove', onMouseMove, false); document.addEventListener('mouseup', onMouseUp, false); document.addEventListener('mouseout', onMouseOut, false); mouseXOnMouseDown = event.clientX - canvasHalfX; mouseYOnMouseDown = event.clientY - canvasHalfY; targetRotationOnMouseDownX = targetRotationX; targetRotationOnMouseDownY = targetRotationY; }. Tabela 16: Funo onMouseDown.
A funo onMouseMove (Tabela 17) responsvel por reconhecer os movimentos do mouse sobre o cubo. Define-se as posies do mouse no eixo X e Y quando estiver se movendo, como mostra as linhas 4 e 5, funes targetRotationX e targetRotationY.
1 2 3 4 5 6 function onMouseMove (event) {; mouseX = event.clientX - canvasHalfX; mouseY = event.clientY - canvasHalfY; targetRotationX mouseXOnMouseDown) targetRotationY mouseYOnMouseDown) }. = targetRotationOnMouseDownX * 0.02; = targetRotationOnMouseDownY * 0.02; Tabela 17: Funo onMouseMove. + + (mouseX (mouseY -
65
J em onMouseUp (Tabela 18), sero removidos os eventos quando o mouse no estiver clicado, atravs do comando document.removeEventListener, nas linhas 2 e 3.
1 2 3 4 5 function onMouseUp (event) {; document.removeEventListener('mousemove', onMouseMove, false); document.removeEventListener('mouseup', onMouseUp, false); dmateriaisoveEventListener('mouseout', onMouseOut, false); }. Tabela 18: Funo onMouseUp.
Em onMouseOut (Tabela 19), eventos sero removidos no momento em que o mouse sair da tela. Assim como na funo onMouseUp, o comando que faz a remoo dos eventos o document.removeEventListener, mostrados nas linhas 2,3 e 4.
1 2 3 4 5 function onMouseOut (event) {; document.removeEventListener('mousemove', onMouseMove, false); document.removeEventListener('mouseup', onMouseUp, false); document.removeEventListener('mouseout', onMouseOut, false); }. Tabela 19: Funo onMouseOut.
6.4 Resultados
Para o desenvolvimento do cubo e da esfera, a biblioteca Three.js proporcionou mais agilidade e desempenho nos resultados. O grau de dificuldade encontrado durante essas prticas de modelagens foi relacionado programao em JavaScript e a termos relacionados a contedos grficos, muito comum, pois WebGL trata-se de sintaxe da OpenGL ES e tudo isso era algo novo at ento. Ainda, durante o desenvolvimento das prticas de modelagens, foram percebidas as grandes possibilidades em 3D que a WebGL proporciona e isso reforado atravs dos exemplos j prontos encontrados na biblioteca quando feito o seu download. Mesmo estando ainda em fase de desenvolvimento e aliada a frameworks, como o Three.js, essas possibilidades s aumentam e tornam a WebGL como mais uma opo, ao lado do Flash, Unity, SVG e Silverlight, aos desenvolvedores. Ao final de tudo, quando executado em um navegador compatvel com WebGL, exibido um cubo colorido e interativo, cujas
66
cores de suas faces mudam a medida que executado. Realmente algo em 3D, como mostrado na Figura 29.
Fig. 29: Cubo 3D criado a partir da biblioteca Three.js.
67
Captulo 7
Consideraes Finais
Sobre este trabalho, h aspectos que devem ser esclarecidos, que vo desde todo o processo de pesquisa at o desenvolvimento das pequenas prticas de modelagens. A ausncia de bibliografias especficas levou que grande parte do desenvolvimento desta monografia se baseasse na pesquisa online. Com um tempo considerado curto, em referncia ao perodo de criao da monografia, o desejo seria conhecer e explorar outros frameworks, ou mesmo, pesquisar ainda mais a respeito das diferentes tecnologias 3D pra Web. Apesar destas limitaes, considera-se que os objetivos iniciais foram gradativamente atingidos. Hoje, a Web no est como antes, quando havia muitas dificuldades, sobretudo em termos de acessibilidade, interatividade e usabilidade. E a tecnologia 3D veio pra proporcionar esses recursos e muito outros. A consequncia disto que, atualmente, a Web est cada vez mais acessvel e apresenta melhores qualidades, e isso visvel em muitas das reas da aplicao 3D, como o comercio eletrnico, jogos pra computador, cinema, televiso, jogos online, e cresce num ritmo muito acelerado. Este trabalho descreveu e estudou o uso de WebGL, para a aplicao de objetos 3D na Web. A recente introduo da API WebGL para alavancar o poder de aceleradores grficos 3D em navegadores Web abre a possibilidade de desenvolver aplicaes grficas avanadas sem a necessidade de um plug-in. Existem vrios contextos em que essa nova tecnologia pode ser explorada para melhorar a experincia do usurio e fruio de dados, como aplicaes de comrcio eletrnico, jogos e a Web. O surgimento do WebGL e os esforos de outras tecnologias semelhantes, como o Flash, ampliaram os horizontes da tecnologia 3D na Web. Uma das vantagens do WebGL por essa tecnologia ser open-source (cdigo aberto), o que amplia os horizontes de desenvolvimento. Isso pode ser representado pela expressiva presena de frameworks presentes na Web, alguns j apresentados nesta monografia. Com um cdigo aberto, os utilizadores provero de uma tecnologia com maiores possibilidades de criaes, e assim, mais concorrncia em se fazer algo inovador e diferente. O framework Three.js, escolhido para as prticas de modelagens, d ao desenvolvedor as ferramentas necessrias para a produo de contedos tridimensionais para visualizao em navegadores. Os conhecimentos adquiridos ao longo desses anos de graduao contriburam de certa forma, mas no o suficiente para a criao dos objetos WebGL, visto que a
68
mesma exigia conhecimentos em programao para Web e em relao a contedos grficos, cujos contedos no integram a grade curricular do curso. O aprendizado veio com as pesquisas e prticas. Em relao s prticas, os frameworks foram aliados, pois atravs de seus exemplos, especialmente do Three.js, ficaram mais fceis a criao de outros, contemplando assim, a parte prtica da monografia. Com exemplos dos mais simples aos mais avanados, o usurio tem noo do que a tecnologia 3D para navegadores. Esse framework, juntamente com os outros, como o SpiderGL e GLGE, s reforam a importncia de se trabalhar com uma ferramenta de cdigo aberto. Em resumo, aguarda-se ansiosamente para que futuramente se possa visualizar de uma forma automtica um objeto 3D na Web, sem que haja a necessidade de se instalar no navegador pequenos programas (plug-ins) em funo da ferramenta usada, WebGL, passando assim a desfrutar cada vez mais desta tecnologia.
69
Anexo A
Cdigo-fonte referente ao Captulo 5
<html> <head> <title>Tringulo e Quadrado</title> <script type="text/JavaScript" sac = "glMatrix-0.9.5.min.js"></script> <script id="shader-fs" type="x-shader/x-fragment"> #ifdef GL_ES precision highp float; #endif void main(void) { gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); } </script> <script id = "shader-vs" type = "x-shader/x-vertex"> attribute vec3 aVertexPosition; uniform mat4 uMVMatrix; uniform mat4 uPMatrix; void main(void) { gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0); } </script> <script type="text/javascript"> var gl; function initGL(canvas) { try { gl = canvas.getContext("experimentao-webgl"); gl.viewportWidth = canvas.width; gl.viewportHeight = canvas.height; } catch (e) { } if (!gl) { alert("No foi possvel inicializar WebGL"); } } function getShader(gl, id) { var shaderScript = document.getElementById(id); if (!shaderScript) { return null; } var str = ""; var k = shaderScript.firstChild; while (k) { if (k.nodeType == 3) { str += k.textContent; } k = k.nextSibling; } var shader; if (shaderScript.type == "x-shader/x-fragment") { shader = gl.createShader(gl.FRAGMENT_SHADER); } else if (shaderScript.type == "x-shader/x-vertex") { shader = gl.createShader(gl.VERTEX_SHADER);
70
} else { return null; } gl.shaderSource(shader, str); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { alert(gl.getShaderInfoLog(shader)); return null; } return shader; } var shaderProgram; function initShaders() { var fragmentShader = getShader(gl, "shader-fs"); var vertexShader = getShader(gl, "shader-vs"); shaderProgram = gl.createProgram(); gl.attachShader(shaderProgram, vertexShader); gl.attachShader(shaderProgram, fragmentShader); gl.linkProgram(shaderProgram); if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { alert("No foi possvel inicializar shaders"); } gl.useProgram(shaderProgram); shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition"); gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute); shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix"); shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix"); } var mvMatrix = mat4.create(); var pMatrix = mat4.create(); function setMatrixUniforms() { gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix); gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix); } var triangleVertexPositionBuffer; var squareVertexPositionBuffer; function initBuffers() { triangleVertexPositionBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer); var vertices = [ 0.0, 1.0, 0.0, -1.0, -1.0, 0.0, 1.0, -1.0, 0.0 ]; gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); triangleVertexPositionBuffer.itemSize = 3; triangleVertexPositionBuffer.numItems = 3; squareVertexPositionBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer); vertices = [ 1.0, 1.0, 0.0, -1.0, 1.0, 0.0, 1.0, -1.0, 0.0, -1.0, -1.0, 0.0 ];
71
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); squareVertexPositionBuffer.itemSize = 3; squareVertexPositionBuffer.numItems = 4; } function drawScene() { gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix); mat4.identity(mvMatrix); mat4.translate(mvMatrix, [-1.5, 0.0, -7.0]); gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer); gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0); setMatrixUniforms(); gl.drawArrays(gl.TRIANGLES, 0, triangleVertexPositionBuffer.numItems); mat4.translate(mvMatrix, [3.0, 0.0, 0.0]); gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer); gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, squareVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0); setMatrixUniforms(); gl.drawArrays(gl.TRIANGLE_STRIP, 0, squareVertexPositionBuffer.numItems); } function webGLStart() { var canvas = document.getElementById("trianguloquadrado"); initGL(canvas); initShaders(); initBuffers(); gl.clearColor(0.0, 0.0, 0.0, 3.0); gl.enable(gl.DEPTH_TEST); drawScene(); } </script> </head> <body onload="webGLStart();"> <canvas id = "trianguloquadrado" width="500" height="500"> </canvas><br/> </body> </html>
72
Anexo B
<html> <head> <title>Esfera</title> <script src = "libs/Three.js"> </script> </head> <body> <div id="meuobjeto"></div> <script> var esfera; var width = 1000, height = 500; var angle = 45, aspect = width/height, near = 0.1, far = 10000; esfera = document.getElementById("meuobjeto"); var renderer = new THREE.WebGLRenderer(); var camera = new THREE.Camera(angle, aspect, near, far); var scene = new THREE.Scene(); camera.position.z = 200; renderer.setSize(width,height); var material = new THREE.MeshBasicMaterial({color: 0xCC0000}); var radius = 50, segments = 16, rings = 16; var mesh = new THREE.Mesh( new THREE.SphereGeometry( radius, segments, rings ), material ); scene.addChild(mesh); meuobjeto.appendChild(renderer.domElement); var pointLight = new THREE.PointLight( 0xFFFFFF ); pointLight.position.x = 50; pointLight.position.y = 50; pointLight.position.z = 130; scene.addLight(pointLight); renderer.render(scene, camera); </script> </body> </html>
73
Anexo C
<html> <head> <title>Cubo 3D</title> <script src="js/libs/modernizr-1.7.min.js"></script> </head> <script type="text/javascript"> var mouseX = 0; var mouseY = 0; var mouseXOnMouseDown = 0; var mouseYOnMouseDown = 0; var canvasWidth = 1000; var canvasHeight = 500; var canvasHalfX = canvasWidth / 2; var canvasHalfY = canvasHeight / 2; init(); animate(); function init () { var container = document.getElementById("canvas-container"); // criar a camera e define seu posicionamento camera = new THREE.Camera(70, canvasWidth / canvasHeight, 1, 1000); camera.position.y = 150; camera.position.z = 500; camera.target.position.y = 150; // armazena as cores das faces var arrayCor, materiais = new Array(); arrayCor = [0x1089BC, 0x1089BC, 0xc8e3f5, 0xc8e3f5, 0xF14A29, 0xF14A29]; // aplica as cores em cada uma das faces for (var i = 0; i < 6; i++) { materiais.push( [new THREE.MeshLambertMaterial( { color: arrayCor[i] } ) ] ); } // mesh um grafo tridimensional var mesh = new THREE.Cube(300, 300, 300, 1, 1, 1, materiais); // cria o cubo e seta os materiais relativos a ele cubo = new THREE.Mesh(mesh, new THREE.MeshFaceMaterial() ); cubo.position.y = 150; // cria a cena e adiciona o cubo nela cena = new THREE.Scene(); cena.addObject(cubo); // cria o renderizador renderer = new THREE.CanvasRenderer(); renderer.setSize(canvasWidth, canvasHeight); container.appendChild( renderer.domElement ); // adiciona-se os eventos no container container.addEventListener('mousedown', onMouseDown, false); } function onMouseDown (event) { event.preventDefault(); // adiciona os eventos
74
document.addEventListener('mousemove', onMouseMove, false); document.addEventListener('mouseup', onMouseUp, false); document.addEventListener('mouseout', onMouseOut, false); // posicao do mouse no eixo X e Y quando o mouse estiver clicado mouseXOnMouseDown = event.clientX - canvasHalfX; mouseYOnMouseDown = event.clientY - canvasHalfY; targetRotationOnMouseDownX = targetRotationX; targetRotationOnMouseDownY = targetRotationY; } function onMouseMove (event) { // posicao do mouse no eixo X e Y quando o mouse estiver movendo mouseX = event.clientX - canvasHalfX; mouseY = event.clientY - canvasHalfY; targetRotationX = targetRotationOnMouseDownX + (mouseX mouseXOnMouseDown) * 0.02; targetRotationY = targetRotationOnMouseDownY + (mouseY mouseYOnMouseDown) * 0.02; } function onMouseUp (event) { // removendo os eventos quando o mouse nao estiver clicado document.removeEventListener('mousemove', onMouseMove, false); document.removeEventListener('mouseup', onMouseUp, false); dmateriaisoveEventListener('mouseout', onMouseOut, false); } function onMouseOut (event) { // removendo os eventos quando o mouse deixar a tela document.removeEventListener('mousemove', onMouseMove, false); document.removeEventListener('mouseup', onMouseUp, false); document.removeEventListener('mouseout', onMouseOut, false); } function animate () { requestAnimationFrame(animate); render(); } function render () { cubo.rotation.y += (targetRotationX - cubo.rotation.y) * 0.05; cubo.rotation.x += (targetRotationY - cubo.rotation.x) * 0.05; renderer.render(cena, camera); } </script> <body> <script type="text/javascript" src="js/yepnope.1.0.1 min.js"> </script> <script> yepnope({ test: Modernizr.canvas, yep: ['build/Three.js', 'js/RequestAnimationFrame.js'], nope: 'css/canvas-polyfill.css' }); </script> </body> </html>
75
Referncias
[01] Ambiera. Disponvel em: <http://www.ambiera.com>. Acesso em: 16 ago 2011. [02] Ancorador. Disponvel em: <http://www.ancorador.com.br/jogos/a-evolucao-dos-jogos3d-online>. Acesso em: 05 out 2011. [03] CONCI, A; AZEVEDO, E. Computao Grfica: Gerao de Imagens. Rio de Janeiro: Campus, 2003. [04] Criar Web. Disponvel em: <http://www.criarweb.com/artigos/282.php>. Acesso em: 07 out 2011. [05] C3DL. Disponvel em: <http://www.c3dl.org>. Acesso em: 14 ago 2011. [06] DevMedia. Disponvel em: <http://www.devmedia.com.br/post-19773-Entendendo-eusando-o-SVG.html>. Acesso em: 09 out 2011. [07] DevTuts. Disponvel em: <http://devtuts.com.br/wp/2010/06/introducao-a-engine-unity3d-o-que-e-o-que-posso-fazer-vantagens-e-muito-mais>. Acesso em: 09 out 2011. [08] FOSSE, J. M. (2004). Representao cartogrfica interativa tridimensional: Estudo da varivel visual cor em ambiente VRML. Curitiba: Universidade Federal do Paran, 2004. [09] GARROTT, J., & Ferreira, A. Programao na World Wide Web com CGIs (2 ed.). Lisboa: FCA, 2002. [10] Globo. Disponvel em: <http://g1.globo.com/tecnologia/noticia/2011/06/saiba-maissobre-os-principais-navegadores-de-internet.html>. Acesso em: 19 ago 2011. [11] GLGE. Disponvel em: <http://www.glge.org>. Acesso em: 14 ago 2011. [12] G1. Disponvel em <http://g1.globo.com/tecnologia/noticia/2011/01/numero-de-usuariosde-internet-no-mundo-alcanca-os-2-bilhoes.html>. Acesso em: 11 nov 2011. [13] Hardware. Disponvel em: <http://www.hardware.com.br/artigos/mundo-jogos3d>. Acesso em: 05 out 2011. [14] ICMP - USP. Disponvel em: <http://www.icmc.usp.br/ensino/material/html/www.html>. Acesso em: 05 out 2011. [15] IDG NOW. Disponvel em: <http://idgnow.uol.com.br/seguranca/2011/05/09/falha-gravede-seguranca-atinge-chrome-e-firefox-4>. Acesso em: 17 ago 2011. [16] Info. Disponvel em: <http://info.abril.com.br/noticias/internet/silverlight-3-entregaravideos-com-qualidade-10072009-8.shl>. Acesso em: 14 nov 2011. [17] ITU International Telecomunication Union. Disponvel <http://www.itu.int/en/osg/Pages/biography.aspx>. Acesso em: 11 nov 2011. em
76
[18] Learning WebGL. Disponvel em: <http://www.learningwebgl.com>. Acesso em: 16 ago 2011. [19] Macromedia. Disponvel em: <http://www.macromedia.com/support/documentation/br/flashplayer/help/help10.html>. Acesso em: 10 out 2011. [20] Microsoft Silverlight. Disponvel em: <http://www.silverlight.net>. Acesso em: 07 set 2011. [21] Net Security. Disponvel em: <http://www.net-security.org/article.php?id=1601>. Acesso em: 16 ago 2011. [22] No mundo do cinema. Disponvel em: <http://nomundodocinema.blogspot.com/2010/04/historia-do-3d.html>. Acesso em: 06 out 2011. [23] OpenGL ES Overview. Disponvel em: <http://www.khronos.org/opengles>. Acesso em: 06 ago 2011. [24] SILVA, S. Maurcio. HTML 5: A linguagem de marcao que revolucionou a web. So Paulo: Novatec, 2011. [25] SpiderGL. Disponvel em: <http://www.spidergl.org>. Acesso em: 17 ago 2011. [26] Stat Counter. Disponvel em: <http://www.gs.statcounter.com>. Acesso em: 11 nov 2011. [27] TecMundo. Disponvel em: buffer.htm>. Acesso em: 07 out 2011. <http://www.tecmundo.com.br/1421-o-que-e-frame-
[28] TecMundo. Disponvel em: <http://www.tecmundo.com.br/2469-como-funciona-atecnologia 3d-.htm#ixzz1aC5eb7II>. Acesso em: 09 out 2011. [29] The Khronos Group: Open Standards for Media Authoring and Acceleration. Disponvel em: <http://www.khronos.org> Acesso em: 02 ago 2011. [30] Three.js . Disponvel em: <http://www.threejs.org>. Acesso em: 17 ago 2011. [31] Ultravisual. Disponvel em: <http://www.ultravisual.co.uk/blog/2011/03/31/three-js-andwebgl>. Acesso em: 11 set 2011. [32] Unity3D. Disponvel em: <http://www.unity3d.com>. Acesso em: 16 ago 2011. [33] Vale um post. Disponvel em: <http://valeumpost.com.br/opera-12-webgl.html>. Acesso em: 16 out 2011. [34] WebGL: OpenGL ES 2.0 for the Web. Disponvel em: <http://www.khronos.org/webgl>. Acesso em: 09 ago 2011.
77
[35] WebGL: A new dimension for browser exploitation. Disponvel em: <http://www.netsecurity.org/article.php?id=1601>. Acesso em: 09 set 2011. [36] Win Ajuda. Disponvel em: <http://www.winajuda.com/noticias/microsoft-webglinseguro-internet-explorer.html>. Acesso em: 16 ago 2011. [37] 20 lies que aprendi sobre navegadores e <http://www.20thingsilearned.com>. Acesso em: 13 ago 2011. a web. Disponvel em:

Monografia

Enviado por

Dados do documento

Descrição original:

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Monografia

Enviado por

Direitos autorais:

Formatos disponíveis

1

Robert Maxwell Loureno da Silva

WebGL, a inovao em 3D para navegadores

Robert Maxwell Loureno da Silva

WebGL, a inovao em 3D para navegadores

Robert Maxwell Loureno da Silva

WebGL, a inovao em 3D para navegadores

Data de Aprovao: ___/___/_____.

Prof. Msc. Rayner Gomes Sousa ____________________________________________UFPI

Prof. Msc. Algeir Prazeres Sampaio__________________________________________UFPI

Profa. Esp. Patrcia Vieira da Silva Barros _____________________________________UFPI

Dedico este trabalho Carmem Regina Arajo Loureno. Saudades...

Palavras-chave: WebGL, 3D, navegadores.

Extensible Markup Language

1.1 Organizao da Monografia

2.1 Indstria cinematogrfica

Fonte: Top Filmes Online, 2011

Fig. 1: Cartaz do filme The Power of Love, o primeiro filme em 3D.

2.2.1 Jogos para consoles e PCs

Fonte: Portallos, 2011

Fonte: Hardware, 2011

Fig. 3: Quake I, um marco na histria dos jogos em 3D.

2.2.2 Jogos online

Fonte: Electro-Cesar, 2011

Fig. 4: Exemplo de um fogo 3D presente na Web.

Um protocolo de transmisso de dados - HTTP; Um sistema de endereamento prprio - URL;

Fonte: Google Discovery, 2009

http:// www.microsoft.com/silverlight http:// www.w3.org

Fonte: Devmedia, 2011

Fig. 6: Imagens com e sem retoro.

Fonte: Unity Technology, 2011.

Fig. 7: Tela inicial do Unity.

http:// www.opengl.org http://www.mozilla.org/foundation

Fonte: Osnews, 2011

Fig. 8: Jogo Quake 2, executado em um navegador.

4.1 Tecnologias que integram a WebGL

Fig. 9: Componentes que integram a WebGL.

4.2 Vantagens da WebGL

4.3 Desvantagens da WebGL

Fonte: Forshaw, 2011

Fig. 10: Os mecanismos de um ataque WebGL

4.4 Navegadores que suportam WebGL

Fonte: Stat Counter, 2011

Fig. 11: Os navegadores mais utilizados de outubro de 2010 a outubro de 2011.

Fig. 12: Habilitao da WebGL no navegador Chrome.

Fig. 13: Habilitao da WebGL no navegador Firefox.

4.5 Bibliotecas de desenvolvimento ou frameworks

Fonte: C3DL, 2011

Fig. 14: Objeto 3D do framework C3DL.

Fig. 15: Objeto 3D do framework CopperLicht.

uma opo. O software CopperCube disponibilizado para download no site da Ambiera14.

Fig. 16: Interface do CopperCube.

Fig. 17: Objeto 3D do framework GLGE.

Fig. 18: Objetos 3D do framework SpiderGL.

Fonte: SpiderGL, 2011

Fig. 19: Arquitetura do SpiderGL.

Fig. 20: Objeto 3D do framework Three.js.

5.1 Conceitos, Componentes e Interaes

Fig. 21: Estrutura do arquivo index.html.

Fig. 22: As coordenadas de um objeto 3D.

5.2 Descrio do exemplo

5.3 Tabelas de codificao e explicao

1.0, -1.0, -1.0, -1.0, ];

Data de Aprovao: _/_/_____.