CG Guiao PDF

Computao Grfica
Aulas tericas e prticas

2013 Pedro Freire
Este documento tem alguns direitos reservados:

Atribuio-Uso No-Comercial-No a Obras Derivadas 2.5 Portugal
http://creativecommons.org/licenses/by-nc-nd/2.5/pt/
Isto significa que podes us-lo para fins de estudo.
Para outras utilizaes, l a licena completa. Crdito ao autor deve incluir o nome
(Pedro Freire) e referncia a www.pedrofreire.com.
REQUISITOS.................................................................................................................................................... 6
PARA A ESCOLA .............................................................................................................................................. 6
PARA O ALUNO................................................................................................................................................ 7
AULA 01 ............................................................................................................................................................ 8
PORQU QT ..................................................................................................................................................... 8
OS EXEMPLOS: CGMAZE ................................................................................................................................ 8
OS EXEMPLOS: NEHE ...................................................................................................................................... 9
COMPILAR UM PROJECTO QT .......................................................................................................................... 9
REVISES DE MATEMTICA: VECTORES ...................................................................................................... 10
REVISES DE MATEMTICA: PRODUTO DE MATRIZES ................................................................................. 11
REVISES DE MATEMTICA: TRIGONOMETRIA ............................................................................................ 12
EXERCCIOS .................................................................................................................................................. 12
AULA 02 .......................................................................................................................................................... 15
ECRS CRT .................................................................................................................................................. 15
CONCEITOS BSICOS OPENGL: SISTEMA DE COORDENADAS ........................................................................ 16
JANELAS E VIEWPORTS ................................................................................................................................... 16
PRIMITIVAS 2D ............................................................................................................................................. 17
ANTI-ALIASING E CLEARTYPE ........................................................................................................................ 19
EXERCCIO .................................................................................................................................................... 20
AULA 03 .......................................................................................................................................................... 21
3D ................................................................................................................................................................. 21
SISTEMA DE COORDENADAS 3D .................................................................................................................... 21
PRIMITIVAS 3D ............................................................................................................................................. 21
MATRIZ DE TRANSFORMAO ...................................................................................................................... 22
TRANSLAO DE COORDENADAS.................................................................................................................. 22
REDIMENSIONAMENTO DE COORDENADAS ................................................................................................... 23
ROTAO DE COORDENADAS........................................................................................................................ 23
COMPOSIO DE TRANSFORMAES ............................................................................................................ 26
USO DAS TRANSFORMAES EM OPENGL .................................................................................................... 27
TRANSFORMAES PARA COLOCAO DE CMARA NA CENA ...................................................................... 27
ANIMAO: DOUBLE-BUFFERING .................................................................................................................. 28
ANIMAO: TEMPORIZAO ........................................................................................................................ 29
EXERCCIOS .................................................................................................................................................. 30
AULA 04 .......................................................................................................................................................... 32
PROJECES ................................................................................................................................................. 32
PROJECES EM OPENGL ............................................................................................................................. 33
MATRIZES DE PROJECO ............................................................................................................................. 34
EXERCCIOS .................................................................................................................................................. 35
AULA 05 .......................................................................................................................................................... 37
EXERCCIO: DESENHAR A VISTA INTERIOR DO LABIRINTO ............................................................................ 37
AULA 06 .......................................................................................................................................................... 41
REPRESENTAO DE OBJECTOS SLIDOS ...................................................................................................... 41
CLCULO DE VISIBILIDADE ........................................................................................................................... 41
TRANSPARNCIA E OPACIDADE..................................................................................................................... 44
EXERCCIOS .................................................................................................................................................. 45
AULA 07 .......................................................................................................................................................... 46
O QUE A COR .............................................................................................................................................. 46
PERCEPO DE COR PELO OLHO HUMANO..................................................................................................... 47
GERAO DE COR ......................................................................................................................................... 47
COR EM OPENGL .......................................................................................................................................... 48
TEXTURAS .................................................................................................................................................... 49
EXERCCIOS .................................................................................................................................................. 51
AULA 08 .......................................................................................................................................................... 53
ILUMINAO ................................................................................................................................................. 53
ILUMINAO: MATERIAIS DOS OBJECTOS ..................................................................................................... 55
ILUMINAO: NORMAIS ............................................................................................................................... 57
EXERCCIOS .................................................................................................................................................. 58
AULA 09 .......................................................................................................................................................... 59
MODELOS 3D EM FICHEIROS ......................................................................................................................... 59
FSICA ........................................................................................................................................................... 60
DETECO DE MOVIMENTO HUMANO ........................................................................................................... 60
DESENHAR A VISTA INTERIOR DO LABIRINTO EM 3D .................................................................................... 60
EXERCCIOS .................................................................................................................................................. 62
AULA 10 .......................................................................................................................................................... 64
RAY TRACING ................................................................................................................................................. 64
FRACTAIS ...................................................................................................................................................... 65
SISTEMAS DE PARTCULAS ............................................................................................................................ 67
PROJECTO ..................................................................................................................................................... 69
EXERCCIOS .................................................................................................................................................. 69
BIBLIOGRAFIA ............................................................................................................................................ 70
Requisitos
Para a escola
Requisitos para as salas das aulas prticas de Computao Grfica
Windows XP Service Pack 2 ou Vista, ou
(K)Ubuntu Linux 7.04 32bit e 64 bit, ou
Mac OS 10.4 ou posterior.
Instalao automtica do Qt SDK para a plataforma escolhida, em

http://qt.nokia.com/downloads. Alguns detalhes sobre a instalao
em Windows:
o Durante a instalao deixe que o Qt SDK instale tambm o MinGW,
mesmo que j o tenha no seu computador. Ele no ir alterar o
PATH e no ir interferir com a verso do MinGW j instalada.
o No necessrio o Qt SDK ser instalado com permisses
administrativas nem estar na pasta C:\Programas ou
C:\Program Files.
o Aps instalao, a configurao inicial do Qt Creator costuma estar
incorrecta. Arranque o Qt Creator. Abra Tools / Options / Qt4 / Qt
Versions. Carregue no boto + e escreva:
Version name: 4.6.2
QMake Location: instalao\qt\bin\qmake.exe
MinGW Directory: instalao\mingw
onde instalao o directrio onde instalou o Qt SDK (se no

especificou, foi C:\qt), e carregue em Apply. Depois escolha esta
(4.6.2) como sendo a Default Qt Version e carregue em OK.
Reinicie o Qt Creator antes de trabalhar com ele.
Acesso Internet com um browser.
Deve haver 1 PC por aluno.

Cada aula est programada para uma durao de 4h.
2013 Pedro Freire // Computao Grfica

www.pedrofreire.com
pg. 6
Para o aluno
Comparncia nas aulas. Este guio tem propositadamente omissos certos
elementos importantes para a compreenso total da matria (notas histricas,
relaes entre partes diferentes da matria, avisos sobre erros comuns, etc., ou
seja, elementos para uma nota 20), embora seja suficiente para passar com nota
bastante acima de 10.
Deves ter instalado o Qt SDK em computador prprio se quiseres acompanhar a
matria em casa. V a seco acima para requisitos e a primeira aula para
instrues de instalao. No no entanto de todo necessrio que tenhas estes
sistemas em casa para conseguires passar cadeira (podes us-los na escola).
Esta cadeira assume que j tens experincia no uso de computadores (no
necessariamente no Qt SDK) e em programao C ou C++.

www.pedrofreire.com
pg. 7
Aula 01
Introduo e contextualizao:
O Qt e o seu SDK
Revises de Matemtica.
Hiperligaes.
Porqu Qt
As aulas prticas de Computao Grfica vo ser sobre programao com OpenGL
em ambiente grfico de sistemas operativos modernos com a framework Qt
(pronuncia-se cute). Existem duas razes para isto:
1. OpenGL uma das principais normas para desenho de grficos
tridimensionais (e tambm, em menor importncia, 2D), juntamente com
o Direct3D da Microsoft. Mas ao contrrio do segundo, OpenGL uma
norma aberta suportada universalmente. Podes ver mais informaes
(razoavelmente isentas) sobre a comparao entre ambos na Wikipedia (em
Ingls):
http://en.wikipedia.org/wiki/Comparison_of_OpenGL_and_Direct3D
2. Como no o objectivo desta cadeira explicar-te programao em ambiente

de janelas, e muito menos num sistema operativo especfico de um s
fabricante, usada nas aulas prticas a framework Qt que permite que o
mesmo programa seja compilado para as trs principais plataformas.
Assim, como mais valia das aulas, ters alguma experincia a criar
aplicaes Windows, Mac e Linux em ambiente de janelas.
Mais sobre o Qt (em Ingls) em http://qt.nokia.com/.
Os exemplos: CGMaze
CGMaze uma aplicao desenvolvida especificamente para apoio a estas aulas.
Trata-se de um jogo de labirinto que permite ao jogador entrar no labirinto e
passear por ele com vista na 1 pessoa.

www.pedrofreire.com
pg. 8
O cdigo-fonte do jogo -te dado, com excepo de alguns ficheiros que ters de
ser tu a completar e/ou acompanhar nas aulas. Estes ficheiros foram preparados
para esconderem os detalhes Qt do cdigo OpenGL em si, de forma a poderes
concentrar-te no que mais interessa cadeira.
Os exemplos: NeHe
Vamos tambm estar a usar alguns tutoriais de OpenGL do site Neon Helium
Productions (NeHe). Podes consult-los em: http://nehe.gamedev.net/
Estes exemplos esto preparados para Windows (e Visual Studio), mas foram
convertidos para a framework Qt no captulo 14 do Independent Qt Tutorial em
http://www.digitalfanatics.org/projects/qt_tutorial/.
O cdigo est disponvel para ser descarregado no site do professor, j com as
correces para a ltima verso do Qt que estamos a usar.
Compilar um projecto Qt
Arranca o Qt Creator que vais encontrar no teu menu Incio / Programas. Escolhe
do menu File, Open File or Project:
Navega at ao directrio onde descomprimiste o cdigo-fonte do CGMaze e

escolhe o ficheiro cgmaze.pro. Esse o ficheiro que descreve o projecto CGMaze.

www.pedrofreire.com
pg. 9
Agora, com o projecto aberto, carrega no boto Play do fundo do ecr para o
projecto ser compilado (built) e correr.
Na verso de cdigo-fonte a que tens acesso, normal que o jogo no funcione

bem: no desenha o mapa em nenhuma das 3 vistas. Isso ficar para resolvermos
nas aulas e tu resolveres em projecto.
Usas as mesmas tcnicas para todos os projectos NeHe.
Revises de Matemtica: Vectores

Vectores so uma semi-recta entre dois pontos. Podem ser usados com uma
direco implcita, sendo ento desenhados como uma seta do primeiro ponto
para o segundo:
(x2,y2)
(x1,y1)
x
O vector a linha exemplificada acima, ou seja, a diferena entre os dois pontos.
Como uma diferena, a soma de um ponto com um vector d outro ponto. Por
exemplo, se somarmos ao ponto (x1,y1) acima o vector descrito no mesmo
diagrama, o resultado precisamente o ponto (x2,y2).
Da mesma forma posso ir somando vectores uns aos outros, o que o mesmo
que os ir desenhando em comboio, a cauda do seguinte com cabea do anterior.
O resultado o ponto na cabea do vector final. O vector resultante dessa soma

www.pedrofreire.com
pg. 10
o que liga o primeiro ponto inicial ao ponto do resultado final (diagramas na

aula).
Revises de Matemtica: Produto de Matrizes

Se eu tiver uma matriz A a multiplicar por uma matriz B, a matriz resultante
tem tantas linhas quantas h em A e tantas colunas quantas h em B, e dada
por:
O valor na clula a amarelo a1,1b1,2+a1,2b2,2 e o valor na clula verde

a3,1b1,3+a3,2b2,3.
O nmero de colunas em A tem de ser igual ao nmero de linhas em B para a
multiplicao poder existir.
A multiplicao de matrizes associativa, ou seja
(M1M2)M3 = M1(M2M3)
No entanto a multiplicao de matrizes no habitualmente comutativa, ou seja,
geralmente
M1M2 M2M1
Podes ler muitos mais detalhes sobre a multiplicao de matrizes na Wikipedia
em: http://pt.wikipedia.org/wiki/Produto_de_matrizes. A verso
em Ingls tem muita informao.

www.pedrofreire.com
pg. 11
Revises de Matemtica: Trigonometria

Trigonometria descreve operaes que, com base num ngulo de rotao, nos do
medies da nova posio (x2,y2) de um ponto (x1,y1), depois de ser rodado.
y
(x2,y2)
180
(x1,y1)
O crculo trigonomtrico assume que as rotaes so feitas volta do eixo de

coordenadas (i.e., (0,0)), e que o raio de rotao mede 1. Assim sendo, (x1,y1) =
(1,0) e por definio x2=cos() e y2=sin()*.
Os ngulos so medidos em graus (em OpenGL): 0 define a posio indicada por
(x1,y1) (Leste na Rosa-dos-Ventos), 90 de rotao no sentido inverso ao dos
ponteiros do relgio, ou seja Norte, 180 meia rotao (Oeste) e assim por
diante. 360 uma rotao completa e vlido, mas igual a 0. Tambm podemos
fazer os ngulos na direco oposta e por exemplo -90 = 270.
Exerccios
Qual o resultado e aspecto visual de:
Vector resultante da soma dos vectores (-1,1) com (1,1)

