archive

Esta é uma pré-visualização de arquivo. Entre para ver o arquivo original

Aula 2 - Introdução a computação gráfica.pdf
Computação Grafica
Aula Teórica 2
SUMÁRIO:
Introdução a computação gráfica, história da computação 
gráfica, aplicação e relação com outas áreas
Docentes: Ruben Manhiça & Helber Choo
Maputo, 2018
Introdução a computação gráfica
Obejectivos:
• Apresentar os conceitos básicos da Computação Gráfica;
• Identificar as aplicações da Computação Gráfica;
• Conhecer a história da Computação Gráfica;
2
Conceitos da Computação Gráfica
• A computação gráfica pode ser entendida como o 
conjunto de algoritmos, técnicas e metodologias para o 
tratamento e a representação gráfica de informações 
através da criação, armazenamento e manipulação de 
desenhos, utilizando-se computadores e periféricos 
gráficos.
• Segundo a ISO ("International Standards Organization") a 
Computação Gráfica pode ser definida como o conjunto 
de métodos e técnicas utilizados para converter dados 
para um dispositivo gráfico, via computador.
3
Conceitos da Computação Gráfica
4
Dados Imagem
Visualização
Visão computacional
M
o
d
el
ag
e
m
g
e
o
m
ét
ri
ca
P
ro
cessam
en
to
d
e im
ag
e
m
Subáreas da Computação Gráfica
• Modelagem geométrica é o conjunto de métodos que 
visam descrever a forma e características geométricas de 
um objecto.
• Visualização/síntese são técnicas destinadas a criação 
e manipulação de imagens artificiais a partir de modelos 
matemáticos e geométricos.
• Processamento de imagem, envolve técnicas de 
transformação de imagens visando melhorar a sua 
qualidade(foco, ruído e contraste).
• Visão computacional, considera as imagens computacionais e 
as analisa para obtenção de características desejadas.
5
Aplicações da Computação Gráfica
• Arte por Computador
• CAD (Desenho Assistido por Computador)
• Cartografia
• Controle/Visualização de processos
• Entretenimento e animação
• Educação eTreinamento
• Interface com o usuário
• Simulação
• Visualização Científica
6
Interação da computação gráfica 
com outras áreas da ciência
7
Computação 
Gráfica
Física
Matemática
Medicina
Outras.. Artes
Electrônica
Historia da Computação Gráfica
• Nos anos 50, o MIT em conjunto com as forças armadas 
americanas criaram o primeiro computador com interface 
gráfica foi o WhirlWind I. A industria automobilística e a 
industria aerospacial começaram a fazer o uso da computação 
gráfica para auxliar os processos industriais.
• Nos anos 60 a industria automobilística, a arquitetura e a 
industria espacial passaram a fazer uso de desenhos em CAD 
para uso em seus projetos.
• Nos anos 70, a industria cinematográfica foi uma das que mais 
investiu em computação gráfica. Os filmes da franquia Star 
Wars foram um marco no uso da computação gráfica.
8
Historia da Computação Gráfica
• Nos anos 80, com a redução do custo do hardware e a 
consolidação dos microcomputadores no mercado, 
várias empresas investiram no desenvolvimento de 
ferramentas para a criação de animações digitais em 
terceira dimensão.
• Nos anos 90, surgiram ferramentas mais sofisticadas para 
tratamento de imagens, criação de animações, vídeos, 
etc. O Photoshop foi lançado em 1990 para tratamento 
de imagens. O 3D Studio também foi lançado em 1990 
sendo usado para criação de modelagem e animação 3D. 
O Illustrator foi criado em 1986 como uma ferramenta 
para a criação de imagens vetoriais.
9
Aula 3 - Aplicativo Gráfico e Hardware gráfico.pdf
Computação Grafica
Aula Teórica 3
SUMÁRIO:
Aplicativo gráfico e Hardware gráfico
Docentes: Ruben Manhiça & Helber Choo
Maputo, 2018
Aplicativo e Hardware gráfico
Obejectivos:
• Perceber o que são aplicativos gráficos;
• Conhecer as componentes físicas da computação gráfica;
2
Conceitos de Aplicativo Gráfico
• Um aplicativo gráfico é um programa ou um sistema 
composto de vários programas que permitem a geração 
de uma determinada apresentação gráfica que pode ser 
composta de recursos 2D e/ou 3D e/ou imagem.
• Atualmente, os aplicativos gráficos em geral dispõem de 
recursos de interação homem-máquina que permitem a 
composição ou a geração interativa de uma apresentação 
gráfica.
3
Conceitos de Aplicativo Gráfico
• Na implementação de um aplicativo gráfico, quatro 
parâmetros são importantes de consideração:
• Sistema Operacional – É responsável por gerir os recursos do 
computador (Hardware e Software) e disponibilizar 
funcionalidades ao aplicativo.
• Biblioteca Gráfica –Conjunto de funções que o aplicativo aciona 
para auxiliar na renderização das componentes gráficas.
• Sistema de enjanelamento – é o programa responsavel por 
gerir as diferentes componentes da tela.
• Hardware gráfico – É a componente fisica que gera 
componentes graficas e permite visualizar os mesmos.
4
Arquiteturas dos Terminais Gráficos
• Terminal Vectorial – Para produzir uma linha, o feixe de 
elétrons sensibilizava de forma contínua a tela. Devido a 
persistência luminosa do material que reveste a tela, a 
imagem se mantinha ativa até o próximo ciclo de 
redesenho, e devido a forma de geração de uma linha na 
tela, estes terminais foram denominados de terminais 
vetoriais.
5
Arquiteturas dos Terminais Gráficos
• Terminal por varredura – o terminal pode ser visto como 
uma matriz de pontos que podem estar acesos ou não, 
para tanto o feixe de elétrons varrem a tela 
horizontalmente em um movimento conjugado com um 
deslocamento vertical, atingindo os pontos que devem 
ser acesos.
6
Arquiteturas dos Terminais Gráficos
• Na terminal por varredura, o controlador de vídeo 
controla a ativação de cada ponto na tela, através de uma 
matriz de pontos, onde está armazenado o estado de 
cada um deles. Assim, o tamanho da memória de pontos 
é proporcional a resolução da tela. A modificação da 
imagem gerada é realizada através da alteração dos 
valores da matriz de pontos, o que é realizado pelo 
controlador de exibição, sob o controle da CPU.
• A terminal por varredura é a mais utilizada atualmente e 
as terminais por varredura modernas permitem a geração 
de imagens com altíssima qualidade e grande variedade 
de elementos.
7
Arquiteturas dos Terminais Gráficos
• Terminal por varredura com processador grafico
• Unidade Central de Processamento (CPU)
• Memórias de dados e de processamento
• Barramento de dados (BUS)
• Memoria do Processador Gráfico
• Dispositivos Periféricos
• Processador Gráfico
• Controlador de Vídeo
• Monitor
8
Dispositivos de Entrada e Saída
Gráficos
• Os dispositivos de entrada e saída gráficos são periféricos 
que possibilitam a interação com os sistemas de 
computação gráfica.
9
Dispositivos de Entrada Gráficos
Entre os dispositivos de entrada gráfica mais comuns 
podemos destacar: 
• Teclado;
• Mouse;
• Trackball;
• Scanner;
• Mesa Digitalizadora;
• Digitalizador de Vídeo;
• Digitalizador tri-dimensional.
10
Dispositivos de Saida Gráficos
• Traçadores gráficos;
• Impressoras matriciais;
• Impressoras a jato de tinta;
• Impressoras a laiser;
• Monitores de vídeo;
11
Aula 4 - Transformações Geométricas 2D e 3D.pdf
Computação Grafica
Aula Teórica 4
SUMÁRIO:
Introdução a transformações geométricas 2D e 3D 
Translações afins
Docentes: Ruben Manhiça & Helber Choo
Maputo, 2018
Introdução a transformações 
geométricas
2D e 3D
Obejectivos:
• Apresentar o sistema de coordenadas 2D e 3D;
• Perceber o conceito transformações geométicas;
• Conhecer as diferentes transformações afins;
2
Sistemas de coordenadas 2D e 3D
3
Figura em 2D e 3D
Triangulo Circulo Quadrado
Pirâmide | Cone Esfera Cubo
4
Transformação geométrica
• Transformação pentagotetica é uma aplicação bijectiva entre 
duas figuras geométricas, no mesmo plano ou em planos 
diferentes, de forma que, a partir de uma figura geométrica 
original, forma-se outra figura geometricamente igual ou 
equivalente. Uma transformação geométrica é, portanto, uma 
correspondência, um a um, entre pontos de um mesmo plano 
ou de planos diferentes.
• Transformações geométricas são operações que podem ser 
utilizadas visando a alteração de algumas características como 
posição, orientação, forma ou tamanho do objecto a ser 
desenhado.
5
Transformação geométrica
• Alguns objectos são compostos por um conjunto de sub-
componentes oju formas geométricas simples (como
cilindros, cubos, esferas,…), e a partir de modelos
padrões destes objetos mais simples podemos gerar o
modelo da cena através das transformações geométricas
de forma e movimento.
6
Transformação Afim
• Uma função afim, também conhecida como função
polinomial de grau 1 ou função polinomial de primeiro
grau é uma função do tipo f(x)=ax+b, cujo gráfico é uma
reta não perpendicular ao eixo ox. Tal função também
pode ser entendida como uma transformação linear (Ax)
seguida por uma translação (+b).
7
Transformação Afim
• Translação –A translação, alteração da posição de um 
ponto através da soma de constantes de deslocamento as 
suas coordenadas, é normalmente aplicada sobre todos 
os pontos de uma figura, de maneira a possibilitar a sua 
movimentação no espaço.
• O objecto é movimentando, adicionando se um intervalo 
a cada uma das variaveis.
• 𝑋′ = 𝑋 + 𝑇𝑋
• 𝑌′ = 𝑌 + 𝑇𝑌
• 𝑍′ = 𝑍 + 𝑇𝑍
8
Transformação Afim
• Escalamento (Mudança de Escala - Scaling) –A Mudança de escala 
corresponde à multiplicação das coordenadas de um ponto por 
valores iguais ou diferentes. É normalmente aplicada sobre todos os 
pontos de uma figura com o objetivo de ampliar ou reduzir a sua 
dimensão ou então distorcer a sua forma geométrica.
• O uso clássico desta operação em computação gráfica é a função 
zoom in (ampliação) ou zoom out (redução).
• O objecto modificado, multiplicado um coeficiente a cada uma das 
variaveis.
• 𝑋′ = 𝑋. 𝑆𝑋
• 𝑌′ = 𝑌. 𝑆𝑌
• 𝑍′ = 𝑍. 𝑆𝑍
9
Transformação Afim
• Rotação – A rotação é o giro de um determinado ângulo de um
ponto em torno de um ponto de referência, sem alteração da
distância entre eles. Esta operação é aplicada normalmente
sobre todos os pontos de uma figura, o que possibilita que ela
seja rotacionada.
• Por convensão, ângulos positivos produzem rotação no
sentido anti-horario.
• Equação para rotação no eixo Z
• 𝑋′ = 𝑋. 𝑐𝑜𝑠θ− 𝑌. 𝑠𝑒𝑛θ
• 𝑌′ = 𝑋. 𝑠𝑒𝑛θ− 𝑌. 𝑐𝑜𝑠θ
• 𝑍′ = 𝑍
10
Transformação Afim
• Espelhamento, consiste em rotacionar um objeto em 
torno de um eixo de tal maneira que os pontos do objeto 
na posição original e na rotacionada mantenham a 
mesma distância em relação a um linha de referência, 
caso bidimensional, ou a um plano de referência, caso 
tridimensional.
• Na figura abaixo, há o espelhamento de um objeto em 
torno do eixo Z.
• 𝑋′ = 𝑋
• 𝑌′ = −𝑌
• 𝑍′ = −𝑍
11
Transformação Afim
• Cisalhamento (shear), é responsável por deformar o
objecto de forma a incliná-lo, reposicionando seus pontos
ao longo de uma reta de coeficiente angular definido.
• O cisalhamento sempre acontece ao longo de um eixo,
este eixo é determinado pela posição dos coeficientes na
matriz.
• Cisalhamento na direção Z
• 𝑋′ = 𝑋 + 𝑍. 𝑆𝑥
• 𝑌′ = 𝑌 + 𝑍. 𝑆𝑦
• 𝑍′ = 𝑍
12
PAnalitico_CG_2018-Pos-Laboral.pdf
 1 
 
 
 
