Viewing 2D - 0.5cmSCC0250 - Computação Gráficapaulovic/aulas/CG/slides_novos/SCC0250... · Viewing 2D Introdução Sumário 1 Introdução 2 AJaneladeRecorte 3 NormalizaçãoeTransformaçõesdeViewport

Viewing 2D

Viewing 2D

SCC0250 - Computação Gráfica

Prof. Fernando V. Paulovichhttp://www.icmc.usp.br/~paulovic

[email protected]

Instituto de Ciências Matemáticas e de Computação (ICMC)Universidade de São Paulo (USP)

15 de abril de 2015

1 / 72

http://www.icmc.usp.br/~paulovic

Viewing 2DIntrodução

Sumário

1 Introdução

2 A Janela de Recorte

3 Normalização e Transformações de Viewport

4 Programação OpenGLMúltiplas ViewportsMantendo Razão de Aspecto

5 Algoritmos de RecorteRecorte de Ponto 2DRecorte de Linha 2DRecorte de Polígonos 2DRecorte de Outras Primitivas 2D

2 / 72


Sumário

1 Introdução





3 / 72


Introdução

Viewing Pipeline 2D

Processo para criar a visão 2D de uma cena, determinando quaispartes serão mostradas e suas localizações na tela

A imagem é determinada no sistema de coordenadas do mundo(world coordinates) cujas partes especificadas (selecionadas) sãomapeadas para o sistema de coordenadas do dispositivo (devicecoordinates)

Esse mapeamento envolve uma série de translações, rotações eescalasAssim como operações para eliminar as partes da imagem que estãofora da área de visão

4 / 72


Introdução

Janela de Recorte ou Clipping Window

Uma seção de uma cena 2D que é selecionada para ser mostradaTudo o que estiver fora dessa seção será “cortado fora”

Viewport

A Janela de Recorte pode ser posicionada dentro de uma janela dosistema usando outra “janela” chamada de Viewport

Objetos dentro da Janela de Recorte (o que será visto) sãomapeados para a Viewport, que por sua vez é posicionada dentro dajanela do sistema (onde serão vistos)Múltiplas Viewports podem ser usadas para mostra diferentes seçõesda imagem em diferentes posições

5 / 72


Introdução

6 / 72


Introdução

Transformação 2D da Visão

Mapeamento de uma descrição da cena no sistema de coordenadasdo mundo para o sistema de coordenadas do dispositivo

Para acelerar o processo de recorte, sistemas gráficos convertem adescrição dos objetos para coordenadas normalizadas (entre 0 e 1ou entre −1 e 1)

7 / 72

Viewing 2DA Janela de Recorte

Sumário

1 Introdução





8 / 72


A Janela de Recorte

Embora seja possível criar Janelas de Recorte de qualquer formato,a maioria as APIs gráficas somente suporta janelas retangularesalinhadas aos eixos x e y devido o custo computacional

Normalmente a Janela de Recorte é especificadas no sistema decoordenadas do mundo

9 / 72


Sistema de Coordenadas de Visão da Janela de Recorte

Normalmente, a transformação de visão é definida em um sistema decoordenadas de visão dentro do sistema de coordenadas de mundo

Isso permite especificar uma Janela de Recorte retangular emqualquer posiçãoUma visão das coordenadas do mundo é obtida transferindo a cenapara as coordenadas de visão

10 / 72



Escolhe-se uma origem P0 = (x0, y0) no sistema de coordenadas devisão e uma orientação usando um vetor V que dá a direção yview

V é chamado de view-up vector 2D

Outra abordagem é definir um ângulo de rotação relativa a x ou y ea partir desse obter o view-up vector

11 / 72



Uma vez estabelecido o sistema de coordenadas de visão, é possíveltransformar a descrição dos objetos em uma cena usando translaçõese rotações para sobrepor os diferentes sistemas de coordenadas

Translado a origem P0 para a origem do sistema de coordenadas demundoRotaciono o sistema de visão para alinhá-lo com o sistema decoordenadas de mundo

Essa conversão, entre coordenadas do mundo em coordenadas devisão é dada por

MWC,V C = R ·T

12 / 72



13 / 72

Viewing 2DNormalização e Transformações de Viewport