Posio final do ponto (2,3) aps lhe serem somados os vectores descritos
acima
Qual a matriz resultante do produto de:
1 0 0 x
0 1 0 y

0 0 1 z
1
0
0 0 d x x
1 0 d y y
0 1 d z z

0 0 1 1
Ou em Portugus, sen(), mas como a biblioteca matemtica do C (como na maior parte das
linguagens de programao) est em Ingls, a funo chama-se sin() (do Ingls sine).

www.pedrofreire.com
pg. 12
s x
0
sy
sz
0 x
0 y
0 z

1 w
Qual o valor de:
sin( 0 )
cos( 90 )
sin( 270 )
sin( 45 ) + cos( 45 )
cos( 180 )
Olha para o cdigo do CG Maze.
Qual o tipo de dados (classe) que guarda a informao de cada clula do

mapa? Se eu tiver uma varivel c que descreve uma dessas clulas, como
que eu:
o Altero c para indicar que o jogador 1 passou por l
o Se c descreve uma porta fechada, como que o altero para passar a
descrever uma porta aberta?
o Se eu atribuir o nmero 3 a um objecto do jogo (e.g.: um machado),
como que eu coloco esse objecto em c?
Qual o tipo de dados (classe) que guarda a orientao que o jogador tem
no mapa? Se eu tiver uma varivel c que descreve uma tal orientao,
como que eu:
o Altero c para indicar que o jogador rodou para a direita
o Altero c para indicar que o jogador rodou para trs
o Converto c num nmero real (double) que tem essa orientao
mas em graus medidos no crculo trigonomtrico
Qual o tipo de dados (classe) que guarda a grelha de jogo (o conjunto de

clulas pertencentes ao mapa)? Se eu tiver uma varivel m que descreve
uma grelha, como que eu:
o Leio a clula na posio genrica (x,y)
o Altero a clula na posio genrica (x,y)
o Verifico se a posio (x,y) est dentro dos limites da grelha
o Obtenho a largura da grelha
o Verifico se possvel para o jogador actual mover-se para a posio
(x,y)
o Movo o jogador actual que est na posio (x,y), para a frente

www.pedrofreire.com
pg. 13
o Movo o jogador actual que est na posio (x,y), lateralmente para

a esquerda
A janela principal do jogo desenhada visualmente no ficheiro

mainwindow.ui. Abre-o e localiza depois em que ficheiros esto as classes
que so responsveis por desenhar as vistas:
o Do mapa
o Em 1 pessoa, usando OpenGL 2D
o Em 1 pessoa, usando OpenGL 3D
A partir do ponto anterior, descobre onde que deves escrever cdigo para:
o Fazer a inicializao OpenGL da vista em 1 pessoa com OpenGL 2D
o Desenhar uma clula da grelha na vista do mapa nas coordenadas
(x,y)
o Desenhar a vista interior do labirinto a partir da posio (x,y) e
orientao especfica (em 2D e 3D)
Bom trabalho!

www.pedrofreire.com
pg. 14
Aula 02
Hardware: Tipos de ecrs. CRT, LCD, LED. HD e Interlacing. Matriz de pixels,
cores (sub-pixels), varrimento, fotogramas. VGA, DVI, HDMI. Ecrs
estereoscpicos e 3D.
Iluso de animao. Fotogramas.
Ecrs CRT
Tubos de raios catdicos (Cathode-Ray Tube). Ilustrao*:
Onde:
1.
2.
3.
4.
5.
6.
Emissor de electres.
Feixes de electres.
Bobina de foco.
Bobinas de deflexo.
Conexo do nodo (plo positivo).
Tela para separao dos raios para o vermelho, verde e azul da imagem
mostrada.
Imagem retirada da Wikipedia; autor Grm wnr.

www.pedrofreire.com
pg. 15
7. Camada de fsforo com reas vermelhas, verdes e azuis.

8. Detalhe do interior da tela revestida de fsforo.
Conceitos bsicos OpenGL: Sistema de coordenadas

Em OpenGL desenhamos figuras num sistema de coordenadas ideal, com a origem
no canto inferior esquerdo, tal como num grfico em Matemtica.
y
x
As coordenadas dos pontos so nmeros reais (embora tambm possa usar
nmeros inteiros), to precisos quanto o programador precise (dentro da
capacidade de um float ou double). Caber ao OpenGL fazer a converso deste
mundo ideal para os pixels do ecr atravs de projeces (explicadas em aula
posterior).
Janelas e viewports
No vamos poder escrever em todo o ecr do nosso computador. Para alm de
isso interferir com a funcionalidade de outras aplicaes a correr ao mesmo
tempo no ecr, isso poderia ser at um problema de segurana.
Os sistemas operativos costumam separar visualmente cada aplicao em
rectngulos independentes. A terminologia do sistema operativo para este
rectngulo de janela.

www.pedrofreire.com
pg. 16
Cada aplicao pode por sua vez separar a sua janela em vrias seces
rectangulares independentes (para desenhar botes, zonas de desenho, etc.). Cada
vez que um mtodo da aplicao tem uma dessas seces activa para l escrever,
chama a essa seco de viewport.
Viewport do OpenGL
dentro da janela do jogo.
Em OpenGL este viewport define-se com:

glViewport( x, y, width, height );
onde x e y so as coordenadas do canto inferior esquerdo do viewport OpenGL em

relao ao viewport da aplicao onde o OpenGL pode desenhar width e height
so a sua largura e altura, respectivamente. Todos estes valores devem ser inteiros
j que se referem a coordenadas de pixels no ecr.
Toda e qualquer tentativa de desenhar fora do viewport gorada. Ao corte de
linhas e outras figuras dentro de um viewport ou janela chama-se clipping.
Primitivas 2D
Tendo agora um sistema de coordenadas posso comear a desenhar figuras. Por
exemplo, desenho um quadrado entre as coordenadas (0,0) e (1,1) com:
glBegin( GL_QUADS
glVertex2f(
glVertex2f(
glVertex2f(
glVertex2f(
glEnd();
);
0,
0,
1,
1,
0
1
1
0
);
);
);
);
//
//
//
//
Canto
Canto
Canto
Canto
inferior
superior
superior
inferior
esquerdo
esquerdo
direito
direito
Ou seja, indico o tipo de figura que vou desenhar com glBegin(), indico a
posio de cada vrtice com glVertex2f() (ou suas variantes), e termino a
sequncia com glEnd().

www.pedrofreire.com
pg. 17
glBegin() aceita vrios argumentos para vrios tipos de primitivas 2D, como
pontos:
GL_POINTS Trata cada vrtice como um ponto independente a ser

desenhado.
Linhas e curvas:
GL_LINES Trata cada par de vrtices como um segmento de linha

independente a ser desenhado.
GL_LINE_STRIP Desenha um grupo de linhas ligadas umas s outras.

Os primeiros dois vrtices definem o primeiro segmento de linha. O
segundo vrtice e o terceiro definem o segundo segmento de linha e assim
por diante. Se escolher bem os pontos, este argumento permite desenhar
arcos (semi-crculos).
GL_LINE_LOOP Semelhante ao anterior, mas tambm desenhado um

segmento de linha do ltimo vrtice at ao primeiro, fechando a linha
(loop). Se escolher bem os pontos, este argumento permite desenhar
crculos e elipses.
E figuras preenchidas:
GL_TRIANGLES Trata cada conjunto de trs vrtices (i.e., cada triplo de

vrtices) como um tringulo independente.
GL_TRIANGLE_STRIP Desenha um grupo de tringulos colados. Depois

dos primeiros trs vrtices, cada novo vrtice faz um tringulo com os
anteriores dois. Ateno ordem dos vrtices quando estiveres a usar
texturas: consulta a documentao [OGL21].
GL_TRIANGLE_FAN Desenha um grupo de tringulos colados que

partilham todos o primeiro vrtice, da o nome (leque, ou fan em Ingls).
Se escolher bem os pontos, este argumento permite desenhar fatias de
bolo, crculos preenchidos (discos) e elipses preenchidas.
GL_QUADS Trata cada conjunto de quatro vrtices (i.e., cada qudruplo

de vrtices) como um quadriltero independente.
GL_QUAD_STRIP Desenha um grupo de quadrilteros colados. Depois

dos primeiros quatro vrtices, cada novo par de vrtices faz um
quadriltero com os anteriores dois. Ateno ordem dos vrtices quando
estiveres a usar texturas: consulta a documentao [OGL21]. Se escolher
bem os pontos, este argumento permite desenhar donuts (toros ou aros).
GL_POLYGON Desenha um polgono convexo. Igual a GL_LINE_LOOP,

mas preenche a figura.
Existem algumas funes OpenGL utilitrias (que comeam com o prefixo glu)
que auxiliam na criao de curvas e discos, sem precisarmos de ter o CPU a
calcular senos e co-senos. No iremos dar essas funes, mas pesquisa por
gluBeginCurve(), glMap1f() e funes relacionadas.

www.pedrofreire.com
pg. 18
Anti-aliasing e ClearType
Como os ecrs so construdos como uma matriz de pontos, linhas que no
sejam absolutamente horizontais ou verticais no ficam com aspecto perfeito e
tm de ser aproximadas. Se os pontos que compem o ecr no forem em
quantidade suficiente (para serem de tamanho muito pequeno) esta aproximao
perceptvel como defeito na qualidade visual da linha, j que esta ter um
aspecto de escada (aliasing).
Existem duas formas de resolver este problema*:
Na figura acima, 1 representa uma linha diagonal com o normal efeito de

aliasing. Ns podemos no entanto, conforme a linha passa de uma coluna de
pixels para a outra, pintar pixels adjacentes com tons de cinzento, conforme a
linha real passa parcialmente em cada um. O resultado est ampliado em 2 e a
este efeito de suavizao chamamos de anti-aliasing.
No entanto, em figuras muito pequenas como texto com tamanho muito
pequeno isto no chega e os vrios pixels cinzentos fazem o texto parecer
desfocado e difcil de ler. Uma soluo pensarmos em cada uma das trs
componentes RGB como sub-pixels independentes e desenhar a linha nesta
matriz aumentada. Na figura acima, 3 tem a linha original desenhada na
matriz aumentada, 4 a linha desenhada recorrendo aos sub-pixels.
Texto desenhado com este mtodo (chamado de ClearType em Windows e Quartz
no Mac) no universalmente aplaudido j que pessoas diferentes tm
sensibilidade diferente s cores que ficam nas orlas das letras.
Activa-se o efeito anti-aliasing do OpenGL com

glEnable( GL_LINE_SMOOTH );
*
Imagem retirada da Wikipedia, em http://en.wikipedia.org/wiki/ClearType.

www.pedrofreire.com
pg. 19
O mtodo ClearType/Quartz de usar sub-pixels no est disponvel em nenhum

sistema operativo para primitivas de desenho, apenas para texto. OpenGL no o
suporta sequer em texto.
Exerccio
Compila e corre o exerccio NeHe ch2.
Altera a largura e altura da janela onde surgem as figuras. O que acontece

s figuras?
A funo OpenGL glVertex3f() desenha um vrtice de uma figura.

o Encontra o ficheiro onde ela se encontra
o Faz um desenho em papel que mostra cada figura no seu prprio
sistema de coordenadas
o Altera o cdigo para que o tringulo tenho o dobro da altura e o
quadrado passe a ser um rectngulo que tem 4 a largura actual.
O que aconteceria se eu substitusse a funo glViewport() do mtodo

resizeGL() do ficheiro ch2.h por glViewport(0,0,50,50)? Testa a
tua resposta fazendo essa substituio.
No ficheiro ch2.h, apaga tudo da funo paintGL() excepto as duas

primeiras funes OpenGL (glClear() e glLoadIdentity()).
Acrescenta a seguir uma linha glTranslatef(0,0,-10). Assume que a
origem do sistema de coordenadas est ao centro do ecr e vai at 3.0 em
cada direco. Depois de glLoadIdentity() acrescenta instrues para
desenharem da forma mais fivel possvel:
o Uma casa (um quadrado com um tringulo por cima)
o Um losango (ou seja, um quadrado rodado 45)
) e uma estrela de David (Y)
o Uma estrela de 5 pontas (
o A seguintes figuras da forma mais fiel possvel:

Bom trabalho!

www.pedrofreire.com
pg. 20
Aula 03
Translaes, redimensionamentos, rotaes; composio de transformaes
(matriz).
Transformaes em sequncia: Conceitos de animao (double buffering,
fotogramas, fps, lapso entre fotogramas).
Lidar com temporizaes no Qt. Exemplos no CGMaze.
3D
3D a sigla de 3 Dimenses e refere-se a objectos que tm volume. Para alm
das duas dimenses expressas numa folha de papel (x e y, ou largura e altura)
temos tambm a profundidade (z), em 3D. O mundo nossa volta pode ser todo
descrito num sistema de coordenadas 3D.
Sistema de coordenadas 3D
Em OpenGL, o sistema de coordenadas tridimensional inclui as coordenadas x e y
j nossas conhecidas, e z, profundidade, que positiva para fora do ecr, na
direco do observador e negativa para dentro do ecr.
y
ecr
x
z
Quando trabalhamos com 3D, habitual pensarmos na origem das coordenadas

ao centro do ecr. Embora possamos mudar isso de uma srie de maneiras, vers
que esta a forma mais fcil de trabalhar com OpenGL inicialmente.
Primitivas 3D
Todas as primitivas 2D de OpenGL podem aceitar 3 coordenadas em vez de 2,
transformando-as em primitivas 3D. s trocar o 2 que faz parte do nome da
funo por 3 e acrescentar uma 3 coordenada (z) ao final.

www.pedrofreire.com
pg. 21
Matriz de transformao
Todas as transformaes que eu posso aplicar a coordenadas/pontos 3D
(translao, redimensionamento, rotao), podem ser feitas multiplicando uma
matriz 44 com a transformao respectiva por um vector* com as coordenadas
tridimensionais, mais uma coordenada, w, que ter inicialmente o valor 1.
Exemplo:
1
0
0 0 0 x1 x2
1 0 0 y1 y2
=
0 1 0 z1 z2

0 0 1 w1 w2
Este exemplo mostra a matriz identidade que no faz qualquer alterao s

coordenadas. Eu carrego essa matriz identidade para o sistema OpenGL com
glLoadIdentity();
Nota que estas matrizes aplicam a transformao antes de desenhar o respectivo

ponto. Elas servem para eu transformar o objecto antes dele ser desenhado o ecr,
e no para transformar um objecto j desenhado no ecr.
Translao de coordenadas
Se eu precisar de fazer uma translao a um objecto (mover o objecto) composto
por vrios pontos com coordenadas x, y e z, uso a seguinte matriz de
transformao antes de definir os pontos:
1
0
0 0 d x
1 0 d y
0 1 d z
0 0 1
Cada um dos factores dk somado coordenada respectiva.

Fao uma translao em OpenGL com a funo
glTranslatef( dx, dy, dz );
onde dx, dy e dz so floats, ou

glTranslated( dx, dy, dz );
onde dx, dy e dz so doubles. V no entanto a seco abaixo sobre composio

de transformaes.
Tambm chamado de vector coluna por s ter uma coluna.

www.pedrofreire.com
pg. 22
Redimensionamento de coordenadas
Se eu precisar de alterar as dimenses proporcionais (ou seja, ampliar ou reduzir)
um objecto composto por vrios pontos com coordenadas x, y e z, uso a seguinte
matriz de transformao antes de definir os pontos:
s x
0
0
sy
0
0
sz
0
0
0
Cada um dos factores sk multiplicado pela coordenada respectiva. Se eu quiser

redimensionar um objecto para passar a ter metade do tamanho, uso 0.5 para
todos os valores de sk. Se quiser triplicar a sua largura (x) e duplicar a altura e
profundidade (y e z), uso sx=3, sy=2 e sz=2.
Nota que este redimensionamento relativo origem de coordenadas. Se o objecto
no estiver centrado na origem, ele tambm vai mudar de posio, aproximandose ou afastando-se da origem.
Repara como este quadrado redimensionado (reduzido) para metade do
tamanho, mas tambm se move para mais perto da origem das coordenadas:
y
4
3
2
1
1
0
0.5 0
0 0.5 0
0
0 0 .5
0
0
0
0
0
4
3
2
1
1
Resolvo este problema tendo os meus modelos dos objectos centrados na origem
das coordenadas. Mais sobre isto, abaixo.
Fao um redimensionamento em OpenGL com a funo
glScalef( sx, sy, sz );
onde sx, sy e sz so floats, ou

glScaled( sx, sy, sz );
onde sx, sy e sz so doubles. V no entanto a seco abaixo sobre composio

de transformaes.
Rotao de coordenadas
Existem trs matrizes diferentes para rotao de um objecto composto por vrios
pontos com coordenadas x, y e z, em torno de cada um dos eixos (x, y ou z). As

www.pedrofreire.com
pg. 23
matrizes de transformao devem ser usadas antes de definir os pontos do

objecto.
Para rodar no eixo dos x, uso a seguinte matriz:
0
1
0 cos
x
0 sin x
0
0
0
sin x
cos x
0
0
0
0
Para rodar no eixo dos y, uso a seguinte matriz:
cos y
0
sin y
0 sin y
1
0
0 cos y
0
0
0
0
Para rodar no eixo dos z, uso a seguinte matriz:
cos z
sin
z
sin z
cos z
0
0
0 0
0 0
1 0
0 1
Cada rotao precisa de ter um argumento x, y ou z, que so os

ngulos (em graus) de rotao. A direco dos ngulos
determinada segundo a regra da mo direita*: coloco a mo direita
como se estivesse a segurar num copo, com o polegar para cima.
Agora, sem mover os dedos da mo, alinho o polegar com cada um
dos eixos. A direco em que os outros 4 dedos apontam a
direco de rotao de ngulos positivos, e vice-versa. Por exemplo,
um z negativo faz um objecto rodar na direco dos ponteiros do relgio.
Imagem retirada da Wikipedia; autor Jfmelero.

www.pedrofreire.com
pg. 24
Se eu tiver um modelo de avio* visto de baixo e a voar para a direita (ou seja,
paralelo ao plano de z=0 e a voar na direco do eixo dos x), ento ele est
orientado nos eixos de inrcia e em Ingls z o yaw ou heading (guinada), x o
roll (rotao) e y o pitch (tambm conhecido como trim em submarinos, ou
arfagem em portugus).
Estas notaes so frequentes quando usamos OpenGL em programao de jogos.

Para fazer uma rotao combinada em 2 ou mais eixos, a ordem em que so
feitas as rotaes importante.
Tambm por esta razo, a rotao em OpenGL no se faz desta forma. Em vez
disso definimos um vector (x, y, z) que ser o eixo de rotao, assim como o
ngulo () de rotao.
(x,y,z)
Assim, se o vector for (1,0,0) por exemplo, a rotao faz-se em torno do eixo dos
x. A direco dos ngulos continua a determinar-se pela regra da mo direita.
Imagem retirada da Wikipedia; autor ZeroOne.

www.pedrofreire.com
pg. 25
Nota que todos estes eixos de rotao passam pela origem de coordenadas, e no
necessariamente pelo objecto/ponto em si. Se o objecto no estiver centrado na
origem, ele tambm vai mudar de posio, num crculo que passa pelo objecto e
perpendicular ao e centrado no eixo respectivo.
(x,y,z)
Resolvo este problema tendo os meus modelos dos objectos centrados na origem
das coordenadas. Mais sobre isto, abaixo.
A operao faz-se com a funo
glRotatef( angulo, x, y, z );
onde angulo, x, y e z so floats, ou

glRotated( angulo, x, y, z );
onde angulo, x, y e z so doubles. V no entanto a seco abaixo sobre

composio de transformaes.
Composio de transformaes
Um conceito importante em programao OpenGL que existe sempre activa
uma matriz de transformao que aplicada a todas as coordenadas que so
enviadas para o sistema.
Esta uma nica matriz que aglomera todas as transformaes que foram
pedidas pela aplicao. Isto porque, se chamarmos M a uma matriz de
transformao e C ao vector de coordenadas, ento quando aplicamos duas
transformaes estamos a fazer:
M2(M1C)
Como a multiplicao de matrizes associativa,
M2(M1C) = (M2M1) C
Eu posso ento combinar ou compor todas as transformaes que preciso de fazer
numa s matriz e usar apenas essa com todos os vectores de coordenadas de que
precisar!

www.pedrofreire.com
pg. 26
Uso das transformaes em OpenGL

As funes OpenGL que comeam com glLoad... substituem a matriz de
transformaes. As restantes funes (glTranslatef(), etc.) aplicam a sua
transformao a essa matriz, fazendo
M = MMtransf
onde Mtransf a nova matriz da transformao a ser aplicada. Como a
multiplicao de matrizes no comutativa, esta operao equivale a aplicar
primeiro a nova transformao Mtransf e s depois a transformao M (v como
acima, aplicar o produto M2M1 ao vector de coordenadas C equivale a aplicar
primeiro a transformao M1 seguida da transformao M2).
Ou seja, as transformaes tm de ser especificadas pela ordem
inversa no OpenGL!
Por outro lado, isto significa que no fcil desligar apenas algumas das
transformaes que temos activas. Por isso mesmo, o OpenGL d-nos funes
que guardam a matriz de transformaes actual numa pilha (at 32 posies) de
onde podem ser recuperadas.
As funes so:
glPushMatrix();
glPopMatrix();
Isto prefervel a tentar aplicar a transformao inversa porque mais rpido e

evita erros de arredondamento.
Outro cuidado a ter ter os modelos dos objectos guardados na aplicao com
coordenadas baseadas na origem (de forma a ser fcil redimension-los e rodlos). De cada vez que temos de desenhar uma cena OpenGL, aplicamos as
transformaes adequadas para o colocar na posio final da cena.
Isto costuma fazer-se pela seguinte ordem:
glTranslatef( dx, dy, dz );
glRotatef( angulo, x, y, z );
glScalef( sx, sy, sz );
Esta tcnica tambm til quando precisamos de ter 2 ou mais objectos idnticos
em posies diferentes da nossa cena.
Transformaes para colocao de cmara na cena

Em muitas situaes queremos que a cmara que filma a cena 3D esteja
posicionada dentro dessa mesma cena. OpenGL no suporta cmaras (ou
melhor, a cmara est sempre na origem das coordenadas, a olhar na direco
inversa do eixo dos z), pelo que isto faz-se movendo e rodando toda a cena de
forma a posicionar os objectos no sitio correcto.
Por exemplo, se o jogador olha para a direita, ento podemos (antes de desenhar
qualquer objecto OpenGL) aplicar uma rotao dos objectos 90% para a esquerda.

www.pedrofreire.com
pg. 27
Assim, apesar da cmara estar no mesmo stio (origem das coordenadas), vemos
nossa frente os objectos que esto direita.
Existe uma funo auxiliar que nos ajuda a definir a posio da cmara,
criando na realidade as rotaes e translaes adequadas para fingir essa
colocao.
Essa funo a seguinte:
gluLookAt( ex, ey, ez, cx, cy, cz, ux, uy, uz );
Todos os argumentos so doubles. ex, ey e ez definem as coordenadas da

cmara (ou olho ou eye), cx, cy e cz definem as coordenadas para onde estamos
a olhar (centro de foco) e ux, uy e uz definem um vector que indica para onde
cima (up), de forma a especificarmos a orientao em termos de rotao.
Animao: double-buffering
Como j foi discutido, animar uma cena desenhar vrios fotogramas com
pequenas alteraes que indicam movimento ou outras alteraes.
Para simular movimento, podemos simplesmente redesenhar exactamente a
mesma cena, com os mesmos objectos, modificando apenas a translao dada a
um ou mais objectos.
Mas redesenhar uma cena pode causar problemas. Antes de comear a desenhar
devemos limpar o viewport, comeando depois a enviar polgonos para o OpenGL.
Por muito rpido que este desenho seja, pode existir um instante em que nos
apercebemos de ver um fotograma parcialmente desenhado. Conforme isto
acontece num e noutro fotograma, a imagem parece piscar (flicker).
Existem duas tecnologias que evitam este efeito. A primeira o double-buffering.
Se a placa grfica tiver memria suficiente e o suportar, ela tem duas zonas de
memria (buffers) para cada viewport, guardadas em memria. Uma a que est
neste momento a ser desenhada no ecr. A outra onde os comandos OpenGL
esto a desenhar os polgonos. Quando esse desenho termina, a placa grfica troca
os buffers instantaneamente, sem nunca ser visvel uma cena inacabada. So
normalmente os sistemas subjacentes que fazem essa troca automaticamente, o
que o caso do Qt.
Outra tecnologia a sincronizao da troca de buffers com o sinal vertical-retrace
do monitor. Isto garante que a troca no ocorre durante o desenho do viewport no
ecr, fazendo com que um dos fotogramas tenha visvel a metade superior do
buffer antigo e a metade inferior do novo buffer, efeito se ocorresse com frequncia
tornava-se visvel. Esta tecnologia est sempre activa em OpenGL.
Estas duas tecnologias garantem animao suave em OpenGL, mas a segunda
impe um limite na animao: a quantidade de fotogramas por segundo (fps).
Como a troca de buffer est sincronizada com o incio de um novo fotograma, no
conseguimos exibir fotogramas com mais frequncia do que aquela que o
monitor suporta (geralmente por volta de 50 a 60 fps).

www.pedrofreire.com
pg. 28
Animao: temporizao
Precisamos ento de fazer duas coisas para fazer uma animao:
1. Uma forma de a cada d milissegundos* repetir nova cena, e
2. Uma forma de saber que alteraes fazer em cada nova cena.
O primeiro requisito tem de ser satisfeito pelo sistema que est a suportar a
aplicao. No faz parte da norma OpenGL lidar com temporizaes.
V nos exerccios abaixo como que o Qt resolve a questo de temporizaes, na
prtica.
O conceito em si semelhante em todos os sistemas: fazer com que uma funo
da minha aplicao seja chamada a cada d ms. Mas como escolher o d?
Depende do sistema e da suavidade pretendida para a animao. Em alguns
sistemas, o relgio que controla as vrias chamadas minha funo comea a
contar um novo perodo de d ms assim que chama a minha funo. Se a minha
funo ainda estiver a correr quando voltarem a passar d ms, ocorrem uma de
trs coisas:
1. Ele espera que a minha funo termine antes de a voltar a chamar;
2. Ele chama de imediato a minha funo;
3. Ele ignora esta oportunidade de chamar a minha funo.
Seja qual for o caso, ele continua imediatamente a contar novo perodo de d ms.
Repara que se estiveres a trabalhar num sistema que funcione como 1 ou 2, podes
sobrecarreg-lo se a tua funo no terminar antes de d ms. Cada nova chamada
tua funo mais lenta porque corre ao mesmo tempo que a anterior, e assim
por diante:
d ms
tempo
funo
funo
funo
funo
No Qt, o intervalo especificado o lapso de tempo entre duas chamadas minha

funo pelo que estes problemas no ocorrem:
d ms
tempo
funo
funo
funo
Milsimos (1/1000) de segundo, abreviado ms.

www.pedrofreire.com
pg. 29
Lembra-te que a tua aplicao pode correr em computadores bastante piores do

que o teu pelo que experimentar se a tua funo consegue fazer tudo em d ms,
no garantia que sempre o consiga.
A suavidade com que eu quero fazer a animao o que determina o d. Segundo
alguns autores, o olho humano precisa de ver 16 fotogramas por segundo ou
mais para os entender como imagens em movimento (i.e., sem se aperceber dos
fotogramas individuais). Ento precisamos de um d de 1/16 segundos ou
1000/16 62 milissegundos, no mximo. Por outro lado, uma frequncia acima
dos 60 fotogramas por segundo est acima daquilo que a maior parte do
hardware consegue reproduzir, pelo que o d mnimo 1000/60 16
milissegundos.
O d ideal estar entre estes valores e depende da vossa aplicao e necessidades de
CPU vs. suavidade na animao.
Ento e agora como sei que alteraes fazer em cada nova cena? Se o tempo que a
minha funo de desenho da cena demora varia bastante de computador para
computador, como que eu garanto que o movimento de um objecto na cena do
ponto A para o ponto B que deveria demorar 1s, demora de facto 1s?
A nica forma de garantir isto a tua funo ler o relgio do sistema. Quando
esse objecto iniciar o seu movimento, deve ser lido o relgio (com preciso de
milissegundo). Cada vez que vou desenhar nova cena, leio de novo o relgio para
saber quanto tempo passou e fao algumas contas para saber onde deveria estar o
objecto neste momento para o desenhar nesse stio.
O intervalo d neste caso serve apenas para impedir que o sistema fique com carga
a 100% sem necessidade disso e que os processos normais (habitualmente de
interface com o utilizador ou actualizao das regras do jogo) continuam a
correr.
Exerccios
Imagina um quadrado desenhado em coordenadas 3D, mas no plano z=0, e com
os cantos (x,y,z):
(-1,1,0)
(1,1,0)
(1,-1,0)
(-1,-1,0)
Imagina que quero rodar o quadrado ao longo do eixo dos x, 90 (ou seja, se o
quadrado fosse o ecr do teu porttil, estou a pegar na parte de cima e a desloclo para baixo at ficar paralelo com a mesa: lembra-te no entanto que o eixo de
rotao do ecr diferente do deste quadrado). Quero tambm depois desloc-lo
para longe de mim (z negativo), por 1 unidade.
Faz um esboo em papel do quadrado inicial e sua posio final.

www.pedrofreire.com
pg. 30
Faz as matrizes de transformao.
Faz os clculos separados com cada matriz.
Combina as duas matrizes e faz os clculos com a matriz resultante.
V se ambos os resultados batem certo.
No ficheiro nehewidget.cpp, funo NeHeWidget::NeHeWidget()

vs o cdigo que cria o temporizador. Ele chama a funo timeOut() do
ficheiro ch4.h a cada 50ms (v a linha 8 do ficheiro ch4.h).
Reduz o lapso de 50ms para 20ms e v o que acontece. o esperado?
Estuda as funes paintGL() e timeOut() do ficheiro ch4.h. Mantendo

o lapso em 50ms, tenta acelerar a rotao das figuras alterando apenas o
cdigo em timeOut().
Faz com que as figuras rodem ambas em torno do eixo dos y central,
enquanto rodam nos seus prprios eixos. Repara: eu desenho sempre o
tringulo primeiro e depois o quadrado, pelo que quando eles se cruzam,
deve estar sempre o quadrado em cima (ou frente) do tringulo,
certo? Verificas isto? Que concluses tiras?
Altera o cdigo para passares a pensar de forma diferente. Em vez de

rodares as figuras, faz uma cmara rodar volta delas (usa
gluLookAt()).

www.pedrofreire.com
pg. 31
Aula 04
Projeces ortogonais e perspectivas. Relao de aspecto.
O jogo CGMaze: desenhar o mapa com operaes OpenGL 2D.
Projeces
Projeces so formas de representar uma cena 3D num plano 2D. Repara que o
ecr de um computador tem apenas duas dimenses (2D): altura e largura. Como
que crio ento a iluso de profundidade?
H vrias formas de o fazer. V por exemplo estes cubos:
O ecr ou folha de papel onde ests a ler isto plano (2D), mas no entanto estas
linhas oblquas do-te a iluso de um objecto tridimensional. A este tipo de
projeco chama-se perspectiva.
Ela imita a viso humana da realidade. Se, muito perto da cara, colocares o
polegar e indicador muito afastados, no vais conseguir ver a ponta desses dedos.
Mas se esticares o brao, no os consegues afastar o suficiente para os deixares de
ver.
olho
Isto acontece porque a lente esfrica dos nossos olhos apanha luz que se situa
dentro de um cone sua frente.

www.pedrofreire.com
pg. 32
Por outro lado, se eu alinhasse a minha viso para estar exactamente de frente
para o cubo, tudo o que veria seria isto:
Se a face de trs tivesse exactamente as mesmas dimenses quando desenhada no

papel e as arestas que as ligam estivem paralelas ao eixo imaginrio dos z que sai
do ecr, ento chamo a esta projeco uma projeco paralela ou ortogonal*.
Claro que no mundo real, mesmo alinhado de frente para o cubo, a face de trs do
mesmo seria mais pequena. A projeco ortogonal no imita a viso humana da
realidade, mas muito usada em planos tcnicos de engenharia (arquitectura,
aeroespacial, etc.).
Projeces em OpenGL
Eu crio uma projeco de perspectiva em OpenGL em que o olho est na origem
das coordenadas a olhar na direco do eixo negativo dos z, com:
gluPerspective( cvy, aspecto, zperto, zdistante );
onde todos os argumentos so doubles e cvy ngulo do campo de viso

medido em relao ao eixo dos y, aspecto a relao de aspecto (normalmente
do viewport) medida por
aspecto =
largura
altura
e zperto e zdistante so distncias a partir da origem e na direco do eixo

negativo dos z. S so desenhados pontos que esto entre zperto e zdistante.
zperto tambm define o plano de projeco que representa o ecr.
Ou ainda ortogrfica.
Experimenta olhar de cima para um copo que tenha os lados direitos. Irs conseguir ver o fundo
do copo completo, dentro do crculo que define a boca do copo.
Ou seja, elas definem os planos de corte perto e distante (near and far clipping planes): mais sobre
isto mais tarde.

www.pedrofreire.com
pg. 33
Como o ecr rectangular (e no circular, como o olho humano), a perspectiva

define uma pirmide quadrangular em vez de um cone.
y
cvy
olho
z
x
zperto
zdistante
Eu crio uma projeco ortogonal com:

gluOrtho2D( esquerda, direita, baixo, cima );
onde todos os argumentos so doubles e representam as coordenadas limtrofes

no viewport.
Por exemplo, se usar:
gluOrtho2D( 0, 100, 100, 0 );
ento vou estar a trabalhar num viewport cujo sistema de coordenadas :

x
(0,0)
viewport
y
(100,100)
No entanto nota que devo usar as funes OpenGL 2D (i.e., com z=0) nesta
projeco. Para poder usar outros valores de z, consulta a funo glOrtho() no
manual OpenGL.
Matrizes de projeco
Os clculos de projeco (em perspectiva ou ortogonal), podem ser feitos com
matrizes adequadas. De facto, as funes OpenGL explicadas nesta aula,
multiplicam a matriz de projeco actual pela matriz gerada pela funo.
Mas a matriz de transformao que estudmos na aula anterior aplicada
separadamente desta. Como indicamos ento que matriz queremos modificar?

www.pedrofreire.com
pg. 34
Para escolher a matriz de projeco, usamos a funo:

glMatrixMode( GL_PROJECTION );
E para escolher a matriz de transformaes normal, usamos:

glMatrixMode( GL_MODELVIEW );
Esta funo tambm aceita como argumento GL_TEXTURE para outra matriz.
Todas as operaes seguintes sobre matrizes (carregar identidade, transformaes
e projeces) ocorrem sobre a matriz seleccionada por esta funo.
Exerccios
Porque que nos exerccios da aula 2 foi necessrio adicionar uma linha
glTranslatef(0,0,-10)?
Porque que nos exerccios da aula anterior necessrio que o glTranslatef()
tenha uma translao z de -6.0?
Altera o exerccio da aula 2 (ch2) para passar a ter uma projeco ortogonal em
vez de perspectiva.
Abre o projecto CGMaze. Abre os ficheiros student_viewmap.h e
student_viewmap.cpp. Usando projeces ortogonais e OpenGL 2D, completa
esses ficheiros. Dicas:
Depois de localizares quais funes vais ter de preencher, comea por

idealizar em papel qual o sistema de coordenadas que vais usar (vais
precisar disso para desenhar os quadrados e para estabelecer o sistema de
coordenadas com gluOrtho2D()). Onde vai estar a origem?
Provavelmente no mesmo stio da origem das posies x, y que o mtodo
ViewMap::paint(int, int, Cell) vai receber. As posies que esse
mtodo recebe esto no mesmo sistema de coordenadas idealizado no
ficheiro map.h. Agora que coordenadas visuais (de OpenGL) vo ter os
vrtices do quadrado que vai ser desenhado para a clula (Cell) na posio
0,0?* E a clula na posio 0,1? Com que contas algbricas transformo as
coordenadas das clulas nas coordenadas dos vrtices do quadrado
respectivo?
Comea por preencher o mtodo ViewMap::paint(int, int, Cell)

antes do ViewMap::paint(). O primeiro desenha um quadrado de cada
vez, enquanto o segundo desenha todo o mapa que foi desenhado at
agora. Deixa o segundo para ltimo, depois de preencheres os restantes
mtodos.
Antes do glBegin() que vais criar para desenhar cada quadrado,

estabeleces a cor de desenho para parede, cho e jogador 1 respectivamente
com:
glColor3ub( VIEWMAP_COLOR_3UB_WALL );
Isso depende de que altura e largura queres dar ao teu quadrado. Determina isso arbitrariamente.

www.pedrofreire.com
pg. 35
glColor3ub( VIEWMAP_COLOR_3UB_FLOOR );
glColor3ub( VIEWMAP_COLOR_3UB_PLAYER1 );
Recorda os exerccios da aula 1 para saber como determinar o que a clula

passada ao mtodo ViewMap::paint(int, int, Cell) contm.
Para o mtodo ViewMap::paint(int, int, Cell) desenhar os

quadrados de imediato, assegura-te que ele termina com uma chamada a
glFlush(). Esta funo no normalmente usada excepto para algumas
situaes de animao.
Apagas visualmente o viewport, (que deves (re)estabelecer

ViewMap::resize() relembra a aula 2 e o exerccio ch2) com:
em
glClear( GL_COLOR_BUFFER_BIT );
Inicializa o OpenGL (no construtor da classe) com:

glShadeModel( GL_SMOOTH );
glClearColor( 0.0f, 0.0f, 0.0f, 0.0f );
glDisable( GL_DEPTH_TEST );
nessa inicializao que tambm deves ter o teu gluOrtho2D(), com as

funes auxiliares glMatrixMode() e glLoadIdentity() volta (v
exemplo ch2 que acabaste de fazer no exerccio anterior a este).
Neste momento o mapa deve estar a ser desenhado correctamente.
Preenche por fim o mtodo ViewMap::paint(). Para este saber o que

desenhar, deve lembrar-se do que vai sendo enviado para
ViewMap::paint(int, int, Cell). Cria ento uma varivel que
guarde estas clulas, para depois a varreres e enviares para o ecr
chamando este ltimo mtodo dentro de dois ciclos for() encadeados (v
comentrio j existente em ViewMap::paint() para um exemplo). Nota
que o glFlush() ao final de ViewMap::paint(int, int, Cell) faz
com que este processo seja lento: tenta optimiz-lo.

www.pedrofreire.com
pg. 36
Aula 05
O jogo CGMaze: desenhar a vista interior com operaes OpenGL 2D.
Exerccio: Desenhar a vista interior do labirinto

Vamos desenhar a vista interior do labirinto usando operaes OpenGL 2D. Este
exerccio visa familiarizar-te com alguns conceitos e dar-te uma base de
comparao para vires a ter a noo da simplicidade que na realidade desenhar
objectos com OpenGL 3D em vez de usar operaes 2D.
Repara nesta vista do labirinto:
O cu sempre cinzento e o cho sempre castanho. Ento comeo a

desenhar a vista do interior do labirinto desenhando o horizonte:
Agora desenho as paredes do corredor que est frente do jogador. Como fao
isso sem recorrer a OpenGL 3D?
Neste caso (labirinto) posso simplificar o processo. Repara como as paredes so
sempre desenhadas com duas linhas cruzadas em X e linhas verticais entre elas a
fazer de divisrias entre cada parede.

www.pedrofreire.com
pg. 37
...
...
Mas no devo desenhar de imediato as linhas cruzadas, porque elas so

interrompidas quando encontro uma parede de frente. V este exemplo:
Isto significa que tenho de ir desenhando as paredes, das que esto mais perto do
jogador para as que esto mais longe, verificando sempre se encontro uma parede
de frente. Quando encontrar, desenho-a e paro o processo de desenho.
Por exemplo, imagina que quero desenhar esta vista do labirinto:
Eu preciso de avanar, a partir da posio do jogador e na direco em que ele est

a olhar (Norte, neste caso), at encontrar uma parede de frente.
O processo o seguinte:
1.
2.

www.pedrofreire.com
pg. 38
3.
4.
5.
6.
7.
8.
9.
Em cada passo, desenhar a parede de frente trivial ( um rectngulo). As paredes

ou corredores laterais tambm so extremamente simples, j que so trapzios
(parede) ou rectngulos (corredor).
Se eu estabelecer um sistema de coordenadas quadrado (que ser distorcido para o
rectngulo do viewport pelo OpenGL), desenhar as linhas obliquas dos trapzios
extremamente simples, uma vez que sero diagonais a 45.
Se tiver nas variveis x e y as coordenadas do mapa do jogador e em compass a
sua bssola (orientao), ento o seguinte cdigo percorre o corredor em frente ao
jogador:
for( n = 0; n < VIEW2D_DEPTH; n++ )
{
map->moveLeft ( &x, &y, compass );
// posicao da esquerda
if( map->isWallOrDoor(x, y) )
// desenha parede
else
// desenha corredor
www.pedrofreire.com
pg. 39
map->moveRight( &x, &y, compass );

map->moveRight( &x, &y, compass );
// posicao da direita
map->moveLeft ( &x, &y, compass );
map->moveFwd ( &x, &y, compass );
// posicao em frente ao jogador
// lembra-te de fazer break se for parede!
}
Aqui, VIEW2D_DEPTH uma constante que define a profundidade mxima de

desenho. O valor de 100 uma boa aposta para esta constante, mas depende de
como vais diminuindo a largura dos trapzios desenhados.
Vamos ento pr isto prtica.
Abre o projecto CGMaze. Abre os ficheiros student_view2d.h e
student_view2d.cpp. Usando projeces ortogonais e OpenGL 2D, completa
esses ficheiros. Dicas:
As funes View2D::View2D() e View2D::resize() vo-se manter

muito semelhantes ao que j fizeste para o desenho do mapa.
As macros que comeam com VIEW2D_COLOR_3UB_ definidas em

student_view2d.h devem ser usadas para cores, tal como no desenho
do mapa.
A funo View2D::paint() chamada para desenhar a vista do jogador

na posio do mapa x e y, orientado para compass. Ela ter ento o cdigo
descrito anteriormente para percorrer o corredor em frente ao jogador,
assim como cdigo teu para desenhar o horizonte e as paredes e corredores.

www.pedrofreire.com
pg. 40
Aula 06
Representao de superfcies e objectos slidos (polygon meshes).
Clculo de visibilidade (superfcies escondidas).
Transparncia (canais alfa, blending e depth buffer).
Representao de objectos slidos

Um objecto slido representado aproximando a sua superfcie com tringulos
e/ou quadrilteros (ou polgonos em geral). Quando mais densa a rede de pontos
que define essas superfcies, melhor aproximado fica o objecto.
Em Ingls, chama-se a esta rede de polgonos, uma polygon mesh.

Desenhamos cada polgono com os habituais glBegin() e glEnd(). O objecto
dever estar representado na nossa aplicao em algum formato que seja prtico
(vector, lista, etc.).
Clculo de visibilidade
Existem duas situaes em que uma face ou superfcie pode no estar visvel:
1. Se est total ou parcialmente oculta por outra superfcie, ou
2. Se est de costas para o observador.
A primeira situao resolvida com recurso medio da distncia entre o
observador e a superfcie. Superfcies mais perto ocultam superfcies mais
distantes.

www.pedrofreire.com
pg. 41
Repara como o cubo mais perto oculta parcialmente algumas faces do cubo mais
distante. Repara ainda como a face de cima do cubo de trs deixa de ter a forma
para ter a forma
No trivial determinar o aspecto de uma superfcie aps a sua ocultao parcial.

Uma das tcnicas usadas por motores 3D para resolver o problema da ocultao
de superfcies orden-las por distncia ao observador e desenh-las das mais
distantes para as mais prximas. A esta tcnica chama-se de z-ordering.
Esta tcnica tem duas vantagens:
1. Por mais complexa que seja a ocultao parcial de superfcies (lembra-te
que cada superfcie pode ser parcialmente oculta por vrias outras
superfcies) a tcnica resulta num aspecto correcto,
2. Permite o desenho e uso de superfcies semi-transparentes.
Outra tcnica de cada vez que a placa grfica desenha um pixel de uma qualquer
superfcie, guardar a distncia a que ele est do observador. Se o pixel que vai
desenhar est mais prximo do que aquele que j existe no ecr na mesma
posio, substitui-o, caso contrrio, ignora-o. A esta tcnica chama-se de zbuffering ou depth-buffering.
Cena tridimensional*.
O depth-buffer respectivo.
A vantagem desta tcnica que se duas superfcies se cruzam, ela representa-as de

forma realstica.
*
Imagem retirada da Wikipedia; autor Zeus.

www.pedrofreire.com
pg. 42
Activo o depth-buffer em OpenGL com:

glDepthFunc( GL_LEQUAL );
glEnable( GL_DEPTH_TEST );
A funo glDepthFunc() no vai ser explicada. Consulta o manual do OpenGL

para mais informaes.
Desactivo-o com:
glDisable( GL_DEPTH_TEST );
Como isto cria um novo buffer (o depth-buffer), tenho de me lembrar de agora em

diante, quando quiser apagar o ecr do OpenGL, usar:
glClear( GL_COLOR_BUFFER_BIT |
GL_DEPTH_BUFFER_BIT );
Estas tcnicas perdem no entanto tempo precioso quando acaba por desenhar
superfcies que esto totalmente ocultas.
Por fim, repara como nos cubos que esto desenhados acima metade das suas
faces esto totalmente ocultas. Essas so sempre tambm as faces que esto de
costas para o observador. A eliminao das faces de trs dos objectos (em Ingls,
back face culling), assim outra tcnica que pode poupar placa grfica at 50%
do tempo de desenho de um objecto.
Em OpenGL eu fao essa eliminao ao indicar os pontos de cada superfcie por
uma ordem especfica quando olho para ela pelo seu lado visvel (a frente). Se
quando projectada, esta superfcie tiver os seus pontos pela ordem oposta, ela est
de costas para o observador.
1
Ordem dos ponteiros

do relgio
Ordem inversa aos

ponteiros do relgio
Eu posso indicar que as faces da frente so indicadas com pontos na ordem

inversa dos ponteiros do relgio (counter clockwise), que o valor por omisso,
com:
glFrontFace( GL_CCW );
O inverso (ordem dos ponteiros do relgio, ou clockwise), faz-se com:

glFrontFace( GL_CW );
Para que o OpenGL elimine agora as faces dos polgonos com base na ordem pela
qual eu lhe dou os pontos, fao:
glCullFace( GL_BACK );
glEnable( GL_CULL_FACE );
O argumento para glCullFace() pode tambm ser GL_FRONT (para ele no

desenhar as faces que esto de frente para o observador) ou

www.pedrofreire.com
pg. 43
GL_FRONT_AND_BACK para ele desenhar apenas pontos e linhas, mas nenhuma

face.
Transparncia e opacidade
Transparncia (ou, inversamente, opacidade), uma caracterstica de superfcies
que se aplica em desenho 2D e 3D. gua, culos, copos, janelas e faris so
exemplos de alguns objectos que so parcialmente transparentes. Mar, culos
escuros e vidros fumados so exemplos de objectos com nveis maiores de
opacidade (i.e., menos transparentes).
Transparncia: 0%
Opacidade: 100%
Transparncia: 40%
Opacidade: 60%
Transparncia: 80%
Opacidade: 20%
O grau de transparncia de uma imagem (foto) pode variar dentro da imagem.

Uma imagem tem dimenses quadrangulares, mas se eu tiver zonas na imagem
com transparncia de 100%, consigo ter imagens com qualquer formato. Para
poder ter uma transparncia diferente em cada pixel que compe a imagem, cada
pixel tem ento de ter informao sobre a sua transparncia (ou melhor,
opacidade), para alm da sua cor. Chama-se a essa informao de opacidade o
canal alfa e como complementa os trs canais de cor (RGB*) que definem a cor
do pixel, chama-se habitualmente a uma imagem neste formato, uma imagem
RGBA.
Esta funcionalidade (chamada de blending em OpenGL) tem de ser activada pois o
seu clculo desacelera o processamento normal. Activo-a com:
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
glEnable( GL_BLEND );
e desactivo-a com:
glDisable( GL_BLEND );
A funo glBlendFunc() no vai ser explicada. Consulta o manual do OpenGL

para mais informaes.
Posso usar o canal alfa em imagens dadas como texturas ao OpenGL ou como um
quarto valor numrico quando especifico uma cor. Mais detalhes sero dados em
aula posterior, quando cobrirmos estes temas.
Red, Green, Blue. Mais sobre isto em aula posterior.

www.pedrofreire.com
pg. 44
Exerccios
Compila e corre o exerccio NeHe ch5. Este desenha dois objectos slidos
tridimensionais: uma pirmide de base quadrangular e um cubo.
Localiza o cdigo que desenha ambos os slidos.
O cdigo que desenha a pirmide usa apenas superfcies triangulares. A

superfcie inferior da pirmide devia no entanto ser um quadrado. Olha
para o cdigo e explica o que se est a passar. Altera o cdigo para
verificares a tua hiptese.
Compila e corre o exerccio NeHe ch8. Quando correres este programa podes usar
as setas para acelerar o cubo nos seus eixos, PgUp e PgDown para
ampliar/reduzir, L para activar/desactivar a iluminao (lighting mais sobre
isto em aula posterior), B para activar/desactivar a transparncia (blending) e F
para iterar por 3 filtros (para qualidade da imagem mais sobre isto em aula
posterior).
Experimenta activar a transparncia (B) sem rodar o cubo. Repara como

vs a face de trs do cubo mais pequena do que a face da frente, tal como
vimos na aula sobre perspectivas.
Experimenta activar a transparncia (B) e roda o cubo (setas). Repara como

as faces so todas desenhadas, mesmo se as estamos a ver por detrs.
Como sabe o OpenGL quando desenhar as faces apesar de estarem a ser
vistas por detrs? Corrige isto. V como o resultado no o desejado,
quando temos faces semi-transparentes.
Altera a coordenada z do 1 vector para passar a ser -1. Corre de novo o

programa e activa iluminao (L) e transparncia (B). Repara no resultado.
Aproveita o tempo que sobrar nesta aula para completar o exerccio da aula
anterior.

www.pedrofreire.com
pg. 45
Aula 07
Cor (interpretao da cor, modelos de cor, cones de cor nos olhos; emissores de
cor nos pixels).
Profundidade de cor: P/B, escala de cinzentos, palette ou RGB.
Tipos de ficheiros de imagens (GIF, TIFF, PNG, JPG); Compresso lossy vs. lossless.
Canais alfa.
Texturas.
O que a cor
Se estiveres fechado no teu quarto noite, sem fontes de luz, no vs nada. A
cor predominante o preto. Se apontares uma Webcam para o Sol (nunca faas
isso com os olhos, sem proteco), ela satura e mostra uma imagem branca.
Cor est ento relacionada com luz. Quando de um objecto no chega luz aos
nossos olhos, o objecto parece-nos preto. Se chega muita luz com muita
intensidade, ele parece-nos branco.
Mas para alm da intensidade da luz, ela tem outra propriedade que a sua
frequncia. A luz radiao electromagntica (o mesmo tipo de radiao usada
em rdio, WiFi, telefones celulares, televiso por antena, etc.) e feita de fotes,
partculas que vibram com uma rapidez (frequncia) varivel. Quando essa
frequncia estiver aproximadamente entre os 400THz* e os 700THz, essa luz
visvel e tem cores diferentes dependendo da frequncia.
Espectro de Luz
Se os nossos olhos virem um objecto que emite luz nas frequncias verde e
encarnada, esse objecto visto como tendo cor amarela (a combinao das duas).
A combinao de todas as cores visto como cor branca, e a sua ausncia como
cor negra.
Cada objecto reflecte (ou emite) para os nossos olhos uma ou mais destas
frequncias. A cor que vemos num objecto tem a ver com a combinao destas
frequncias.
*
Tera-Hertz. 1Hz um ciclo por segundo. 1T so 1000G (mil gigas), ou 1012 (um bilio). 1THz
so ento um bilio de ciclos por segundo. V na bibliografia, [SI].
Imagem retirada da Wikipedia; autor Spigget.

www.pedrofreire.com
pg. 46
Percepo de cor pelo olho humano

A retina no olho humano tem trs tipos de clulas sensveis luz. So chamados
de cones de cor. Um desses tipos apenas sensvel luz violeta (short wavelength,
S), o outro luz verde (middle wavelength, M) e o terceiro luz amarela (long
wavelength, L).
Curva de resposta dos cones em relao s frequncias de luz
Existe um quarto tipo de clulas que so os bastonetes, mas estes apenas esto
activos com luz de baixa intensidade. Como s existe um tipo destas clulas, o ser
humano v a preto-e-branco em situaes de pouca luz.
Gerao de cor
Thomas Young props em 1801 a sua teoria tricolor, ao observar que qualquer
cor podia ser criada usando apenas trs luzes de cores especficas. James Clerk
Maxwell e Hermann von Helmholtz mais tarde refinaram esta teoria.
Existem dois grandes modelos tricolores usados:
RGB, sigla das cores encarnado (Red), verde (Green) e azul-mar (Blue). Estas
so as chamadas cores aditivas, pois adicionam cor a um preto base. Como
tal, este o modelo usado em ecrs de televiso e computador de todos os
tipos (CRT, LCD, LED, etc.).
CMYK, sigla das cores azul-cu (Cyan), magenta (Magenta), amarelo

(Yellow) e preto (blacK). Estas so as chamadas cores subtractivas (excepto
o preto), pois fazem com que a superfcie onde so aplicadas (geralmente
uma folha de papel branco) deixe de reflectir todas as frequncias de luz.
Como tal, este o modelo usado em impressoras de todos os tipos. A cor
preta tem a ver com conseguir um preto mais saturado do que o
conseguido pela combinao das outras trs cores, o que extremamente
importante para a legibilidade de texto em papel.
importante entender que as cores que no so as cores principais do modelo,

nunca sero to saturadas (brilhantes, vivas) quanto uma luz que emita
directamente nessa cor. Existem assim limites cromticos nestes modelos, mas
estes ainda aproximam suficientemente bem essas cores.

www.pedrofreire.com
pg. 47
Cor em OpenGL
Em Computao Grfica interessa-nos obviamente o modelo RGB. J te foi
mostrado na aula 02 uma ampliao do ecr de um computador com os seus
subpixels (emissores de cada uma das cores RGB em cada pixel). Este ento o
modelo usado pelo OpenGL.
Escolho uma cor em OpenGL com uma das seguintes funes:
glColor3f( r, g, b );
onde r, g e b so floats entre 0.0 (essa cor est desligada) e 1.0 (essa cor est na
sua intensidade mxima), ou:
glColor3ub( r, g, b );
onde r, g e b so bytes sem sinal entre 0 (desligada) e 255 (intensidade mxima).

Existem vrias outras variantes destas funes com outros tipos de dados.
Consulta o manual do OpenGL para mais informaes.
Estas funes devem ser usadas antes de especificar o ponto que ter a dita cor
dentro de um bloco glBegin() a glEnd(), embora possam tambm ser usadas
antes desses blocos.
Como especificam cores de pontos, estas funes podem ser usadas para tambm
especificarem a transparncia desses pontos. Para isso substitumos o 3 no nome
da funo por um 4, e adicionamos um ltimo (4) argumento que ser a
opacidade desse ponto (0 para total transparncia).
A funo:
glClearColor( r, g, b, a );
onde r, g, b e a so floats entre 0.0 e 1.0, especifica qual a cor e opacidade (alfa)
do viewport quando o quisermos apagar com glClear().
Como escolho os valores RGB para uma cor? Em praticamente qualquer aplicao
que suporte cor, podes escolher visualmente uma cor e ela d-te os valores RGB
(habitualmente em bytes sem sinal) para essa cor.
Por exemplo, na aplicao Paint dos acessrios do Windows posso editar as cores:

www.pedrofreire.com
pg. 48
Como vs no canto inferior direito, a cor que escolhi tem os valores r=36,
g=236 e b=26 (bytes sem sinal), e poderia ser escolhida em OpenGL com:
glColor3ub( 36, 236, 26 );
Texturas
A forma mais simples que OpenGL usa para simular uma textura numa
superfcie simplesmente pintar essa superfcie (que geralmente um
quadriltero) com uma imagem.
O OpenGL precisa de receber a imagem num formato especial, pelo que precisa
sempre da ajuda do sistema onde est a correr. No Qt, abrimos essas imagens
com:
QImage i, igl;
if( !i.load("imagem.png") )
{
i = QImage( 16, 16, QImage::Format_RGB888 );
i.fill( QColor(Qt::green).rgb() );
}
igl = QGLWidget::convertToGLFormat( i );
As partes mais claras dependem da tua aplicao. O que estamos a fazer tentar
abrir um ficheiro de imagem. Se no o conseguirmos abrir, entramos no if() e
criamos uma imagem de 1616 pixels slida de cor verde (ou outra que prefiras),
de forma a assegurar que a aplicao ainda funciona mesmo que no tenha a
imagem disponvel.
Repetimos este processo para todas as imagens que precisarmos.
Criamos agora no OpenGL tantos identificadores de textura (um identificador
um nmero inteiro que o OpenGL te ir dar) quantos as texturas (imagens) que
vou usar (neste caso, 1):
GLuint texturas[1];
glGenTextures( 1, texturas );
Para cada textura (0 a primeira e nica neste caso), vou agora carregar e
configur-la no OpenGL. Comeo por escolher a textura que vou configurar:
glBindTexture( GL_TEXTURE_2D, texturas[0] );
glBindTexture() escolhe uma das texturas criadas com glGenTextures()

para ser usada nas funes OpenGL posteriores relativas a texturas. Como estas
texturas so para ser aplicadas a uma superfcie, devemos usar sempre
GL_TEXTURE_2D.
Agora posso, opcionalmente, alterar alguns parmetros da textura relativos
forma como a mesma deve ser exibida no ecr e/ou comportar-se. Por exemplo:
glTexParameteri(
GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER,
GL_LINEAR_MIPMAP_NEAREST );

www.pedrofreire.com
pg. 49
glTexParameteri(
GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER,
GL_LINEAR );
As funes glTexParameteri() especificam o comportamento da textura. O

segundo argumento especifica o atributo a especificar e pode ser (entre outros):
GL_TEXTURE_MIN_FILTER Filtro a usar quando a textura vai ser

reduzida em termos de pixels.
GL_TEXTURE_MAG_FILTER Filtro a usar quando a textura vai ser

ampliada em termos de pixels.
Por fim, carrego a imagem para essa textura. Isto pode ser feito com:
glTexImage2D(
GL_TEXTURE_2D, 0, GL_RGB,
igl.width(), igl.height(), 0,
GL_RGBA, GL_UNSIGNED_BYTE, igl.bits() );
ou, se quiser que o OpenGL prepare vrias verses pequenas (mipmaps*) da

imagem que lhe dou, com:
gluBuild2DMipmaps(
GLU_TEXTURE_2D, GLU_RGB,
igl.width(), igl.height(),
GLU_RGBA, GLU_UNSIGNED_BYTE, igl.bits() );
As constantes GLU_ so idnticas s GL_ de mesmo nome. Nestas funes,

GL_RGBA e GL_UNSIGNED_BYTE so o formato que o Qt usa na funo
QGLWidget::convertToGLFormat(). GL_RGB (ou a constante 3 nos exemplos
NeHe) indica como que prefiro que o OpenGL guarde a imagem internamente
(neste caso, em formato RGB e sem o canal alfa).
Para mais detalhes sobre estas funes, consulta o manual do OpenGL.
Este processo deve ser repetido para todas as texturas, na inicializao do OpenGL
(e.g.: funo View3D::View3D() do CGMaze). Devemos tambm activar
texturas bidimensionais com:
glDisable( GL_TEXTURE_1D );
glEnable ( GL_TEXTURE_2D );
mip do Latim multum in parvo ou muito num espao pequeno. Isto garante uma maior
velocidade e qualidade das imagens quando exibidas numa superfcie pequena.

www.pedrofreire.com
pg. 50
Para usar agora esta textura no desenho de um quadriltero, definido como:

y
4
3
2
1
1
uso o seguinte cdigo:

glBindTexture( GL_TEXTURE_2D, texturas[0]
glBegin( GL_QUADS );
glTexCoord2i(0,0); glVertex3i(2, 2,
glEnd();
);
0);
0);
0);
0);
A funo glTexCoord2i() deve ser usada antes de especificar cada ponto do

quadriltero e ela indica, para o ponto que vai ser desenhado, qual o canto da
textura que corresponde a esse ponto.
As coordenadas da textura so sempre definidas como sendo:
y
(1,1)
textura
(0,0)
Assim, ao ponto (vrtice) (2,2) do quadriltero, corresponde o canto (0,0) da

textura. Ento uso glTexCoord2i(0,0) antes de glVertex3i(2,2,0).
Exerccios
Qual a transparncia da cor de fundo usada nesse exerccio?
Repara como o OpenGL cria transies de cores entre pontos que tenham
cores diferentes (o tringulo). Altera ento o exerccio para teres o
tringulo roxo e o quadrado com a metade superior azul-mar e a inferior
amarelo-alaranjado.

www.pedrofreire.com
pg. 51
Altera o cubo gerado para que passe a ter o aspecto de um caixote de

madeira (dica: procura uma imagem adequada na mesma pasta onde est a
actual).
Faz com que o cdigo gere uma textura simples encarnada se no

encontrar o ficheiro da textura. Testa-o.
Faz com que duas das faces contguas do caixote passem a ter o aspecto de
uma paisagem. O cho de ambas as faces deve estar colado um com o
outro.

www.pedrofreire.com
pg. 52
Aula 08
Iluminao (luz ambiente e focos, luz cromtica), sombreamento.
Iluminao
Vimos na aula anterior que a luz que incide sobre uma superfcie o que lhe d a
cor. E uma imagem onde no incida nenhuma luz est preta. Em OpenGL
podemos simular essa iluminao: isto dar mais realismo s superfcies.
Esfera com todas as superfcies pintadas da

