Computação Gráfica MO603/MC930

Apresentação em tema: "Computação Gráfica MO603/MC930"— Transcrição da apresentação:

1 Computação Gráfica MO603/MC930 http://www.ic.unicamp.br/~lmarcos/mc603

2 Iluminação, Sombras, Shading e Textura Iluminação Sombreamento Remoção de faces ocultas Textura

3 Shading Dada uma equação para calcular a radiância da superfície, ainda é necessário aplicá-la ao modelo real –shading é geralmente executado durante a rasterização (conversão para raster) –basicamente, preenchimento de regiões –há modelos eficientes para fazer isso (Gouraud, Phong shading)

4 Gouraud Shading Ajusta cor de preenchimento de um pixel a outro –Calcule iluminação para cada vértice da malha –Interpole linearmente as cores dos vértices para conseguir cor ao longo de cada aresta. –Interpole cores das arestas para conseguir cor de cada pixel, ao longo de cada linha de span Muito mais rápido do que calcular iluminação para cada pixel Um grande truque. Pronuncia-se Gurou’

5 Gouraud Shading Especificar um valor de shading diferente para cada vértice de polígono (polígonos adjacentes com o mesmo valor) Interpolar na hora de fazer o rendering Pode também ser usado para obscurecer regiões distantes do observador, fazendo a cena parecer mais real

6 Gouraud Shading Calcule ou defina cores em cada vértice –Se tiver normal nos vértices, usaria modelo de iluminação de Phong para calcular a cor –Ou pode ter cores pré definidas de algum modo (manualmente) Interpola linearmente cores nos vértices para obter cores nas arestas –Determinar cores C ymin e C ymax –dC = (C ymin -C ymax )/(y min -y max ) –Caminhando em passos unitários de y min até y max : C ymin+1 = C ymin + dC Resta interpolar cores nas arestas para obter cores ao longo de cada linha:

7 Rasterizando Calcular o gradiente de sombreamento ao longo da linha: –Gradient = (Bs - As) / (Bx - Ax) –As,Bs = valor de sombreamento em A, B e Ax,Bx = valor da coordenada em X de A,B Calcular o valor exato de sombreamento em C: –Cs = As + (1-frac(Ax))*Gradient Calcular o valor de cada pixel e pintar tela: Shade = Cs loop X from Cx to Dx plot pixel at (X,Y) with colour Shade Shade = Shade + Gradient End of X loop

8 Ambiguidade Apenas acontece para quadriláteros e outros Quando um quadrado rotaciona numa tela, as linhas escaneiam-o de modo diferente Isto é, interpolação me X conecta a dois pontos diferentes de interpolação em Y. Cor no ponto muda... Melhor usar triângulos (ou coordenadas baricêntricas) C C C is blue C is red

9 Estilos de Shading mais comuns Faceted shading (flat): sem interpolação –Cor constante ao longo de cada polígono –menos caro Gouraud shading (sombreado): interpola cores –calcula ou define o shading para cada vértice –interpola linearmente ao longo do polígono –custo: 3 adições de inteiros por pixel Phong shading (sombreado): interpola normais –calcula normais aos vértices –Interpola linearmente normais ao longo de cada polígono –usa normal interpolada para calcular o shading de cada pixel (caro?) –custo: dezenas ou centenas de operações em ponto flutuante por pixel Mapeamento de textura: interpola coordenadas de textura –usa estas coordenadas para definir textura em cada pixel

10 Shading Stytes Faceted Gouraud Phong

11 Comparação entre estilos de shading Gouraud e Phong são exemplos de shading suave –um truque para visualizar uma malha poligonal de forma suave Tenha em mente: não é fisicamente correto! –Por que? –1. O quanto a cor deve variar num plano com iluminação disusa? –2. Interpolação de normal não faz sentido para um polígono! Mas isso funciona bem na prática

12 Gouraud e Phong Quais as vantagens de Phong sobre Gouraud? –Iluminação forte especular fica muito melhor Lembre-se: Modelo de shading de Phong não é o mesmo que modelo de iluminação de Phong! –Modelo de iluminação de Phong diz como calcular a radiância, dada uma normal e uma fonte de luz –Shading de Phong é um truque par ainterpolar normais no espaço-imagem OpenGL faz Gouraud shading (ou flat shading)

13 Comentários Definir vetores normais para todos vértices: glutSolidSphere() faz isso. Criar, posicionar e habilitar uma (ou mais) fontes de luz: glLightfv(), glEnable(), glLight*() Ex: GLfloat light_position[] = { 1.0, 1.0, 1.0, 0.0 }; glLightfv(GL_LIGHT0, GL_POSITION, light_position); default: GL_POSITION é (0, 0, 1, 0), eixo-Z negativo Selecionar um modelo de iluminação: glLightModel*() Definir propriedades materiais para os objetos na cena

