Visualização em Dispositivos Móveis utilizando WebGL Aluno ... · o quê o programa deve...

Departamento de matemática

Visualização em Dispositivos Móveis utilizando WebGL

Aluno: Matheus de Sousa Suknaic

Orientador: Sinésio Pesco

Introdução

Os dispositivos móveis como celulares e tablets estão desempenhando um grande papel

no cotidiano de todas as pessoas. Conseguimos resolver problemas que antigamente

necessitariam de um microcomputador ou um laptop, por meio de apenas um click nesses

aparelhos portáteis. Portanto, não é de se espantar que todo dia surja um novo app ou

aplicação direcionada para esses dispositivos. Com as últimas evoluções proporcionadas no

mundo da computação gráfica, ficou extremamente mais flexível construir aplicações

relativamente simples, que servem como base para projetos mais complexos. Com esse

intuito, foi-se desenvolvido esse projeto.

O trabalho desenvolvido utilizou o WebGL, uma API (Interface de programação de

aplicações) que é direcionada a representação gráfica do código produzido pelo programador.

Essa API funciona graças ao elemento canvas disponibilizado pelo HTML5, permitindo a

renderização de cenas 2D e 3D. Através das funcionalidades disponibilizadas pelo WebGL,

redigiu-se um código nas linguagens HMTL e JavaScript que tinha como funcionalidade

representar curvas splines. Essas curvas são bastante especiais, pois através delas constroem-

se diversas geometrias mais complexas que permitem uma “renderização” mais suave.

Buscou-se tornar a visualização dessas curvas uma coisa simples tanto na programação

quanto na interação do usuário. Para a parte de programação, utilizou-se uma biblioteca de

interface gráfica chamada THREE, o que tornou o código muito mais simples e claro. Para o

usuário, desenvolveu-se uma interface extremamente simplória que garante que toda a

manipulação que ocorra em relação a essas curvas seja de cunho extremamente fácil.

Metodologia

Antes de começar o projeto em si, foi necessário aprender algumas funcionalidades

básicas no WebGL. Um dos projetos mais simples era plotar um ponto no centro da tela em

um ambiente 2D[1]. Após a conclusão dessa etapa, buscamos alterar um pouco o programa

garantindo ao usuário certo controle. A maneira escolhida para realizar esta tarefa foi permitir

que o usuário tivesse o controle do mouse e que toda vez que ele clicasse na tela um ponto

fosse desenhado com uma cor diferente dependendo do quadrante escolhido[2]. Estudou-se o


uso da biblioteca THREE.JS[3] que é construída utilizando várias funções que manipulam a

API do WebGL e tornam seu uso mais fácil.

Após o aprendizado da aplicabilidade básica do WebGL, foi feito um levantamento de

requisitos com o professor. Essa parte é de extrema importância, pois nesse momento traça-se

o quê o programa deve realizar e como a interface do produto final deve ser, para que o

usuário interaja com ela. Os requisitos podem mudar ao longo do tempo e ajustes devem ser

feitos, porém a parte bruta do projeto deve ser bem especificada para que não ocorram

dúvidas na produção do artefato a ser construído. Nesse levantamento de requisitos três

pontos fundamentais foram levantados:

-O programa deve ser construído de maneira a ser visualizado em dispositivos móveis,

afinal esse é o intuito do projeto.

-O programa deverá exibir curvas splines, que possam ser visualizadas pelo usuário, e

as quais ele possa interagir.

-O programa deve ser multiplataforma, robusto e que garanta a preservação dos dados

inseridos ou construídos nele.

Com esses requisitos em mão, passamos para a parte da construção do código.

Enfim, chegamos a parte na qual começamos o desenvolvimento do produto final que

será exibido em dispositivos móveis. O código encontra-se disponível no apêndice 1, suas

funcionalidades serão explicadas aqui, porém para acompanhar o processo aconselha-se ler o

código junto.

A primeira linha de código diz ao browser que versão de HTML a página que será

gerada pelo código estará escrita. A segunda linha define o tipo de documento como HTML, e

contém as outras tags que serão descritas ao longo do código. Como toda tag em

HTML(exceto a DOCTYPE), ela deve ser fechada, e isso ocorre na última linha de código

informando o fim do arquivo. Na terceira linha temos a tag head que também funciona como a

tag HTML servindo como um container para todos os elementos que se encontram dentro