Sumário

1 Introdução





14 / 72


Normalização e Transformações de Viewport

Em alguns sistemas, a normalização e a transformaçãowindow-viewport são combinadas em uma única operação

Nesse caso as coordenadas da viewport são definidas entre 0 e 1Após o recorte, o quadrado unitário contendo a viewport é mapeadopara o dispositivo de saída

Em outros sistemas a normalização e as rotinas de recorte sãoaplicadas antes das transformações de viewport

Nesse caso as coordenadas do viewport são as coordenadas da tela

15 / 72


Mapeando a Janela de Recorte em uma ViewportNormalizada

Considerando uma viewport com as coordenadas entre 0 e 1, temosque mapear a descrição dos objetos para esse espaço normalizadousando transformações que mantenham a posição relativa de umponto como foi definida na Janela de Recorte

O ponto (xw, yw) é mapeado para (xv, yv)

16 / 72



Para transformar um ponto no sistema de coordenadas do mundopara um ponto na viewport, temos que fazer

xv − xvmin

xvmax − xvmin=

xw − xwmin

xwmax − xwmin

yv − yvmin

yvmax − yvmin=

yw − ywmin

ywmax − ywmin

Resolvendo para o posição (xv, yv) na viewport temosxv = Sx · xw + tx

yv = Sy · yw + ty

17 / 72



Onde os fatores de escala são

sx =xvmax − xvmin

xwmax − xwmin

sy =yvmax − yvmin

ywmax − ywmin

E os fatores de translação são

tx =xwmax · xvmin − xwmin · xvmax

xwmax − xwmin

ty =ywmax · yvmin − ywmin · yvmax

ywmax − ywmin

18 / 72



Como simplesmente mapeamos o sistema de coordenadas de mundopara uma viewport, é possível obter o mesmo resultado usando umasequencia de transformações

Converter o retângulo da Janela de Recorte no retângulo da viewport

Isso pode ser obtido fazendo1 Escala a Janela de Recorte para ter o tamanho da viewport usando o

ponto fixo (xwmin, ywmin)2 Translada (xwmin, ywmin) para (xvmin, yvmin)

19 / 72



Onde a matriz de escala é

S =

sx 0 xwmin(1− sx)0 sy ywmin(1− sy)0 0 1

E a matriz de translação é

T =

1 0 xvmin − xwmin

0 1 yvmin − ywmin

0 0 1

20 / 72



Sendo a matriz composta

Mwindow,normviewport = T · S

Igual a

Mwindow,normviewport =

sx 0 tx0 sy ty0 0 1

Com sx, sy, tx e ty dados anteriormente

21 / 72



Nesse mapeamento, as posições relativas dos objetos são mantidasUm objeto dentro da Janela de Recorte estará dentro da viewport

As proporções relativas dos objetos só serão mantidas se a razão deaspecto da viewport for igual a da Janela de Recorte

Em outras palavras sx tem de ser igual a sy

22 / 72


Mapeando a Janela de Recorte em um QuadradoNormalizado

Uma outra abordagem para a transformação de visão é transformara Janela de Recorte em um quadrado normalizado, fazer o recorteem coordenadas normalizadas e então transferir a descrição da cenapara a viewport especificada no sistema de coordenadas da tela

Nessa representação, (parte dos) objetos fora dos limites x = ±1 ey = ±1 são facilmente detectados e removidos da cena

23 / 72



Para se mapear o conteúdo da Janela de Recorte para o quadradonormalizado procedemos similarmente a transformaçãowindow-viewport fazendo xvmin = yvmin = −1 exvmax = yvmax = +1

Mwindow,normsquare =

2xwmax−xwmin

0 −xwmax+xwmin

xwmax−xwmin

0 2ywmax−ywmin

− ywmax+ywmin

ywmax−ywmin

0 0 1

24 / 72



Similarmente, após os algoritmos de recorte serem aplicados, aquadrado normalizado de tamanho 2 é transformado na viewportfazendo xwmin = ywmin = −1 e xwmax = ywmax = −1

Mnormsquare,viewport =

xvmax−xvmin

2 0 xvmax+xvmin

2

0 yvmax−yvmin

2yvmax+yvmin

20 0 1

25 / 72



