Enquadramento e Conceitos Fundamentais - ULisboa...(localização, cor e profundidade) 25...
Transcript of Enquadramento e Conceitos Fundamentais - ULisboa...(localização, cor e profundidade) 25...
Enquadramento e
Conceitos Fundamentais
Edward Angel, Cap. 1
1
Introdução à Computação Gráfica
Enquadramento e Conceitos Fundamentais
2
Uso de computadores para criação e
manipulação de imagens
O que é Computação Gráfica?
Shirley etal. 2009
Preocupa-se com todos os aspectos da
produção de imagens usando computadores
Edward Angel, 2009
3
Imagens Raster
Imagem: array de pixels (picture elements)
4
Como se cria uma imagem?
… isto em CG.
5
Como se cria uma imagem?
No mestrado!!!
6
Áreas da Computação Gráfica
Modelação (modelling)
Representação (rendering)
Animação (animation)
7
+ Áreas da Computação Gráfica
Interacção Pessoa-Máquina (Human-Computer Interaction)
Realidade Virtual (Virtual Reality)
Visualização (Visualization)
....
8
Sistemas Gráficos Interactivos
SketchPAD (1963) IBM2250 (1964)
9
Sistemas Gráficos Interactivos
Xerox STAR (1981) Apple Lisa (1983)
10
Sistemas Gráficos Interactivos
PC com Windows 3.1 (1992) Silicon Graphics Indigo2 (1993)
11
Sistemas Gráficos Interactivos
Razor Blade R2 - Gaming Laptop Apple iWatch
Actualmente …
… o modelo original mantém-se válido:
conceptualmente correcto
funcionalmente aplicável12
Modelo conceptual de
Sistema Gráfico Interactivo
13
Sistema Gráfico InteractivoPerspectiva de Hardware
14
Conceitos BásicosEnquadramento e Conceitos Fundamentais
15
Como criar imagens sintéticas?
16
Como criar imagens sintéticas?
Pode usar-se abordagem física:
Ray-Tracing e/ou Radiosidade(lento) (muito lento)
17
Abordagens Físicas
Alta Qualidade dos Resultados
Lentas (ou muito lentas)
Pouco Práticas para Computação Gráfica Interativa
18
Abordagem Prática
Processar objectos um de cada vez,
conforme são gerados pela aplicação
Pipeline Gráfico
(todos os andares implelentados em hardware na placa gráfica)
19
Processamento de Vértices
Converte representações dos objectos
de um sistema de coordenadas para outro
Mundo >> Camâra >> Dispositivo
Determina cores dos vértices
20
Projecção
Combina informação da câmara com a dos objectos
para produzir imagem 2D
Projecção perspectiva: raios de projecção convergentes
Projecção ortogonal: raios de projecção paralelos
21
Assemblagem de Primitivas
Vértices são associados às suas primitivas
antes de se realizar o recorte
Segmentos de recta, polígonos, curvas e superfícies
22
Recorte
Objectos fora do volume de visualização
são recortados da cena
23
Discretização
Se objecto fica na cena, devem ser associadas cores
aos pixéis correspondentes no frame buffer
Discretizador produz conjunto de fragmentos
para cada objecto
24
Discretização
Fragmentos são “pixéis potenciais” com
atributos cor e profundidade
Atributos dos vértices interpolados
para determinar atributos dos fragmentos
(localização, cor e profundidade)
25
Processamento de Fragmentos
Atributos dos fragmentos usados para determinar a
cor do pixel correspondente no frame buffer
Fragmentos podem ocultar outros
mais distantes da câmara
26
API Gráfica
27
API Gráfica
Componente chave de um sistema gráfico
Colecção de funções para realizar operações básicas
Desenhar Imagens Sintéticas
Representar Objectos 3D
Animar Cenas
...
28
Como criar imagens sintéticas?
Através da API especificam-se
Objectos, Materiais, Câmaras e Fontes de Luz
29
Especificar Objectos
APIs suportam
conjunto limitado de primitivas
Objectos definidos
pela sua localização no espaço ou
pelos seus vértices
30
Especificar um Triângulo(à antiga)
glBegin(GL_POLYGON)
glVertex3f(0.0, 0.0, 0.0);
glVertex3f(0.0, 1.0, 0.0);
glVertex3f(0.0, 0.0, 1.0);
glEnd( );
Tipo de objecto
Localização dos vértices
31
Especificar um Triângulo(usando GPU)
1. Colocar informação geométrica num array
2. Enviar array para o GPU
3. Ordenar ao GPU para renderizar um triângulo
vec3 points[3];
points[0] = vec3(0.0, 0.0, 0.0);
points[1] = vec3(0.0, 1.0, 0.0);
points[2] = vec3(0.0, 0.0, 1.0);
32
Especificar Câmaras
Posição do centro de projecção
Orientação da câmara
Campo de visualização
Dimensão da janela
33
Especificar Fontes de Luz
34
Especificar Materiais
Reflexão Ambiente Difusa e Especular
35
Pipeline Gráfico
Frame
Primitivas
Câmara
Fontes de Luz
36
Frame
Animação:
representação sequencial de imagens estáticas(tal como no cinematógrafo de Lumiére em 1890)
37
Animação
38
Animação em CG
Gerar sequência de frames
Desempenho dado por fps
Quanto mais, melhor… min. 25fps
39
Computação Gráfica Interactiva
Mais que gerar frames em tempo real…
dar ao utilizador o controlo
Resultado produzido depende do input do utilizador
?Edward Angel, Cap. 2
40
E agora…
41
Breve Introdução ao three.jsEnquadramento e Conceitos Fundamentais
42
43
44
45
46
three.jsBiblioteca JavaScript API Gráfica
47
Editor
Notepad++(apenas Windows)
Brackets (apenas Mac)
Sublime Text Editor(OS X, Windows, Linux)
WebStorm -- pago --(OS X, Windows, Linux)
... ou outro da vossa preferência
48
Debugging
49
Debugging (em Chrome)
50
Obter o three.js
descarregar versão completa da página oficial
http://threejs.org/
(não recomendado, a menos que estejam a pensar trabalhar offline)
51
Obter o three.js
descarregar apenas um ficheiro Javascript
three.js ou three.min.js
https://github.com/mrdoob/three.js/tree/master/build
52
Criar pastas e ficheiros
CG
exemplo
js
exemplo.html
53
Criar pastas e ficheiros
js
three.js exemplo.js
54
exemplo.html
55
exemplo.js
56
exemplo.js
57
exemplo.js
58
exemplo.js
59
Ciclo Update/Display
60
exemplo.js
Update
Display
61
exemplo.html
62
Resultado final…
63
Na próxima aula
Programação baseada em acontecimentos
Teoria e modelos de cor
Matemática para CG
Trabalho dos laboratórios deste ano
Edward Angel, Cap. 2
64