deste tipo, sendo fechada na nona linha. Na quarta linha temos a tag title que é responsável

pelo nome da página que será gerada desse arquivo HTML, e será exibida na web. Para esse

projeto o titulo escolhido foi “Visualização de Splines”, após colocar essa linha fechamos a

tag responsável pelo título. Na quarta linha temos a tag style que é responsável pelo estilo da

página que será exibida como resultado. Nesse trecho, foi usado um pouco da linguagem

CSS, para definirmos como queríamos que a página fosse formatada. Na sexta linha

colocamos o corpo da página com margem zero em relação a seu display e na sétima linha

colocamos o elemento canvas com sua altura e sua largura total, ou seja, cem por cento, por

fim fechamos a tag style na oitava linha.

Na décima linha começamos a tag body que conterá a maioria do código que exibirá a

parte das curvas splines e incluirá as bibliotecas necessárias para o código funcionar. Essa tag

está sendo fechada na centésima octogésima linha. Em seguida, para a décima primeira linha

e para a décima segunda temos a tag script que é fechada na mesma linha. Essa tag serve para

escrevermos códigos em Javascript ou colocarmos arquivos do tipo JavaScript externos ao

programa, que é justamente o que estamos fazendo nessas duas linhas. Na décima primeira


linha incluímos a biblioteca THREE,e na décima segunda colocamos outra biblioteca que

interage com a mencionada anteriormente porém responsável somente pelo controle do mouse

e suas interações com os objetos da cena. Na décima terceira linha abrimos mais uma tag

script, para fazermos nosso código em Javascript, fechamos essa tag na centésima

septuagésima nona linha. Até aqui utilizando o código apenas em HTML temos a seguinte

página sendo gerada:

Figura 1 - Página sendo exibida somente com os comandos HTML.

Na décima quinta linha nós definimos as seguintes variáveis globais:

-camera: Responsável por exibir o que está sendo contido na cena.

-cameraControls: Responsável por controlar a câmera: para onde ela aponta, seu campo

de visão e etc.

-scene: Responsável por conter os objetos que serão criados posteriormente e inseridos

na cena.

-renderer: Responsável por renderizar os objetos da cena, incluir a câmera para a

visualização dos objetos da cena.

-dropdown: Responsável pela seleção do menu das curvas splines e das cores delas.

-container: Responsável por criar o container que conterá o menu que disponibilizará a

seleção das curvas splines e suas curvas.


-info: Responsável por criar o menu que disponibilizará a possiblidade de escolher

diferentes tipos de curvas e cores.

-line: Responsável por ser o elemento que será usado para desenhar as curvas splines.

-selectspline: Responsável por identificar a curva spline selecionada no momento.

Na décima sexta linha definimos outra variável chamada numPoints que será

responsável pelo número de pontos que cada curva spline conterá quando for desenhada, no

caso escolhemos um valor de 100 pontos, que permite uma visualização decente das curvas e

não sobrecarrega a renderização realizada pelo WebGL.

Na décima oitava linha definimos uma das curvas splines.A função

THREE.CatmullRomCurve3 recebe como parâmetros pontos e desenha um spline que passa

por todos esses pontos passados como referência[4]. Nessa função, estamos passando vetores

com três coordenadas responsáveis pelos pontos de controle dessas curvas. Realizamos o

mesmo procedimento até a quadragésima terceira linha para mais duas curvas splines que

queremos disponibilizar para o usuário escolher.

Na quadragésima quinta linha definimos uma variável chamada splines que funciona

como um “dicionário” para as nossas curvas splines criadas. Por meio dela poderemos

selecionar posteriormente as curvas splines. Entre a quinquagésima primeira linha e

quinquagésima sétima fazemos o mesmo para a variável coloroptions, que é responsável pelas

possíveis cores que as curvas splines podem assumir.

Na sexagésima linha criamos a variável dropdown. Essa variável é responsável por criar

uma caixa que disponibiliza a seleção das curvas splines que disponibilizamos previamente na

variável splines. Para que esse processo seja feito, colocamos os comandos necessários em

HTML entre aspas simples, e os armazenamos nessa variável. A tag responsável por criar

uma lista que exibe possíveis opções de escolha é a tag select. Portanto, abriremos essa tag

nessa linha, colocaremos como atributo no id a variável dropdown, para podermos manipular