O último passo consiste em posicionar a área da viewport na janelada tela

26 / 72

Viewing 2DProgramação OpenGL

Sumário

1 Introdução





27 / 72


Modo de Projeção OpenGL

Antes de definir a Janela de Recorte e a viewport, é necessário criaruma matriz para fazer o mapeamento (matriz de projeção)

1 public class Example04 implements GLEventListener {2 private final Matrix4 projectionMatrix;3 ...45 public Example04() {6 ...7 projectionMatrix = new Matrix4();8 }9 }

Não esqueça que as transformações são cumulativas, então quandonecessário carregar a matriz identidade

1 projectionMatrix.loadIdentity();

28 / 72


Definindo a Janela de Recorte

A Janela de Recorte é definida por de uma função criada

1 public class Matrix4 {2 ...3 public void ortho2D(float xwmin, float xwmax, float ywmin, float ywmax) {4 float[] ortho = new float[16];5 ortho[0] = 2.0f / (xwmax - xwmin);6 ortho[5] = 2.0f / (ywmax - ywmin);7 ortho[10] = 1.0f;8 ortho[12] = -(xwmax + xwmin) / (xwmax - xwmin);9 ortho[13] = -(ywmax + ywmin) / (ywmax - ywmin);

10 ortho[15] = 1.0f;11 multiply(ortho);12 }13 }

Isso mapeia a janela de recorte para a janelaxwmin = yw = min = −1 e xwmax = ywmax = +1

O processo de recorte ocorre em um quadrado normalizado entre −1e 1

29 / 72


Definindo a Janela de Recorte

A Janela de Recorte é definida usando função criada

1 public class Example04 implements GLEventListener {23 @Override4 public void init(GLAutoDrawable drawable) {5 ...67 //cria a projecao 2D8 projectionMatrix.loadIdentity();9 projectionMatrix.ortho2D(

10 -0.501f, 0.501f,11 -0.501f, 0.501f);12 projectionMatrix.bind();13 }14 }

30 / 72


Definindo a Viewport

A viewport é definida e posicionada por

1 glViewport(GLint xvmin, Glint yvmin, GLsizei vpWidth, GLsizei vpHeight);

Todos os parâmetros são dados no sistema de coordenadas da tela,relativas a janela de visão

(xvmin, yvmin): canto inferior esquerdovpWidth e vpHeight: largura e altura da viewport

31 / 72


Múltiplas Viewports

Sumário

1 Introdução





32 / 72



Exemplo

