OpenGL #2: Brincando com Pixels

Transcrição

1 OpenGL #2: Brincando com Pixels Presented by the Case Tradução e adaptação: Túlio C.

2 Continuando Previously on the OpenGL: Algebra Liner, Matemática 3D Submissão de vértics, primitivas, interpolação de cores, e operações com matrizes. Sabemos basicamente tudo. Precisamos praticar pra fixar e aprender melhor.

3 Então, o que vem agora? Melhorar a realidade, colorir melhor Em jogos não se usam simplesmente cores. É chato e não impressiona ninguém. Duas técnicas importantíssimas: Iluminação Texturização

4 Iluminação Em cenas é muito importante Áreas escuras e claras criam a noção de profundidade sem necessidade de visão estéreo. Highlights e reflexos mostram a composição do material, e dão dicas das propriedades e propósitos dos objetos Sem isso, nada parece realista. Falta imersão.

5 Como OpenGL pode ajudar OpenGL implementa Gouraud Shading, uma técnica empírica, simples e barata para modelagem da interação com a luz. approximation of lighting. Só levam a conta a incidência da luz direta de uma fonte. Ou seja, sem reflexão de outros objetos, sem sombras, etc. No entando, é muito rápida e bastante convincente, na maioria das vezes.

6 Componentes da luz Gouraud estima o brilho de uma fonte no objeto calculando três componentes básicas da luz: ambiente, difusa e especular.

7 Ambiente Aplicada em todas as superfícies na cena. Uma luz que existe independente de qualquer coisa. Simula a simples existencia da luz em qualquer lugar. Existe luz suficiente refletindo em diversos lugares para que todos os objetos possam ser vistos no mínimo um pouco. Mesmo que esteja na sombra. Mais ambiente = as coisas são mais visíveis (mais brilho)

8 Difusa Luz refletida por uma superfície em todas as direções. Lei de Lambert Ou seja, as faces voltadas para a luz são mais claras e as voltadas para o outro lado mais escuras. Aparece mais em superfícies foscas como papéis e madeira.

9 Especular Luz que é refletida não uniformimente. (intensidade varia de acordo com a posição do observador) Pode ser visto como a reflexão da luz em um objeto que se move junto com o observador. Vista em superfícies brilhantes como metais e plástico. Espelho é um bom exemplo.

10 Iluminação em OpenGL GL precisa de exatamente três informações para desenhar corretamente: Propriedades da luz Propriedades do material (que forma o objeto) Normais dos vértices Primeiro, precisamos habilitar iluminação: glenable(gl_lighting);

11 Configurando as luzes GL suporta até 8 fontes de luz por vez, representadas no array GL_LIGHTn, com n = [0,7] Cada uma deve ser ativada separadamente por glenable(gl_lightn); Então, definimos a proprietada da luz (de cada uma separadamente): gllightfv(gl_lightn, p_name, p);

12 Definindo propriedades p é um ponteiro para um array de valores com a configuração da fonte p_name Ex.: float values[] = {0.0, 1.0, 0.0, 1.0}; gllightfv(gl_light2,gl_diffuse,values);

13 Configurando a luz Defina as cores para cada componente com p_name = GL_AMBIENT, GL_DIFFUSE, GL_SPECULAR Cada fonte de luz pode emitir luz ambiente, então, normalmente, são todas iguais e com baixa intensidade (0.05, 0.05, 0.05) As componentes difusa e especular devem ter a mesma cor (a não ser que tenhamos um objeto azul com highlight verde)

14 continuando Definimos a posição com p_name=gl_position A matriz de modelview é mutiplicada por esses valores, então ela aplica o valor atual da transformação na posição da luz. O 4º (w) parâmetro: 1.0 luz posicional 0.0 luz direcional

15 Um pouco de código float l_color[4] = {0.0, 0.85, 0.0, 1.0}; float a_color[4] = {0.05, 0.05, 0.05, 1.0}; float l_pos[4] = {0.0, 1.0, 1.0, 1.0}; glenable(gl_lighting); glenable(gl_light0); gllightfv(gl_light0, GL_AMBIENT, a_color); gllightfv(gl_light0, GL_DIFFUSE, l_color); gllightfv(gl_light0, GL_SPECULAR, l_color); gllightfv(gl_light0, GL_POSITION, l_pos);

16 Agora, para o material Para o material é basicamente o mesmo Não existe um conjunto de materiais mas sim um material ativo, usado em todas as superfícies até que seja modificado Modificamos com a função: glmaterialfv(gl_front, p_name, p); Coincidência não?