ela e alterar seu valor. Em seguida, colocaremos no evento onchange uma função que será

explicada posteriormente, que está relacionada a adicionar uma curva spline a página da web.

Subsequentemente, faremos uma repetição determinada percorrendo o nosso “dicionário” de

splines. Abriremos a tag option passando como valor cada um das curvas splines que estão

disponíveis, e a incluiremos nessa lista que será criada. Na próxima linha fechamos a tag

option, e quando finalizamos a repetição determinada fechamos a nossa tag select. É

importante observar nessas linhas de código, que é necessário incrementar o valor da variável

dropdown. Caso contrário, a variável sobrescreverá as informações passadas. Realizamos o

mesmo processo entre a sexagésima oitava linha e a septuagésima quarta linha para as cores

que as curvas splines podem adquirir.

Na septuagésima sexta linha criamos a função que adiciona as curvas splines a cena que

a página exibe. Primeiramente criamos duas variáveis locais que serão responsáveis por

pegarem os valores que estão selecionados na lista das curvas splines e a cores dessas curvas,

ou seja, a curva e a cor selecionadas no momento. Fazemos que a variável global selectspline

armazene o spline selecionado e fazemos algo similar para cor, porém com uma variável

local. Em seguida, verificamos se existe alguma curva spline desenhado na tela, se a resposta


for verdadeira temos que removê-lo da cena antes de desenhar a curva spline selecionado no

momento. Escolhemos um material para a linha que receberá a cor escolhida pelo usuário,

criamos uma geometria nova e pegamos os pontos da curva spline selecionada. Após isso,

fazemos uma repetição determinada passando para o vértice os pontos de controle da curva

spline selecionada e armazenamos os pontos que ligam esse trajeto. Por fim, atribuímos a

nossa variável linha a geometria criada com o material selecionado e adicionamos à curva

spline a cena.

Na centésima sétima linha criamos uma função que será responsável por mostrar os

pontos de controle de cada curva spline. Essa função é relativamente simples, apenas devemos

saber qual é a curva spline selecionada no momento e conseguimos isso através da nossa

variável global selectspline, e compara-lá com as curvas que temos no nosso “dicionário” de

curvas splines, que no caso é a variável splines. Para cada curva exibimos uma mensagem

mostrando seus pontos de controle, através de uma janela nova criada pela função alert. Na

centésima vigésima quarta linha chamamos nossa função de iniciação, que inicia todos os

parâmetros e prepara a página que será exibida, e na linha seguinte chamamos nossa função

de animação, responsável por mudanças de cunho dinâmico.

Na centésima vigésima sétima linha criamos a função de iniciação. Criamos um novo

elemento separado utilizando entre aspas simples o div, que nesse caso não é uma tag, porém

realiza a mesma coisa que a tag em HTML div faz, que é separar um pedaço do documento

HTML. Atribuímos esse novo elemento a nossa variável global container e o inserimos no

documento. Criamos outro elemento separado e atribuímos a variável global info,

manipulamos alguns elementos estéticos dessa variável garantindo que ela fique centralizada

no meio da página e no seu topo. Posteriormente, atribuímos textos que tem seu display ao

lado das listas criadas anteriormente no elemento dropdown, após adicionar esses textos

colocamos as variáveis dropdown e assim finalmente aparecem como display as duas listas na

tela. Por fim, na variável info associamos um botão para que toda vez que o usuário deseje

saber os pontos de controle de cada curva spline, ele clique e sejam exibidos esses pontos.

Fazemos isso através de uma tag button e um evento onclick que garante que toda vez que

esse botão seja apertado a função a que ele se referencia seja chamado. No caso, a função

referenciada é a mencionada anteriormente responsável pela exibição dos pontos de controle,

também inserimos essa variável no arquivo de maneira similar a variável container.

Logo depois, atribuímos a nossa variável global renderer a função

THREE.WebGLRenderer, essa função seleciona a plataforma de renderização sendo o

WebGL. Definimos que o que será renderizado tem como tamanhos limites à largura e à

altura da tela, e por fim inserimos essa variável no documento. Criamos uma câmera com

projeção perspectiva. O campo de visão escolhido foi de 75º graus, perspectiva é a largura da

janela divida pela altura dela, e os últimos dos parâmetros delimitam o campo de visão para

perto e para longe, nesse caso 0.1 e 10000. Colocamos seu posicionamento no eixo z em 700,

