Embed Size (px)
Citation preview
1
UNIVERSIDADE FEDERAL DO PIAUÍ – UFPI
CAMPUS SENADOR HELVÍDIO NUNES DE BARROS - CSHNB
BACHARELADO EM SISTEMAS DE INFORMAÇÃO
Robert Maxwell Loureno da Silva
WebGL, a inovação em 3D para navegadores
PICOS
2011
2
UNIVERSIDADE FEDERAL DO PIAUÍ – UFPI
CAMPUS SENADOR HELVÍDIO NUNES DE BARROS - CSHNB
BACHARELADO EM SISTEMAS DE INFORMAÇÃO
Robert Maxwell Loureno da Silva
WebGL, a inovação em 3D para navegadores
Trabalho de Conclusão de Curso apresentado ao
Curso de Bacharelado em Sistemas de
Informação do Campus Senador Helvídio
Nunes de Barros da Universidade Federal do
Piauí como parte para obtenção do Grau de
Bacharel em Sistemas de Informação. Área de
concentração: Sistemas de Informação. Sob
orientação do Professor e Msc. Rayner Gomes
Sousa.
PICOS
2011
3
UNIVERSIDADE FEDERAL DO PIAUÍ – UFPI
CAMPUS SENADOR HELVÍDIO NUNES DE BARROS - CSHNB
BACHARELADO EM SISTEMAS DE INFORMAÇÃO
Robert Maxwell Loureno da Silva
WebGL, a inovação em 3D para navegadores
Trabalho de Conclusão de Curso aprovado
pelos membros da Banca Avaliadora , aceita
pelo Curso de Bacharelado em Sistemas de
Informação e homologada pelo Campus
Senador Helvídio Nunes de Barros da
Universidade Federal do Piauí como parte para
obtenção do Grau de Bacharel em Sistemas de
Informação.
Data de Aprovação: ___/___/_____.
Prof. Msc. Rayner Gomes Sousa ____________________________________________UFPI
Prof. Msc. Algeir Prazeres Sampaio__________________________________________UFPI
Profa. Esp. Patrícia Vieira da Silva Barros _____________________________________UFPI
4
Dedico este trabalho à Carmem Regina Araújo
Loureno. Saudades...
5
Agradecimentos
A Deus, pela condição de poder me aperfeiçoar e por me manter firme mesmo nas dificulda-
des.
A minha família, pela tolerância e compreensão depositada em mim, que me acompanharam
sempre nos meus estudos, incentivando e ajudando no que for possível para que eu possa ter
habilidades e capacidades de decidir o meu futuro.
Ao meu orientador Rayner, pela sugestão do tema e pela paciência durante a orientação.
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 não foram poucos, superando e ultrapassando cada obstáculo que atra-
vessasse pelos nossos caminhos.
6
O mundo está nas mãos daqueles que tem a coragem de sonhar e
correr o risco de viver os seus sonhos.
Paulo Coelho
7
Resumo
O presente trabalho apresenta uma visão geral de como a tecnologia 3D está presente nos
principais meios de entretenimento, como jogos, cinema e Web, e assim, ressalta a Web, onde
são listadas tecnologias que permite a visualização de conteúdos 2D e 3D diretamente em
navegadores, como a WebGL, objeto de estudo desta monografia. Essa tecnologia permite o
desenvolvimento de aplicações tridimensionais que podem ser visualizadas diretamente em
navegadores compatíveis. Ainda em relação à WebGL, são apresentadas suas características,
estrutura, vantagens, desvantagens, navegadores suportados, frameworks disponíveis e são
discutidas as suas principais funções relacionadas a conteúdos 3D. A monografia finaliza com
a criação de pequenas práticas de modelagens, elaboradas fazendo uso de um framework em
WebGL, o Three.js e com as considerações finais acerca de todo o trabalho construído.
Palavras-chave: WebGL, 3D, navegadores.
8
Lista de Figuras
1. Cartaz do filme The Power of Love, o primeiro filme em 3D .............................................. 17
2. Super Mario Bros, um clássico dos jogos desenvolvidos em plataforma 2D....................... 19
3. Quake I, um marco na história dos jogos em 3D.................................................................. 19
4. Exemplo de um fogão 3D presente na Web .......................................................................... 21
5. Colheita Feliz, jogo desenvolvido em Flash, disponibilizado na rede social Orkut ............ 24
6. Imagens com e sem retorção ................................................................................................ 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. Habilitação da WebGL no navegador Chrome ................................................................... 38
13. Habilitação 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 execução ................................................................................................... 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
9
Lista de Tabelas
1. Parte do conteúdo HTML da página especificando o elemento canvas ............................... 50
2. Função webGLStart .............................................................................................................. 50
3. Função initBuffers ................................................................................................................ 51
4. Função drawScene ................................................................................................................ 52
5. Função initGL ....................................................................................................................... 53
6. Função initShaders ............................................................................................................... 53
7. O shader-fs e shader-vs ........................................................................................................ 54
8. Primeiras linhas do código em HTML ................................................................................. 58
9. Variáveis geométricas ........................................................................................................... 59
10. Especificação da renderização e aplicação da cor a esfera ................................................. 59
11. Variáveis geométricas ......................................................................................................... 60
12. Declaração das funções extras do Three.js ......................................................................... 62
13. Variáveis globais ................................................................................................................. 62
14. Função init .......................................................................................................................... 63
15. Função animate .................................................................................................................. 64
16. Função onMouseDown ....................................................................................................... 64
17. Função onMouseMove ........................................................................................................ 64
18. Função onMouseUp ............................................................................................................ 65
19. Função onMouseOut ........................................................................................................... 65
10
Lista de Siglas
API Application Programming Interface
CPU Central Processing Unity
C3DL 3D Canvas JS Library
DOM Document Object Model
GLSL OpenGL Shading Language
GPU Graphics Processing Unity
HTML Hyper Text Markup Language
HTTP HyperText Transfer Protocol Secure
OpenGL Open Graphics Library
OpenGL ES Open-GL for Embedded Systems
PHP Hypertext Preprocessor
SVG Scalable Vector Graphics
UI User Interface
URL Uniform Resource Locator
WHATWG Web Hypertext Application Technology Working Group
WebGL Web Graphics Library
W3C World Wide Web Consortium
XML Extensible Markup Language
11
Sumário
LISTA DE FIGURAS ............................................................................................................. 08
LISTA DE TABELAS ........................................................................................................... 09
LISTA DE SIGLAS ............................................................................................................... 10
1. INTRODUÇÃO .................................................................................................................. 13
1.1 ORGANIZAÇÃO DA MONOGRAFIA ........................................................................ 14
2. TECNOLOGIAS 3D E ÁREAS DE ATUAÇÃO ............................................................ 16
2.1 INDÚSTRIA CINEMATOGRÁFICA ........................................................................... 17
2.2 JOGOS ............................................................................................................................ 18
2.2.1 Jogos para consoles e PC’s ................................................................ 18
2.2.2 Jogos online ....................................................................................... 20
2.3 WEB ............................................................................................................................... 21
3. TECNOLOGIAS GRÁFICAS 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. FUNÇÕES PRINCIPAIS EM WEBGL ........................................................................... 45
5.1 CONCEITOS, COMPONENTES E INTERAÇÕES ...................................................... 45
5.1.1 Buffer ................................................................................................. 46
5.1.2 Matrizes ............................................................................................. 46
12
5.1.3 Renderização ..................................................................................... 47
5.1.4 Shader ................................................................................................ 47
5.1.5 Vértice ............................................................................................... 48
5.2 DESCRIÇÃO DO EXEMPLO ....................................................................................... 49
5.3 TABELAS DE CODIFICAÇÃO E EXPLICAÇÃO ....................................................... 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. CONSIDERAÇÕES FINAIS .......................................................................................... 67
Anexo A – Código Fonte referente ao Capítulo 5................................................................. 69
Anexo B – Código Fonte referente ao Capítulo 6 ................................................................ 72
Anexo C – Código Fonte referente ao Capítulo 6 ................................................................ 73
REFERÊNCIAS ..................................................................................................................... 75
13
Capítulo 1
Introdução
De acordo com o chefe da International Telecomunication Union [17] (União
Internacional de Telecomunicações), Hamadoun Touré1, já no início de 2011, a quantidade de
usuários de Internet já alcançava o número de dois bilhões de pessoas. Hoje em dia, boa parte
das pessoas utiliza a Internet para acessarem informações e se conectarem com pessoas e
eventos ao redor do mundo a todo o momento. Muitas dessas experiências proporcionadas
pela rede mundial de computadores são possíveis 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 páginas estáticas do HTML já pertencem ao passado. A Internet
está em constante mudança, surgindo com novas funcionalidades e novas técnicas. Uma
dessas técnicas fornece aplicações 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 pretensões da tecnologia 3D pra Web.
Gráficos em 3D podem ser atraentes apresentando aspectos como iluminação,
sombras, reflexos e texturas realísticas. Porém, uma dificuldade encontrada, se relaciona ao
fato de se apresentar uma experiência em 3D convincente, em especial na Internet, pois criar
uma experiência em 3D envolvendo jogos, site e outros meios, exige grandes quantidades de
dados para exibir texturas e formas complexas. Nos anos da expansão da Internet, na década
de 90, essas grandes quantidades de dados exigiam mais largura de banda de Internet e mais
capacidade de computação 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 popularização da conexão 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 são necessários para exibir experiências realísticas
em 3D nos navegadores, melhoraram e permitiram a expansão da tecnologia 3D. Além disso,
os processadores e as memórias com o tempo se aperfeiçoaram de tal forma, que mesmo um
notebook ou desktop padrão suportam a complexidade de gráficos em 3D.
Outro ponto importante, que deve ser destacado é que além das melhorias em
relação à Internet e aos sistemas computacionais, os grandes avanços 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 usuários podem experimentá-los sem a
necessidade de plug-ins adicionais.
Este trabalho apresenta a WebGL, um novo padrão, que ainda encontra-se em fase
de elaboração, que traz uma completa série de recursos 3D diretamente para a Web. Com as
pesquisas realizadas surgiram novas descobertas que aumentaram ainda mais o interesse e a
motivação, que foi a de buscar outras possibilidades para o desenvolvimento de aplicações 3D
para a exibição em navegadores além das existentes, como o Flash e Silverlight. Uma nova
possibilidade vem com a WebGL, que leva aos desenvolvedores um ambiente de programa-
ção e a não necessidade de plug-ins para a criação de seus projetos tridimensionais para que
tudo possa ser visualizado em navegadores compatíveis com a tecnologia. Os avanços conse-
guidos até agora com essa tecnologia, tornaram a WebGL mais acessível aumentando em lar-
ga escala, o número de utilizadores e a própria demanda dos mundos virtuais na Internet. Nes-
se campo, prevê-se um avanço maior nos próximos tempos, visto que a WebGL se torna mais
uma opção aos desenvolvedores de modelagens 3D para Web.
1.1 Organização da Monografia
Capítulo 1: Introdução - Apresenta uma visão geral do trabalho;
Capítulo 2: Tecnologia 3D e Áreas de atuação - Este capítulo faz uma breve explica-
ção sobre o que venha ser a tecnologia 3D e suas principais áreas de atuação;
Capítulo 3: Tecnologias gráficas para navegadores - São apresentadas tecnologias grá-
ficas para navegadores, semelhantes à WebGL;
15
Capítulo 4: WebGL, 3D diretamente para os navegadores - É detalhada a WebGL, a-
bordando sua estrutura, características, vantagens e desvantagens. Destaca-se também
os navegadores compatíveis e frameworks disponíveis em WebGL;
Capítulo 5: Funções principais em WebGL - Seção de funções relacionadas ao desen-
volvimento em WebGL;
Capítulo 6: Desenvolvimento de objetos 3D com o Three.js - São apresentadas práti-
cas de modelação de objetos 3D para a Web fazendo uso da biblioteca Three.js, inclu-
indo as etapas e os resultados conseguidos;
Capítulo 7: Considerações Finais - Neste capítulo serão apresentadas as conclusões e
lições aprendidas com a realização deste trabalho.
16
Capítulo 2
Tecnologia 3D e Áreas de atuação
Ao processo de desenvolvimento de qualquer representação matemática de um
objeto tridimensional, seja ele estático ou animado, através 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 através de um processo chamado renderização 3D,
cujo conceito é descrito na seção 5.1.3 do Capítulo 5, ou usado em simulação de fenômenos
físicos em computador.
Em três dimensões pode-se prover uma organização mais intuitiva de objetos espa-
ciais, utilizando a percepção natural e memória do utilizador referente ao espaço e a
relação espacial dos objetos representados. A Realidade Virtual também pode esti-
mular a atração e o entendimento do utilizador por meio de sua interatividade e di-
namismo (Fosse, 2004).
Os modelos 3D normalmente são criados por programas especializados em
modelagem 3D, como o Blender. No entanto, como os modelos 3D são uma coleção de
dados, como pontos, faces e outras informações, eles podem ser criados manualmente,
algoritmicamente ou digitalizados.
A tecnologia em terceira dimensão 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).
São inegáveis os grandes avanços conseguidos através da inserção da tecnologia
3D nos grandes meios de entretenimento. A tecnologia 3D está presente no cinema, televisão,
na Web, nos jogos, enfim, nos meios onde mais atraem a atenção das pessoas. A tendência é
que em poucos anos, ir ao cinema para assistir a um filme em terceira dimensão 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 não são mencionadas aqui, que buscam a
integração de diversas mídias (texto, imagem, vídeo, áudio, animação) proporcionadas pela
tecnologia 3D. Este capítulo apresenta brevemente como a tecnologia 3D está atuando entre
alguns dos meios de entretenimento existentes, como no cinema, jogos e Web.
17
2.1 Indústria cinematográfica
O primeiro filme em três dimensões foi "The Power of Love" de 1922 (ver Figura
1), sobre uma mulher que é prometida a um homem que não ama para salvar o pai da bancar-
rota. No entanto "Bwana Devil" (1952) é conhecido como o precursor do gênero.
Fonte: Top Filmes Online, 2011
Fig. 1: Cartaz do filme The Power of Love, o primeiro filme em 3D.
A década de 50 ficou marcada nos Estados Unidos pela invasão dos aparelhos de
televisão nos lares americanos. As pessoas sumiram das salas de cinema para se aconchega-
rem no sofá de casa. Assim, os produtores dos estúdios decidiram criar algo para fazer o pú-
blico voltar às salas de cinema. Surgia a técnica naturalvision, que consistia em uma imagem
anáglifa que passa a ter um efeito estereoscópico (tridimensional) quando visualizada por um
óculos feito de cartolina e lentes de plástico azul e vermelho, os conhecidos óculos 3D. O
cérebro une a imagem da cor vermelha sobreposta à cor azul e assim cria a ilusão do efeito em
três dimensões.
Muitos filmes passaram a ser produzidos no formato 3D. "House of Wax" (1953),
"Spooks!" (1953) e "The Stewardesses" (1969) foram alguns deles. Porém, com a baixa quali-
dade nas produções, o formato foi extinto. Apenas um título e outro como "Tubarão 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 público 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 pro-
jeção e vivenciarem uma incrível experiência cinematográfica.
O retorno do 3D ao cinema foi em meados de 2000 com a empresa RealD a frente
da implantação da tecnologia em salas de cinema. Muitos filmes dessa nova fase são docu-
mentários sobre esportes, natureza e o espaço. "Magnificent Desolation: Walking on the Moon
3D" (2005) é um exemplo.
2.2 Jogos
Um dos principais meios de entretenimento, os jogos, sem dúvidas, foram e estão
sendo os mais beneficiados com a tecnologia 3D. O nível 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 contextualização de como a tecnologia 3D
está atuando entre os jogos para PC’s, consoles e também entre os jogos online.
2.2.1 Jogos para consoles e PC’s
Como aconteceu na indústria cinematográfica, a animação 3D demorou em in-
gressar no mundo dos jogos eletrônicos para PC’s e consoles (vídeo-games).
O aparecimento do PC (Personal Computer – Computador Pessoal) e da indústria
dos games para computador permitiu que os jogos eletrônicos se tornassem uma “febre” na
era da informática. Os jogos aumentaram em quantidade, em variedade de temas e ganharam
uma impressionante qualidade gráfica com um maior realismo.
O impulso da produção de jogos 3D iniciou com a necessidade de aperfeiçoamen-
to dos tradicionais jogos em 2D, como o Super Mario Bros (ver Figura 2). Antigamente, os
jogos eram desenvolvidos em 2D, que ao invés de utilizarem coordenadas vetoriais e o inten-
so uso de texturas para compor o ambiente 3D, os desenvolvedores se limitavam em utilizar
simples bitmaps e ambientes bidimensionais, como grandes papéis de paredes para esta tarefa,
além de se basearem em animações estáticas 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, inovações foram necessárias para aten-
derem essas necessidades e exigências.
19
Fonte: Portallos, 2011
Fig. 2: Super Mario Bros, um clássico dos jogos
desenvolvidos em plataforma 2D.
Logo depois dos jogos 2D e com a evolução dos computadores e vídeo-games,
vieram os jogos em 3D. Nasceram os FPS (First Person Shooter), mais conhecidos como jo-
gos em primeira pessoa, tipo de game onde o jogador possui a mesma perspectiva de visão do
personagem, ou seja, ele passa a enxergar o ambiente como se estivesse dentro do próprio
jogo. Nos primeiros tempos, surgiram FPS's clássicos consagrados como o Wolfeinstein 3D, o
(próprio) 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 gráfica ainda deixava a
desejar, pois os motores gráficos eram baseados no uso de texturas fixas de baixa resolução,
causando o efeito visual "pixelado" com a aproximação de qualquer elemento do jogo, seja
objeto ou personagens.
Em 1996, mais um novo marco na história dos jogos em 3D surge, o Quake (ver
Figura 3). Diferente dos demais jogos FPS do gênero, a plataforma do Quake utilizava coor-
denadas aritméticas (vértices) para compor o ambiente 3D, além da utilização de texturas para
preencher os seus elementos, dando maior realismo e riqueza de detalhes aos cenários criados.
Mas por outro lado, uma série de complexidades entrou em cena, exigindo maiores conheci-
mentos técnicos e habilidades dos programadores, além de mais recursos de hardware.
Fonte: Hardware, 2011
Fig. 3: Quake I, um marco na história dos jogos em 3D.
20
O hardware teve que ser otimizado e adaptado a nova realidade em jogos. O uso
intensivo de cálculos matemáticos para criar e renderizar os cenários e o pesado processamen-
to paralelo executado pela CPU (Central Processing Unity – Unidade Central de Processa-
mento) não eram suficientes, pois não possuía o poder de cálculo necessário para realizar todo
este trabalho. Surge então, a GPU (Graphics Processing Unity – Unidade de Processamento
Gráfico), uma unidade de processamento aritmética dedicada especialmente a processar cálcu-
los gráficos. Diferente das CPUs, as GPUs conseguem realizar um número expressivo de cál-
culos, devido à sua arquitetura paralelizada. Assim, vários detalhes das cenas são calculados
simultaneamente como construção do ambiente 3D, aplicação de iluminação, sombra e textu-
ras, perspectiva do personagem, sendo finalmente renderizados para gerar as bonitas imagens
que se costuma ver.
Por trás de todos esses jogos, há um enorme investimento por parte das indústrias
de games, cujo objetivo é o de melhorar os elementos de hardware e software para que os
jogos sejam os mais realísticos possíveis.
2.2.2 Jogos online
A Internet evoluiu e ampliou a sua presença nos lares ao redor do mundo. Aplica-
ções com novas tecnologias, novas ferramentas e mais usabilidade surgem em uma completa
linha de produtos e serviços que está ao alcance de qualquer um sem que haja a necessidade
sequer de sair de casa.
A mesma facilitação e diversidade podem ser percebidas em relação à
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 bilhões em 2012.
Muito mais do que simples disponibilização em um repositório de jogos, os jogos
3D online dispensam muitos jogadores da compra de máquinas poderosas e de jogos caros,
propiciando diversão e entretenimento para uma grande massa de admiradores dos jogos 3D
online e liberando-os também dos altos custos dos jogos para PC.
Com os avanços tecnológicos disponíveis atualmente, os que estão em desenvol-
vimento, como a WebGL, e os que ainda virão, os arquivos criados serão sempre mais leves e
carregados com maior rapidez. Os jogos 3D online futuramente ainda ganharão ainda mais
21
realismo e maior profundidade de cenários e de cores, e permitirão ainda ao jogador, a experi-
ência de mergulhar verdadeiramente numa realidade virtual.
2.3 Web
A Web é outra área onde os objetos 3D são 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, características de um fogão (ver Figura 4).
Fonte: Electro-Cesar, 2011
Fig. 4: Exemplo de um fogão 3D presente na Web.
A Web, criada por um grupo de cientistas comandados por Tim Berner-Lee, do
CERN (Centre European Research Nucleare), na Suíça, que em português significa, "Rede de
Alcance Mundial", é um sistema de documentos em hipermídia que são interligados e execu-
tados na Internet. Os documentos podem estar na forma de vídeos, sons, hipertextos e figuras.
Para visualizar a informação, pode-se usar um programa de computador chamado navegador
para descarregar informações (também chamadas de “documentos” ou “páginas”) de servido-
res web (ou "sítios") e mostrá-las na tela do usuário. O usuário pode então seguir as hiperliga-
ções na página para outros documentos ou mesmo enviar informações de volta para o servidor
para interagir com ele. O ato de seguir hiperligações é, usualmente, chamado de "navegar" ou
"surfar" na Web. A funcionalidade da Web é baseada em três padrões:
Um protocolo de transmissão de dados - HTTP;
Um sistema de endereçamento próprio - URL;
22
Uma linguagem de marcação, para transmitir documentos formatados através da rede -
HTML
Com a ferramenta Web, hoje a Internet ganhou espaço e está em qualquer área
desde os comércios, jogos, filmes, educação, entre outras. Em 1994, os especialistas aborda-
ram a possibilidade de integrar objetos 3D na Web (Ledwidge, 2002). A partir daí, esse ano
tornou uma nova era para Web, isto porque várias organizações específicas juntaram e mobili-
zaram esforços para criar uma tecnologia capaz de integrar objeto 3D na Web e assim permitir
uma maior interação e dinamismo para os usuários. Hoje, a tecnologia 3D para Web é uma
área de grande crescimento, permitindo uma visualização mais interativa e instigante que a
tecnologia 2D.
Uma das razões para o sucesso de objetos tridimensionais na Web é a possibilida-
de de interação em tempo real, permitindo aos utilizadores desencadear ações como manipu-
lar, rodar, etc., o objeto 3D.
Hoje, existe uma variedade enorme de plataformas e ferramentas 3D para a Web
que permitem a visualização de objetos 3D online sem qualquer hardware específico, 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 visua-
lizados diretamente nos navegadores. No próximo capítulo serão apresentadas outras tecnolo-
gias, que assim como a WebGL, permitem a criação de aplicações 3D para a exibição em na-
vegadores, sendo que a WebGL, objeto de estudo desta monografia, terá um capítulo a parte.
23
Capítulo 3
Tecnologias gráficas para navegadores
As tecnologias que existem atualmente, incluindo as que estão em
desenvolvimento, como a WebGL, demonstram melhorias consideráveis tanto em nível de
interfaces gráficas bem como em ganhos conseguidos em termos de qualidade sobre as
imagens e com tecnologia muito mais intuitiva e acessível para a maioria dos utilizadores.
Algumas delas, como o Flash, estão buscando se aperfeiçoarem para atingirem um maior
público, cada vez mais exigente.
Neste capítulo são apresentadas em ordem alfabética, quatro tecnologias
semelhantes à WebGL, Flash, Silverlight, SVG e Unity, voltadas para o desenvolvimento de
jogos e animações online que podem ser exibidas diretamente no navegador e que são
consideradas suas concorrentes.
3.1 Flash
Em 1995, a Futurewave recebeu inúmeros pedidos de usuários para a criação de
um software específico voltado para a criação de animações. Com a popularização 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, então, mudou o nome do sistema até então
conhecido como Future Splash Animator para Flash 1.0. Em 2005 a Adobe2 compra a
Macromedia e em 2007 é finalmente lançado para o público o Adobe Flash CS3.
Em se tratando de popularidade, a WebGL ainda tem muita estrada pra percorrer
para alcançar o Flash. Segundo o site da Info [16], ele está presente em 98% dos
computadores e apesar de tanta popularidade em relação a gráficos vetoriais e animação 2D
na Web, ele ainda não possui o suporte para desenvolvimentos em 3D.
Segundo Alvares (2004), existem dois tipos de gráficos: os gráficos vetoriais e em
mapa de bits. Os gráficos vetoriais, nos quais uma imagem é representada a partir de linhas ou
2 http://www.adobe.com
24
vetores, possuem determinadas propriedades, como cor, espessura, etc. A qualidade deste tipo
de gráficos não depende do zoom ou do tipo de resolução com o qual se esteja olhando o
gráfico.
Os gráficos de mapa de bits se assemelham a uma espécie de quadrículo no qual
cada um dos quadrados (píxels) mostra uma cor determinada. A informação destes gráficos é
salva individualmente para cada píxel e é definida pelas coordenadas e cor de tal píxel. Estes
tipos de gráficos são dependentes da variação do tamanho e resolução, podendo perder quali-
dade ao modificar sucessivamente suas dimensões.
Fonte: Google Discovery, 2009
Fig. 5: Colheita Feliz, jogo em 2D desenvolvido em Flash,
disponibilizado na rede social Orkut.
Boa parte dos jogos acessados através do navegador é baseada no formato Flash.
A grande presença de jogos e aplicativos desenvolvidos em Flash presentes nas grandes redes
sociais, como o Orkut (ver Figura 5) e Facebook é uma prova disso. Além de exportar
arquivos com uma grande compactação, a ferramenta é acessível aos desenvolvedores. Isso
justifica o fato do Flash possuir legiões de programadores e interessados pelo planeta.
Como resultado de sua popularidade, o plug-in Flash Player é compatível com
praticamente qualquer navegador, como o Firefox, por exemplo, e já vem nativamente
instalado em suas versões 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 não tem é suporte para exibição de
conteúdo 3D em navegadores. Uma versão da ferramenta com suporte 3D já foi anunciada
pela Adobe, mas, inicialmente, tudo indica que ela suportará apenas formatos de vídeo.
25
3.2 Silverlight
O Silverlight, criado pela Microsoft, é um plug-in gratuito com suporte a vários
navegadores e várias plataformas, destinado a fornecer experiências de mídia, como vídeos 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 programação, com
suporte, por exemplo, para Ruby e linguagens como C.
Entre os recursos de mídia do Silverlight, está a oferta rápida e econômica de áu-
dio e vídeo de qualidade para todos os principais navegadores, inclusive Firefox, Safari e In-
ternet Explorer, executados em Mac ou Windows. A ferramenta se agrega a estes navegadores
e adiciona novas funções a eles, permitindo que eles sejam capazes de executar filmes e ani-
mações no formato Flash e outros recursos interativos disponíveis na Internet.
Com anos de tradição o Flash pela primeira vez encontrou um forte concorrente:
o Silverlight. São percebíveis o bom desempenho e qualidade de transmissão de vídeo do Sil-
verlight, onde uma de suas vantagens é o carregamento, bem rápido e com pouco buffer.
Empresas de entretenimento especializadas na produção de filmes, séries e ani-
mações, como a Twentieth Century Fox, já estão fazendo uso da tecnologia através de testes
em trailers. Assim como o SVG, que será apresentado na próxima seção, o Silverlight permite
a criação de gráficos vetorizados, como textos, animações e sobreposições que interagem com
gráficos e efeitos de boa qualidade. O Silverlight é disponível para download gratuitamente
em sua página oficial no site da Microsoft3.
3.3 SVG
O SVG (Scalable Vector Graphics – Vetor de Gráficos Escalável) é um formato
de gráficos vetoriais que trabalha com a criação de linhas, polígonos, figuras, textos e como a
WebGL, permite a exibição desses conteúdos em navegadores compatíveis.
Criado pelo W3C4 (World Wide Web Consortium), empresa responsável pela cria-
ção de outros padrões, como o HTML, o SVG contem tags especificas para gerar uma ima-
gem vetorizada na sua aplicação. Com tags simples, consegue-se através do SVG gerar ima-
gens de qualidade vetorizadas que por mais que sejam alteradas as proporções na tela essa não
3 http:// www.microsoft.com/silverlight
4 http:// www.w3.org
26
perderá qualidade, por ser uma imagem vetorizada. Podendo ser apenas imagem fixa ou ani-
mação, 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 deta-
lhes e com sua exibição em uma aplicação, como por exemplo, uma página na Web, essa ima-
gem 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 espaço, a
imagem vai ser gerada com uma qualidade menor e ao ser expandida, essa imagem irá se dis-
torcer, espalhando os pixels e deixando visível isso. A Figura 6, exibida a seguir, apresenta
duas imagens, uma com distorção e a outra sem distorção.
Fonte: Devmedia, 2011
Fig. 6: Imagens com e sem retorção.
Como no SVG os dados são escaláveis, a imagem pode ser redimensionada sem
preocupação quanto à qualidade e distorção dessa imagem, e ainda por ser apenas um arquivo
XML (Extensible Markup Language – Linguagem de Marcação Extensível), apenas texto, o
custo de armazenamento é muito inferior como o de exibição.
Muitas aplicações para celulares hoje já estão utilizando o SVG, pois como a
maioria dos aplicativos não possui um grande potencial de hardware, e é menos custoso exibir
imagens e armazenar com essa extensão.
Da mesma maneira como a WebGL, o SVG é um padrão aberto, onde qualquer
usuário pode utilizá-lo no desenvolvimento das mais diversas aplicações, sem qualquer restri-
ção, o que não se atribui ao Flash, Silverlight e Unity. WebGL tem linguagem padrão, o Ja-
vaScript e o SVG, tem linguagem padrão 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)
também conhecido como Unity3D está em plena funcionalidade. Para fazer uso dessa
tecnologia, o usuário deve ter seu plug-in instalado no computador para poder ter acesso a
jogos com gráficos 3D elaborados para serem exibidos diretamente no navegador.
Fonte: Unity Technology, 2011.
Fig. 7: Tela inicial do Unity.
Unity3D possui cinco licenças diferentes, cada uma para certo tipo de
desenvolvedor. As licenças são: Unity, Unity Pro, Unity iPhone Basic, Unity iPhone
Advanced e Unity Wii. De acordo com a Unity Technologies, em breve mais plataformas serão
suportadas, tais como Android. Todas as licenças são brevemente descritas a seguir:
Unity 3D: Esta é a versão gratuita da Unity que pode ser usada tanto para estudos
quanto para fins comerciais, válida para empresas que não ganharam 100.000 dólares
no ultimo ano fiscal. Ou seja, com um ganho superior a 100.000 dólares deve-se obter
a Unity Pro. Esta versão possui menos recursos que a Unity Pro, mas é totalmente
possível criar um jogo de qualidade com esta licença.
Unity Pro: Esta é a versão paga da Unity e possui diversos recursos interessantes, per-
feita para estúdios ou para o desenvolvedor que tem bons recursos financeiros para in-
vestir. Ela custa $1.200 (mil e duzentos dólares).
Unity iPhone Basic e Unity iPhone Advanced: Estas versões são para o desenvolvi-
mento para iPhone (dispositivo da Apple). As diferenças entre a Basic e Advanced es-
tão mais na parte de desempenho e customização tais como o uso de plug-ins feitos em
28
C++. Os preços são respectivamente 300 dólares pela Basic e 1200 dólares pela Ad-
vanced.
Unity Wii: Esta versão permite o desenvolvimento para o console Nintendo Wii. O u-
suário que se interessar por esta versão deve ser desenvolvedor autorizado da Ninten-
do e entrar em contato com a Unity Technologies para obter os preços e para baixar a
versão.
O Unity tem compatibilidade com os navegadores: Camino, Chrome, Firefox, In-
ternet Explorer, Opera e Safari. Além 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 animação de objetos 3D.
Audacity: Editor de audio open source.
Gimp: Editor de imagens.
Inkscape: Para criação de desenhos.
Melody Raiser: Programa de geração de música procedural.
SFXR: Programa de geração de efeitos sonoros.
O Unity possui uma versão gratuita, disponível em seu site oficial na Internet, que
contém a maioria das funcionalidades que um desenvolvedor amador necessita para criar jo-
gos e publicá-los como programa para Windows ou em uma página web. Esses jogos para
sites funcionam de um modo parecido com os jogos ou animações para sites criados em Fla-
sh, sendo necessário 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 através do navegador, como o Internet Explorer e Firefox.
5 http://www.unity3d.com/webplayer
29
Capítulo 4
WebGL, 3D diretamente nos navegadores
A disponibilização de conteúdo 3D através da plataforma Web passou a ser um
tema de interesse de padrões, como a OpenGL6 (Open Graphics Library – Biblioteca de Grá-
ficos 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. Mui-
tas tentativas foram feitas para permitirem que o usuário através da Web acessasse e interagis-
se diretamente com objetos tridimensionais, ou, mais especificamente, dentro do browser.
No mesmo período de tempo em que as GPUs mostraram um expressivo aumento
de desempenho e capacidade, a evolução da tecnologia por trás dos navegadores Web também
permitiu a expansão do conteúdo 3D na Web. Assim, de um lado, os componentes de hardwa-
re e software atingiram um nível de eficiência e performance que poderiam atender às exigên-
cias de alta qualidade e renderização de conteúdo 3D, do outro, o aumento da largura de ban-
da para acesso à Internet permitiu grandes volumes de dados a serem transferidos em uma
quantidade de tempo relativamente curta. Neste cenário, a necessidade de uma API padroni-
zada se tornou um problema de alta prioridade a ser resolvido.
O Khronos Group [29], instituição responsável pela criação e manutenção da O-
penGL e de outras bibliotecas, lançou na GDC (Game Developers Conference) 2011 a versão
1.0 da especificação WebGL (Web Graphics Library – Biblioteca de Gráficos para a Web),
que trata-se de uma tecnologia em desenvolvimento que transporta o poder gráfico de placas
de vídeo de computadores para os navegadores, agora capazes de suportar jogos avançados e
outras aplicações em 3D, até antes reservados a outras tecnologias, como o Silverlight.
WebGL é considerada uma API (Application Programming Interface - Interface
de Programação de Aplicativos), pois trata-se de um conjunto de funções que a permite se
comunicar com uma outra biblioteca. Nesse caso, ela se comunica com a OpenGL ES (Open-
GL for Embedded Systems – OpenGL para Sistemas Embarcados) [23], aproveitando seus
recursos. Ela surgiu a partir de pequenas experiências em 3D, fazendo uso do elemento can-
vas do HTML 5, iniciadas pela Fundação Mozilla7, que faz parte do Khronos Group.
6 http:// www.opengl.org
7 http://www.mozilla.org/foundation
30
Mesmo sendo uma tecnologia ainda em desenvolvimento, já existem jogos e ou-
tras aplicações desenvolvidas com a tecnologia WebGL. Exemplo disso é a segunda versão do
jogo Quake (ver Figura 8), produzido pela Google. Para que o usuário tenha acesso a esse
jogo é necessário ter um navegador habilitado com WebGL e uma boa placa de vídeo. Entre
os navegadores compatíveis com o Quake 2 estão o Firefox 4, Chrome Beta 5.0 e Web-
kit/Safari: Nightly builds. No site do PlayWebGL8, é possível encontrar esse jogo e outros
além 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 combinação das
tecnologias OpenGL, OpenGL ES, HTML 5 e o elemento canvas. Além da integração dessas
tecnologias, a WebGL faz interface entre a linguagem JavaScript e OpenGL ES 2.0, uma
biblioteca de código nativo que acessa diretamente o hardware de placas gráficas e o
processamento é feito em canvas, uma superfície de visualização gráfica que faz parte do
HTML 5 e está implementado com vários navegadores. A seguir são apresentados com mais
detalhes os elementos que integram a WebGL destacando suas funcionalidades em relação a
conteúdos gráficos. A Figura 9 apresenta os componentes que integram a API WebGL.
8 http://www.playwebgl.com
31
Fig. 9: Componentes que integram a WebGL.
4.1.1 OpenGL
A OpenGL é uma especificação que define uma API que permite a escrita de a-
plicações utilizando gráficos 2D ou 3D.
Por se tratar de uma especificação, a OpenGL é apenas um documento que des-
creve um conjunto de funções e seus comportamentos. A partir dessa especificação, fornece-
dores de hardware desenvolvem suas implementações e estas são projetadas de modo que a
biblioteca esteja de acordo com a especificação. Para que suas implementações sejam aceitas
como uma versão da OpenGL, as bibliotecas criadas pelos fornecedores são submetidas a
testes para assegurar sua qualidade.
A OpenGL possui implementações eficientes para as plataformas Mac OS X,
Windows, Linux. A OpenGL também pode ser usada em software, permitindo que plataformas
sem suporte de fornecedores a OpenGL possam executar programas que a usam. Além de
possuir implementações para diversas plataformas, a OpenGL também possui bindings para
muitas linguagens, como Delphi, Fortran, Haskell, Java, PHP, Ruby e Visual Basic.
A OpenGL foi projetada para realizar apenas a saída gráfica e, portanto, apenas
fornece funções de renderização (ver mais sobre renderização no Capítulo 5). Seu núcleo des-
conhece o conceito de sistemas de janelas, áudio ou dispositivos de entrada como mouse. Essa
32
decisão de projeto permite que o processo de renderização seja completamente independente
do sistema operacional utilizado, permitindo o desenvolvimento multiplataforma.
4.1.2 OpenGL ES
WebGL tem sintaxe da OpenGL ES [23], uma versão da OpenGL desenvolvida
exclusivamente para ser executado em smathphones ou celulares modernos, de modo que a
vizualização de aplicativos 3D em websites seja possível também em telefones. Muitas das
funções presentes no desenvolvimento de aplicações em 3D na WebGL são oriundas do
OpenGL ES, como shader. OpenGL ES é uma interface de software que consiste em um
conjunto de procedimentos e funções que permite ao programador especificar os objetos e
operações envolvidas na produção de imagens de boa qualidade gráfica, mais especificamente
imagens coloridas de objetos tridimensionais.
Para o programador, OpenGL ES é um conjunto de comandos que permite a
especificação de objetos geométricos em duas ou três dimensões, juntamente com os
comandos que controlam o modo como esses objetos são prestados no framebuffer.
Framebuffer é uma memória especializada em armazenar e transferir para a tela do
computador dados de um quadro de imagem. As informações armazenadas nesta memória
consistem basicamente em valores cromáticos para cada pixel e suas transparências. Quanto
maior a resolução da imagem retratada maior será a memória necessária para o framebuffer
armazenar as imagens (Rodrigo Prada, 2009). A sintaxe de OpenGL aplicados a WebGL será
apresentada em detalhes no Capítulo 5.
OpenGL ES oferece uma interface de modo imediato, o que significa que a
especificação de um objeto faz com que seja desenhado. Um programa típico que usa
OpenGL ES começa com chamadas para abrir uma janela para o framebuffer em que o
programa vai desenhar. Então, as chamadas são feitas para alocar um contexto OpenGL ES e
associá-lo com a janela.
A maioria das versões da OpenGL ES requer a existência de um framebuffer nos
hardwares de gráficos específicos. Muitas chamadas OpenGL ES pertencem a objetos de
desenho, tais como pontos, linhas e polígonos, mas as maneiras que alguns destes desenhos
ocorrem dependem da existência de um framebuffer. Além disso, algumas das versões do
OpenGL ES dizem respeito especificamente à manipulação de framebuffer.
33
4.1.3 HTML 5
A tecnologia HTML 5, assim como a própria Web, está em constante evolução,
com base nas necessidades e imaginação dos desenvolvedores. Sendo um padrão 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 inglês para Hyper Text Markup Language, que em português,
significa Linguagem para Marcação de Hipertexto. O conceito de hipertexto admite um
número de considerações e discussões. Para o bom entendimento das definições, pode-se
resumir hipertexto como todo o conteúdo inserido em um documento para a Web e que tem
como principal característica a possibilidade de se interligar a outros documentos da Web. O
que torna possível a construção de hipertextos são os links, presentes nas páginas dos sites que
se visitam quando se está na conectado na Internet. O HTML evoluiu por sete versões que
são: HTML, HTML +, HTML 2.0, HTML 3.0, HTML 3.2, HTML 4.0, HTML 4.01 (versão
atual), HTML 5 (versão em desenvolvimento, que se relaciona com o WebGL).
Uma das novidades do HTML 5 é o canvas, novo componente que permite
desenhar na página, por meio das funções de uma API, tipo de formas, que poderão estar
animadas e interagir com o usuário.
4.1.4 Canvas
No final da seção anterior foi apresentado que uma das novidades da nova versão
do HTML 5 é o canvas. Canvas significa em português algo como tela, ou seja, uma área
onde se pode desenhar como se fosse uma tela.
O elemento canvas permite especificar uma área da página onde se pode, através
de scripts, desenhar e renderizar imagens, o que amplia notavelmente as possibilidades das
páginas dinâmicas 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 organização WHATWG9 para integrá-lo ao
HTML 5. Logo depois, também foi adotado por navegadores como Firefox e Opera. Em
relação ao Chrome, como é um navegador que utiliza o mesmo motor de renderização que o
9 http://www.whatwg.org/
34
Safari, portanto também suporta o elemento canvas. O Internet Explorer até a versão 8.0, não
suportava canvas com funções nativas, porém 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 começassem a se utilizar canvas, a falta de suporte do Internet
Explorer faz com que ainda não seja muito recomendável sua incorporação às aplicações
Web, pois a maioria dos usuários, que utilizam o Internet Explorer, não poderia ver as partes
da página onde se utiliza canvas. Essa situação pode mudar durante os próximos anos, visto
que a incorporação 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, senão sua utilização será
descartada por usuários que desejarem acessar aos serviços Web mais avançados.
O elemento do HTML 5 permite desenhar na página e atualizar dinamicamente
estes desenhos, por meio de scripts e atendendo às ações do usuário. Isso leva a possibilidades
de uso como as disponíveis com o plug-in do Flash, no que se refere à renderização de
conteúdos dinâmicos. As aplicações abrangem jogos, efeitos dinâmicos em interfaces de
usuário, editores de código, editores gráficos, aplicações, efeitos 3D, etc.
Atualmente, aplicações 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 gráficos
3D para páginas na Web sem a necessidade de instalação de algum plug-in. Um plug-in é uma
parte adicional de software, especializada em processar tipos específicos de conteúdo
(Google, 2010). Esses plug-ins estão presentes em similares a WebGL, como o Flash, Unity e
o Silverlight. A não necessidade de instação 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 renderização 3D em navegadores, aproveitando o processamento das
placas de vídeo compatíveis.
Além de não 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 utilização 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 correção de erros, seja na
documentação, desde que a condição 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 serão apresentados ainda neste capítulo.
Pra quem gosta de programação, a WebGL é completa. Além de programar
fazendo uso da linguagem de marcação de textos, HTML, o desenvolvedor também utiliza
linguagem JavaScript. Isso pode ser uma vantagem ou mesmo, uma desvantagem, justamente
para quem não tem familiaridade com programação para Web.
4.3 Desvantagens da WebGL
Por ser uma tecnologia que se aproveita de comandos da OpenGL, mais
precisamente da OpenGL ES, com integração de outras tecnologias, a WebGL se apresenta a
seus usuários como uma linguagem complexa e com muitos detalhes técnicos relacionados a
conteúdos gráficos. WebGL é um ambiente de pura programação. Tem que carregar, compilar,
vincular e configurar os shaders (apresentados com mais detalhes no Capítulo 5), para manter
as formas, e configurar as variáveis. Isso refere-se a comandos da OpenGL. O conhecimento
em OpenGL é muito significativo, mas não é tudo. A WebGL é destinada principalmente a
pessoas com conhecimentos em algoritmos de computação gráfica, mas com boa
compreensão em termos relacionais a gráficos 3D. É difícil, quando se vê o código pela
primeira vez, mesmo se tendo uma boa compreensão da linguagem OpenGL.
Além da linguagem complexa, a WebGL se apresenta como um código malicioso
para os navegadores. Pesquisadores de segurança descobriram uma perigosa vulnerabilidade
no padrão WebGL, presente tanto no Firefox 4 quanto no Chrome, usados para a exibição de
gráficos 3D. WebGL pode ser uma “porta de entrada” para crackers invadirem o sistema,
infectando-o com vírus ou até roubando dados pessoais do usuário.
Segundo o Net Security [21], WebGL permite que programas baseados na Internet
acessem componentes gráficos de driver e hardware, deixando-os expostos a códigos
maliciosos, como mostra a Figura 10. Em geral, eles não são construídos tendo a segurança
como uma das principais preocupações, pois as empresas confiam que a instrução que chega a
tal área do sistema é, invariavelmente, segura. Esses problemas são inerentes à especificação
36
da WebGL e exigem mudanças significativas da arquitetura para remediá-los e fizeram com
que o Internet Explorer até hoje, não aderisse a nova “onda” em 3D para navegadores, como o
Firefox, Safari, Opera e Chrome fizeram.
O usuário, se quiser, pode desabilitar a WebGL, mas isso pode prejudicar sua
experiência online. A tendência é que o padrão ganhe mais proteção nos próximos anos, já
que, se continuar com essas falhas em sua segurança, poderá deixar de ser utilizado.
Fonte: Forshaw, 2011
Fig. 10: Os mecanismos de um ataque WebGL
Navegadores que ativam a WebGL por padrão, como o Chrome e o Firefox
colocam seus usuários em risco com esses problemas. A seguir, são listados os navegadores
que já suportam a tecnologia WebGL.
4.4 Navegadores que suportam WebGL
Os objetos 3D são visualizados na Web através de um navegador compatível. Se-
gundo Vaz (2002), navegador é uma aplicação utilizada para efetuar pesquisas e consultar
informações que existem nos vários sites, localizados em servidores remotos para acesso via
Internet.
Atualmente são compatíveis com a tecnologia WebGL, os navegadores Firefox, o
Chrome, o Safari e o Opera. O Internet Explorer da Microsoft ainda não anunciou planos para
apoiar oficialmente a WebGL, isso acontece por questões de segurança já apresentadas na
37
seção anterior. A Figura 11 representa um gráfico que apresenta os navegadores mais utiliza-
dos no mundo entre os meses de outubro de 2010 a outubro de 2011, segundo dados estatísti-
cos presentes na página 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 versão oficial destes navegadores suporta WebGL, e sendo assim,
torna-se necessário fazer o download de uma versão do navegador já habilitado com a tecno-
logia WebGL, ou fazer isso manualmente, através de pequenas alterações em algumas de suas
configurações específicas para tal procedimento.
4.4.1 Chrome
O browser desenvolvido pela Google chegou ao mercado em 2008 e em relação
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 contém uma série de experimentos 3D em WebGL fazen-
do uso do navegador.
É possível instalar o Chrome nas principais versões do sistema operacional Win-
dows (XP/Vista/7) e também no Linux e Mac. A versão 9 do Google Chrome vem com supor-
te WebGL ativado por padrão e por isso não há a necessidade de habilitá-lo.
10
http://www.chromeexperiments.com/webgl
38
Para habilitar WebGL em versões antigas do Chrome, deve-se inicializar o C-
hrome pela linha de comando adicionando a opção -enable-webgl. A linha de comando será
algo como mostra a Figura 12.
Fig. 12: Habilitação da WebGL no navegador Chrome.
4.4.2 Firefox
O Firefox foi o navegador que permitiu as primeiras experiências em WebGL,
sendo assim um dos percussores da tecnologia 3D para Web. Desenvolvido pela Fundação
Mozilla, chegando ao mercado em novembro de 2004, o Firefox é distribuído gratuitamente
para usuários dos principais sistemas operacionais. A sua evolução é contínua, destacando-se
principalmente no suporte a complementos.
Para fazer funcionar WebGL no Firefox, precisa-se baixar sua versão 4 e ser digi-
tado na barra de endereços o comando about:config, como mostra a Figura 13.
Fig. 13: Habilitação da WebGL no navegador Firefox.
Uma lista de configurações será aberta que podem ser alteradas. Deve ser encon-
trado 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 práticas de modelagens o estudo de
caso apresentado no capítulo 6. Mesmo com WebGL integrada, foi encontrada uma certa difi-
culdade em habilitar a WebGL no navegador Chrome, o que não aconteceu em relação ao
Firefox, e sendo assim, isso influenciou na sua escolha para a visualização dos conteúdos cri-
ados nas práticas de modelagens logo mais apresentadas.
4.4.3 Opera
O navegador Opera11
criado em 1994, não é tão popular quanto o Chrome e Fire-
fox. Com o objetivo de aumentar sua popularidade e aumentar a sua participação no mercado,
que atualmente é de 1,76%, segundo dados do serviço de estatísticas StatCounter [26], os de-
senvolvedores do Opera anunciaram que a versão 12 de seu navegador terá uma melhor acele-
ração via hardware, indo da mais simples renderização de páginas de texto, até as mais pesa-
das animações. Além disso, o Opera 12 terá HTML5 e dará suporte a WebGL, o que deixa o
Internet Explorer como o único navegador que não inclui a tecnologia.
A aceleração gráfica dos navegadores via hardware, além de uma necessidade pa-
ra suportar os novos padrões da Web, como por exemplo, a tecnologia 3D, é uma forma de
separar o processamento entre CPU e placa gráfica, melhorando o desempenho do computa-
dor e até ajudando a economizar energia, com menos processos no CPU, o chip aquece menos
e uma menor quantidade de energia é desperdiçada. A versão completa do Opera 12 estará
disponível no final do ano de 2011.
4.4.4 Safari
Desde o lançamento da WebGL, houve progressos significativos em todos os
principais produtos do setor, principalmente em relação ao navegadores, Firefox, Chrome e
também com o Safari. A comunidade de desenvolvedores da Apple apenas decidiu oficializar
os trabalhos com WebGL meses depois do lançamento, oferecendo informações para seus
contribuidores começarem a trabalhar com ela.
O navegador da Apple também conta com a possibilidade de instalação de
extensões, assim como o Firefox. Safari 5.1 tem suporte para WebGL, mas está desativado
por padrão. Desde outubro de 2009, os nightly builds do WebKit estão sendo liberados com
11
http://www.opera.com/download
40
suporte a WebGL. A versão do navegador com WebGL habilitada encontra-se disponível para
baixar no site12
da WebKit.
4.5 Bibliotecas de desenvolvimento ou frameworks
Para a produção de gráficos 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 específicas, acrescentando assim uma camada de
conveniência a WebGL que podem acelerar e simplificar o desenvolvimento.
Framework é uma abstração que une códigos comuns entre vários projetos de
software podendo atingir uma funcionalidade específica, por configuração, durante a
programação de uma aplicação (Cassao, 2011)
Mesmo ainda não estando plenamente desenvolvido, já existem frameworks em
diversas áreas e abordagens específicas, destinados a facilitar a geração de aplicações em
WebGL. São apresentados em ordem alfabética 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 manipulação de
cenas, conteúdos matemáticos e classes de objetos 3D que faz a API WebGL mais acessível
para os desenvolvedores que desejam produzir conteúdos 3D no browser sem a necessidade
de terem um profundo conhecimento em programação 3D, o que é necessário para seu
funcionamento. Sua página na Internet contém uma série de tutoriais e toda a documentação
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 criação de
jogos e aplicações 3D para visualização 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 características necessárias para criar
jogos em 3D no browser, como manipulação de cores, textura e etc.
Fig. 15: Objeto 3D do framework CopperLicht.
O CopperCube é um software pra edição de programas 3D, visualizações
arquitetônicas, simulações militares (veja Figura 15) e jogos. Esse software converte os
modelos 3D criados para serem exibidos em sites através de arquivos swf, do Flash ou html,
da WebGL. Pra quem não é familiarizado com programação e deseja desenvolver aplicações
3D simples chegando as mais avançadas e sem escrever uma linha de código, o CopperCube é
13
http://www.ambiera.com/copperlicht
42
uma opção. 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 programação em JavaScript destinada a facilitar a
utilização de WebGL, permitindo o uso à aceleração do hardware para o desenvolvimento de
aplicações 2D ou 3D sem a necessidade de baixar nenhum plug-in. Suas principais caracterís-
ticas são: nevoeiro, sombras com profundidade, reflexões e refrações, animações e filtros em
2D.
Fig. 17: Objeto 3D do framework GLGE.
O objetivo inicial do GLGE era a criação de jogos em plataforma 2D. Na época
só havia uma biblioteca que serviu como base para seu desenvolvimento, o C3DL, mas não
oferecia os recursos necessários para a produção de jogos. Conforme o tempo passava, mais e
mais recursos foram adicionados ao GLGE e a biblioteca rapidamente ultrapassou seus propó-
14
http://www.ambiera.com/coppercube
43
sitos iniciais e tornou-se mais completa em termos de recursos. Atualmente, o objetivo princi-
pal do GLGE ainda é o desenvolvimento de jogos. O download gratuito da biblioteca é dispo-
nibilizado na página oficial do GLGE15
.
4.5.4 SpiderGL
SpiderGL [25] é uma biblioteca de gráficos 3D com linguagem JavaScript que
adere às especificações WebGL para renderização em tempo real. SpiderGL é compatível
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 vários formatos, e
para lidar com carregamento de dados assíncronos. O framework SpiderGL é formado por seis
componentes principais. São eles: GL, Math, Space, Mesh, UI e DOM.
GL: Baixo/alto nível WebGL acessar recursos de renderização;
Math: Matrizes e vetores com funções básicas, funções de álgebra linear e classes;
Space: Estruturas geométricas e espaciais, classes e algoritmos;
Mesh: Conjunto de vértices com suas informações de conectividade;
UI (User Interface – Interface do Usuário): Manipulação de eventos do tipo GLUT. O
elemento canvas gera eventos que são interceptados pelo módulo de UI e expedidos
para a objeto registrado;
DOM: JS / HTML utilitários, carregamento de conteúdo assíncrono.
15
http://www.glge.org
44
Fonte: SpiderGL, 2011
Fig. 19: Arquitetura do SpiderGL.
SpiderGL oferece uma interface para desenvolvimento em WebGL, e também
vários gráficos 3D e recursos de programação geral, que vão desde a álgebra linear até o
carregamento de conteúdo assíncrono. Esse framework está disponível para download em sua
página16
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 biblio-
teca foi escolhida para um estudo de caso, onde é apresentada com mais detalhes no capítulo
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
Capítulo 5
Funções principais em WebGL
Apresenta-se WebGL como uma API de renderização 3D projetada para a web,
derivada do OpenGL ES 2.0. Tem função 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 aplicações 3D com WebGL não é algo simples por
várias razões. Primeiramente, a especificação WebGL simplesmente se refere à documentação
OpenGL ES e aponta diferenças. Mesmo o desenvolvedor tendo um conhecimento em
OpenGL, existem algumas diferenças notáveis e indesejáveis 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 contrário deve-se habilitar manualmente. É necessário, antes da
criação de um projeto em 3D, verificar se o navegador é capaz de exibir uma página com
WebGL e, para isso, há aplicações já prontas na Internet justamente com esse intuito.
Este capítulo apresenta o desenvolvimento de objetos geométricos, mais
especificamente um triângulo e um quadrado, com base no Learning WebGL [18], uma página
na Internet que apresenta vários tutoriais de desenvolvimento em WebGL distribuídos do mais
simples aos mais avançados. O exemplo escolhido faz uso de conceitos específicos
relacionados à criação de objetos tridimensionais, que integram a API WebGL. O objetivo
deste capítulo é mostrar o funcionamento desses conceitos aplicados ao desenvolvimento de
objetos 3D. São explicados apenas trechos do código, destacando as principais funções. O
código completo é apresentado na página 70, no Anexo A.
5.1 Conceitos, Componentes e Interações
No desenvolvimento em WebGL, é de suma importância tomar-se conhecimento
de funções específicas relacionadas à criação de objetos tridimensionais. Essas funções
relacionam-se ao processo de desenho, coloração, texturização, renderização, armazenamento,
comprimento e largura, e outras. O conhecimento prévio dessas funções dá ao desenvolvedor
46
uma maior clareza quanto à estrutura de sua criação. A Figura 21 representa a estrutura do
arquivo index.html onde estão presentes as funções em JavaScript.
Fig. 21: Estrutura do arquivo index.html.
5.1.1 Buffer
Um buffer é uma região de memória usada para armazenamento temporário de
dados quando um programa ou dispositivo de hardware necessita de um fluxo ininterrupto de
informação. No exemplo apresentado neste capítulo, essa região é representada pela função
initBuffers, referindo-se ao espaço de memória na placa de vídeo onde serão armazenados os
vértices. Para o exemplo apresentado o buffer está representado pela função initBuffers.
5.1.2 Matrizes
Em WebGL, não existem funções de matrizes básicas, portanto, a operação
matemática sobre matrizes deve ser feita pelo implementador. Ao renderizar a cena, há muitas
47
operações que necessitam de estruturas de matrizes. Para realizar esta operação matemática é
consideravelmente difícil e para compreender a execução de operação matrizes, algum
conhecimento de álgebra linear básica é útil. Para representar o conceito de matriz, no
exemplo apresentado neste capítulo, são identificadas as variáveis mat4.identity
mat4.perspective e mvMatrix, onde cada uma delas apresenta uma função específica.
A matriz de perspectiva, mat4.perspective, tem como objetivo fazer as coisas que
estão mais distantes parecerem menores. Os movimentos de translações e rotações do objeto
são 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 exibição, representada pela variável mvMatrix.
5.1.3 Renderização
Renderização é o processo de geração de uma imagem a partir de um modelo uti-
lizando programas de computador. Esse processo pode ser comparado ao ato de tirar uma foto
ou o de filmar uma cena na vida real.
A renderização para mídias interativas, como os jogos e simulações, é calculada e
exibida em tempo real a taxas entre 20 e 120 quadros por segundo. O objetivo da renderização
em tempo real é o de exibir o máximo de informação possível em um quadro. Dessa forma, a
imagem gerada por esse processo não 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 avançam o nível de realismo das ima-
gens renderizadas em tempo real aumenta. Esse processo normalmente é auxiliado pela uni-
dade de processamento gráfico (GPU) dos computadores.
Para realizar a renderização 3D, é possível usar uma API gráfica como WebGL
ou pode-se usar um framework, como os apresentados no Capítulo 4, que normalmente abstrai
muitas operações de baixo nível das APIs e permite a geração mais rápida de código.
5.1.4 Shader
Na WebGL existe um elemento responsável por explorar toda a funcionalidade de
placas de vídeo e transportar essas funções para o desenvolvimento de aplicações 3D, trata-se
do shader. O shader permite através do hardware, especificamente a placa de vídeo, a
48
renderização das imagens graficamente construídas em ambiente 3D, para melhor definição,
resolução e visualização.
Nada acontece em WebGL sem shaders, pois eles pegam os dados e os
transformam em pixels na tela. No desenvolvimento do triângulo e quadrado, os shaders estão
representados por fragmentShader e vertexShader, apresentadas a seguir:
fragmentShader: O fragmentShader (também conhecido como pixelShader) é uma
função executada em uma GPU. Com a geração do vertexShader, os pixels dos objetos
são passados para o fragmentShader, que aplicará as propriedades da luz e textura.
vertexShader: O vertexShader é uma função, que assim como o fragmentShader, é e-
xecutado na GPU, usada para adicionar efeitos especiais para objetos em um ambiente
3D. O vertexShader é executado uma vez para cada vértice dado ao processador gráfi-
co. O objetivo é transformar a posição de cada vértice 3D no espaço virtual para a co-
ordenada 2D em que aparece na tela. A função vertexShader pode manipular proprie-
dades como posição, cor e textura. O vertexShader é como os pontos especificados no
espaço serão distribuídos na tela.
5.1.5 Vértice
WebGL depende de um conceito chamado de vértice, que definem a posição de
como os objetos são desenhados. Um vértice é um único ponto no espaço tridimensional que
se expressa por um componente de três 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 Descrição do exemplo
O exemplo escolhido para apresentar a relação das funções específicas na criação
de objetos 3D encontra-se disponível na página do Learning WebGL na Internet. Trata-se da
criação de dois objetos geométricos, um triângulo e um quadrado para serem exibidos em
navegadores. Esse exemplo é uma boa introdução aos fundamentos em WebGL, o que dará
suporte suficiente para a criação de objetos mais avançados.
No site do Learning WebGL, o autor desenvolvedor do exemplo alerta para o
nível de conhecimento em relação a programação e a funções relacionadas a conteúdos
gráficos, pois os mesmos são importantes para começar a produzir modelagens 3D para Web.
A próxima seção apresenta a explicação das partes mais importantes do código re-
ferente ao desenvolvimento dos objetos geométricos, fazendo referência às funções particula-
res relacionadas a modelagens gráficas em 3D.
5.3 Tabelas de codificação e explicação
Apresenta-se ao longo desta seção a explicação do código distribuída em tabelas,
onde são resumidas em seis passos principais. São eles:
1. Obter o elemento de tela, o canvas.
2. Inicializar a variável 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 coordenação dos pontos, textura e cor e
estes dados devem ser armazenados nos buffers. Estes dados armazenados são necessários
para o processamento.
5. Desenhar a cena.
6. Definir uma função webGLStart, que inicia o processamento no arquivo HTML.
A forma mais correta de se começar a desenhar um objeto 3D é especificando a
área em HTML, com a altura e largura da área onde ficarão posicionados os objetos, passando
o elemento canvas a variável trianguloquadrado, isso é mostrado na Tabela 1 na linha 3.
50
1 <html>;
2 <body>;
3 <canvas id= " trianguloquadrado " style = "border:none;" width =
"500" height = "500"></canvas><br/>;
4 <body onload = "webGLStart();">;
5 <head>.
Tabela 1: Parte do conteúdo HTML da página especificando o elemento canvas.
Em relação ao HTML, basicamente é isso que se precisa, podendo-se adicionar
mais linhas de código a página. A Tabela 2 apresenta a função webGLStart, onde WebGL está
representado por initGL, na linha 3. Ainda na linha 3, initGL faz uma chamada ao canvas.
Além disso, a função webGLStart faz uma referência a outras funções, importantes, como o
shader e buffer, representados respectivamente por initShaders (linha 4) e initBuffers (linha
5), cujo conceitos foram já apresentados.
1 function webGLStart() {;
2 var canvas = document.getElementById("trianguloquadrado");
3 initGL(canvas);
4 initShaders();
5 initBuffers();
6 gl.clearColor(0.0, 0.0, 0.0, 3.0);
7 gl.enable(gl.DEPTH_TEST);
8 drawScene();
9 }.
Tabela 2: Função webGLStart.
Em webGLStart (Tabela 2) são especificadas as principais funções presentes na
criação de um objeto WebGL. A função initGL (linha 3) é responsável por trazer o elemento
canvas para o WebGL, a função initShaders (linha 4) é responsável pela modelação dos
desenhos e a função initBuffers (linha 5) pelo armazenamento dos dados referentes ao
desenho. Ainda em webGLStart é feita uma configuração básica para a tela onde será exibido
o objeto, dizendo que quando a tela for limpa, deve-se transformá-la em preto, através do
comando gl.clearColor (linha 6). A variável 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 funções presentes em webGLStart, tem-se ainda
initBuffers, apresentada na Tabela 2. Nessa função são declaradas duas variáveis globais,
triangleVertexPositionBuffer, linha 1 e squareVertexPositionBuffer, na linha 2.
51
1 var triangleVertexPositionBuffer;
2 var squareVertexPositionBuffer;
3 function initBuffers() {;
4 triangleVertexPositionBuffer = gl.createBuffer();
5 gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
6 var vertices = [;
7 0.0, 1.0, 0.0,;
8 -1.0, -1.0, 0.0,;
9 1.0, -1.0, 0.0;
10 ];
11 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices),
gl.STATIC_DRAW);
12 triangleVertexPositionBuffer.itemSize = 3;
13 triangleVertexPositionBuffer.numItems = 3;
14 squareVertexPositionBuffer = gl.createBuffer();
15 gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
16 vertices = [;
17 1.0, 1.0, 0.0,;
18 -1.0, 1.0, 0.0,;
19 1.0, -1.0, 0.0,;
20 -1.0, -1.0, 0.0;
21 ];
22 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices),
gl.STATIC_DRAW);
23 squareVertexPositionBuffer.itemSize = 3;
24 squareVertexPositionBuffer.numItems = 4;
25 }.
Tabela 3: Função initBuffers.
A variável triangleVertexPositionBuffer (linha 1) é específica para o triângulo e
squareVertexPositionBuffer (linha 2) é específica para o quadrado. Essas variáveis referem-se
à posição dos vértices do triângulo e quadrado para serem armazenados no buffer.
Na função initBuffers, são definidas as posições dos vértices. Esses vértices estão
distribuídos nos pontos de um triângulo isósceles com seu centro em (0,0,0). Nas linhas 5 e 22
dois objetos do tipo Float32Array são criados, para que a WebGL os utilize para ocupar o
espaço do buffer do triangleVertexPositionBuffer e squareVertexPositionBuffer.
Em initBuffers são definidas duas novas propriedades, o itemSize, nas linhas 3 e
23 e numItens, nas linhas 4 e 24. O numItens representa, no caso do triângulo, três diferentes
posições dos vértices, cada um dos quais é composto por três números (itemSize). O mesmo é
52
feito para o quadrado. O quadrado tem quatro posições de vértices, em vez de três, como no
triângulo, e assim a matriz é maior e o numItems é diferente.
Com a explicação da função initBuffers finalizada, observa-se agora a função
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 método gl.viewport. Em seguida, na linha 3, a tela é “limpa” em preparação
para o desenho, através do método gl.clear.
1 function drawScene() {;
2 gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
3 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
4 mat4.perspective(45,gl.viewportWidth/gl.viewportHeight,
0.1,100.0,pMatrix);
5 mat4.identity(mvMatrix);
6 mat4.translate(mvMatrix, [-1.5, 0.0, -7.0]);
7 gl.bindBuffer(gl.ARRAY_BUFFER,triangleVertexPositionBuffer);
8 setMatrixUniforms();
9 gl.drawArrays(gl.TRIANGLES, 0, triangleVertexPositionBuffer.numItems).
Tabela 4: Função drawScene.
Continuando, são especificadas as matrizes que proporcionarão como o usuário
irá visualizar a cena. Em mat4.perspective, como mostra a linha 4, é dito que o campo de vi-
são é de 45° e que a cena será visualizada de maneira mais próxima do que 0,1 unidades e
mais distante que 100 unidades.
Seguindo com o código, a linha 6 mostra o comando responsável por apresentar o
triângulo do lado esquerdo da tela. Move-se o triângulo 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 são os mesmos para o triângulo, não
havendo a necessidade de apresentá-los, pois o código completo está presente em Anexo, na
página 69 desta monografia.
Depois de ser apresentado initBuffers e drawScene, nota-se também uma
referência a função initGL em webGLStart, na Tabela 2, já apresentada. Em initGL (Tabela 5),
caso o navegador usado para visualização do objeto que está sendo construído não for
compatível com WebGL, uma mensagem informará que não é possível a inicialização 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 var gl;
2 function initGL(canvas) {;
3 try {;
4 gl = canvas.getContext("experimentação-webgl");
5 gl.viewportWidth = canvas.width;
6 gl.viewportHeight = canvas.height;
7 } catch (e) {;
8 };
9 if (!gl) {;
10 alert("Não foi possível inicializar WebGL");
11 };
12 }.
Tabela 5: Função initGL.
Na Tabela 6, que apresenta a função initShaders, um método 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, são passados os identificadores de fragmentShader e vertexShader, representados
respectivamente por shader-fs e shader-vs.
1 var shaderProgram;
2 function initShaders() {;
3 var fragmentShader = getShader(gl, "shader-fs");
4 var vertexShader = getShader(gl, "shader-vs");
5 shaderProgram = gl.createProgram();
6 gl.attachShader(shaderProgram, vertexShader);
7 gl.attachShader(shaderProgram, fragmentShader);
8 gl.linkProgram(shaderProgram);
9 if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {;
10 alert("Não foi possível inicializar WebGL");
11 };
12 gl.useProgram(shaderProgram);
Tabela 6: Função initShaders.
Os shaderVertex e shaderFragment não são escritos em JavaScript, embora a
ascendência da linguagem seja claramente similar. Na verdade, eles são escritos em uma
54
linguagem de chamada de GLSL17
(OpenGL Shading Language) que é basicamente
linguagem C com outros tipos de dados e funções. Não será necessário 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 código
obrigatório relacionado à placa gráfica, está com números 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 variáveis do tipo
uniform que chamam uMVMatrix e uPMatrix, linhas 11 e 12, respectivamente. Variáveis do
tipo uniform são úteis, pois elas podem ser acessadas de fora do shader. Agora, o shader é
chamado para cada vértice, e o vértice é passado para o aVertexPosition (linha 10).
O pequeno pedaço de código void main, na linha 5, apenas multiplica a posição
do uPMatrix com uMVMatrix, e “empurra” para fora o resultado como a posição final do
vértice, mostrado na linha 14. Assim, webGLStart chama initShaders, que usou getShader
para carregar os shaderVertex e shaderFragment de scripts na página Web, de modo que
WebGL renderize a cena.
1 <script id="shader-fs" type="x-shader/x-fragment">;
2 #ifdef GL_ES;
3 precision highp float;
4 #endif;
5 void main(void) {;
6 gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
7 };
8 </script>;
9 <script id = "shader-vs" type = "x-shader/x-vertex">;
10 attribute vec3 aVertexPosition;
11 uniform mat4 uMVMatrix;
12 uniform mat4 uPMatrix;
13 void main(void) {;
14 gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
15 };
16 </script>.
Tabela 7: O shader-fs e shader-vs.
17
http:// www.opengl.org/documentation/glsl
55
5.4 Resultados
O exemplo apresentado neste capítulo teve como objetivo explicar funções
necessárias quando se deseja construir um objeto 3D em WebGL. Mesmo o exemplo aqui
apresentado não sendo um objeto 3D, ele apresenta as mesmas funções, 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 conteúdos gráficos, como renderização, por exemplo. A
Figura 23 mostra o resultado do exemplo aqui apresentado, quando exibido em um navegador
compatível com WebGL. O efeito desejado foi concretizado. O navegador para exibição é o
Mozilla Firefox 4.0 Beta 10, escolhido para os testes e construção das modelagens.
Fig. 23: Resultado exibido executado em um navegador.
No próximo Capítulo são apresentadas práticas de modelagens fazendo uso de um
framework em WebGL, o Three.js, que contempla todas as funções apresentadas até aqui. O
código completo referente aos trechos apresentados anteriormente está presente na página 70,
no Anexo A desta monografia.
56
Capítulo 6
Desenvolvimento de objetos 3D com Three.js
Nesse capítulo é discutido o produto final do trabalho e também os resultados ob-
tidos com sua construção, fazendo uso de um framework em WebGL. No Capítulo 4, foram
listadas algumas das inúmeras engines (também conhecidas como frameworks) destinadas a
facilitar o desenvolvimento de objetos tridimensionais para a web fazendo proveito da tecno-
logia WebGL. Entre esses frameworks, está o Three.js [30], que como os outros, visa facilitar
o desenvolvimento de projetos 3D.
Durante o período de pesquisas, foram surgindo a todo o momento, vários frame-
works em WebGL, cada um com suas particularidades, especialidades e características. Um
em especial me chamou atenção. Trata-se do framework Three.js. Com esse framework con-
segue-se criar com facilidade câmeras, objetos, materiais, cenas de iluminação 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 diretório de ar-
quivos, o Github18
, e contém uma série de exemplos prontos, a fim de mostrarem as grandes
possibilidades de desenvolvimento, que vão desde exemplos simples aos mais avançados.
Quando é feito o download da biblioteca, o usuário se depara com várias pastas e subpastas.
Uma dessas pastas é a pasta examples (veja Figura 24), onde são disponibilizados os exem-
plos 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 são encontradas as plataformas suportadas, como
WebGL, SVG e Three.js distribuídas na pasta build dentro de uma outra pasta, custom. Thre-
e.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 disponíveis na biblioteca Three.js, a
plataforma que será utilizada para a implementação no projeto, pois ela dá suporte a várias,
como SVG e WebGL. Para esta primeira prática de modelagem, escolhe-se o Three.js, que
contempla funções em WebGL, apresentadas no capítulo anterior. Então, neste primeiro traba-
lho, apresenta-se de forma minuciosa, a criação de uma forma simples, uma esfera. Essa esfe-
ra não tem movimentos, apenas é estática.
Antes de tudo, deve-se destacar a escolha do navegador para a exibição da cena
em WebGL. Deve-se escolher um com WebGL habilitada por padrão, ou fazer isso manual-
mente. Para a execução das práticas 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 código simples, relacionado ao de-
senvolvimento de uma esfera em Three.js. Para a edição da página em HTML, foi utilizado o
58
editor de texto e códigos fonte Notepad++19
, mas poderia ser feito com qualquer outro simi-
lar, como mostra a Figura 26.
Fig. 26: Notepad++ em execução.
A Tabela 8 apresenta a configuração simples feita de toda a página em HTML, em
que é destacado o local, onde será especificada a plataforma escolhida para o desenvolvimen-
to da esfera, no caso é Three.js, linha 4. Deve-se haver uma ligação obrigatória da biblioteca
Three.js que se deseja trabalhar, com o código para a implementação do projeto.
1 <html>;
2 <head>;
3 <title>Esfera</title>;
4 <script src ="libs/Three.js"> </script>;
5 </head>;
6 <body>;
7 <div id="meuobjeto"></div> ;
8 </script>.
Tabela 8: Primeiras linhas do código em HTML.
Há uma série de exemplos avançados presentes em Three.js, mas para compreen-
der como as funções específicas funcionam, deve-se começar com um projeto simples. Duran-
te o desenvolvimento, esta implementação foi adaptada e simplificada de forma a torná-la
mais compreensível. Inicialmente, a definição e configuração de algumas variáveis devem ser
estabelecidas. Variáveis principais, como esfera e meuobjeto, foram definidas na língua por-
19
http:// notepad-plus-plus.org
59
tuguesa, a fim de tornar mais compreensível as funções quando referenciarem essas variáveis,
e as demais foram referidas na língua inglesa.
1 var esfera;
2 var width = 1000, height = 500;
3 var angle = 45, aspect = width/height, near = 0.1, far = 10000;
4 esfera = document.getElementById("meuobjeto").
Tabela 9: Variáveis globais.
Inicialmente, a definição e configuração de algumas variáveis devem ser estabe-
lecidas, apresentadas na Tabela 9. As variáveis apresentadas, definem a largura (linha 2), altu-
ra (linha 2) e os detalhes da câmera (linha 3) da esfera. Na linha 03, observa-se os parâmetros
passados para representar os detalhes da câmera, near e far, que representam respectivamente
a proximidade e o distanciamento. Bem no início do código HTML (Tabela 8, linha 7), foi
criado um elemento div com o id de meuobjeto, assim, a variável esfera o obtém, através do
comando na linha 4, na Tabela 9.
A Tabela 10 apresenta os códigos relacionados ao processo de renderização, atra-
vés da criação da variável renderer, na linha 1.
1 var renderer = new THREE.WebGLRenderer();
2 var camera = new THREE.Camera(angle, aspect, near, far);
3 var scene = new THREE.Scene();
4 camera.position.z = 200;
5 renderer.setSize(width, height);
6 var material = new THREE.MeshBasicMaterial({color: 0xCC0000}).
Tabela 10: Especificação da renderização e aplicação da cor a esfera.
Em relação à coloração da esfera, precisa-se criar um material para usar com a
forma geométrica. 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 geométricas. E não é por acaso, pois uma forma geométrica reúne elementos
específicos que definem tamanho, largura, centro, raio, vértices, e outros. Para este caso, esses
elementos estão representados por radius, segments e rings, cada um com seus valores
determinados, como mostra a Tabela 11, na linha 1.
60
1 var radius = 50, segments = 16, rings = 16;
2 var mesh = new THREE.Mesh(new THREE.SphereGeometry(radius, segments,
rings), material);
3 meuobjeto.appendChild(renderer.domElement).
Tabela 11: Variáveis geométricas.
A linha 3 da Tabela 11 mostra a vinculação da cena criada ao elemento DOM
(Document Object Model). O DOM essencialmente liga páginas Web a scripts ou linguagens
de programação (Mozilla Developer Network, 2011).
6.2 Resultados
Executado no navegador compatível com WebGL, para este caso foi utilizado o
navegador Firefox, o que se vê é uma simples esfera de cor vermelha. Nada muito avançado,
mas o suficiente para perceber o nível de codificação presente em WebGL aplicado ao
Three.js. O código completo, com referência as funções mais importantes a esta prática de
modelagem, está presente no Anexo B, na página 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 prática de modelagem, buscou-se o desenvolvimento de um
cubo 3D, onde se pode interagir com ele através de movimentos com o mouse. Além das
funções já contempladas na última prática de modelagem, esse cubo terá outras funções, como
61
por exemplo, funções relacionadas à animação que irá desencadear os movimento e interação
através do mouse. A Figura 28 apresenta a estrutura do arquivo em forma de diagramas, onde
entre os scripts, são declaradas e armazenadas as funções referentes ao desenvolvimento do
cubo em JavaScript.
Fig. 28: Estrutura do arquivo index.html.
Como mostra a Tabela 12, nas primeiras linhas do código, são especificadas as
funções extras e a biblioteca principal para a criação do cubo 3D. Assim como no
desenvolvimento da esfera, o cubo também será criado com o framework Three.js,
acompanhado de funções extras. Assim como os outros exemplos apresentados, todo o código
é apresentado em Anexo na página 74.
62
1 <html>
2 <head>
3 <title>Cubo</title>
4 <script src="libs/yepnope.1.0.1-min.js"></script>
5 <script src="libs/RequestAnimationFrame.js"></script>
6 <script src="libs/modernizr-1.7.min.js"></script>
7 <script src="libs/Three.js"></script>
8 </head>
Tabela 12: Declaração das funções extras do Three.js.
A declaração das variáveis globais é apresentada na Tabela 13. São declaradas as
variáveis camera, cena, renderer e cubo na linha 1, e outras com valores passados, como
targetRotationX (linha 2) e targetRotationY (linha 3), cujas utilizações serão apresentadas ao
longo deste capítulo.
1 var camera, cena, renderer, cubo;
2 var targetRotationX = 0;
3 var targetRotationY = 0;
4 var targetRotationOnMouseDownX = 0;
5 var targetRotationOnMouseDownY = 0;
6 var mouseX = 0;
7 var mouseY = 0;
8 var mouseXOnMouseDown = 0;
9 var mouseYOnMouseDown = 0;
10 var canvasWidth = 1000;
11 var canvasHeight = 500;
12 var canvasHalfX = canvasWidth / 2;
13 var canvasHalfY = canvasHeight / 2.
Tabela 13: Variáveis globais.
A interação com o cubo será através de movimentos com o mouse. Para isso
acontecer, existem funções específicas e algumas variáveis são passadas antes de tudo. Nesta
modelagem, o diferencial é a possibilidade de interação com o mouse, por isso não será
necessário entrar em detalhes em relação a outras funções, pois as mesmas já foram
apresentadas em capítulos anteriores. As variáveis targetRotationX (linha 2) e targetRotationY
(linha 3) serão respectivamente, os alvos na rotação no eixo X e Y e
63
targetRotationOnMouseDownX (linha 4) e targetRotationOnMouseDownY (linha 5),
respectivamente serão alvos da rotação no eixo X e Y quando o mouse estiver pressionado.
Duas funções principais são declaradas, init (Tabela 14) e animate (Tabela 15).
Dentro da função init serão definidas as propriedades de renderização, câmera e cores. O cubo
é formado por seis faces, e por esta razão, é criado um vetor com seis posições, que
representam as faces do cubo e adiciona cores a essas faces, como mostra a linha 8 da Tabela
14. Foi aplicado um método randômico, onde proporcionará cores diferentes a cada face do
cubo quando este for exibido.
1 function init () {;
2 var container = document.getElementById("meuobjeto");
3 camera = new THREE.Camera(70, canvasWidth / canvasHeight, 1, 1000);
4 camera.position.y = 150;
5 camera.position.z = 500;
6 camera.target.position.y = 150;
7 var arrayCor, materiais = new Array();
8 arrayCor = [Math.random() * 0xffffff0, Math.random() * 0xffffff0,
Math.random() * 0xffffff0, Math.random() * 0xffffff0, Math.random() *
0xffffff0, Math.random() * 0xffffff0];
9 for (var i = 0; i < 6; i++) {;
10 materiais.push( [new THREE.MeshLambertMaterial( { color: arrayCor[i]
} ) ] );
11 };
12 var mesh = new THREE.Cube(300, 300, 300, 1, 1, 1, materiais);
13 cubo = new THREE.Mesh(mesh, new THREE.MeshFaceMaterial() );
14 cubo.position.y = 150;
15 cena = new THREE.Scene();
16 cena.addObject(cubo);
17 renderer = new THREE.CanvasRenderer();
18 renderer.setSize(canvasWidth, canvasHeight);
19 container.appendChild( renderer.domElement );
20 container.addEventListener('mousedown', onMouseDown, false);
21 }.
Tabela 14: Função init.
Uma parte interessante do código relaciona-se aos métodos que levam o usuário a
interagir com o objeto tridimensional através de movimentos com o mouse. Isso é possível
devido a uma lib, ou conjunto de funções, que proporciona esses resultados, a lib
RequestAnimationFrame.js.
64
1 function animate () {;
2 requestAnimationFrame(animate);
3 render();
4 }.
Tabela 15: Função animate.
As funções onMouseDown, onMouseMove, onMouseUp e onMouseOut permitem
a movimentação do cubo em posições diferentes sobre a tela. Na Tabela 16, quando a função
onMouseDown for chamada, ela adicionará os eventos que tornarão false as outras posições, e
só ela será executada, e assim, define as posições de X e Y quando o mouse estiver clicado.
Isso é mostrado nas linhas 3, 4 e 5.
1 function onMouseDown (event) {;
2 event.preventDefault();
3 document.addEventListener('mousemove', onMouseMove, false);
4 document.addEventListener('mouseup', onMouseUp, false);
5 document.addEventListener('mouseout', onMouseOut, false);
6 mouseXOnMouseDown = event.clientX - canvasHalfX;
7 mouseYOnMouseDown = event.clientY - canvasHalfY;
8 targetRotationOnMouseDownX = targetRotationX;
9 targetRotationOnMouseDownY = targetRotationY;
10 }.
Tabela 16: Função onMouseDown.
A função onMouseMove (Tabela 17) é responsável por reconhecer os movimentos
do mouse sobre o cubo. Define-se as posições do mouse no eixo X e Y quando estiver se
movendo, como mostra as linhas 4 e 5, funções targetRotationX e targetRotationY.
1 function onMouseMove (event) {;
2 mouseX = event.clientX - canvasHalfX;
3 mouseY = event.clientY - canvasHalfY;
4 targetRotationX = targetRotationOnMouseDownX + (mouseX -
mouseXOnMouseDown) * 0.02;
5 targetRotationY = targetRotationOnMouseDownY + (mouseY -
mouseYOnMouseDown) * 0.02;
6 }.
Tabela 17: Função onMouseMove.
65
Já em onMouseUp (Tabela 18), serão removidos os eventos quando o mouse não
estiver clicado, através do comando document.removeEventListener, nas linhas 2 e 3.
1 function onMouseUp (event) {;
2 document.removeEventListener('mousemove', onMouseMove, false);
3 document.removeEventListener('mouseup', onMouseUp, false);
4 dmateriaisoveEventListener('mouseout', onMouseOut, false);
5 }.
Tabela 18: Função onMouseUp.
Em onMouseOut (Tabela 19), eventos serão removidos no momento em que o
mouse sair da tela. Assim como na função onMouseUp, o comando que faz a remoção dos
eventos é o document.removeEventListener, mostrados nas linhas 2,3 e 4.
1 function onMouseOut (event) {;
2 document.removeEventListener('mousemove', onMouseMove, false);
3 document.removeEventListener('mouseup', onMouseUp, false);
4 document.removeEventListener('mouseout', onMouseOut, false);
5 }.
Tabela 19: Função 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
práticas de modelagens foi relacionado à programação em JavaScript e a termos relacionados
a conteúdos gráficos, muito comum, pois WebGL trata-se de sintaxe da OpenGL ES e tudo
isso era algo novo até então. Ainda, durante o desenvolvimento das práticas de modelagens,
foram percebidas as grandes possibilidades em 3D que a WebGL proporciona e isso é
reforçado através 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 opção, ao lado
do Flash, Unity, SVG e Silverlight, aos desenvolvedores. Ao final de tudo, quando executado
em um navegador compatível 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
Capítulo 7
Considerações Finais
Sobre este trabalho, há aspectos que devem ser esclarecidos, que vão desde todo o
processo de pesquisa até o desenvolvimento das pequenas práticas de modelagens. A ausência
de bibliografias específicas levou que grande parte do desenvolvimento desta monografia se
baseasse na pesquisa online. Com um tempo considerado curto, em referência ao período de
criação da monografia, o desejo seria conhecer e explorar outros frameworks, ou mesmo, pes-
quisar ainda mais a respeito das diferentes tecnologias 3D pra Web. Apesar destas limitações,
considera-se que os objetivos iniciais foram gradativamente atingidos.
Hoje, a Web não está como antes, quando havia muitas dificuldades, sobretudo
em termos de acessibilidade, interatividade e usabilidade. E a tecnologia 3D veio pra propor-
cionar esses recursos e muito outros. A consequência disto é que, atualmente, a Web está cada
vez mais acessível e apresenta melhores qualidades, e isso é visível em muitas das áreas da
aplicação 3D, como o comercio eletrônico, jogos pra computador, cinema, televisão, jogos
online, e cresce num ritmo muito acelerado.
Este trabalho descreveu e estudou o uso de WebGL, para a aplicação de objetos
3D na Web. A recente introdução da API WebGL para alavancar o poder de aceleradores grá-
ficos 3D em navegadores Web abre a possibilidade de desenvolver aplicações gráficas avan-
çadas sem a necessidade de um plug-in. Existem vários contextos em que essa nova tecnolo-
gia pode ser explorada para melhorar a experiência do usuário e fruição de dados, como apli-
cações de comércio eletrônico, jogos e a Web. O surgimento do WebGL e os esforços de ou-
tras tecnologias semelhantes, como o Flash, ampliaram os horizontes da tecnologia 3D na
Web. Uma das vantagens do WebGL é por essa tecnologia ser open-source (código aberto), o
que amplia os horizontes de desenvolvimento. Isso pode ser representado pela expressiva pre-
sença de frameworks presentes na Web, alguns já apresentados nesta monografia. Com um
código aberto, os utilizadores proverão de uma tecnologia com maiores possibilidades de cri-
ações, e assim, mais concorrência em se fazer algo inovador e diferente.
O framework Three.js, escolhido para as práticas de modelagens, dá ao desenvol-
vedor as ferramentas necessárias para a produção de conteúdos tridimensionais para visuali-
zação em navegadores. Os conhecimentos adquiridos ao longo desses anos de graduação con-
tribuíram de certa forma, mas não o suficiente para a criação dos objetos WebGL, visto que a
68
mesma exigia conhecimentos em programação para Web e em relação a conteúdos gráficos,
cujos conteúdos não integram a grade curricular do curso. O aprendizado veio com as pesqui-
sas e práticas. Em relação às práticas, os frameworks foram aliados, pois através de seus e-
xemplos, especialmente do Three.js, ficaram mais fáceis a criação de outros, contemplando
assim, a parte prática da monografia. Com exemplos dos mais simples aos mais avançados, o
usuário tem noção do que é a tecnologia 3D para navegadores. Esse framework, juntamente
com os outros, como o SpiderGL e GLGE, só reforçam a importância de se trabalhar com
uma ferramenta de código aberto.
Em resumo, aguarda-se ansiosamente para que futuramente se possa visualizar de
uma forma automática um objeto 3D na Web, sem que haja a necessidade de se instalar no
navegador pequenos programas (plug-ins) em função da ferramenta usada, WebGL, passando
assim a desfrutar cada vez mais desta tecnologia.
69
Anexo A
Código-fonte referente ao Capítulo 5
<html>
<head>
<title>Triângulo 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("experimentação-webgl");
gl.viewportWidth = canvas.width;
gl.viewportHeight = canvas.height;
} catch (e) { }
if (!gl) {
alert("Não foi possível 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("Não foi possível 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
Código-fonte referente ao Capítulo 6
<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
Código-fonte referente ao Capítulo 6
<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
Referências
[01] Ambiera. Disponível em: <http://www.ambiera.com>. Acesso em: 16 ago 2011.
[02] Ancorador. Disponível em: <http://www.ancorador.com.br/jogos/a-evolucao-dos-jogos-
3d-online>. Acesso em: 05 out 2011.
[03] CONCI, A; AZEVEDO, E. Computação Gráfica: Geração de Imagens. Rio de Janeiro:
Campus, 2003.
[04] Criar Web. Disponível em: <http://www.criarweb.com/artigos/282.php>. Acesso em: 07
out 2011.
[05] C3DL. Disponível em: <http://www.c3dl.org>. Acesso em: 14 ago 2011.
[06] DevMedia. Disponível em: <http://www.devmedia.com.br/post-19773-Entendendo-e-
usando-o-SVG.html>. Acesso em: 09 out 2011.
[07] DevTuts. Disponível em: <http://devtuts.com.br/wp/2010/06/introducao-a-engine-unity-
3d-o-que-e-o-que-posso-fazer-vantagens-e-muito-mais>. Acesso em: 09 out 2011.
[08] FOSSE, J. M. (2004). Representação cartográfica interativa tridimensional: Estudo da
variável visual cor em ambiente VRML. Curitiba: Universidade Federal do Paraná, 2004.
[09] GARROTT, J., & Ferreira, A. Programação na World Wide Web com CGIs (2ª ed.). Lis-
boa: FCA, 2002.
[10] Globo. Disponível em: <http://g1.globo.com/tecnologia/noticia/2011/06/saiba-mais-
sobre-os-principais-navegadores-de-internet.html>. Acesso em: 19 ago 2011.
[11] GLGE. Disponível em: <http://www.glge.org>. Acesso em: 14 ago 2011.
[12] G1. Disponível em <http://g1.globo.com/tecnologia/noticia/2011/01/numero-de-usuarios-
de-internet-no-mundo-alcanca-os-2-bilhoes.html>. Acesso em: 11 nov 2011.
[13] Hardware. Disponível em: <http://www.hardware.com.br/artigos/mundo-jogos3d>.
Acesso em: 05 out 2011.
[14] ICMP - USP. Disponível em: <http://www.icmc.usp.br/ensino/material/html/www.html>.
Acesso em: 05 out 2011.
[15] IDG NOW. Disponível em: <http://idgnow.uol.com.br/seguranca/2011/05/09/falha-grave-
de-seguranca-atinge-chrome-e-firefox-4>. Acesso em: 17 ago 2011.
[16] Info. Disponível em: <http://info.abril.com.br/noticias/internet/silverlight-3-entregara-
videos-com-qualidade-10072009-8.shl>. Acesso em: 14 nov 2011.
[17] ITU – International Telecomunication Union. Disponível em
<http://www.itu.int/en/osg/Pages/biography.aspx>. Acesso em: 11 nov 2011.
76
[18] Learning WebGL. Disponível em: <http://www.learningwebgl.com>. Acesso em: 16 ago
2011.
[19] Macromedia. Disponível em:
<http://www.macromedia.com/support/documentation/br/flashplayer/help/help10.html>.
Acesso em: 10 out 2011.
[20] Microsoft Silverlight. Disponível em: <http://www.silverlight.net>. Acesso em: 07 set
2011.
[21] Net Security. Disponível em: <http://www.net-security.org/article.php?id=1601>. Acesso
em: 16 ago 2011.
[22] No mundo do cinema. Disponível em:
<http://nomundodocinema.blogspot.com/2010/04/historia-do-3d.html>. Acesso em: 06 out
2011.
[23] OpenGL ES Overview. Disponível em: <http://www.khronos.org/opengles>. Acesso em:
06 ago 2011.
[24] SILVA, S. Maurício. HTML 5: A linguagem de marcação que revolucionou a web. São
Paulo: Novatec, 2011.
[25] SpiderGL. Disponível em: <http://www.spidergl.org>. Acesso em: 17 ago 2011.
[26] Stat Counter. Disponível em: <http://www.gs.statcounter.com>. Acesso em: 11 nov 2011.
[27] TecMundo. Disponível em: <http://www.tecmundo.com.br/1421-o-que-e-frame-
buffer.htm>. Acesso em: 07 out 2011.
[28] TecMundo. Disponível em: <http://www.tecmundo.com.br/2469-como-funciona-a-
tecnologia 3d-.htm#ixzz1aC5eb7II>. Acesso em: 09 out 2011.
[29] The Khronos Group: Open Standards for Media Authoring and Acceleration. Disponível
em: <http://www.khronos.org> Acesso em: 02 ago 2011.
[30] Three.js . Disponível em: <http://www.threejs.org>. Acesso em: 17 ago 2011.
[31] Ultravisual. Disponível em: <http://www.ultravisual.co.uk/blog/2011/03/31/three-js-and-
webgl>. Acesso em: 11 set 2011.
[32] Unity3D. Disponível em: <http://www.unity3d.com>. Acesso em: 16 ago 2011.
[33] Vale um post. Disponível em: <http://valeumpost.com.br/opera-12-webgl.html>. Acesso
em: 16 out 2011.
[34] WebGL: OpenGL ES 2.0 for the Web. Disponível em: <http://www.khronos.org/webgl>.
Acesso em: 09 ago 2011.
77
[35] WebGL: A new dimension for browser exploitation. Disponível em: <http://www.net-
security.org/article.php?id=1601>. Acesso em: 09 set 2011.
[36] Win Ajuda. Disponível em: <http://www.winajuda.com/noticias/microsoft-webgl-
inseguro-internet-explorer.html>. Acesso em: 16 ago 2011.
[37] 20 lições que aprendi sobre navegadores e a web. Disponível em:
<http://www.20thingsilearned.com>. Acesso em: 13 ago 2011.