17 Definindo o material Assim como na luz, temos as componentes: GL_AMBIENT, GL_DIFFUSE, GL_SPECULAR Representa quando de cada componentes mais é afetada pelo objeto Normalmente ambiente e difusa são igual, para facilitar: GL_AMBIENT_AND_DIFFUSE.

18 continuando Especular é normalmente uma escala de cinza representando a brilhosidade da superfície. GL_SHININESS determina o tamanho dos highlights da componente Shininess grande = mais fosco, highlights pequenos Somente um valor, não 4. Compõe a equação de iluminação de Phong junto com os demais componentes.

19 Código, float m_color[4] = {0.0, 0.85, 0.0, 1.0}; float s_color[4] = {0.8, 0.8, 0.8, 1.0}; float shininess[1] = {120.0}; glmaterialfv(gl_front, GL_AMBIENT_AND_DIFFUSE, m_color); glmaterialfv(gl_front, GL_SPECULAR, s_color); glmaterialfv(gl_front, GL_SHININESS, shininess);

20 Vetores Normais A iluminação de um objeto depende se o mesmo está ou não de frente para a luz, OpenGL não adivinha, precisamos fornecer a normal. Como o processamento de vértices é independente, não existe a noção de dentro e fora.

21 Mais normais A informação necessária é o vetor normal da superfícia, que aponta para fora da mesma. Quando utilizar o glbegin(), antes do glvertex() utilizamos a função: glnormal3f(x, y, z);

22 continuando Para calcular a normal de um triângulo é bastance simples, produto vetorial de duas arestas. Garanta que a normal é informada antes do vértice: glbegin(gl_triangles); glnormal3f(nx, ny, nz); glvertex3f(vx, vy, vz); glend();

23 e mais ainda As normais precisam ser normalizadas (x 2 +y 2 +z 2 = 1) assim OpenGL ilumina apropriadamente. Caso contrário, se for complicado normalizar ou você não sabe :P, só usar glenable(gl_normalize);

24 Iluminação (RG) Primeiro, ativar iluminação(importante, por que?) glenable(gl_lighting); Depois, configurar as fontes de luz Por fim, para cada objeto: Definir o material do mesmo Informar os vértices depois de da sua normal

25 O que OpenGL faz? A partir dos dados informados, calcula a influência de cada fonte de luz a partir de um modelo de iluminação em cada vértice, que são somadas. Quando cada vértice tem uma cor, essas são interpoladas para identificar as cores dos pixels internos ao polígono - shading.

26 Hora de trabalhar!

27 O bem e o mal Pros: Iluminamos! Melhora consideravelmente a qualidade da cena e a noção de profundidade. Gouraud shading é rápido e feito todo em hardware, na placa de vídeo. Não existe praticamente overhead nenhum.

28 O bem e o mal Contras Modelo muito empiríco, precisa de muito tunning Só é preciso nos vértices Modelo simplista da luz Sombras, reflexão e um monte de outros efeitos precisam ser implementados pelo programador. No entando, todas essas desvantagens podem ser tapeadas usando um novo truque

29 Lembram? Então, o que vem agora? Melhorar a realidade, colorir melhor Em jogos não se usam simplesmente cores. É chato e não impressiona ninguém. Duas técnicas importantíssimas: Iluminação Texturização

30 Técnica #2: Texturização Aumentamos os detalhes aplicando uma imagem na superfície a ser renderizada. Tecnicamente temos controle de todos os pixels, não só vértices Pode ser usada em qualquer lugar. Tudo, quase tudo na verdade mas mesmo assim muita coisa, que é muito legal em 3D realista é feito uilizando texturas.

31 Então, como usar? Primeiro, (TCHARAN) ativamos textura: glenable(gl_texture_2d); Depois, precisamos carregar as imagens. Infelizmente OpenGL não faz isso sozinho. Terceiro, quando informamos os vértices precisamos informar a OpenGL que parte da imagem é mapeada nesse vértice mapeamento de textura. OpenGL vai alongar ou comprimir a imagem para se adequar corretamente as posições do mapeamento.

32 Carregando imagens OpenGL precisa de imagens de bitmap (não aquelas do paint brush) em memória antes de fazer qualquer coisa. Mas quase nunca temos as imagens em formato bitmap puro, sempre comprimidas com algum algoritmo com jpeg, png, gif, entre outros. Agora f Todos esses formatos populares são comprimidos e OpenGL não os reconhece. É realmente um saco fazer isso