mesma cor
Esfera com cada superfcie pintada com uma

cor diferente dependendo da orientao para a
fonte de iluminao
Existem quatro componentes diferentes de iluminao:
Luz ambiente (GL_AMBIENT) Quando esta fonte de luz reflectida por

todos os objectos da cena, ela ilumina de novo cada objecto, com menos
intensidade, mas vinda (para todos os efeitos) de todos os lados. Esta
componente d o mesmo tipo de iluminao independentemente da
direco em que esteja virada cada face do objecto.
Luz difusa (GL_DIFFUSE) Componente da iluminao que reflectida

directamente pelo objecto, e portanto a quantidade de luz reflectida por
cada face do objecto para o observador depende do ngulo entre o
observador, a face e a fonte de iluminao (no depende da distncia
fonte, s dos ngulos). Algumas faces sero mais claras e outras mais
escuras devido a essas diferenas de ngulo. Este a componente que ajuda
a identificar a forma de um objecto.

www.pedrofreire.com
pg. 53
Luz especular (GL_SPECULAR) Componente que representa o reflexo

directo da fonte de iluminao em si (habitual em fontes artificiais a
iluminar objectos brilhantes). Depende do ngulo entre o observador, a face
e a fonte de iluminao, mas tambm da distncia fonte. Este o tipo de
luz que ajuda a identificar a textura de uma superfcie.
Emisso de luz quando o prprio objecto emite luz, em todas as