que garante uma boa exibição de todas as curvas, e enfim atribuímos esse novo elemento

criado a variável global camera. Para auxiliar na movimentação da câmera, atribuímos a

variável global cameraControls um novo elemento criado através da função

THREE.TrackballControls. Essa função recebe como parâmetros a câmera que será

controlada, ou seja, que haverá interação do mouse e elemento/variável do arquivo principal


que interagirá com essas mudanças. A velocidade de rotação da câmera foi definida como um

fator de 5.0, o zoom e a movimentação de objetos encontram-se desativados. Além disso,

fazemos com que assim que o usuário para de clicar na tela a curva pare de se movimentar, e

atualizamos o status da variável global render toda vez que existe uma interação de mouse do

usuário com uma das curvas.

Finalmente, criamos nossa cena e atribuímos a variável global scene. Chamamos nossa

função para desenhar curvas splines, limpamos a tela colocando como cor de fundo branco e

sempre renderizando com essa cor apesar das mudanças. Criamos um evento para manter as

curvas sem serem distorcidas e as interações com o usuário ainda corretas se ocorrer algum

redimensionamento de tela e por fim chamamos a função responsável por renderizar todas

essas informações criadas e iniciadas, nessa função de iniciação.

Na centésima septuagésima sétima linha criamos nossa função responsável pelo

redimensionamento da tela. Essa função garante que caso o tamanho da janela seja mudado,

as curvas splines não sejam distorcidas e todas as outras funcionalidades continuem operando.

Nessa função, nós atualizamos a visualização a câmera através de uma matriz de projeção, o

tamanho do renderer e os controles da câmera, por fim chamamos a função responsável pela

renderização dos objetos e da cena.

Na centésima octagésima sétima linha criamos a função responsável pelas animações

realizadas na cena. Essa função chama o método requestAnimationFrame e passando como

call-back a própria função. Toda vez que essa função estiver sendo executada teremos um

update dos controles da câmera, garantindo que eles se encontrem no lugar correto e que a

câmera ainda continue focando nas curvas.

Por fim, criamos nossa função de renderização, nela passamos a cena e a câmera como

parâmetros para continuarem serem renderizados em tempo contínuo e caso ocorra alguma

alteração, que esse update também seja levado em consideração.

Resultados e Discussão

O programa construído cumpre o propósito de gerar curvas splines que possam ser

vistas tanto em computadores quanto em dispositivos móveis como o celular. O usuário pode

escolher dentre três curvas diferentes, cinco cores para cada curva e ainda ver seus pontos de

controle.


Figura 2 – Página mostrando a curva spline1 sendo desenhada com a cor vermelha.

O menu superior exibe as três possibilidades de curvas, enquanto o inferior exibe as

cinco possibilidades para cor. Se o usuário clicar nos pontos de controle uma janela será

exibida mostrando os pontos de controle de cada curva.

Figura 3 – Menu responsável pela seleção de curvas(tela com zoom para melhor

visualização).


Figura 4 – Menu responsável pela seleção de cores(tela com zoom para melhor

visualização).

Figura 5 – Pontos de controle da curva spline3.


Também percebemos que o programa cumpre sua funcionalidade em dispositivos

móveis, o quê condiz com os requisitos levantados no inicio do projeto.

Figura 6 – Foto de um usuário interagindo através de um celular com o projeto.

O programa construído garante a integridade dos dados e a robustez do sistema como

um todo. O maior problema do código gerado é em relação as suas variáveis globais. Como

toda boa prática de programação, o uso de variáveis globais é um pouco conturbado, pois

oferece a chance de funções do próprio módulo alterarem seu valor de maneira indevida e não

esperada pelo programador, e também porque permitem que módulos externos alterem o valor

dessas variáveis, o que pode acarretar problemas nas funções que as chamam ou interagem

com seu valor. Isso é um problema grave, uma vez que ocorre a quebra o encapsulamento do

código, que é um princípio importante na modularização de programas. Para esse código em

específico não há grandes necessidades de se preocupar com as variáveis globais, visto que os

únicos módulos importados são os da biblioteca THREE, e que eles não mexem com as

variáveis criadas ao longo do programa.

Outro problema ainda relacionado a variáveis globais diz respeito ao fato da sua

alocação de memória. Toda variável local é alocada quando uma função é chamada e em

seguida é desalocada quando essa função termina sua execução. Quando criamos uma

variável global, ela é alocada somente uma vez o que em tese parece bom, pois não

precisamos ficar repetindo blocos de funções que criam e destroem uma variável que talvez

tivesse a mesma funcionalidade ao longo do código. Entretanto, com variáveis globais

justamente por “nunca” serem desalocadas ao longo da execução do código, acaba se

exigindo mais da memória, o que pode influenciar a performance do código e seu tempo de

execução. Novamente, pare este código não ocorrem problemas graves, já que o número de

funções não é muito grande e a quantidade de variáveis globais também é razoável, logo não

se tem perdas consideráveis em relação ao seu desempenho.


Conclusão

O trabalho desenvolvido cumpre o papel proposto e todos os requisitos que foram

levantados inicialmente. O que torna esse projeto extremamente interessante é o fato de

podermos gerar páginas na Web que sejam construídas apenas por códigos HTML e

JavaScript e conseguir renderizar cenas através do WebGL sem criar nenhum aplicativo ou

executável para isso. Essa tecnologia permite que os programas fiquem mais leves e

dinâmicos, além de permitir uma interação mais fácil do programador com as novidades

disponibilizadas pela computação gráfica, afinal é extremamente mais fácil programar

utilizando apenas essas duas linguagens do que aprender novas que realizariam o mesmo

processo através de um aplicativo que demoraria mais tempo para ser construído.

As curvas splines disponíveis podem ser acrescentadas em número em uma versão

posterior do projeto sem grandes dificuldades, assim como as cores e outros elementos.

Porém, diante do intuito que o projeto propunha essas curvas representam o suficiente para

mostrar o que o código gera na tela do computador ou dispositivo móvel do usuário. Outra

mudança interessante que também poderia ser feita, seria alugar/adquirir um domínio na Web

e disponibilizar esse projeto para qualquer pessoa que deseje interagir com ele, pois no

momento somente quem possuem os arquivos fontes conseguem realizar isso. Por fim,

também seria válido reavaliar certas variáveis globais que foram criadas ao longo do caminho,

talvez substitui-las por locais, dessa maneira o código ficará mais limpo e executará de

maneira melhor.

Mesmo sendo de cunho simples, o desenvolvimento desse código de exibição de curvas

é extremamente importante, pois como já mencionado anteriormente essas curvas constroem

grande parte das aplicações de modelagem aplicadas atualmente, como por exemplo, o design

de chassis de carros. Se conseguirmos tornar essa aplicação que é realizada por um executável

no computador, transforma-se em algo online utilizando apenas HTML e JavaScript já

teremos avançado muito em relação a essa representação também em dispositivos móveis.

Portanto, considerar-se-á que o projeto cumpre seu objetivo, ainda existindo coisas que

podem ser feitas para torná-lo melhor. Entretanto, como mencionado anteriormente deve-se

ser considerado que já é de grande avanço que consigamos representar o que foi criado apenas

a partir de arquivos HMTL e JavaScript. Provavelmente, com o avanço da computação gráfica

aplicações como essa, se tornarão cada vez comum, mudando a maneira a qual o ser humano

interagirá com seu celular ou qualquer aparelho portátil.

Referências Bibliográficas

1-MATSUDA,Kouichi; LEA,Rodger. WegGL Programming Guide: Interactive 3D

Graphics Programming with WebGL.2.ed.Ann Arbor: Addison-Wesley Professional,2013.

600p (pp. 25-40)

2-MATSUDA,Kouichi; LEA,Rodger. WegGL Programming Guide: Interactive 3D

Graphics Programming with WebGL.2.ed.Ann Arbor: Addison-Wesley Professional,2013.

600p (pp.50-66)

3-three. js-Documentation.Disponível em: <http://threejs.org/docs/index.html#Manual/

Introduction/Creating_a_scene>. Acesso em: 10 de junho de 2016


Anexo 1

Abaixo segue o código do programa:

<!DOCTYPE html>

<html>

<head>

<title> Visualizacao de splines </title>

<style>

body { margin: 0; }

canvas { width: 100%; height: 100% }

</style>

</head>

<body>

<script src="three.js"></script>

<script src="TrackballControls.js"></script>

<script>

/*var camera, cameraControls,scene,renderer,dropdown,container,info,line,selectspline;

var numPoints = 100;

sampleSpline = new THREE.CatmullRomCurve3([

new THREE.Vector3(-50, 50, 0),

new THREE.Vector3(0, 200, 0),




new THREE.Vector3(250, 300, 0)

]);

sampleSpline2 = new THREE.CatmullRomCurve3([




new THREE.Vector3(-150, -75, 0),


new THREE.Vector3(90, -75, 0)

]);

sampleSpline3 = new THREE.CatmullRomCurve3([


new THREE.Vector3(150, -300, 75),


new THREE.Vector3(-150, -300, -75),



new THREE.Vector3(100, -300, 0)

]);

var splines ={

spline1: sampleSpline,

spline2: sampleSpline2,

spline3: sampleSpline3

};

var coloroptions = {

vermelho: 0xFF0000,

verde: 0x00FF00,

azul: 0x0000FF,

rosa: 0xFF00FF,

amarelo: 0XFFFF00

};

var dropdown = '<select id="dropdown" onchange="addSpline()">';

var s;

for ( s in splines) {

dropdown += '<option value="' + s + '"';

dropdown += '>' + s + '</option>';

}

dropdown += '</select>';

var dropdown2 = '<select id="dropdown2" onchange="addSpline()">';

var c;

for ( c in coloroptions ) {

dropdown2 += '<option value="' + c + '"';

dropdown2 += '>' + c + '</option>';

}

dropdown2 += '</select>';

function addSpline(){

var value = document.getElementById('dropdown').value;

var value2 = document.getElementById('dropdown2').value;

selectspline = splines[value];

var selectcolor = coloroptions[value2];


if(line)

{

scene.remove(line);

}

var material = new THREE.LineBasicMaterial({

color: selectcolor,

});

var geometry = new THREE.Geometry();

var splinePoints = selectspline.getPoints(numPoints);

for(var i = 0; i < splinePoints.length; i++)

{

geometry.vertices.push(splinePoints[i]);

}

line = new THREE.Line(geometry, material);

scene.add(line);

}

function displayControlPoints()

{

if( selectspline === sampleSpline)

{

alert("Pontos de controle:(-

50,50,0),(0,200,0),(150,150,0),(150,50,0),(250,100,0),(250,300,0)")

}

else if (selectspline === sampleSpline2)

{

alert("Pontos de controle:(0,0,100),(0,400,0),(37,20,0),(-150,-75,0),(-250,-

100,0),(90,-75,0)")

}

else if( selectspline === sampleSpline3)

{

alert("Pontos de controle:(0,0,0),(150,-300,75),(-150,-300,-75),(-150,-

50,0),(-250,-100,0),(100,-300,0)")

}

}


init();

animate();

function init()

{

container = document.createElement('div');

document.body.appendChild(container);

info = document.createElement('div');

info.style.position = 'absolute';

info.style.top = '20px';

info.style.width = '100%';

info.style.textAlign = 'center';

info.innerHTML = 'Escolha um spline: ';

info.innerHTML += dropdown;

info.innerHTML +='<br/>Escolha uma cor : ';

info.innerHTML += dropdown2;

info.innerHTML +='<br/><button onclick="displayControlPoints()">Pontos de

Controle</button>'

container.appendChild(info);

renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth,window.innerHeight);

document.body.appendChild( renderer.domElement );

camera = new

THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,10000);

camera.position.z= 700;

cameraControls = new THREE.TrackballControls(camera,renderer.domElement)

cameraControls.rotateSpeed = 5.0;

cameraControls.noZoom = true;

cameraControls.noPan = true;

cameraControls.staticMoving = true;

cameraControls.dynamicDampingFactor = 0.3;


cameraControls.addEventListener('change',render);

scene = new THREE.Scene();

addSpline();

renderer.setClearColor(0xFFFFFF, 1);

window.addEventListener( 'resize', onWindowResize, false );

render();

}

function onWindowResize()

{

camera.aspect = window.innerWidth / window.innerHeight;

camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

cameraControls.handleResize();

render();

}

function animate()

{

requestAnimationFrame( animate );

cameraControls.update();

}

function render()

{

renderer.render( scene, camera );

}*/

</script>

</body>

</html>

Visualização em Dispositivos Móveis utilizando WebGL Aluno ... · o quê o programa deve...

Documents

Transcript of Visualização em Dispositivos Móveis utilizando WebGL Aluno ... · o quê o programa deve...