33 Carregando imagens A solução? Open source! Existem diversas APIs livres que têm algoritmos para descompressão de imagens Um legal: DevIL ( Multi-plataforma, como OpenGL Suporta praticamente todo tipo de arquivo Syntax similar a OpenGL Integra bem com OpenGL A função ilutglloadimage(file), faz praticamente tudo que a gente precisa.

34 Objeto Texturizado Agora que já temos a imagem, vamos guarda-la em um texture object, que contém todas as informação que OpenGL necessita. Cada texture object tem um identificador para indentifica-lo, é óbvio. OpenGL implementa esse mecanismo e devemos pedir novos identificadores para novos objetos.

35 Texture objects Geração dos identificadores, nesse caso números: glgentextures(num, ptr); num é a quantidade de identificadores que precisamos ptr é um array the unidades que guardam os identificadores

36 Binding da textura GL trabalha com somente uma textura por vez, usando: glbindtexture(gl_texture_2d, num); num é o identificador da textura GL usa a textura atual para todas as operações que forem requisitadas: modification, drawing, image binding, everything.

37 Image binding glteximage2d(gl_texture_2d, miplevel, internalformat, w, h, border, format, type, texels); miplevel and border = 0 para nós internalformat = GL_RGBA é o usual format é o formato da imagem utilizada. DevIL utiliza os formatos GL_RGB or GL_RGBA type é o tipo de dado que representa o pixel da imagem, normalmente GL_UNSIGNED_BYTE

38 Image binding w e h (width and height) têm que ser potências de 2. Normalmente 128, 256, e 512 são os melhores tamanhos. O melhor é criar a textura com o tamanho correto, todo mundo deve fazer isso. texels é um ponteiro para a possição de memória contendo a imagem. Com o DevIL, basta a gente pedir.

39 Coordenadas de textura Quando informamos o vértice, precisamos informar a coordenada (x,y) da textura para o mesmo, fazendo o mapeamento. Dessa maneira, OpenGL sabe que segmento da textura mapear para cada parte do polígono. gltexcoord2f(s,t);

40 Coordenadas Se usarmos float, coordenadas de textura variam entre [0.0, 1.0]. Ints variamos [0,w] ou [0,h] para s e t respectivamente. Informar antes dos vértices, como as normais: glbegin( ); glnormal3f(nx, ny, nz); // if lighting enabled gltexcoord2f(s, t); // if texturing enabled glvertex3f(x, y, z); // always last glend();

41 Pra ver melhor, 1.0 B A = (0.5, 0.25) B = (0.75, 0.75) C = (0.25, 0.5) t C A s 1.0 Imagine que o triângulo seja mapeado na textura. Então, as coordenadas de textura são onde seriam os cantos.

42 E OpenGL, faz o que? Interpola as coordenadas de textura entre os vértices (exatamente como fez pra cor e iluminação), e então utiliza a informação para fazer a amostragem por pixel.

43 Exemplos!

44 Parâmetros de textura Parâmetros de textura são informações necessárias, por OpenGL, assim ele sabe o que fazer em situações inesperadas. Todas definidas com: gltexparameteri(gl_texture_2d, pname, val);

45 Parâmetros de textura Wrap modes: O que acontece se s ou t são maiores que o possível pname = GL_TEXTURE_WRAP_S or _T val = GL_CLAMP or GL_REPEAT Repeat both Clamp both Clamp s, repeat t

46 Parâmetros de textura Modos de Magnification e minification O que acontece quando um pixel na tela é maior que um texel do mapa da textura. pname = GL_TEXTURE_MAG_FILTER ou _MIN_FILTER val = GL_NEAREST ou GL_LINEAR Interpolação linear entre pixel adjacentes (desfoca um pouco a imagem), o mais perto não (mas a imagem fica quebrada)

47 Removendo texturas Quando terminamos de usar a textura podemos mata-la, chamando: gldeletetextures(number, ptr); Number número de texturas a serem deletadas. Ptr array com os identificadores das texturas a serem deletadas. Muito importante, liberar memória na placa de vídeo

48 Foi tudo pessoal Texturing and lighting are the two biggest components of realistic graphics, and you just learned both in one fell swoop! I would have done blending as well, but the talk ran long. If you re interested, talk to me afterwards.

49 Resources Visit acm.cwru.edu/graphics for links as well as other resources! The third and final talk will be two weeks from now (4/13), same time and place. Ou me mandem um