14 Lembre-se Voce pode usar valores defaults para alguns parâmetros, de iluminação; outros devem ser modificados Não se esqueça de habilitar todas as luzes que pretende usar e também habilitar o cálculo de iluminação Voce pode usar “display lists” para maximizar eficiência quando é necessário mudar as condições de iluminação

15 Usando textura Mapeamento de textura melhora tudo: –calcula radiância baseado numa imagem (paramétrica) Ainda melhor: uso de “procedural shaders” para especificar funções gerais para a radiância –gera radiância on-line, durante o “shading” –Pixar Renderman: usado em Toy Story, Bug´s Life, etc

16 Mapeando texturas (paramétrica) Superfícies coloridas ou sombreadas uniformemente ainda são irreais Objetos reais possuem superfícies com textura (features) Opção: ter uma grande quantidade de polígonos com características de cor e reflectância; ou Usar imagens de textura para produzir superfícies reais –pegar texturas da natureza (nuvens, madeira, terra); –pintá-las manualmente; –mapear a imagem na superfície usando uma função paramétrica que mapeia pontos (u,v) em coordenadas de imagem (x,y) –quando visualizando um ponto, olhar no píxel correspondente na imagem de textura e usar isto para afetar a cor final

17

18 Especificando função de textura Parametrização 2D: –alguns objetos têm parametrização natural –esferas: usam coordenadas esféricas –cilindro:usar coordenadas cilíndricas –superfícies paramétricas (B-splines, Bézier): (u,v) Parametrização menos óbvia: –polígonos precisam de correspondência entre triângulos –superfícies implícitas: difícil de parametrizar (use textura sólida) Parametrização 3D (textura sólida): –crie um mapa 3D de textura: volume parametrizado por (u,v,w) –crie texturas sólidas de imagens, projetando-a em profundidades diferentes (efeito do projetor de slides).

19 Para cada triângulo no modelo, estabeleça uma região correspondente na foto-textura Durante rasterização, interpole os índices das coordenadas no mapa de texturas

20 Uso de mapeamento de textura Você pode afetar uma série de parâmetros como: –cor da superfície: cor (radiância) de cada ponto na superfície –reflectância: coeficientes de reflectância (k d, k s, n shiny ) –vetor normal: usando um “bump mapping” –geometria: mapa de deslocamentos –transparência: mapa de transparência –radiância considerando fonte de luz: mapeamento ambiente (ka)

21 Bump mapping: um truque Quais objetos são convexos e quais são côncavos? Resposta: nenhum, estas imagens são todas planas. Sistema visual humano está acostumado com a iluminação de cima para baixo Em CG, pode-se perturbar o vetor normal sem ter que fazer nenhuma mudança real na forma (apenas usando um mapa de texturas).

22 Bump Mapping x_gradient = pixel(x-1, y) - pixel(x+1, y) y_gradient = pixel(x, y-1) - pixel(x, y+1)

23 Perturbando a normal

24 Bump mapping Mapeamento básico de textura pinta numa superfície suave Tornando a superfície rugosa: –Opção 1: modelar a superfície com muitos polígonos pequenos –Opção 2: perturbar o vetor normal antes de calcular sombreamento Esfera com mapa de texturas difuso Bump map Esfera com mapa de texturas difuso + bump map

25 Bump mapping Esfera com mapa de texturas difuso Bump map Esfera com mapa de texturas difuso + bump map Mapeamento básico de textura pinta numa superfície suave Tornando a superfície rugosa: –Opção 1: modelar a superfície com muitos polígonos pequenos –Opção 2: perturbar o vetor normal antes de calcular sombreamento A superfície não muda realmente, sombreamento faz parecer mudada bump map causa deslocamentos acima e abaixo da superfície pode-se usar mapas de textura para dizer a quantidade de perturbação que tipo de anomalia pode ser produzida?

26 Exemplo de “Bump mapping” Cilindro c/ mapa de texturas difuso Cilindro c/ mapa de texturas difuso + bump map

27 Radiância x reflectância Textura especifica a radiância (isotrópica) para cada ponto na superfície Textura especifica a cor (difusa, coeficiente k d ) para cada ponto na superfície: 3 coef, um para cada canal de radiância (R, G, B).

28 Mapa de deslocamentos Uso do mapa de texturas para deslocar cada ponto na superfície –valor de textura diz quanto mover na direção normal à superfície Qual a diferença do “bump mapping”?