direces.
Estas componentes esto presentes em cada fonte de iluminao, e esta a base do

sistema de iluminao (ou sombreamento) Blinn-Phong usado pelo OpenGL*:
Ambiente
+ Difusa
+ Especular
= Phong
No exemplo acima, as componentes ambiente e difusa da luz so azuis e a

componente especular branca.
Em OpenGL activo os clculos de iluminao com:
glEnable( GL_LIGHTING );
Existe uma quantidade finita de fontes de iluminao (lights) que podemos criar
na nossa cena. O mnimo de fontes de iluminao suportadas de oito, mas o
valor difere de GPU para GPU. A quantidade suportada na placa grfica onde est
a ser compilado o programa dado por GL_MAX_LIGHTS.
As funes para configurar as fontes de iluminao so as seguintes:
glLightf (
glLightfv(
glLighti (
glLightiv(
fonte,
fonte,
fonte,
fonte,
parametro,
parametro,
parametro,
parametro,
float
float
int
int
valor
valores[]
valor
valores[]
);
);
);
);
Aqui, fonte identifica qual a fonte de iluminao estamos a configurar. Pode

assumir o valor GL_LIGHT0 para a 1 fonte, GL_LIGHT1 para a 2, etc..
parametro identifica qual o parmetro que estamos a configurar e valor ou
valores ser o valor a atribuir a esse parmetro (se o parmetro precisa de mais
de um valor para ser configurado, precisamos de usar as funes que recebem
vectores).
parametro pode assumir um dos seguintes valores (entre outros):
GL_AMBIENT controla a propriedade ambiente desta fonte de iluminao.

definida como um vector de 4 valores float RGBA, onde 1.0 representa
Imagem retirada da Wikipedia; autor Rainwarrior.

