Computação Gráfica versão 1.0 17/08/2009.

Apresentação em tema: "Computação Gráfica versão 1.0 17/08/2009."— Transcrição da apresentação:

1 Computação Gráfica versão 1.0 17/08/2009

2 Revisões Data Por: Modificação

3 Computação Gráfica A computação gráfica é a área da computação destinada à geração de imagens em geral — em forma de representação de dados e informação, ou em forma de recriação do mundo real. Ela pode possuir uma infinidade de aplicações para diversas áreas. Desde a própria informática ao produzir interfaces gráficas para software, sistemas operacionais e sites na Internet, quanto para produzir animações e jogos.

4 Computação Gráfica A computação gráfica é a área da ciência da computação que estuda a transformação dos dados em imagem. Esta aplicação estende-se à recriação visual do mundo real por intermédio de fórmulas matemáticas e algoritmos complexos.

5 Introdução O que é computação gráfica ? Aplicações

6 Aplicações A computação gráfica intervém em diversas áreas, tais como:
Design Visual: para o desenvolvimento de mídias visuais, desde a impressa (como propagandas em revistas e outdoors) quanto para o auxílio cinematográfico dos comerciais televisivos. Geoprocessamento : Para geração de dados relacionados à cidades, regiões e países.

7 Aplicações Entretenimento CAD (Computer-aided design) Visualização Científica Treinamento Educação E-commerce Arte Computacional

8 Entretenimento Filmes Animações
Jogos: A indústria do entretenimento atualmente dá mais lucro que a cinematográfica! Jogos são a maior aplicação da computação gráfica, e a grande motivação para seu desenvolvimento. Cinema: para produção de efeitos especiais, retoques nas imagens do filme, e filmes de animação.

9 CAD Construções de Aeroportos Construção de um avião Arquitetura e Design de Produto: desenvolvimento gráfico dos projetos de forma visual e com a aplicação dos cálculos matemáticos para os testes dos projetos quanto a resistência, a variação de luz e ambientes.

10 Visualização Científica
Estudo do fluxo de ar em uma tempestade Visualização do corpo humano Medicina: Para análise de exames como tomografia, radiografia, e mais recentemente o ultra-som (que consegue gerar a partir deste uma imagem em 3D)

11 Treinamentos Simuladores de direção Simuladores de vôo Montagens em geral (ex, como montar um determinado aparelho)

12 Educação Visualização de monumentos históricos Estudo do esqueleto humano

13 E-Commerce Planejamento de uma cozinha planejada Loja virtual de telefones

14 Arte computacional Artes : Para expressão artística utilizando os ambientes gráfico-computacionais como meio ou fim, tais como gravura digital, arte digital, web arte.

15 2 - Primitivas gráficas em 2D

16 Primitivas Gráficas Chamamos de primitivas gráficas os comandos e funções que manipulam e alteram os elementos gráficos de uma imagem. Também entra na definição de primitivas os elementos básicos de gráficos a partir dos quais são construídos outros, mais complexos.

17 Pontos Um ponto é uma unidade gráfica fundamental (também pode ser chamado pixel) Propriedades Posição no plano gráfico Sua cor Primitivas Pintar um pixel Ler um pixel

18 Linhas retas y = mx + b m é chamado de coeficiente angular (está ligado ao ângulo que a reta faz com o eixo x) m<=1  ângulo entre 0º e 45º com o eixo x m>1  o ângulo encontra-se entre 45º e 90º. b é o coeficiente linear e dá o valor do eixo y cruzado pela reta

19 Linhas Retas Dado dois pontos P1 e P2, pode-se obter m e b, ou seja, a equação da reta que passa pelos pontos: m=(y2-y1)/(x2-x1) Como y = mx + b, então: b +mx = y  b = y - mx Se x=x1 e y=y1: b=y1-mx1 y = y0 + m(x-x0) (equação da reta) m=(y-y0)/(x-x0) (coeficiente angular)

20 Segmento de reta definido entre dois pontos

21 Algoritmos para desenhar retas
DDA – Digital Differential Analyser (Analisador Diferencial Digital) Algoritmo de Breseham

22 Algoritmo DDA (Digital Differential Analyser)

23 Algoritmo DDA (Digital Differential Analyser)

24

25 Algoritmo DDA (Analisador Diferencial Digital)
void SegLinDDA(int x0, int y0, int x1, int y1) { double dx = (double) abs(x1-x0); double dy = (double) abs(y1-y0); double xf, s; double x=x0; double y=y0; if( (dx) > (dy) ) { s = dx; } else { s = dy; } double xi=dx/s; double yi=dy/s; pinta(round(x),round(y)); }

26 Algoritmo DDA (Analisador Diferencial Digital)
int k=0; for(k=0; k<s; k++) { x = x + xi; y = y + yi; pinta(round(x),round(y)); }

27 Algoritmo de Breseham É um método veloz Utiliza somente aritmética inteira Evita operações caras em ponto flutuante como multiplicações e divisões Evita operações de arredondamento

28 Algoritmo de Breseham