29 Mapa de textura sólida Um array 3D de valores de textura (algo como um bloco de mármore) –usa uma função (x,y,z)->(R,G,B) para mapear cores em pontos do espaço Na prática, o mapa é definido de forma procedimental (funcional) –não precisa armazenar array de cores 3D –definir uma função para gerar cor para cada ponto 3D As texturas sólidas mais interessantes são as aleatórias Avalia coordenadas de textura em coordenadas de objeto - caso contrário movendo o objeto, muda a textura

30 Mapa ambiente (ou de reflexão) Coloque sua cena dentro de um cubo Pinte imagens nas faces internas do cubo para criar uma imagem de fundo que envolva o objeto (nuvens, montanhas, uma sala, etc...). Use o cubo para iluminar a cena dentro dele Durante o cálculo de sombreamento: –jogue um raio vindo do observador para fora do objeto num ponto P –Intercepte o raio com o mapa do ambiente (o cubo) num ponto E –tome a cor do mapa do ambiente em E e ilumine P como se houvesse uma luz virtual na posição E –obtém-se uma imagem do ambiente refletida em superfícies brilhantes Modelo alternativo ao ray-tracing real.

31 Mais truques: mapeamento de luz Um efeito “quake” pode usar um mapa de luz em adição a um mapa de texturas (radiância). Mapas de textura são usados para adicionar detalhes a superfícies. Mapas de luz são usados para armazenar iluminação pré-calculadas. Os dois são multiplicados juntos, em tempo de execução, e colocados num “cache” para maior eficiência.

32 Texturas em OpenGL Construa sua imagem de textura –Dimensões da imagem devem ser 2 n por 2 m –Este código assume imagens coloridas usando RGB Pic *in; Gluint texname; in = tiff_read(filename,NULL); glGenTexture(1,&texname); glBindTexture(GL_TEXTURE_2D,texname); glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_WRAP_S,GL_REPEAT); glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_WRAP_T,GL_REPEAT); glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_NEAREST); glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_NEAREST); glTexImage2D(GL_TEXTURE,0,GL_RGB,in->nx,in->ny,0,GL_RGB, GL_UNSIGNED_BYTE,in->pix);

33 Texturas em OpenGL Colocando em modo textura 2D: –glEnable(GL_TEXTURE_2D); –glTexEnvf(GL_TEXTURE_ENV,GL_TEXTURE_ENVMODE, – GL_MODULATE); –gl_BindTexture(GL_TEXTURE_2D,texname); Para cada vértice: –glTexCoor2f(vert.s,vert.t); Retira modo textura após terminar de desenhar: –glDisable(GL_TEXTURE_2D);

34 Passos para mapeamento de textura Criar um objeto com textura e especificar uma textura para o objeto. Indicar como a textura deve ser aplicada a cada pixel Habilitar mapeamento de textura Desenhar a cena, suprindo ambos textura e coordenadas geométricas

35 Exemplo: tabuleiro #include /* Create checkerboard texture */ #define checkImageWidth 64 #define checkImageHeight 64 static GLubyte checkImage[checkImageHeight][checkImageWidth][4]; static GLuint texName;

36 Cria textura para o tabuleiro void makeCheckImage(void) { int i, j, c; for (i = 0; i < checkImageHeight; i++) { for (j = 0; j < checkImageWidth; j++) { c = ((((i&0x8)==0)^((j&0x8))==0))*255; checkImage[i][j][0] = (GLubyte) c; checkImage[i][j][1] = (GLubyte) c; checkImage[i][j][2] = (GLubyte) c; checkImage[i][j][3] = (GLubyte) 255; }

37 Inicializa parâmetros de textura void init(void) { glClearColor (0.0, 0.0, 0.0, 0.0); glShadeModel(GL_FLAT); glEnable(GL_DEPTH_TEST); makeCheckImage(); glPixelStorei(GL_UNPACK_ALIGNMENT, 1); glGenTextures(1, &texName); glBindTexture(GL_TEXTURE_2D, texName); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST); glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, checkImageWidth, checkImageHeight, 0, GL_RGBA, GL_UNSIGNED_BYTE, checkImage); }