PLANO ANALÍTICO DA UNIDADE CURRICULAR 
 
Faculdade/Escola/Centro Faculdade de Engenharia 
Departamento de Engenharia Electrotécnica Ano lectivo de 2018 Semestre: 1o 
Curso (s) : Engenharia Informática 
Unidade Curricular: Computação Gráfica 
Nome do (s) docente (s) (Regente): eng. Ruben Manhiça 
Nome do (s) Docente (s) (Assistente): engº. Helber Choo 
Nome do técnico: _________________________________________________________ 
Nome do monitor: 
Regime: Pós-Laboral 
 
Horas e créditos: 
 Práticas Teóricas Laboratoriais Seminários Avaliação Outras Total 
Horas de contacto directo 
por semestre 
32 44 0 4 80 
Horas de contacto directo 
por semana 
3 2 5 
Horas de estudo 
independente por semestre 
28 54 82 
Créditos1 5 
 
I. INTRODUÇÃO 
 
A computação Gráfica tem vindo a afirmar-se e é hoje uma componente muito importante em toda a 
envolvente de interação pessoa-computador. 
No entanto, a sua aplicabilidade vai muito além, tendo hoje em dia uma posição de relevo em 
indústrias importantes como sejam a cinematográfica e a dos jogos. Também na tecnologia e na 
ciência desempenha um papel insubstituível permitindo a visualização de fenómenos, muitas vezes 
ligada a simulação e a técnicas de realidade virtual. 
 
Objectivos: 
No fim desta disciplina o estudante deverá ser capaz de: 
 Conhecer e identificar os conceitos fundamentais de computação Gráfica, nomeadamente as 
técnicas mais importantes referentes aos sistemas 2D e 3D. 
 Ter o domínio de OpenGl, uma biblioteca gráfica que é considerada um standard nesta área, 
aplicar os conhecimentos anteriormente referidos num projecto em 3D, serem capazes de criar 
artefactos gráficos que explorem de forma eficiente as varias técnicas disponíveis. 
 
 
 
1 Na UEM, o crédito académico corresponde a um total de 30 horas de trabalho. 
 2 
II. ESTRATÉGIAS DE DE ENSINO E DE APRENDIZAGEM 
a) Tipo de aulas e formas de leccionação 
Realizam-se as aulas teóricas apresentando os conceitos gerais e exemplos. Nas aulas práticas 
serão realizados os exercícios para a consolidação das matérias teóricas. Durante do estudo 
individual o estudante desenvolverá as habilidades por meio de leitura e resolução de exercícios 
práticos, fazendo as pesquisas individualmente e trabalhando em grupo. 
 
b) Actividades de frequência obrigatória 
Todas as aulas são de frequência obrigatória. 
 
 
III. ESTRATÉGIAS DE AVALIAÇÃO 
 
A avaliação de frequência será efectuada através de 2 Testes escritos e 1 Trabalho Prático dividido em 
fazes. 
 
A nota final de frequência será calculada pela fórmula: 
 
𝑴𝑭 =
𝑻𝟏 + 𝑻𝟐
𝟐
× 𝟔𝟎% + 𝑻𝑷 × 𝟒𝟎% 
 
IV. TEMÁTICAS 
 
No Temas 
Horas 
Teóricas Práticas S EI Total 
01 
Apresentação. Metodologias de ensino e de 
avaliação. Diversos 
2 0 0 
02 Introdução a Computação Gráfica. 3 0 4 
03 Hardware gráfico 2 0 4 
04 
Transformações geométricas. Sistema de 
coordenadas 3D. Transformações 
Windowsviewport. Visualização e recorte. 
Zooming e panning. 
13 8 20 
05 
Fundamentos de cor e representação de imagem 
digital 
2 0 6 
06 Modelos 3D em ficheiros. Técnicas de modelagem 2 3 6 
07 
Algoritmos de rasterização. Renderização VS 
Raytracing. 
4 3 16 
08 
Representação de sólidos. Eliminação de 
superfícies escondidas. Algoritmo Z-buffer 
4 3 4 
09 
Iluminação. Reflexão. Refração. Fontes de luz. 
Sombreamento 
2 3 4 
10 
Biblioteca gráfica OpenGl. Transformação da 
câmara. Representação de objectos sólidos. Outras 
tecnologias 
6 12
18 
 
 
 
 
 
 
 
 
 
 
 3 
V. CALENDÁRIO DAS AULAS E DAS AVALIAÇÕES 
 
 
 
VI. BIBLIOGRAFIA E RECURSOS 
 
[1] . Hugues, J. at all (2013). Computer Graphics: Principles and practices. Weslay 
[2] . Shreiner, Dave (2011). OpenGL Programming Guide. Adison Weslay 
[3] . Salomon, David (2011). The Computer Graphics Manual. Series Editors 
[4] . Guha, S (2010). Computer Graphics Through OpenGL. From theory to experiments. Chapman 
& Hall/CRC 
No. da 
aula ou 
avaliação 
Data Tema da aula 
Tipo de aula ou avaliação 
(prática e outros) 
Material de apoio para aula 
01|21.02.2018 
Apresentação do Docente e do programa. 
Calendarização das avaliações e das defesas de 
trabalhos. 
Teoria 
02|23.02.2018 
Introdução a computação gráfica, história da 
computação gráfica, aplicação e relação com outas 
áreas. 
Teoria [1],[2],[3],[4] 
03|28.02.2018 Hardware gráfico. I/O Teoria [1],[2],[3],[4] 
04|02.03.2018 
Introdução a transformações geométricas 2D e 3D. 
Translações afins: Translação, escalamento, rotação 
(espaço Euclidiano), espelhamento e cisalhamento. 
Teoria [1],[2],[3],[4] 
05|07.03.2018 
Composição de transformações afins e Geometria 
Afim 2D e 3D 
Teoria [1],[2],[3],[4] 
06|09.03.2018 Exercícios práticos Pratica 
07|14.03.2018 Exercícios práticos Pratica 
08|16.03.2018 Transformações Janela-Visor Teoria [1],[2],[3],[4] 
09|21.03.2018 Zooming e panning Teoria [1],[2],[3],[4] 
10|23.03.2018 Exercícios práticos Pratica 
11|28.03.2018 Fundamento da Cor Teoria [1],[2],[3],[4] 
12|30.03.2018 Representação de imagem digital Teoria [1],[2],[3],[4] 
13|04.04.2018 Introdução a OpenGl. Preparação para Teste Pratica 
14|06.04.2018 Realização do Teste 1 Pratica 
15|11.04.2018 
Instalação do OpenGl, Transformação da câmara. 
Code::Block e GLUT. Aplicação de OpenGL para 
desenhar 4 pontos. 
Pratica 
16|13.04.2018 Transformações geométricas em OpenGl. Pratica 
17|18.04.2018 Representação de objectos sólidos em OpenGl Pratica 
18|20.04.2018 
Fundamento da cor e apresentação de imagens 
digitais; Exemplo da aplicação da cor em OpenGl. 
Exercios práticos sobre a cor 
Teoria 
http://www.glprogramming.c
om 
19|25.04.2018 Modelos 3D em ficheiros. Técnicas de modelagem Teoria [1],[2],[3],[4] 
20|27.04.2018 Exercícios de reflexão Pratica 
21|02.05.2018 
Algoritmos de rasterização. Renderização VS 
Raytracing. 
Teoria [1],[2],[3],[4] 
21|04.05.2018 
Representação de sólidos. Eliminação de 
superfícies escondidas 
Teoria [1],[2],[3],[4] 
22|09.05.2018 Algoritmo Z-buffer. Preparação para teste 2 Teoria [1],[2],[3],[4] 
23|11.05.2018 Realização do Teste 2 Pratica 
24|16.05.2018 Exercícios de reflexão Pratica 
25|18.05.2018 Iluminação. Reflexão. Refração. Fontes de luz. Teoria [1],[2],[3],[4] 
26|22.05.2018 Sombra e Sombreamento Teoria [1],[2],[3],[4] 
27|25.05.2018 Simulação de Iluminação, sobra em OpenGl Pratica 
28|30.05.2018 Defesa de trabalhos e considerações finais Pratica 
29|01.06.2018 Defesa de trabalhos e considerações finais Pratica 
30|06.06.2018 Defesa de trabalhos e considerações finais Pratica 
31|08.06.2018 Defesa de trabalhos e considerações finais Pratica