1 public class Example04 implements GLEventListener {23 @Override4 public void init(GLAutoDrawable drawable) {5 // Get pipeline6 GL3 gl = drawable.getGL().getGL3();78 gl.glClearColor(0, 0, 0, 0);9

10 //inicializa os shaders11 shader.init(gl);1213 //ativa os shaders14 shader.bind();1516 //inicializa a matrix Model and Projection17 modelMatrix.init(gl, shader.getUniformLocation("u_modelMatrix"));18 projectionMatrix.init(gl, shader.getUniformLocation("u_projectionMatrix"));1920 //cria o objeto a ser desenhado21 triangle.init(gl, shader);2223 //cria a projecao 2D24 projectionMatrix.loadIdentity();25 projectionMatrix.ortho2D(26 -0.501f, 0.501f,27 -0.501f, 0.501f);28 projectionMatrix.bind();29 }30 ...31 }

33 / 72



Codificando

1 public class Example04 implements GLEventListener {23 @Override4 public void display(GLAutoDrawable drawable) {5 // Recupera o pipeline6 GL3 gl = drawable.getGL().getGL3();78 // Limpa o frame buffer com a cor definida9 gl.glClear(GL3.GL_COLOR_BUFFER_BIT);

1011 modelMatrix.loadIdentity();12 modelMatrix.bind();1314 gl.glViewport(0, 0, 600, 575);15 triangle.bind();16 triangle.draw(GL3.GL_LINE_LOOP);1718 gl.glViewport(0, 475, 100, 100);19 triangle.bind();20 triangle.draw(GL3.GL_LINE_LOOP);2122 // Força execução das operações declaradas23 gl.glFlush();24 }25 ...26 }

34 / 72


Mantendo Razão de Aspecto

Sumário

1 Introdução





35 / 72




1 public class Example05 implements GLEventListener {23 @Override4 public void init(GLAutoDrawable drawable) {5 // Get pipeline6 GL3 gl = drawable.getGL().getGL3();78 gl.glClearColor(0, 0, 0, 0);9

10 //inicializa os shaders11 shader.init(gl);1213 //ativa os shaders14 shader.bind();1516 //inicializa a matrix Model and Projection17 modelMatrix.init(gl, shader.getUniformLocation("u_modelMatrix"));18 projectionMatrix.init(gl, shader.getUniformLocation("u_projectionMatrix"));1920 //cria o objeto a ser desenhado21 triangle.init(gl, shader);22 }23 ...24 }

36 / 72




1 public class Example05 implements GLEventListener {2 @Override3 public void reshape(GLAutoDrawable drawable, int x, int y, int width, int ←↩

height) {4 // Evita a divisão por zero5 if (height == 0) {6 height = 1;7 }89 // Inicializa o sistema de coordenadas

10 projectionMatrix.loadIdentity();1112 // Estabelece a janela de recorte13 if (width <= height) {14 projectionMatrix.ortho2D(15 -1.0f, 1.0f,16 (-1.0f * height) / width, (1.0f * height) / width);17 } else {18 projectionMatrix.ortho2D(19 (-1.0f * width) / height, (1.0f * width) / height,20 -1.0f, 1.0f);21 }2223 projectionMatrix.bind();24 }25 ...26 }

37 / 72

Viewing 2DAlgoritmos de Recorte

Sumário

1 Introdução





38 / 72


Algoritmos de Recorte

Algoritmo de Recorte

No Viewing Pipeline serve para extrair uma porção designada deuma cena para ser apresentada em um dispositivo de saída

Identifica as partes de uma imagem que estão fora da Janela deRecorte, eliminando essas da descrição da cena que é passada para odispositivo de saídaPor eficiência, o recorte é aplicado sobre Janelas de Recortenormalizadas

Isso reduz cálculos porque todas as matrizes de transformação degeometria e visão podem ser concatenadas para serem aplicadas auma cena antes do recorte acontecer

39 / 72



Existem diversos algoritmos para o recorte dePontosLinhas (segmentos de linhas retos)Áreas-preenchidas (polígonos)CurvasTexto

Os três primeiros são componentes padrão dos pacotes gráficosMaior rapidez de processamento se as fronteiras dos objetos foremsegmentos de reta

40 / 72



Na discussão que se segue a região de recorte será uma janelaretangular na posição padrão, com arestas de fronteira em xwmin,xwmax, ywmin e ywmax

Tipicamente correspondendo ao quadrado normalizado entre 0 e 1ou −1 e 1

41 / 72


Recorte de Ponto 2D

Sumário

1 Introdução





42 / 72


Recorte de Ponto 2D

Recorte de Ponto 2D

Dado um ponto P(x, y), esse será apresentado no dispositivo desaída se e somente se

xwmin ≤ x ≤ xwmax

ywmin ≤ y ≤ ywmax

Esse processo é especialmente útil para cortes em sistemas departículas, como nuvens, fumaça, explosões, etc.

43 / 72


Recorte de Linha 2D

Sumário

1 Introdução





44 / 72


Recorte de Linha 2D

Recorte de Linha 2D

Algoritmo de Recorte

Processa cada linha em uma cena por meio de uma série de testes ecálculos de intersecção para determinar se uma linha ou parte delaprecisa ser desenhada

A tarefa mais cara computacionalmente do recorte é calcular asintersecções das linhas com a Janela de Recorte

Portanto, o objetivo é minimizar o cálculo de intersecções

45 / 72


Recorte de Linha 2D

Recorte de Linha 2D

É fácil determinar se uma linha está completamente dentro da janela,mas é mais difícil determinar se essa está completamente fora

Quando os dois pontos limitantes de uma linha estão dentro dajanela (linha P1P2), a linha está completamente dentroQuando os dois pontos limitantes estão fora de qualquer uma dasquatro fronteiras (linha P3P4), a linha está completamente foraSe ambos testes falham, o segmento de linha intersecta ao menosuma das fronteiras da janela, e pode ou não cruzar o interior damesma

46 / 72


Recorte de Linha 2D

Recorte de Linha 2D

Partindo da definição paramétrica de um segmento de reta, com(x0, y0) e (xend, yend) temos que

x = x0 + u(xend − x0)

y = y0 + u(yend − y0)

0 ≤ u ≤ 1

Podemos determinar a posição de interseção da reta com cadafronteira da janela substituindo o valor da coordenada da fronteirapara x ou y e resolvendo para u

Se 0 > u > 1, então não há cruzamentoCaso contrário, parte da reta está dentro da fronteira, e podemosprocessar essa parte contra as outras fronteiras até determinar se areta será eliminada ou encontrar a seção que está dentro da janela

47 / 72


Recorte de Linha 2D

Recorte de Linha 2D

Essa abordagem apesar de simples, não é muito eficienteÉ possível reformular o teste inicial e os cálculos de interseções parareduzir o tempo de processamento

48 / 72


Recorte de Linha 2D

Recorte de Linha de Cohen-Sutherland

Algoritmo de Recorte de Cohen-Sutherland

Um dos primeiros algoritmos para acelerar o processo de recorteO tempo de recorte é reduzido executando mais testes antes doscálculos das intersecções

Inicialmente a cada ponto final das linhas é assinalado um valorbinário de 4 dígitos, o código da região

49 / 72


Recorte de Linha 2D


Os valores binários indicam se o ponto está fora de uma fronteira0 (false): dentro ou sobre a fronteira1 (true): fora da fronteira

50 / 72


Recorte de Linha 2D


A 4 fronteiras juntas criam nove regiões de separação do espaço

Um ponto abaixo e a esquerda a janela de recorte recebe valor 0101,um ponto dentro 0000

51 / 72


Recorte de Linha 2D


Os valores dos bits são determinados comparando suas coordenadas(x, y) com as fronteiras de recorte

O bit 1 é definido como 1 se x < xwmin

Os outros são obtidos de forma similar

É possível executar esse teste de forma mais eficiente usandooperações binárias seguindo dois passos

1 Calcular a diferença entre as coordenadas dos pontos e as fronteirasda janela

2 Usar o sinal resultante para definir o valor do código (− vira 1, +vira 0)

bit 1 é o sinal de x− xwmin

bit 2 é o sinal de xwmax − xbit 3 é o sinal de y − ywmin

bit 4 é o sinal de ywmax − y

52 / 72


Recorte de Linha 2D


Com base nesses códigos é possível determinar rapidamente se umalinha está completamente fora ou dentro da janela

Linhas completamente dentro tem seus pontos definidos como 0000Linhas que tenham 1 nas mesmas posições dos pontos finais estácompletamente fora da janela de recorte

Uma linha com pontos finais identificados por 1001 e 0101 estácompletamente a esquerda da janela de recorte

53 / 72


Recorte de Linha 2D


Esses testes podem ser executados eficientemente usando operaçõeslógicas

1 Quando a operação ou entre dois pontos for falsa (0000) a linha estádentro

2 Quando a operação e entre dois pontos for verdadeira (não 0000) alinha está completamente fora

54 / 72


Recorte de Linha 2D


As linhas que não podem ser identificadas como completamente foraou dentro da janela de recorte são então processadas para verificarintersecções

55 / 72


Recorte de Linha 2D


Conforme cada intersecção com as fronteiras da janela de recortesão calculadas, a linha é recortada até restar apenas o que estádentro da janela, ou nenhuma parte esteja dentro da mesma

Para determinar se uma linha cruza alguma fronteira, é somentenecessário verificar os bits correspondentes da fronteira dos pontosfinais

Se um dos bits for 1 e outro 0, a linha cruza a fronteira

56 / 72


Recorte de Linha 2D


Processando a fronteira esquerda

P1 = 0100→ está dentro da fronteira esquerdaP2 = 1001→ está fora da fronteira esquerda

Calcula a intersecção P′2 e recorta a seção P2P′

2

As outras fronteiras seguem o mesmo princípio

57 / 72


Recorte de Linha 2D


Para se determinar as intersecções da reta definida pelos pontos(x0, y0) e (xend, yend) podemos usar a equação explicita

y = y0 +m(x− x0)

O valor de x será xwmin ou xwmax e a inclinação serám = (yend − y0)/(xend − x0)

Os valores de x da intersecção podem ser calculados usando

x = x0 +y − y0m

O valor de y será ywmin ou ywmax

58 / 72


Recorte de Polígonos 2D

Sumário

1 Introdução





59 / 72




Para fazer o corte de polígonos, os algoritmo de recorte de linhasnão podem ser aplicados porque em geral esses não produziriampolígonos fechados

Produziriam linhas desconexas sem informação de como uni-las paraformar o polígono recortado

60 / 72




É possível processar o polígono contra as fronteiras da janela derecorte de forma semelhante ao algoritmo de recorte de linhas

Isso é feito determinando o novo formato do polígono cada vez queuma fronteira de recorte é processada

61 / 72




É possível verificar se um polígono está completamente dentro oufora da janela de recorte verificando suas coordenadas máximas emínimasQuando uma área não puder ser identificada como completamentedentro ou fora, as intersecções são calculadas

62 / 72




Uma forma simples de realizar o recorte de polígonos convexos écriar uma nova lista de vértices a cada recorte realizado contra umafronteira, e então passar essa lista para o próximo recorte, contraoutra fronteiraPara polígonos côncavos o processo é mais complexo podendoresultar em múltiplas listas de vértices

63 / 72



Recorte de Polígonos de Sutherland-Hodgman

Algoritmo de Sutherland-Hodgman

Uma forma eficiente de realizar esse recorte é mandar os vértices dospolígonos para cada estágio de recorte de forma que os vérticesrecortados possa ser passado imediatamente para o próximo estágio

Elimina a necessidade de uma lista de novos vértices para cadaestágio de recortePermite implementação paralela do recorte

64 / 72




A estratégia deste algoritmo é mandar os pares de pontos finais decada linha sucessiva do polígono para uma série de recortadores(esquerda, direita, inferior e superior)

Conforme o recorte é executado para um par de vértices, ascoordenadas recortadas são enviadas para o próximo recortador

Existem 4 diferentes casos que precisam ser considerados quandouma aresta do polígono é processada

1 O primeiro ponto final da aresta está fora da janela de recorte e osegundo dentro

2 Ambos pontos finais estão dentro da janela de recorte3 O primeiro ponto final da aresta está dentro da janela de recorte e o

segundo fora4 Ambos pontos finais estão fora da janela de recorte

65 / 72




Para facilitar a passagem dos vértices de um recortador para outro, asaída de cada recortador pode ser da seguinte forma

66 / 72




Conforme cada par de vértices sucessivos é passado para um dosrecortadores, a saída é gerada para o próximo recortador de acordocom os seguintes testes

1 Se o primeiro vértice está fora da janela e o segundo dentro, émandado para o próximo recortador a intersecção obtida e o segundovértice

2 Se ambos vértices estão dentro, somente o segundo vértice é enviado3 Se o primeiro vértice está dentro da janela e o segundo fora, é

mandado para o próximo recortador somente a intersecção4 Se ambos vértices estão fora, nada é enviado

67 / 72




68 / 72




Limitação

Para polígonos côncavos, problemas podem ocorrer já que essealgoritmo apenas define como saída uma única lista de vértices

Uma solução seria dividir o polígono côncavo em partes convexas

69 / 72


Recorte de Outras Primitivas 2D

Sumário

1 Introdução





70 / 72



Recorte de Curvas

Áreas curvas podem ser recortadas usando abordagens parecidascom as apresentadas

Se as curvas forem aproximações poligonais, então o recorte é omesmo apresentado anteriormenteCaso contrário o procedimento de recorte irá envolver equaçõesnão-lineares

71 / 72



Recorte de Texto

Existem diversas formar para se fazer o recorte de texto, a escolhadependendo do pacote gráfico utilizado e como as letras são geradas

72 / 72

Documents

Viewing 2D - 0.5cmSCC0250 - Computação Gráficapaulovic/aulas/CG/slides_novos/SCC0250... · Viewing 2D Introdução Sumário 1 Introdução 2 AJaneladeRecorte 3 NormalizaçãoeTransformaçõesdeViewport