www.pedrofreire.com
pg. 54
a intensidade mxima e -1.0 a intensidade mnima. Esta a cor da luz aps

ser reflectida por todos os objectos da cena.
GL_DIFFUSE controla a propriedade difusa desta fonte de iluminao.

definida como um vector de 4 valores float RGBA, onde 1.0 representa a
intensidade mxima e -1.0 a intensidade mnima. Esta a cor da luz
quando reflectida directamente por cada objectos da cena.
GL_SPECULAR controla a propriedade especular desta fonte de

iluminao. definida como um vector de 4 valores float RGBA, onde
1.0 representa a intensidade mxima e -1.0 a intensidade mnima. Esta a
cor da luz quando observada directamente.
GL_POSITION controla a posio da fonte de iluminao. definida

como um vector de 4 valores float, que so as coordenadas x, y, z, w da
fonte. w, como de costume, deve ser 1.0, mas se for 0.0, OpenGL assume
que a fonte direccional (i.e., est infinitamente distante). Esta posio
movida pela matriz GL_MODELVIEW, como qualquer outro vrtice na cena.
Se quiser ter um foco de iluminao (spot light), parametro assume um dos

seguintes valores (entre outros):
GL_SPOT_DIRECTION controla a direco do foco de iluminao.

definida como um vector de 3 valores float, que so as coordenadas x, y,
z do vector que indica a direco da fonte. Esta posio movida pela
matriz GL_MODELVIEW, como qualquer outro vrtice na cena.
GL_SPOT_CUTOFF controla a abertura do foco de iluminao. definida

como um valor float, que o ngulo (em graus) em roda do vector
direco do foco, em que este ilumina.
GL_SPOT_EXPONENT controla a concentrao do foco de iluminao.

definida como um valor float, quanto mais alto, maior o grau de
concentrao do foco (independentemente de GL_SPOT_CUTOFF).
Tenho de activar cada fonte de iluminao individualmente:

glEnable( fonte );
Posso ainda especificar a iluminao ambiente para toda a cena com:

GLfloat rgba = { 0.2, 0.2, 0.2, 1.0 };
glLightModelfv( GL_LIGHT_MODEL_AMBIENT, rgba );
Este o valor de omisso para a iluminao ambiente de toda a cena.
Iluminao: Materiais dos objectos

Cada objecto desenhado em OpenGL simula um objecto do mundo real, esse feito
num qualquer tipo de material. Cada material reage de forma diferente s
componentes ambiente, difusa e especular de cada fonte de iluminao. Isto
representa-se pelas cores do prprio material em cada uma dessas componentes.
Defino isto com:
www.pedrofreire.com
pg. 55
glMaterialfv( face, parametro, float valores[] );

glMaterialiv( face, parametro, int
valores[] );
Aqui, face identifica qual a face que estamos a configurar. Pode assumir os
valores GL_FRONT, GL_BACK ou GL_FRONT_AND_BACK. parametro identifica
qual o parmetro que estamos a configurar e valores sero os valores a atribuir
a esse parmetro.
parametro pode assumir um dos seguintes valores (entre outros):
GL_AMBIENT,
GL_DIFFUSE,
GL_AMBIENT_AND_DIFFUSE
GL_SPECULAR controla as respectivas propriedades deste material.
definida como um vector de 4 valores float RGBA, onde 1.0 representa
intensidade mxima e -1.0 a intensidade mnima. O componente alfa
ignorado em todas as propriedades excepto na respeitante luz difusa.
GL_EMISSION controla a propriedade de emisso de luz deste material.

definida como um vector de 4 valores float RGBA, onde 1.0 representa a
intensidade mxima e -1.0 a intensidade mnima.
GL_SHININESS controla o expoente especular deste material. definida

como um vector de 1 valor float.
Quando usamos glMaterial(), deixamos de especificar as cores dos vrtices

que vamos desenhar com glColor(). Isso significa que quando comeamos a
desenvolver o nosso motor grfico sem usar iluminao (usando glColor()),
temos de alterar o cdigo que j tnhamos at esse momento quando
introduzimos iluminao.
Existe no entanto uma funcionalidade OpenGL para evitar esta reescrita. muito
comum especificar apenas as propriedades GL_AMBIENT_AND_DIFFUSE do
material com a mesma cor do objecto em si. Ento podemos dizer ao OpenGL para
usar a chamada glColor() para especificar essa cor.
Fazemos isto com:
glEnable( GL_COLOR_MATERIAL );
glColorMaterial( face, parametro );
Depois destas chamadas, cada chamada a glColor() funciona da mesma forma

que uma chamada a glMaterial() com a mesma cor.
Por fim, se usares texturas, assegura-te que tens esta linha no cdigo:
glTexEnvf( GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE,
GL_MODULATE );
ou que a chamada glTexEnv() no existe j que GL_MODULATE o valor por

omisso. Se quiseres que os focos especulares sejam desenhados, usa ainda isto:
glLightModel( GL_LIGHT_MODEL_COLOR_CONTROL,
GL_SEPARATE_SPECULAR_COLOR );
S funciona em OpenGL 1.2.

www.pedrofreire.com
pg. 56
Iluminao: Normais
O ngulo que cada fonte de iluminao faz com cada superfcie determina a
quantidade de luz que ela reflecte e/ou a sua cor. Esse ngulo no calculado
automaticamente. Eu devo indicar um vector (chamado de vector normal) para
cada vrtice, que perpendicular face e aponta para fora do objecto. Se todos
os vrtices do objecto tiverem a mesma normal, s a precisamos de especificar ao
incio do glBegin().
Por exemplo, o cubo da aula anterior seria definido com os seguintes vectores:
Nota no entanto que o OpenGL assume trs coisas em relao aos vectores
normais indicados:
1. Tm origem na origem de coordenadas,
2. Esto de facto perpendiculares superfcie,
3. Tm norma ou dimenso de 1.
Se estas trs regras no forem perfeitamente cumpridas, a luz reflectida no ser
realista.
Defino o vector normal de uma superfcie usando:
glNormal3f( x, y, z );
Existem outras variantes da funo para aceitar outros tipos de dados, como
habitual em OpenGL.
Como o vector transformado pela matriz GL_MODELVIEW, como qualquer
outro vrtice na cena, ele pode deixar de ter norma 1. Isto s acontece se o
redimensionar, mas posso precisar de o fazer. Posso pedir ao OpenGL para
automaticamente normalizar os vectores normais com:
glEnable( GL_NORMALIZE );
A vantagem de cada normal ser associada aos vrtices e no superfcie em si,

que quando estamos a usar polgonos para nos aproximarmos de uma superfcie
curva (v exemplo ao incio da aula 06, e abaixo), podemos especificar cada
normal de cada vrtice com o valor correcto para a perpendicular em relao
superfcie curva original nesse ponto! Dessa forma, o OpenGL calcula valores
reflectivos independentes e preenche a superfcie com um gradiente (transio) de
cores que ir dar uma maior iluso de superfcie curva.

www.pedrofreire.com
pg. 57
Uma normal por cada superfcie
Uma normal por cada ponto + Phong
Chama-se a este mtodo Gouraud shading e faz parte integrante do Blinn-Phong

shading usado pelo OpenGL.
Exerccios
Compila e corre o exerccio NeHe ch7. Quando correres este programa podes usar
as setas para acelerar o cubo nos seus eixos, PgUp e PgDown para
ampliar/reduzir, L para activar/desactivar a iluminao (lighting mais sobre
isto em aula posterior), B para activar/desactivar a transparncia (blending) e F
para iterar por 3 filtros (para qualidade da imagem mais sobre isto em aula
posterior).
Muda a iluminao difusa para passar a ser com uma luz encarnada.
Muda a posio da luz para passar a estar no canto superior esquerdo, no

plano dos z.
Compila e corre o exerccio NeHe ch8. Ele tem disponveis as mesmas teclas de
controlo que o exerccio ch7.
Localiza no cdigo as funes que definem os vectores normais.
Altera todas as normais para que o OpenGL julgue que as faces de frente
do cubo sejam as faces de dentro.

www.pedrofreire.com
pg. 58
Aula 09
Modelos 3D em ficheiros.
Animao de objectos na cena: Fsica e deteco+gravao de movimento humano
(sistemas de aquisio de coordenadas para modelao 3D).
O jogo CGMaze: Modelao da vista interior 3D.
Modelos 3D em ficheiros
Quando passarmos para o prximo nvel e precisarmos de ter todo um modelo de
um mundo ambiente e objectos de cenrio, precisaremos de os ter gravados em
ficheiros para serem carregados por cdigo nosso para o sistema OpenGL.
O exerccio NeHe ch10 um exemplo desta tcnica.
Existem vrios programas de desenho de modelos 3D: 3ds Max, Maya, SoftImage
XSI, entre outros. Alguns esto especializados para um certo tipo de motor 3D
(i.e., cdigo de gerao OpenGL), como o UnrealEd*.
O problema que cada um tem o seu prprio formato de ficheiros, optimizado
para os seus motores 3D. Quando escolheres um deles, ters de ter informao do
seu formato para o conseguires ler e usar em chamadas OpenGL.
O exerccio NeHe ch10 usa um ficheiro com listas de 5 coordenadas para cada
vrtice de um tringulo. As primeiras 3 coordenadas so as x, y e z do vrtice. As
duas seguintes so as x e y da textura, nesse vrtice.
Este formato to vlido como qualquer outro. A questo quando os leres (e a
forma de ler depende do sistema que suporta o OpenGL e no do OpenGL em si), o
fazeres para um formato que te simplifica a vida mais tarde fornecer esses dados
ao OpenGL.
Repara nas variantes da funo glVertex() que tens disponveis:
glVertex2s( short
glVertex2i( int
glVertex2f( float
glVertex2d( double
glVertex3s( short
glVertex3i( int
glVertex3f( float
glVertex3d( double
glVertex2sv( short
*
x, short
x, int
x, float
x, double
x, short
x, int
x, float
x, double
v[2] );
y );
y );
y );
y );
y, short
y, int
y, float
y, double
z
z
z
z
);
);
);
);
V http://www.udk.com/.

www.pedrofreire.com
pg. 59
glVertex2iv(
glVertex2fv(
glVertex2dv(
glVertex3sv(
glVertex3iv(
glVertex3fv(
glVertex3dv(
int
float
double
short
int
float
double
v[2]
v[2]
v[2]
v[3]
v[3]
v[3]
v[3]
);
);
);
);
);
);
);
Destas, as mais interessantes so as que recebem vectores. Quando lemos os

dados de vrtices de um ficheiro d imenso jeito colocar os dados em vectores. E
nesse caso, poupamos tempo de CPU e GPU se usarmos as funes glVertex()
vectoriais.
Consulta o manual OpenGL para descobrires outras funes OpenGL com
facilidades semelhantes.
Fsica
O movimento de objectos numa cena deve seguir as regras da Fsica, para ser
realista. As leis de Newton que envolvem foras, aco-reaco, velocidade
constante e aceleraes, atrito e outros factores devem ser consideradas.
Estes clculos no fazem parte do OpenGL em si, e normalmente so calculados
pelo CPU com programao especfica. Algumas placas grficas da marca NVIDIA
tm acelerao especfica para Fsica:
http://www.nvidia.com/object/physx_new.html
Outros fabricantes (NVIDIA e ATI) permitem que o programador use parte do
poder de computao do GPU para clculos arbitrrios o que deveria permitir que
esses clculos sejam usados para Fsica.
Para mais informaes, l:
http://en.wikipedia.org/wiki/Physics_engine
Deteco de movimento humano

Animar uma figura humanide (i.e., com aparncia humana) numa cena 3D
normalmente no gera movimentos realistas. Por essa razo, quando se
pretendem movimentos realistas, eles so capturados de um actor num ambiente
controlado, e passados para a animao do modelo humanide.
A Lusfona tem um laboratrio desses: http://movlab.ulusofona.pt/cms/
Para mais detalhes sobre esta tecnologia, consulta o site.
Desenhar a vista interior do labirinto em 3D

Para o projecto final, vais precisar de desenhar a vista interior do labirinto do
CGMaze, usando OpenGL 3D. Para fazer isso vais usar parte das tcnicas de
desenhar o mapa com parte das tcnicas da vista interior 2D.

www.pedrofreire.com
pg. 60
Na inicializao (funo View3D::View3D()), vais carregar as texturas e

inicializar as matrizes de perspectiva. Ela recebe um argumento Map *map que
deve ser copiado para this->map (isto j est no cdigo que te passado) e um
argumento const QImage textures[VIEW3D_TEXTURES_NUMBER] que
um vector com as imagens para as texturas, j convertido para formato OpenGL
com QGLWidget::convertToGLFormat(). VIEW3D_TEXTURES_NUMBER a
quantidade de texturas. Cada textura nesse vector identifica-se com uma das
constantes comeada por VIEW3D_IX_TEXTURE_ que est no ficheiro
student_view3d.h.
Na funo View3D::resize() vais ter a funo OpenGL glViewport() do
costume. Mas desta vez, como a funo OpenGL gluPerspective() tambm
precisa das dimenses reais do viewport, ela tambm vai ser chamada aqui para
ajustar a relao de aspecto da perspectiva.
A funo View3D::paint(x, y, compass_direction) a mais complexa,
e aquela onde se centra a avaliao. Repara como desta vez, e ao invs da viso
interior em 2D, esta funo recebe todos os argumentos de tipo float. Isto
porque o restante cdigo do professor cria uma animao suave de movimento
fazendo chamadas sucessivas a paint() com valores fraccionrios de
coordenadas do mapa ou da bssola.
x e y continuam a referir-se a coordenadas do mapa. (1,1) a coordenada inicial
do jogador. Conforme ele se mover 1 posio para Norte, paint() ir ser
chamada com valores de y com (por exemplo) 1.1, 1.2, 1.3, ..., 1.9 e 2.0.
Conforme ele rodar de Norte para Este (direita), compass_direction vai ter
valores de 2.1, 2.2, ..., 2.9 e 3.0 (v compass.h).
Vais ter ento de resolver 2 problemas:
1. Mover e rodar a cena para fingir que o jogador avanou dentro do
labirinto. Isto se quiseres desenhar cada parede do labirinto nas mesmas
coordenadas em que ela est no mapa (como fizeste quando desenhaste o
mapa).
2. Encontrar uma forma de desenhar apenas parte do labirinto que est
visvel, de forma a poderes suportar tamanhos muito grandes de labirintos.
O primeiro problema razoavelmente fcil de resolver se usares a funo OpenGL
gluLookAt() de que falmos na aula 03.
O segundo problema tambm pode comear por ser abordado de uma forma
simples. Podes desenhar cegamente todo o mapa em 3D. O gluLookAt() ir
garantir que s ser desenhada a parte que est em frente ao jogador.

www.pedrofreire.com
pg. 61
Fazes isso varrendo todo o mapa da seguinte forma:

Cell c;
int mx, my;
for( my = 0; my < map->getHeight(); my++ )
for( mx = 0; mx < map->getWidth(); mx++ )
{
c = map->getCell( mx, my );
// agora uso
//
if(c.isWallOrDoor())...else...
// para decidir entre desenhar uma
// parede ou corredor, respectivamente
}
Depois podes tentar resolver da mesma forma que foi feito na aula 05 para a vista
interior em 2D. Fazes o mesmo ciclo que avana em frente at encontrar uma
parede de frente ou chegar a uma profundidade mxima. Mas vais reparar que
isso no resolve o problema dos corredores laterais conforme o jogador se vira.
Isso fica para tu resolveres.
Da em diante usa a tua criatividade para resolver os restantes problemas do
enunciado!
Exerccios
Altera o ficheiro do mapa (world.txt) para poderes navegar numa
representao aproximada de um dos quartos do Egmont H. Petersen's Kollegium
em Copenhaga, Dinamarca.

www.pedrofreire.com
pg. 62
Escolhe fazer o mapa de dois quartos ligados por um corredor:
Ou do quarto duplo:
O essencial so as paredes, cho e tecto.

Se tiveres tempo, no te esqueas de aplicar texturas e fazeres alguma moblia que
tornem a cena realista!
www.pedrofreire.com
pg. 63
Aula 10
Tpicos avanados: Ray tracing, fractais, sistemas de partculas.
Ray Tracing
OpenGL e outras interfaces de 3D esto preparadas para as placas grficas
desenharem as superfcies (polgonos) que lhes so apresentadas. Embora
iluminao e tcnicas de sombreamento adicionem realismo s imagens, nunca
so completamente fiis realidade (especialmente em reflexes e refraces).
Ray Tracing consegue altssimos graus de realismo:
Esta tcnica traa os raios de luz de cada pixel da imagem gerada. Este rastreio
feito de forma inversa: o raio que chega a cada pixel de uma cmara fotogrfica
ou de filmar vem da luz reflectida pela cena. Em Ray Tracing o raio rastreado do
pixel em direco cena, at se encontrar uma fonte de iluminao. Em cada
superfcie, os dados de ngulo com a superfcie, cor, tipo de material, etc. so
www.pedrofreire.com
pg. 64
levados em conta para determinar a nova direco (ou direces) do feixe de luz e
(no fim) a cor desse pixel*.
Cmara
Viewport
Fonte de
iluminao
Raios de luz
Raios reflectidos
Objecto
Sombra
A cena continua a ser descrita em termos de polgonos, tipos de materiais e fontes

de iluminao. S o mtodo de a rasterizar para 2D que muda.
A grande desvantagem deste mtodo a sua lentido.
Fractais
Fractais so figuras geomtricas que podem ser reduzidas a partes mais pequenas,
cada uma das quais uma cpia reduzida (de pelo menos parte) do todo.
O melhor explicar com exemplos. O floco de neve Koch comea com um
tringulo equiltero. Em cada iterao posterior ir ento substituir o 1/3
intermdio de cada face com um tringulo equiltero.
O resultado (nas primeiras 4 iteraes) o seguinte:
Imagem retirada da Wikipedia; autor Henrik.

www.pedrofreire.com
pg. 65
Este processo repetido at cada alterao imagem seja menos do que um pixel.
Isto significa que podemos continuar a fazer iteraes se o utilizador desejar
ampliar a imagem, revelando infinitamente mais detalhes sem perder resoluo.
Por exemplo, o conhecido fractal Mandelbrot pode ser repetidamente ampliado:
Como se pode ver neste exemplo, quando amplio o fractal (numa aplicao
especial), o fractal redesenhado com total detalhe para a ampliao pedida, sem
perder resoluo.
Claro que isto apenas possvel quando a ampliao executada em software
especfico de desenho de fractais: se eu colocar um fractal numa imagem JPG ou
PNG (ou outra), ela quando ampliada sofrer de todos os defeitos habituais de
uma ampliao digital (pixelizao).
Os fractais conseguem boas aproximaes de muitas formas da natureza: nuvens,
flocos de neve, cristais, cordilheiras montanhosas, relmpagos, redes de rios,
couves-flor e brcolos, redes de vasos sanguneos e pulmonares, e linhas
costeiras.
Brcolo romanesco*
Imagem retirada da Wikipedia; autor AVM.
Imagem retirada da Wikipedia; autor Tttrung.
Perturbao causada por alta tenso

num bloco de acrlico

www.pedrofreire.com
pg. 66
Por exemplo, para criar uma montanha posso comear com um tringulo 3D.
Encontro os pontos centrais de cada aresta (lado) e fao um novo tringulo
intermdio, cortando efectivamente o tringulo original em 4 novos tringulos.
Os vrtices do novo tringulo so elevados ou baixados aleatoriamente dentro de
uma gama especificada. Em cada nova iterao essa gama reduzida a metade.
O resultado o seguinte (em 5 iteraes):
1
O clculo de figuras fractais lento quando comparado com outros mtodos de

exibio de imagens (JPG, PNG, etc.). No entanto este mtodo tem as suas
vantagens e usado com frequncia na gerao de terreno e detalhes em cenrios
tridimensionais e outros fenmenos naturais (plantas, chamas, etc.).
Sistemas de partculas
Sistemas de partculas so simulaes de Fsica (ver aula anterior) em que o
objecto ou fenmeno simulado composto de mltiplos componentes a que
chamamos de partculas.

www.pedrofreire.com
pg. 67
Exemplos destes sistemas so simulaes de chamas e exploses*:
Existem alguns motores de sistemas de partculas conhecidos: The Particle Systems

API (GNU LGPL), a Dynamic Particle System Framework para o XNA da Microsoft,
Havok, Ageia (inventora da PhysX da NVIDIA) e Magic Particles, entre outros.
Imagem da exploso retirada da Wikipedia; autor Sameboat.

www.pedrofreire.com
pg. 68
Projecto
Exerccios e apoio ao projecto.
Exerccios
1. Adiciona texturas especiais para o cho que j foi percorrido pelo jogador.
Dica: V como no desenho do mapa descobrias quando um pedao de cho
j tinha sido percorrido pelo jogador.
2. Usa (altera) a funo MapCreate::features() para adicionar
aleatoriamente objectos a certas partes do cho e paredes. Usa depois
esses objectos para distinguir entre vrias texturas alternativas, de forma
a incluir coisas como alapes fechados, janelas e tochas na parede, etc..
Dica: o objecto no mais do que um nmero inteiro associado a uma
clula do mapa. Originalmente todos os objectos esto a zero,
significando sem objecto. Se c for do tipo Cell, altero/leio o objecto
dentro dele com c.object.

www.pedrofreire.com
pg. 69
Bibliografia
[CGPP]
Foley, van Dam, Feiner, Hughes,
Computer Graphics: Principles and Practice
(2 edio), Addison Wesley.
Na Amazon do Reino Unido, em:
http://www.amazon.co.uk/Computer-Graphics-Principles-PracticeInternational/dp/0321210565/
[QT]
Qt, Nokia.
No site da Nokia em:
http://qt.nokia.com/
[NEHE]
Neon Helium Productions, GameDev.
No site da GameDev em:
http://nehe.gamedev.net/
[OGL21]
OpenGL 2.1 Reference Pages, Silicon Graphics.
No site do OpenGL em:
http://www.opengl.org/sdk/docs/man/xhtml/
[SI]
Systme International d'Units (Sistema Internacional de Unidades), BIPM.
No site do BIPM (Bureau International des Poids et Mesures) em:
http://www.bipm.org/en/CGPM/db/11/12/
No site da Wikipedia em:
http://pt.wikipedia.org/wiki/Sistema_Internacional_de_Unidades
http://en.wikipedia.org/wiki/International_System_of_Units

www.pedrofreire.com
pg. 70

CG Guiao PDF

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

CG Guiao PDF

Enviado por

Direitos autorais:

Formatos disponíveis

Computao Grfica

Aulas tericas e prticas

Este documento tem alguns direitos reservados:

Windows XP Service Pack 2 ou Vista, ou

(K)Ubuntu Linux 7.04 32bit e 64 bit, ou

Mac OS 10.4 ou posterior.

Instalao automtica do Qt SDK para a plataforma escolhida, em

Version name: 4.6.2

QMake Location: instalao\qt\bin\qmake.exe

MinGW Directory: instalao\mingw

onde instalao o directrio onde instalou o Qt SDK (se no

Acesso Internet com um browser.

Deve haver 1 PC por aluno.

2013 Pedro Freire // Computao Grfica

2013 Pedro Freire // Computao Grfica

2. Como no o objectivo desta cadeira explicar-te programao em ambiente

2013 Pedro Freire // Computao Grfica

Navega at ao directrio onde descomprimiste o cdigo-fonte do CGMaze e

2013 Pedro Freire // Computao Grfica

Na verso de cdigo-fonte a que tens acesso, normal que o jogo no funcione

Revises de Matemtica: Vectores

2013 Pedro Freire // Computao Grfica

o que liga o primeiro ponto inicial ao ponto do resultado final (diagramas na

Revises de Matemtica: Produto de Matrizes

O valor na clula a amarelo a1,1b1,2+a1,2b2,2 e o valor na clula verde

2013 Pedro Freire // Computao Grfica

Revises de Matemtica: Trigonometria

O crculo trigonomtrico assume que as rotaes so feitas volta do eixo de

Vector resultante da soma dos vectores (-1,1) com (1,1)

Qual a matriz resultante do produto de:

2013 Pedro Freire // Computao Grfica

Qual o valor de:

Olha para o cdigo do CG Maze.

Qual o tipo de dados (classe) que guarda a informao de cada clula do

Qual o tipo de dados (classe) que guarda a grelha de jogo (o conjunto de

2013 Pedro Freire // Computao Grfica

o Movo o jogador actual que est na posio (x,y), lateralmente para

A janela principal do jogo desenhada visualmente no ficheiro

2013 Pedro Freire // Computao Grfica

Imagem retirada da Wikipedia; autor Grm wnr.

2013 Pedro Freire // Computao Grfica

7. Camada de fsforo com reas vermelhas, verdes e azuis.

Conceitos bsicos OpenGL: Sistema de coordenadas

2013 Pedro Freire // Computao Grfica

Em OpenGL este viewport define-se com:

onde x e y so as coordenadas do canto inferior esquerdo do viewport OpenGL em

2013 Pedro Freire // Computao Grfica

GL_POINTS Trata cada vrtice como um ponto independente a ser

GL_LINES Trata cada par de vrtices como um segmento de linha

GL_LINE_STRIP Desenha um grupo de linhas ligadas umas s outras.

GL_LINE_LOOP Semelhante ao anterior, mas tambm desenhado um

GL_TRIANGLES Trata cada conjunto de trs vrtices (i.e., cada triplo de

GL_TRIANGLE_STRIP Desenha um grupo de tringulos colados. Depois

GL_TRIANGLE_FAN Desenha um grupo de tringulos colados que

GL_QUADS Trata cada conjunto de quatro vrtices (i.e., cada qudruplo

GL_QUAD_STRIP Desenha um grupo de quadrilteros colados. Depois

GL_POLYGON Desenha um polgono convexo. Igual a GL_LINE_LOOP,

2013 Pedro Freire // Computao Grfica

Na figura acima, 1 representa uma linha diagonal com o normal efeito de

Activa-se o efeito anti-aliasing do OpenGL com

Imagem retirada da Wikipedia, em http://en.wikipedia.org/wiki/ClearType.

2013 Pedro Freire // Computao Grfica

O mtodo ClearType/Quartz de usar sub-pixels no est disponvel em nenhum