38 Mostra o tabuleiro void display(void) { glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); glEnable(GL_TEXTURE_2D); glTexEnvf(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_DECAL); glBindTexture(GL_TEXTURE_2D, texName); glBegin(GL_QUADS); glTexCoord2f(0.0, 0.0); glVertex3f(-2.0, -1.0, 0.0); glTexCoord2f(0.0, 1.0); glVertex3f(-2.0, 1.0, 0.0); glTexCoord2f(1.0, 1.0); glVertex3f(0.0, 1.0, 0.0); glTexCoord2f(1.0, 0.0); glVertex3f(0.0, -1.0, 0.0); glTexCoord2f(0.0, 0.0); glVertex3f(1.0, -1.0, 0.0); glTexCoord2f(0.0, 1.0); glVertex3f(1.0, 1.0, 0.0); glTexCoord2f(1.0, 1.0); glVertex3f(2.41421, 1.0, -1.41421); glTexCoord2f(1.0, 0.0); glVertex3f(2.41421, -1.0, -1.41421); glEnd(); glFlush(); glDisable(GL_TEXTURE_2D); }

39 Muda a forma caso necessário void reshape(int w, int h) { glViewport(0, 0, (GLsizei) w, (GLsizei) h); glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluPerspective(60.0, (GLfloat) w/(GLfloat) h, 1.0, 30.0); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); glTranslatef(0.0, 0.0, -3.6); }

40 Trata evento de teclado void keyboard (unsigned char key, int x, int y) { switch (key) { case 27: exit(0); break; default: break; }

41 Rotina principal int main(int argc, char** argv) { glutInit(&argc, argv); glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB | GLUT_DEPTH); glutInitWindowSize(250, 250); glutInitWindowPosition(100, 100); glutCreateWindow(argv[0]); init(); glutDisplayFunc(display); glutReshapeFunc(reshape); glutKeyboardFunc(keyboard); glutMainLoop(); return 0; }

42 Resultado

43 Entendendo melhor Rotina makeCheckImage() gera a textura do tabuleiro; init() inicializa mapemento de textura: –glGenTextures() e glBindTexture() nomeia e cria um objeto texturado para a imagem de textura. –glTexImage2D() especifica o mapa de textura em resolução completa tamanho da imagem, tipo de imagem, localização e outras propriedades –4 chamadas a glTexParameter*() especificam como a textura será embrulhada e como como as cores serão filtradas se não ocorrer um casamento exato entre pixels na textura e pixels na tela

44 Entendendo melhor Em display(): –glEnable() habilita uso de textura. –glTexEnv*() coloca o modo de desenho em GL_DECAL (polígonos são desenhados usando cores do mapa de textura, ao invés de considerar qual a cor que os polígonos deveriam ser desenhados sem a textura). –Dois polígonos são desenhados (note que as coordenadas de textura são especificadas com as coordenadas de vértices). –glTexCoord*() é similar a glNormal() (determina normais). –glTexCoord*() acerta as coordenadas de textura correntes; qualquer vértice sibsequente terá aquelas coordenadas de textura associadas com ele até que glTexCoord*() seja chamada novamente.

45 Uma rosquinha

46 Uma rosquinha com textura

47 Programa exemplo (esfera) #include

48 Programa exemplo (esfera) void init(void) { GLfloat mat_specular[] = { 1.0, 1.0, 1.0, 1.0 }; GLfloat mat_shininess[] = { 50.0 }; GLfloat light_position[] = { 1.0, 1.0, 1.0, 0.0 }; glClearColor (0.0, 0.0, 0.0, 0.0); glShadeModel (GL_SMOOTH); glMaterialfv(GL_FRONT, GL_SPECULAR, mat_specular); glMaterialfv(GL_FRONT, GL_SHININESS, mat_shininess); glLightfv(GL_LIGHT0, GL_POSITION, light_position); glEnable(GL_LIGHTING); glEnable(GL_LIGHT0); glEnable(GL_DEPTH_TEST); }

49 Programa exemplo (esfera) void display(void) { glClear (GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); glutSolidSphere (1.0, 20, 16); glFlush (); }

50 Programa exemplo (esfera) void reshape (int w, int h) { glViewport (0, 0, (GLsizei) w, (GLsizei) h); glMatrixMode (GL_PROJECTION); glLoadIdentity(); if (w <= h) glOrtho (-1.5, 1.5, -1.5*(GLfloat)h/(GLfloat)w, 1.5*(GLfloat)h/(GLfloat)w, -10.0, 10.0); else glOrtho (-1.5*(GLfloat)w/(GLfloat)h, 1.5*(GLfloat)w/(GLfloat)h, -1.5, 1.5, -10.0, 10.0); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); }

51 Programa exemplo (esfera) int main(int argc, char** argv) { glutInit(&argc, argv); glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB | GLUT_DEPTH); glutInitWindowSize (500, 500); glutInitWindowPosition (100, 100); glutCreateWindow (argv[0]); init (); glutDisplayFunc(display); glutReshapeFunc(reshape); glutMainLoop(); return 0; }

52 Resultado