Transformações Geométricas Computação Gráfica DCC065 Prof. Rodrigo Luis de Souza da Silva, D.Sc.
Sumário Tópicos da aula de hoje: Por que transformações? Classificação das transformações Transformações Translação Escala Rotação Coordenadas Homogêneas Combinando transformações 2
Por que transformações? Imagens de Hearn & Baker, Computer Graphics with OpenGL (2004) Em CG, uma vez tendo um objeto definido, transformações são utilizadas para mover este objeto, mudar seu tamanho (escala) ou rotacioná-lo. 3
Classificação das Transformações Transformações Rígidas São transformações geométricas que preservam a forma, o tamanho e os ângulos dos objetos. Elas são: Rotação Translação Reflexão 4
Classificação das Transformações Transformações Não-Rígidas São transformações geométricas que preservam o paralelismo entre as linhas mas não seus comprimentos e ângulos. Exemplo de transformações Não-Rígidas: Escala Cisalhamento 5
Classificação das Transformações Transformações Lineares Uma função (ou mapeamento ou ainda transformação) F é linear se, para todos os vetores v1 e v2 e todos escalares k: F(V1+V2) = F(V1) + F(V2) F(kV1) = kf(v1) Exemplos de transformações lineares: Escala Reflexão Rotação Cisalhamento 6
Classificação das Transformações Transformações Afins Basicamente as transformações afins são: Transformações Lineares + Translações Desta forma, podemos afirmar que toda transformação linear é também afim, mas o contrário não é verdade Então a função y = mx+b não é linear, mas é afim 7
Classificação - Resumo Rígidas Translação Lineares Rotação Reflexão Escala Cisalhamento Não-Rígidas Afim 8
Translação Move um objeto de uma posição para outra xnew = xold + dx y ynew = yold + dy 6 5 4 3 2 1 0 1 2 3 4 5 6 7 8 9 10 x 9
Exemplo de Translação O que acontecerá ao objeto se aplicarmos uma translação com dx = 5 e dy = 3 y 6 5 4 (2, 3) 3 2 1 (1, 1) 0 (3, 1) 1 2 3 4 5 6 7 8 9 10 x 10
Exemplo de Translação O que acontecerá ao objeto se aplicarmos uma translação com dx = 5 e dy = 3 y 6 5 4 3 2 1 0 1 2 3 4 5 6 7 8 9 10 x 11
Escala Escalas multiplicam todas as coordenadas Atenção: Objetos podem mudar de lugar ao aplicarmos operações de escala xnew = Sx xold ynew = Sy yold y 6 5 4 3 2 1 0 1 2 3 4 5 6 7 8 9 10 x 12
Escala Escalas multiplicam todas as coordenadas Atenção: Objetos podem mudar de lugar ao aplicarmos operações de escala xnew = Sx xold ynew = Sy yold y 6 5 4 3 2 1 0 1 2 3 4 5 6 7 8 9 10 x Como podemos fazer para que objetos não sofram alteração de posição? 13
Exemplo de Escala O que acontecerá ao objeto se aplicarmos uma escala com sx = 2 e sy = 2 y 6 5 4 (2, 3) 3 2 1 (1, 1) 0 (3, 1) 1 2 3 4 5 6 7 8 9 10 14
Exemplo de Escala O que acontecerá ao objeto se aplicarmos uma escala com sx = 2 e sy = 2 y 6 5 4 3 2 1 0 1 2 3 4 5 6 7 8 9 10 15
Rotação Rotaciona todas as coordenadas por um ângulo específico xnew = xold cosθ yold sinθ ynew = xold sinθ + yold cosθ Pontos sempre serão rotacionados em relação a origem y 6 5 4 3 2 1 0 1 2 3 4 5 6 7 8 9 10 x 16
Rotação Atenção! Muitas linguagens (como C e C++) já possuem funções trigonométricas implementadas. Nestas funções, normalmente, o ângulo a ser passado como parâmetro deve estar em radianos e não em graus. Já as funções de rotação em OpenGL utilizam graus. Se necessário, para converter de graus (g) para radianos (r), utilize a seguinte fórmula: 17
Exemplo de Rotação O que acontecerá ao objeto se aplicarmos uma rotação de 30 graus y 6 5 4 (4, 3) 3 2 1 (3, 1) 0 1 2 (5, 1) 3 4 5 6 7 8 9 10 18
Exemplo de Rotação Primeiro, vamos calcular o ângulo em radianos (no exercício g = 30) r = g * PI / 180 = 0,5235 Vamos agora calcular as funções trigonométricas cos(0.5235)=0.866 sin(0.5235)=0.5 Recapitulando a fórmulas xnew = xold cosθ yold sinθ ynew = xold sinθ + yold cosθ 19
Exemplo de Rotação Basta agora calcularmos os novos pontos x (3, 1) = 3*0.866 1*0.5 = 2.598 0.5 = 2.098 y (3, 1) = 3*0.5 + 1*0.866 = 1.5 + 0.866 = 2.366 x (5, 1) = 5*0.866 1*0.5 = 4.33 0.5 = 3.83 y (5, 1) = 5*0.5 + 1*0.866 = 2.5 + 0.866 = 3.366 x (4, 3) = 4*0.866 3*0.5 = 3.46 1.5 = 1.96 y (4, 3) = 4*0.5 + 3*0.866 = 2.0 + 2.598 = 4.598 20
Exemplo de Rotação Resultado y 6 5 (1.96, 4.59) 4 (3.83, 3.36) 3 2 (2.09, 2.36) 1 0 1 2 3 4 5 6 7 8 9 10 21
Representando transformações Podemos representar as transformações através de matrizes Esta forma de representação tem como vantagem básica permitir que em uma única matriz seja representada a combinação de várias transformações. 22
Escala A escala de um ponto por (sx, sy ) pode ser reescrita matricialmente como: 23
Rotação A rotação de um ponto em relação a origem teria a seguinte representação: 24
Translação Defina agora a matriz 2 x 2 que nos possibilite representar operações de translação: 25
Translação Defina agora a matriz 2 x 2 que nos possibilite representar operações de translação: Não é possível representar matrizes 2 x 2 para resolver esse problema. Solução: Coordenadas Homogêneas 26
Por que usar coordenadas homogêneas? As operações de translação, rotação e escala podem ser facilmente executadas com o uso de matrizes. Porém, enquanto as operações de rotação e escala podem ser concatenadas numa única matriz (pela multiplicação prévia de suas respectivas matrizes) as operações de translação ainda têm de ser conduzidas em separado, uma vez que sua aplicação depende de uma soma matricial. 27
Por que usar coordenadas homogêneas? Usando coordenadas homogêneas, representaremos transformações em 2D através de matrizes 3 x 3 e transformações em 3D através de matrizes 4 x 4 Com isso, poderemos concatenar todas as matrizes de transformação numa única matriz global de transformação que será aplicada a todos os pontos da cena 28
Coordenadas Homogêneas (x, y) pode ser reescrito em coordenadas homogêneas como (xh, yh, h) O parâmetro h é um valor diferente de zero tal Um ponto que: Deste modo, o ponto cartesiano (x, y) corresponde à uma infinidade de triplas (hx, hy, h), incluindo o caso particular de (x, y, 1) 29
Escala A escala de um ponto por (sx, sy ) pode ser reescrita matricialmente em coordenadas homogêneas como: 30
Rotação Já a rotação de um ponto em relação a origem teria a seguinte representação: 31
Translação Finalmente a translação de um ponto por (dx, dy) pode ser reescrita matricialmente como: 32
Transformações Inversas Transformações podem ser facilmente revertidas através de operações inversas 33
Combinando Transformações Como já visto, várias transformações podem ser combinadas em uma única matriz para facilitar o processamento Permitido pelo fato de usarmos coordenadas homogêneas Imagine rotacionar um polígono em volta de um ponto que não seja a origem: Translade o centro do polígono para a origem Rotacione normalmente em relação a origem Faça a translação inversa 34
Combinando Transformações (cont ) 2 1 3 4 35
Combinando Transformações (cont ) Exemplo: 2 1 3 4 36
Combinando Transformações (cont ) 2 1 Exemplo: 3 4 37
Combinando Transformações (cont ) 2 1 Exemplo: 3 4 38
Combinando Transformações (cont ) As três transformações seriam combinadas da seguinte forma Lembre-se: Multiplicação de matrizes não é uma operação comutativa, então a ordem IMPORTA! 39
Combinando Transformações (cont ) A ordem de execução é a seguinte: 3º 2º 1º 40
Transformações Geométricas com OpenGL Os principais comandos em OpenGL para realizar as transformações geométricas são as seguintes: gltranslatef(dx, dy, dz); glscalef(sx, sy, sz); glrotatef(ângulo, x, y, z); 41
Resumo das operações Translação xnew = xold + dx ynew = yold + dy Escala xnew = Sx xold ynew = Sy yold Rotação xnew = xold cosθ yold sinθ ynew = xold sinθ + yold cosθ 42
Resumo das operações Translação: Escala: Rotação: 43
Saiba mais! Computer Graphics, C Version Capítulo 5 Neste capítulo você encontrará uma abordagem teórica interessante a respeito de transformações geométricas 2D. 44
Saiba mais! Computação Gráfica - Teoria e Prática. Capítulo 2 Este capítulo trás boas definições a respeito do tema desta aula incluíndo uma seção que trata do assunto em OpenGL. 45
Saiba mais! Mathematics for Computer Graphics Capítulo 7 Uma abordagem mais matemática dos temas abordados nesta aula pode ser encontrada neste capítulo do livro do John Vince. Todas as deduções matemáticas das formulações que utilizamos estão abertas neste capítulo. 46
Saiba mais! OpenGL Programming Guide Seventh Edition Capítulo 3 e Apêndice C O Capítulo 3 trata dos comandos de transformação em OpenGL e o Apêndice C desta referência trata das coordenadas homogêneas e um breve resumo sobre matrizes de transformação. 47
Exercícios 1 Baseado no código fonte 06_quad_transform.cpp, faça uma versão deste exemplo na qual as transformações sejam realizadas da seguinte forma: Translação será realizada com as setas direcionais do teclado. Escala será realizada com as teclas + e -. Rotação será realizada com as teclas r (rotaciona no sentido horário) e R (rotaciona no sentido anti-horário). Dica: Veja como funcionam os métodos de interação no código 04_mouseKeyboard.cpp 48
Exercícios 2 Modifique agora o código fonte 06_quad_transform.cpp original, permitindo que os passos entre as transformações possam ser visualizados. Por exemplo, no código original, se o objeto é transladado da posição (0.0, 0.0) para a posição (20, 20), o objeto simplesmente desaparece da posição inicial e aparece na posição final. Nesta nova versão, está movimentação implícita entre a posição inicial e a posição final poderá ser vista, com um número adequado de passos. Dica: Veja como utilizar a função idle no código 05_triangle_anim.cpp 49
Exercícios 3 Existe um famoso screensaver no qual figuras geométricas têm seus vértices transladados, invertendo o sentido do movimento em cada eixo ao tocar nas extremidades da tela. A ideia deste exercício é replicar este screensaver. Para desenvolvê-lo, siga as seguintes instruções: A imagem conterá dois (ou mais) triângulos como na figura abaixo. Utilize uma resolução de imagem conveniente. Pesquise métodos do OpenGL / GLUT para representar a janela maximizada. Para transladar os vértices, utilize uma velocidade compatível com sua máquina de teste. 50