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