29 Algoritmo de Bresenham
void SegLinBres(int x0, int y0, int x1, int y1) { double dx = abs(x0-x1); double dy = abs(y0-y1); double p = 2*dy - dx; double p2 = 2*dy; double xy2 = 2*(dy-dx); double x, y, xf; if(x0>x1) { x = x1; y = y1; xf = x0; } else { x = x0; y = y0; xf = x1; } pinta( round(x), round(y) ); while(x<xf) { x = x+1; if (p<0) { // sim p = p + p2; } else { y = y + 1; p = p + xy2; } pinta(round(x),round(y)); }

30 Polilinhas Retas são a base para uma grande variedade de figuras que são composta por segmentos de retas, como: polígonos caracteres figuras geométricas complexas

31 Polilinhas Uma polilinha é um conjunto de segmentos de retas, cujas extremidades coincidem, ou seja, um segmento começa no ponto em que o segmento anterior termina polilinhas  são uma série de pontos conectados

32 Polilinhas Exemplos de Polilinhas

33 Propriedades da Polilinhas
é composta de n segmentos de retas (n >= 1) é definida por n + 1 pontos Polilinha poderá ser aberta ou fechada

34 Polígono Pode ser definido como uma polilinha fechada Propriedades:
n segmentos de retas (n >= 2) definida por n pontos Obs: No caso da definição de apenas dois pontos, haverá dois segmentos de reta, um indo do 1º ao 2º ponto e outro indo do 2º ao 1º. Não será desenhado um polígono fechado, mas n=2 é uma quantidade de pontos que satisfaz o algoritmo

35 3 – Tópico Teórico: Frame Buffer
Dispositivo gráfico – o acesso ao dispositivo gráfico é mais lento que ao acesso à memória Controlador gráfico – responsável pela exibição dos gráficos

36 É uma técnica de construção de imagem em memória
Frame Buffer É uma técnica de construção de imagem em memória região de memória (que armazena a imagem) rotinas de acesso a imagem Por que construir uma imagem em memória ? Resposta: o acesso ao dispositivo gráfico é mais lento do que o acesso a memória (questões de velocidade)

37 Usando a memória um pixel será representado por um certo número de bytes a quantidade de memória do frame-buffer deverá comportar todos os pixels que a serem representados correspondência aritmética entre a posição (x,y) de um pixel genérico e seu endereço no frame-buffer

38 Exemplo Representação de uma imagem true color (32 bits) de 800x600 pixels Qual o tamanho do frame-buffer ? 800 x 600 x 4 = bytes ou 1,92Mb

39 Uma possível representação em linguagem C seria:
Exemplo Uma possível representação em linguagem C seria: unsigned long FrameBuffer[800][600]; Obs: o tamanho do long é 4 bytes

40 Exemplo Acesso ao pixel: FrameBuffer[x][y]=0; // pixel é apagado FrameBuffer[x+1][y+1] = FrameBuffer[x][y];

41 Exemplo Representação usando apenas um vetor Cada linha da imagem é representada por uma sequência de bytes que se agrupam como sequência consecutivas

42 Exemplo

43 Exemplo FB é o endereço do primeiro byte do Frame-buffer
o segundo pixel encontra-se no endereço FB+4 o terceiro pixel encontra-se no endereço FB+2*4 o quarto pixel encontra-se no endereço FB+3*4 o último byte da primeira linha encontra-se em FB+799*4

44 Exemplo O primeiro byte da segunda linha encontra-se em FB+800*4 De forma genérica, podemos mapear qualquer posição (x,y) em FB+[800*y+x]*4

45 Exemplo m = FB + [ x + Ly ] * b onde:
m: endereço do inicio do pixel no frame-buffer FB: endereço inicial do FrameBuffer L: número de pixels numa linha da imagem b: tamanho do pixel (em bytes)

46 x = resto ((m-FB)/b*L)/b ou ((m-FB) % (b*L))/b y = (m-FB)/b*L onde:
Exemplo x = resto ((m-FB)/b*L)/b ou ((m-FB) % (b*L))/b y = (m-FB)/b*L onde: m: endereço do inicio do pixel no frame-buffer FB: endereço inicial do FrameBuffer L: número de pixels numa linha da imagem b: tamanho do pixel (em bytes)

47 4 – Círculos e elipses Introdução traçado de círculos

48 Círculos Um círculo é definido como um conjunto de pontos que estão a mesma distância de um ponto A distância é o raio do círculo, e o ponto equidistante de todos é o centro do círculo Matematicamente: (x-x0)2 + (y-y0)2 = r2

49 Círculos Função x = xc +- sqrt(r2 – (y-yc)2) y = yc +- sqrt(r2 – (x –xc)2) Problemas: exige muitos cálculos envolvendo exponenciação e radiciação geram imprecisão no traçado, principalmente quando o círculo fica quase na horizontal ou vertical

50 Imprecisões no traçado de círculos

51 Sistema de Coordenadas
Coordenadas cartesianas (x,y) Coordenadas polares (r, θ)

52 Círculo de raio r

53 Sistemas de Coordenadas
x = xc + r cos θ y = xc + r sen θ onde θ é um ângulo que varia entre 0 e 2π (os ângulos devem ser tratados com unidades em radianos) Problemas: cálculos envolvendo senos e cossenos  perda de tempo e agilidade precisão depende do raio do círculo 0º -- 0 rad 90º -- PI/2 rad 180º -- PI rad 270º -- 3/2*PI rad 360º -- 0 rad

54 Divisão da Circunferência em 8 segmentos

55 Aplicação do algoritmo do ponto médio para círculos

56 Algoritmo do ponto médio para círculos

57

58 Elipse Uma elipse é definida como o conjunto de pontos cuja soma das distâncias para dois pontos fixos é constantes. Os dois pontos fixos são chamados os focos da elipse Sua definição matemática é: sqr((x-x1)2 + (y-y1)2) + sqr((x-x2)2 + (y-y2)2) = d1 + d2

59 Representação de uma elipse e suas grandezas principais
y = yc + rxcosθ x = xc + rysen θ onde (x1,y1) e (x2,y2) são as posições dos focos, e d1 e d2 são as do ponto P distancia até os focos.

60 Elipses y = yc + rx*cos θ x = xc + ry*sen θ onde rx e ry são os raios nas direções x e y e (xc,yc) é o centro da elipse θ é um ângulo que varia entre 0 e 2PI

61 Elipse – quatro quadrantes
simetrias por quadrantes (um quarto da elipse, com theta indo de 0 até 2PI

62 Algoritmo do ponto médio para elipses

63

64 Algoritmo do ponto médio para elipses
Evita problemas de precisão aumenta a rapidez dos cálculos É um algoritmo simples

65 5 – Preenchimento de Áreas
Introdução Algoritmo ponto dentro – ponto fora Algoritmo do preenchimento recursivo

66 Prenchimento de Áreas Exemplo 2 Exemplo 1
No Exemplo 1, os pontos A e C está fora do polígono, enquanto o ponto B encontra-se no interior do polígono

67 Preenchimento de Áreas
Traça-se um segmento de reta a partir do ponto até atingir o lado direito da tela. Conta-se quantas vezes esse segmento de reta intercepta os lados do polígono Se o número de interceptações for ímpar  ponto está dentro do polígono Se o número de interceptações for par  ponto está fora do polígono E se o ponto estiver sobre um segmento do polígono ? Exemplo 1 Exemplo 2

68 Algoritmo de Preenchimento de Áreas
Exemplo do algoritmo recursivo para preenchimento de áreas

69 Algoritmo de Preenchimento

70 6 – Atributos de primitivas

71 Atributos de pontos: cores
Um pixel tem somente um atributo possível: sua cor Sistema de Cores RGB (Red, Green e Blue) Cada cor é caracterizada por três componentes cada qual especificando uma intensidade de cada uma das cores básicas

72 Profundidade de uma cor
Profundidade (é uma grandeza): número de bits disponível por pixel: 3, 6, 12, 24 3 bits = 23 cores = 1 bit por cor 6 bits = 26 cores = 2 bits por cor 12 bits = 212 cores = 4 bits por cor 24 bits = 224 cores = 8 bits por cor 3 bits = 23 cores = 1 bit por cor 6 bits = 26 cores = 2 bits por cor 12 bits = 212 cores = 4 bits por cor 24 bits = 224 cores = 8 bits por cor

73 Tabela de Cores São tabelas que relacionam a intensidade de cada cor básica para gerar todas as cores existentes em uma imagem. Por exemplo, podemos ter uma tabela de 256 entradas que representem todas as cores existentes em uma imagem onde cada pixel possui certa profundidade. O uso de tabela de cores agiliza a geração e o tratamento de imagens

74 Atributos de linhas Tipo de linha Espessura da linha (ou largura da linha) Padrão de pincel

75 Uma linha, quanto a seu traçado, pode ser:
Tipo de linha Uma linha, quanto a seu traçado, pode ser: contínua pontilhada tracejada ponto-traço

76 Exemplos de Tipos de Linhas
Uma linha, quanto a seu traçado, pode ser: contínua pontilhada tracejada ponto-traço O tipo de linha determina a continuidade do traçado contínua, pontilhada, tracejada, ponto-traço

77 Espessura da linha (largura)
Estabelece a espessura com a qual uma linha deve ser representada

78 Uma área pode ser definida pelas linhas que definem seu perímetro.
Atributos de áreas Uma área pode ser definida pelas linhas que definem seu perímetro. contorno da área (perímetro)

79 Atributos de área Cor Textura

80 Aplicação de um padrão para o preenchimento de uma área
brush = pincel

81 7 – Tópico Teórico: antialias
Introdução Método de superamostragem adaptativo Método de superamostragem recursivo

82 Método de superamostragem recursivo

83 8 – Transformações geométricas em duas dimensões
Transformações básicas Translação Rotação Escala

84 Transformações básicas
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 objeto a ser desenhado Translação Rotação Escala

85 Translação Chamamos de translação o ato de levar um objeto de um ponto para outro num sistema de referência P’ = P + T x’ = x + tx y’ = y + ty x’ = x + tx y’ = y + ty O par (tx,ty) é chamado vetor de translação ou vetor de deslocamento

86 Rotação Dá-se o nome de rotação ao ato de girar um objeto de um ângulo, num sistema de referências P’=R.P x’ = xcos0 – ysen0 y’ = xsen0 – ycos0 P’ = R.P x’ = xcos0 – ysen0 y’ = xsen0 – ycos0

87 Escala Quando se aplica uma transformação de escala a um objeto, o resultado é um novo objeto semelhante ao original, porém “esticado” ou “encolhido” P’=S.P x’ = x . sx y’ = y . sy x’ = x . sx y’ = y . sy O par (sx,sy) é chamado vetor de escala

88 9 – Transformações compostas
Introdução às coordenadas homogêneas Transformações compostas em coordenadas homogêneas Transformações especiais Transformações afins

89 Como rotacionar um objeto deslocado da origem
deslocar o ponto pivot para origem das coordenadas aplicar a rotação no objeto deslocado transladar de volta o ponto pivot para o local original Transformações elementares: são aplicadas umas independentes das outras

90 Aplicação de Transformações Sucessivas

91 Introdução as coordenadas homogêneas
Coordenadas homogêneas são uma representação especial dos pontos, vetores e matrizes, a qual facilita a generalização das operações entre esse tipo de objetos Ao expressarmos posições em coordenadas homogêneas, as equações de transformações geométricas ficam reduzidas a multiplicação de matrizes 3 x 3 elementos As coordenadas são representadas por colunas (vetores) de três elementos, e as operações de transformação são matrizes 3x3 elementos

92 Translação / Rotação e Escala em coordenadas homogêneas
x’ y’ 1 1 0 tx 0 1 ty 0 0 1 x y Translação x’ y’ 1 cos0 –sen0 0 sen0 cos0 0 x y Rotação Escala x’ y’ 1 sx 0 0 0 sy 0 x y

93 Transformações Compostas em coordenadas homogêneas
Concatenação de translações Concatenação de rotações Concatenação de escalas Concatenações de transformações genéricas

94 Transformações especiais
Reflexões sobre eixos notáveis Distorções angulares em uma única direção: shears

95 Reflexões sobre eixos notáveis
Reflexão com relação ao eixo X Reflexão com relação ao eixo Y Reflexão com relação à origem Reflexão com relação a reta Y = X Reflexão com relação a reta Y = -X

96 Reflexão com relação ao eixo X
Matriz de transformação:

97 Reflexão com relação ao eixo Y
Matriz de transformação:

98 Reflexão com relação a origem
Matriz de transformação:

99 Reflexão com relação a reta Y = X
Matriz de transformação:

100 Reflexão com relação a reta Y = -X
Matriz de transformação:

101 Distorções angulares em uma única direção: shears
As distorções do tipo shear resultam numa inclinação do objeto numa dada direção. Uma de suas aplicações é a transformação de fontes de texto no estilo itálico. Shear na direção X Shear na direção Y Shear = cisalhamento

102 Shear na direção X Matriz de transformação: 1 shx 0

103 Shear na direção Y Matriz de transformação: shy 1 0

104 Transformações afins Uma transformação na forma: x’ = axxx + axyy + bx y’ = ayxx + ayyy + by é chamada de transformação afim bidimensional

105 10 – Primitivas básicas em 3D
Introdução Planos Paralelepípedos e Cubos Superfícies curvas Superfícies quadráticas Esferas Elipsóides Toróides Superfícies superquadráticas: os supereelipsóides Blobs

106 Planos Os planos são os objetos mais simples que podemos definir na geometria em três dimensões Caracterização Ax + By + Cz + D = 0, onde x, y,z são as coordenadas de um ponto pertencente ao plano onde A, B e C e D são constantes Os valores A,B,C,D podem ser obtidos para um plano dado, resolvendo se simultaneamente a equações de três pontos não colineares pertencentes ao plano

107 Um plano ao pôr-do-sol, com seu vetor normal
Vetor Normal é um vetor que é perpendicular ao plano. N = Ax + By + Cz

108 Paralelepípedos São objetos com aparências de “caixas”, isto é, objetos com seis faces retangulares que são paralelas e iguais duas a duas Cubo é um paralelepípedo com faces quadradas.

109 Paralelepípedos Um paralelepípedo
Um paralelepípedo com uma diagonal e os pontos que o definem

110 Superfícies curvas Permite representar elementos simples e complexos e também fazer concordâncias entre elementos gráficos

111 Superfícies quadráticas
Forma Geral: Ax2+By2+Cz2+Dxy+Exz+Fyz+Gx+Hy+Iz = J

112 Esferas Equação da esfera em coordenadas cartesianas: x2+y2+z2=r2 onde: x, y e z são as coordenadas de pontos que pertencem a superfície da esfera, e r é o raio

113 Uma esfera Uma esfera: todos os pontos estão
a mesma distância do centro

114 Elipsóides (x/rx)2 + (y/ry)2 + (z/rz)2 = 1 onde: x,y,z  são as coordenadas do ponto que pertencem a elipsóide rx, ry, rz  coeficientes

115 Elipsóides Um elipsóide com três raios diferentes

116 Toróides Representação de um toróide

117 Superfícies superquadráticas: os superelipsóides

118 Blobs Blobs podem ser descritos como aglomerações (conjuntos) de pequenas esferas (em alguns casos, cilindros) que mudam de forma quando se aproximam uns dos outros

119 Blobs Um objeto blob composto por três elementos

120 11 – Tópico teórico: métodos de interpolação*
Queremos calcular o valor de uma função f(x) num ponto genérico x sem o uso da expressão analítica de f(x)

121 12 – Luz e sombra Introdução As fontes de luz As cores
o comportamento das superfícies iluminadas propagação da luz As cores objetos iluminados por luzes de cores diferentes

122 Introdução Fontes de luz Corpos opacos Corpos transparentes
Propagação da luz Estes conceitos serão aplicados nos capítulos que apresentam a linguagem de geração de cenas tridimensionais

123 As fontes de luz emite a luz que ela própria produz
Ex: o Sol, as chamas de uma fogueira, o filamento de uma lâmpada incandescente, uma tela de TV Primária: Fontes de Luz Secundária: reemite a luz produzida por uma fonte primária Ex: o teto, as paredes, a Lua, os planetas,

124 Comportamento das superfícies iluminadas
Corpos opacos: as superfícies opacas reemitem a luz em várias direções, mas não se deixam atravessar por ela (esse fenômeno é chamado difusão da luz) Corpos translúcidos: deixam atravessar por uma parte da luz que recebem mas trabalham como difusores de luz Corpos transparente: deixa-se atravessar pela luz

125 Objeto opaco Um objeto opaco: a luz não o atravessa, e é gerada uma sombra

126 Objeto translúcido Um objeto translúcido é parcialmente atravessado pela luz

127 Objeto transparente Um objeto transparente permite a passagem total da luz

128 Propagação da luz A luz se propaga em linha reta em um meio transparente e homogêneo O sentido de propagação é sempre partindo da fonte (primária ou secundária)

129 As cores Luz branca (ex: luz do sol, luz de uma lâmpada incandescente)
Luz branca é decomposta em suas componentes (por um prisma, ou um disco de CD) espectro de luz: é o nome dado a seqüência de cores obtidas pela decomposição da luz branca Cores presentes no espectro da luz branca: vermelho, laranja, amarelo, verde, azul, índigo e violeta índigo (é o mesmo que anil): Anil é a cor da luz entre 450 e 480 nanômetros de comprimento de onda, localizada entre o azul e o violeta. Assim como muitas outras cores (como laranja, rosa e violeta), a origem do nome provém de um objeto natural - a planta Indigo. (Fonte: Wikipedia) Espectro visível: violeta azul ciano verde amarelo laranja vermelho

130 Objetos iluminados por luzes de cores diferentes
A cor observada de um objeto depende da cor que o ilumina. Um objeto que reemite todas as cores da luz apresenta-se com a cor branca Um objeto que absorve todas as cores da luz apresenta-se com a cor preta o aspecto de um objeto depende da cor da luz que o ilumina

131 Tabela com a cor aparente de um objeto em função da luz que o ilumina
Cor da Luz Cor observada do objeto Branca Vermelha Azul Verde Preta Obs: o objeto sob a luz branca é a “cor original” do objeto

132 Imagem e a decomposição em suas componentes
vermelho  r,b,b verde  g, b, g azul  r, b, v uma imagem e a decomposição em suas componentes, obtidas através da iluminação nas três cores básicas: vermelho, verde e azul

133 Síntese aditiva e subtrativa
Síntese aditiva: é o fenômeno de obter uma luz de uma determinada cor a partir da soma das luzes de outras cores Síntese subtrativa: pode-se subtrair de uma luz colorida uma de suas componentes com a utilização de filtros, e assim obter uma luz de outra cor. Os filtros atuam como componentes subtrativos, absorvendo a luz da cor que os compõe, e deixando-se atravessar pelas outras

134 Síntese aditiva Luz azul + luz vermelha = luz magenta Luz verde + luz azul = luz ciano Luz verde + luz vermelha = luz amarela Luz verde + luz vermelha + luz azul = luz branca

135 Síntese aditiva de cores primárias
12.5 Três fontes de luz cores diferentes iluminam uma parede branca. Note-se a síntese aditiva na regiões de sobreposição

136 Síntese subtrativa Filtro amarelo + filtro ciano = filtro verde
Filtro amarelo + filtro magenta = filtro vermelho Filtro ciano + filtro magenta = filtro azul Filtro amarelo + filtro ciano + filtro magenta = filtro preto = opaco Processo de obtenção de cores secundárias

137 12.6 Síntese subtrativa Um fonte de luz branca atravessa filtros amarelos e ciano, resultando em luz verde

138 Síntese subtrativa 12.7 Uma fonte de luz branca atravessa filtros magenta e ciano, resultando em luz azul

139 Síntese subtrativa 12.8 Uma fonte de luz branca atravessa filtros amarelo e magenta, resultando em luz vermelha

140 Geração de imagens coloridas
Em monitores usa RGB (Red, Green , Blue) ou (Vermelho, Verde ou Azul) Em impressoras e fotografias usa CMYB (Ciano, Magenta, Amarelo, Black)

141 Geração de imagens coloridas em monitores
Utiliza o mesmo princípio da televisão em cores Usa a síntese aditiva

142 Geração de imagens coloridas em impressoras e fotografias
As impressoras e gráficas usam quatro cores de tintas: ciano, amarelo, magenta e preto. A geração de cores é obtida através da síntese subtrativa

143 Sombras: fonte de luz pontual
Uma fonte de luz pontual é o caso mais simples de geração de sombra Quando um objeto é iluminado por uma fonte de luz pontual, este tem o lado voltado para a fonte iluminada e o lado oposto escurecido sombra própria – nome dado a sombra formada no lado escurecido sombra projetada – nome dado a sombra vista na região iluminada de um anteparo cone de sombra – nome dado a porção do espaço que ficou escurecida pela presença do objeto

144 Fonte de luz pontual um objeto iluminado por uma fonte de luz pontual gera uma sombra bem nítida

145 Duas fontes de luz Utilizando-se duas fontes de luz pontuais, observam se duas regiões de sombra projetada, mas , mesmo assim, existem regiões que são iluminadas por apenas uma das fontes. Esse efeito recebe o nome de penumbra. Quando um objeto é colocado entre as duas fontes de luz pontuais, existe a formação da penumbra. A sombra total somente será observada se as regiões de penumbra forem sobrepostas

146 Duas fontes de luz A sombra gerada por duas fontes de luz pontuais é, na verdade, a sobreposição das duas sombras distintas

147 Fonte de luz extensa Pode ser modelada por quantidade infinita de fontes pontuais região de transição entre a iluminação e a sombra é chamada de penumbra

148 Fonte de luz extensa Uma fonte de luz extensa pode ser modelada por uma quantidade infinita de fontes pontuais. A sombra desse tipo de fonte de luz apresenta uma penumbra que varia da iluminação total até a sombra total

149 Simulando a propagação da luz
Três cores básicas: Vermelho (Red) Verde (Green) Azul (Blue) Intensidade controlada por números O filtro é um objeto translúcido

150 Raios luminosos de cor RGB atravessando um filtro cinza (50%) e um filtro vermelho

151 13 – Efeitos especiais: cuidando das superfícies
Texturas Pigmentos Normal Finalizações Brilhos superficiais

152 Texturas O material (ou materiais) que compõem um objeto é representado através da superfície visível. Em teoria, as características da textura podem ser divididas em três categorias combinadas entre si: os pigmentos vetor normal finalização (ou revestimento)

153 Texturas As texturas ainda podem ser modeladas segundo três tipos básicos: lisa: consiste em um único pigmento, com efeitos uniformes ao longo de sua superfície combinada: associa, em regiões da superfície, duas ou mais texturas com camadas: é feita através da sobreposição de texturas diferentes, nas quais existem regiões transparentes ou semitransparentes

154 Esferas com vários efeitos de superfície e finalização

155 Representam as cores ou padrões de cores do material
Pigmentos Representam as cores ou padrões de cores do material Todas texturas lisas devem ter um pigmento cor contínua  é o tipo mais simples de um pigmento

156 Normal Vetor normal estabelece as irregularidades da superfície

157 Normal O vetor normal de uma superfície é, por definição, um vetor perpendicular a essa superfície, isto é, apontando para cima os vetores normais de uma superfície lisa e de uma irregular

158 Finalização (ou Revestimento)
Descreve as propriedades reflexivas de um material reflexão especular  obtida quando a luz incide sobre uma superfície lisa difusão  obtida quando a luz incide sobre uma superfície com rugosidade luz refletida

159 Brilhos superficiais O brilho manifesta-se com uma região numa superfície onde a luz tem um comportamento especular especialmente intenso A visão do brilho depende do ângulo de iluminação e da posição do observador ângulo de iluminação posição do observador

160 Iridescência (interferência de Newton, ou filme fino)
Brilhos Superficiais Efeito "Phong" Reflexão especular Iridescência (interferência de Newton, ou filme fino) i.ri.des.cên.cia sf (de iridescente) Qualidade de iridescente. i.ri.des.cen.te adj (irido+escer) Que reflete ou mostra as cores do arco-íris.

161 Efeito "phong" to.rói.de sm (toro1+óide) Geom Sólido que se origina pela rotação de uma superfície plana fechada ao redor de um eixo que não lhe seja secante secante (adj f (lat secante) 1 Geom Designativo da linha ou superfície que corta outra. 2 Geom Diz-se da reta que corta a circunferência em dois pontos. sf Linha, superfície ou reta secante. S. de um arco, Mat: o inverso do co-seno desse arco. ) Nessa figura foi atribuído apenas ao toróide da esquerda, o brilho phong

162 14 – Transformações geométricas em três dimensões
Transformações básicas Translação Rotação Escala Concatenação de transformações em três dimensões Projeções Projeção paralela Projeção com perspectiva

163 Transformações básicas
Translação de um objeto

164 Translação x’ = x + tx y’ = y + ty z’ = z + tz onde o vetor (tx,ty,tz) é chamado vetor de translação ou vetor de deslocamento

165 Matriz homogênea de translação
P’ = T.P x1’ x2’ x3’ 1 tx ty tz x1 x2 x3 =

166 Rotação Rotação de um objeto (da primeira figura) nos três eixos (x, y e z)

167 Matriz homogênea de rotação
x1’ x2’ x3’ 1 cosθx –senθx 0 0 senθ x cosθx 0 0 x1 x2 x3 = Rotação em torno do eixo x x1’ x2’ x3’ 1 0 cosθy –senθy 0 0 senθ x cosθx 0 x1 x2 x3 = Rotação em torno do eixo y x1’ x2’ x3’ 1 cosθz 0 senθx 0 -senθ z 0 cosθz 0 x1 x2 x3 = Rotação em torno do eixo z

168 Escala

169 Matriz homogênea de escala
P’ S P x1’ x2’ x3’ 1 sx 0 sy sz 0 x1 x2 x3 = P’ = S . P

170 Concatenação de transformações em três dimensões
x y z sx 0 sy 0 0 0 0 sz 0 x y z sx (1-sx)x 0 sy 0 (1-sy)y 0 0 sz (1-sz)z = translação escala translação

171 Projeções É a operação de transformar uma imagem 3D em 2D

172 Tipos de Projeções Projeção paralela Projeção com perspectiva

173 Projeção Paralela Projeção de um objeto sobre o plano. Na projeção paralela, as linhas que levam os pontos dos objetos ao plano de projeção são paralelas entre si e perpendiculares ao plano de projeção

174 Projeção Paralela ângulo Φ (phi)

175 Projeção com perspectiva
Projeção de Cavalier Na projeção com perspectiva, supõe-se que o observador esteja num ponto (chamado ponto de referência ou ponto de fuga) e que partem linhas imaginárias desse ponto para o interior da cena

176 Projeção com Perspectiva

177 15 – O uso de um pacote de ray-tracing
Introdução A necessidade de um sistema de referencia Vetores: posições, direções e rotação Ray-tracers Elementos de uma imagem 3D O uso de uma linguagem de descrição Níveis de descrição o POV ray-tracer elementos de linguagem do POV

178 16 – Objetos básicos Introdução Plano Esferas Paralelepípedos Cone
Cilindro Toróide Height field CSG (Constructive Solid Geometry)

179 17 - Iluminação Introdução Fonte de luz ambiente Fontes de luz pontuais Fontes de spotlight Fontes cilíndricas Objetos como fontes de luz

180 18 – Cores e texturas Introdução Acabamentos Bumps Padrões de Cores
Texturas predefinidas Padrões de pigmentos e normais Pigmentos e padrões Modificadores de padrões Pigmentos transparentes e sobreposição de texturas Mapas de pigmentos

181 Introdução A textura de um objeto é uma importante matéria a ser estudada no sentido de aumentar o grau de realismo de uma cena

182 19 – Efeitos de superfície
Introdução Operações básicas com o vetor normal Sobreposição de modificadores da normal Acabamentos Atenuação da luz Iridescência i.ri.des.cên.cia sf (de iridescente) Qualidade de iridescente. i.ri.des.cen.te adj (irido+escer) Que reflete ou mostra as cores do arco-íris.

183 Introdução Objetos com superfícies bem lisas não são muito realistas. Existem várias formas de perturbar a perfeição de uma superfície, todas elas via manipulação do vetor normal. A normal é vetor que fica perpendicular a cada ponto da superfície, e a forma como a luz se comporta depende desse vetor

184 20 – A câmera virtual e animação
Escolha da posição e das lentes Animação

185 21 – Formatos de arquivos de imagens e Internet
Arquivos gráficos Implantação de imagens em páginas HTML Cuidados especiais para otimizar a transmissão das páginas

186 Arquivos gráficos Chamamos formato o conjunto de regras que estabelecem um padrão de organização de dados nos arquivos gráficos

187 Formatos e extensões Formato Extensão Targa .tga
Portable Network Graphics .png Unix PPM .ppm Windows bitmap .bmp

188 Apêndice A – Matemática da computação gráfica
Introdução Gráficos 2D versus gráficos 3D Sistemas de Coordenadas Pontos, vetores e matrizes

189 Representações de um Cubo

190 Sistemas de Coordenadas
Um sistema de coordenadas é composto por eixos que sejam perpendiculares entre si, sendo um para cada dimensão do espaço

191 Sistemas de coordenadas
Sistema Cartesiano (x, y) Sistema Polar (r, θ) 3D Sistema Cartesiano (x,y,z) Sistema cilíndrico (r, θ, z) Sistema esférico (r, θ, φ) θ(theta),φ(fi)

192 Sistema Cartesiano no plano (2D)
Duas coordenadas, bidimensional

193 Sistema cartesiano no espaço (3D)
Três coordenadas (x,y,z), tridimensional

194 Sistema Esférico (tridimensional)
r, θ (theta) e φ (phi)

195 Sistema Cilíndrico (tridimensional)
r, θ (theta) e z θ é o ângulo formato pela projeção do ponto (r, θ,z) no plano XY

196 Pontos, vetores e matrizes
Ponto: é uma posição especificada dentro de um sistema de referências Vetor: estabelece a distância entre dois pontos e possui uma direção

197 Definição de um vetor no plano cartesiano
propriedade do vetor: direção

198 Operações com vetores produto por um escalar soma de vetores (+) produto escalar (.) produto vetorial (x)

199 Matrizes

200 Operações com matrizes
produto por um escalar produto de matrizes transposição de matrizes (troca das linhas pelas colunas)

201 Referências

202 Backup Slides

203 Computação Gráfica na Wikipédia

204 Sistema de Cores RGB (Red, Green, Blue) XYZ (CIE) CMY (Cyan, Magenta, Yellow) Subtractive (complement RGB) HSV (Hue, Saturation, Value) Outros

205 RGB (Red, Green, Blue) R G B Cor Preto (Black) 1 Vermelho (Red)
Preto (Black) 1 Vermelho (Red) Verde (Green) Azul (Blue) Amarelo (Yellow) Magenta Ciano (Cyan) Branco (White) As cores são aditivas

206 Cubo de Cores RGB

207 Pixel

208 CMY (Cyan, Magenta, Yellow)
Cor branco 1 cyan magenta amarelo azul verde vermelho preto As cores são subtrativas

209 Cubo de Cores CMY CMY – Cyan, Magenta, Yellow

210 Modelo de Cores HSV H S V Cor 1 Vermelho 120 Verde 240 Azul * Branco
1 Vermelho 120 Verde 240 Azul * Branco 0.0 0.5 Cinza Preto 60 270 Hue (matiz), Saturation (saturação), Value (valor) matiz = sm (de matizar) 1 Combinação de cores diversas, nas pinturas, nos bordados, nos tecidos etc. 2 Cor viva, mimosa ou delicada, principalmente de objetos da natureza. 3 Gradação de cor. 4 Colorido de estilo.

211 Aplicações Gráficos para TV Esse é o tipo de aplicação que vemos com mais freqüência. Suas animações são mais voltadas para movimentação de logotipos e textos. Visualização Científica Na aplicação de estudos acadêmicos a computação gráfica tem um papel importante. Ela tem a tarefa de traduzir números e dados em representações gráficos de leitura mais fácil. Essas representações são chamadas as vezes de Visual Data Analysis. Simulação A computação gráfica, pode ser utilizada para simular acidentes ou acontecimentos importantes para um público maior. Esse tipo de simulação é muito utilizado em jornalismo, para ilustrar algum acontecimento. Nos EUA, existem empresas especializadas em criar simulações de acidentes de trânsito, para apresentação em tribunais. Simuladores de Voo Os treinamentos de pilotos são realizados de maneira barata e segura nesses simuladores. Essa aplicação é mais restrita, já que os equipamentos envolvidos são caros.

212 Aplicações Militares Os militares são consumidores ávidos por computação gráfica, pelo menos os militares americanos. Eles utilizam a CG para treinamentos e simulações de cenários envolvidos em conflitos. Os investimentos necessários para o desenvolvimento da informática e da computação gráfica, só foram possíveis graças a interesses militares. Astronomia e espaço Esse tipo de aplicação é muito semelhante a visualização científica, mas sua aplicação é mais ilustrativa do que acadêmica. Eventos que se passam a milhões de KM da nossa atmosfera não podem ser filmados com facilidade, então eles são apresentados ao público em geral na forma de uma animação. Existem aplicações científicas também, como estudo de trajetórias e simulação de colisões no espaço. Arquitetura A visualização de projetos arquitetônicos é extremamente difundida entre as pessoas que estão começando a trabalhar no mercado de CG. Todos se interessam pelas famosas “maquetes eletrônicas”. Esse interesse não é justificado pela aplicação comercial mais imediata desse produto. Existem mais pessoas interessadas em comprar esse tipo de CG. Com o crescimento do setor de construção, esse é um ramo da CG que só tende a crescer no nosso país.

213 Aplicações Arqueologia O uso de CG para arqueologia é muito parecido com o seu uso para arquitetura. A diferença é o objetivo. Na visualização arquitetônica, a CG mostra o que será construído e na arqueologia o objetivo é reconstruir um local, para mostrar como ela era no passado. Medicina Aplicações médicas são importantes na CG para desenvolvimento de treinamentos e auxílio em diagnósticos. Algumas empresas de CG são especializadas nesse tipo de aplicação, como eu já mostrei em um artigo publicado aqui. Filmes Acho que eu não preciso falar muito sobre esse tipo de aplicação, já que é uma área altamente divulgada. Aqui as aplicações da CG são fundamentais para contar uma história de maneira convincente. Nos últimos anos a CG tem tido um destaque mair pela presença de filmes completamente produzidos em CG. Jogos O mercado de jogos eletrônicos sempre foi uma grande promessa no nosso país. Os jogos modernos consomem uma enorme quantidade de animações, modelos 3D e ilustrações. Esse é um mercado que tem poucos profissionais especiaizados e que pode trazer um bom retorno para quem se interessar. Arte A CG também tem aplicações para artistas interessados em desenvolver trabalhos em 3D e ilustração. Existem vários artistas desenvolvendo animações abstratas e simulações que envolvem formas e tempo. Multimídia Essa área é uma mistura de várias das aplicações citadas aqui. A habilidade de misturar textos, sons e imagens em uma interface com o usuário. Esse tipo de aplicação pode ser utilizado para vender produtos, apresentar idéias ou educar pessoas. Existem empresas e profissionais especializados em produzir esse tipo de material. Como você deve ter percebido, as aplicações da CG são variadas e algumas áreas se relacionam diretamente entre si. A escolha da área certa para atuar pode determinar o sucesso ou o fracasso de um profissional. Com esse artigo, pessoas que estão começando a sua jornada profissional na CG, podem escolher de maneira mais fácil a área em que desejam atuar.

214 Aplicações Efeitos especiais Esse ramo da CG tem relação direta com os filmes. Várias produções utilizam a exaustão efeitos especiais para contar uma história. Você já imaginou contar a história de Star Wars, sem efeitos especiais? Tanto a área de filmes como a de efeitos especiais exigem hardware sofisticado e conhecimentos técnicos avançados, dos profissionais envolvidos na produção. Publicidade Utilizar a CG na publicidade ajuda a vender mais produtos, com a utilização de recursos sofisticados. Essa área é bem desenvolvida no nosso país e pode absorver muitos profissionais no futuro. Comunicação corporativa Com acesso facilitado a tecnologia, várias empresas utilizam a CG para realizar treinamentos e comunicados. Material produzido dentro da própria empresa pode ser atualizado de maneira mais fácil e rápida. Educação As aplicações da CG para educação são infinitas, podendo simular praticamente qualquer coisa com o objetivo de instruir e ensinar. O advento de instituições que utilizam ensino a distância, impulsiona esse mercado, já que boa parte do matéria deve ser produzido em meios eletrônicos.

215 Aplicações Jogos O mercado de jogos eletrônicos sempre foi uma grande promessa no nosso país. Os jogos modernos consomem uma enorme quantidade de animações, modelos 3D e ilustrações. Esse é um mercado que tem poucos profissionais especializados e que pode trazer um bom retorno para quem se interessar. Arte A CG também tem aplicações para artistas interessados em desenvolver trabalhos em 3D e ilustração. Existem vários artistas desenvolvendo animações abstratas e simulações que envolvem formas e tempo. Multimídia Essa área é uma mistura de várias das aplicações citadas aqui. A habilidade de misturar textos, sons e imagens em uma interface com o usuário. Esse tipo de aplicação pode ser utilizado para vender produtos, apresentar idéias ou educar pessoas. Existem empresas e profissionais especializados em produzir esse tipo de material.

216 Aplicações da Computação Gráfica
Como você deve ter percebido, as aplicações da Computação Gráfica são variadas e algumas áreas se relacionam diretamente entre si. A escolha da área certa para atuar pode determinar o sucesso ou o fracasso de um profissional. Com esse artigo, pessoas que estão começando a sua jornada profissional na CG, podem escolher de maneira mais fácil a área em que desejam atuar.

217 Aplicações da Computação Gráfica
Fonte: