computação gráfica i - mat.ufc.bresdras/ck090_2007/notasdeaula/capitulo03.pdf · uma plaqueta...

Computação Gráfica IComputação Gráfica I

CRAb – Grupo de Computação Gráfica

Departamento de ComputaçãoUFC

Objetivos

• Estudar – equipamentos, técnicas de programação e conceitos matemáticos

• Para

2

• Para– representação, manipulação e projeção de objetos bi- e tridimensionais– aplicar a problemas específicos

Sumário do Curso

• Sistemas Gráficos e Modelos• Programação Gráfica• Input e Interação• Objetos Geométricos e Transformações

3

• Objetos Geométricos e Transformações• Visualização• Pintura• Técnicas Discretas• Implementação de um Renderizador

3. Input e Interação3. Input e Interação

3.1 Interação

• Era da computação gráfica interativa– Paradigma• Usuário vê imagem na tela• Reage à imagem através de um dispositivo de interação

5

interação• A imagem muda em resposta ao input

– OpenGL não dá suporte a interação • Razões de portabilidade• Utilizar um toolkit como o GLUT

3.2 Dispositivos de Entrada (A9)

• 3.2.0 Introdução– Dispositivos físicos• Teclado• Mouse

6

• Space ball• Light pen•…

– Dispositivos lógicos• Propriedades são especificadas por funcionalidade para o programa de aplicação


3.2.1 Dispositivos físicos– Dois tipos principais• Pointing devices (Apontadores)• Keyboard devices (Teclados)

7

– Apontadores• Permite ao usuário indicar uma posição na

tela• Têm um ou mais botões para enviar sinais ao

computador


– Keaboard• Geralmente é o teclado físico• Pode ser generalizado para qualquer

dispositivo que retorne códigos de caracteres ao programa

8

ao programa


– Mouse e Trackball• Semelhantes em uso e em construção• Mecânico– Codificadores dentro do dispositivo– Codificadores giram quando a bola se move

9

– Codificadores giram quando a bola se move– Movimento da bola é convertido em sinais – Sinais enviados ao computador por pares de

codificadores– Codificadores medem movimentos em duas direções

ortogonais


– Mouse e Trackball• Detectores Ópticos– Medem distância percorrida, contando linhas em

uma plaqueta especial (pad)

• Dois valores retornados podem ser vistos

10

• Dois valores retornados podem ser vistos como duas posições independentes– Convertidos em uma posição 2D em » Coordenadas do mundo ou» Coordenadas da tela

– Conversão é feita » Pelo sistema gráfico ou» Pelo programa de aplicação


– Mouse e Trackball• Dois valores retornados podem ser vistos

também como duas velocidades independentes– Computador integra esses valores para obter

11

– Computador integra esses valores para obter posições

– Mudanças lentas �� pequenas distâncias– Mudanças rápidas �� grandes distâncias

∫

∫

vx

vy

x

y


– Mouse e Trackball

• São dispositivos de posicionamento relativo

– Se a bola não girar, a coordenada não muda

12

– Posição absoluta da bola (ou do mouse) não é

utilizada

– Não são adequados para traçados de diagramas


– Tablets• Fornecem posicionamento absoluto• Matriz de linhas e colunas de fios é embutida sob a superfícies do tablet • Posição da caneta é detectada pela interação

13

• Posição da caneta é detectada pela interação de sinais eletromagnéticos percorrendo os fios do tablet com os sensores da caneta


– Telas sensíveis ao toque

• Funcionamento parecido com o tablet

– Touchpads

14

• podem ser configurados como

– Posicionador absoluto ou

– Posicionador relativo


– Lightpen• Contem um sensor luminoso (Célula fotoelétrica)• Quando a luz emitida pelo fósforo excede um limiar, – Sensor detecta a luz

15

– Sensor detecta a luz– Caneta emite sinal ao computador– Como o ciclo de retraçarmento do Frame buffer inicia em um tempo determinado, t0 , calcula-se ∆∆∆∆t=ts-to e pode-se determinar a posição na tela.

• Dispositivo de posicionamento direto• Dificuldade de obter posição de regiões escuras


– Joystick

• Movimentos em 2 direções ortogonais são codificados (potenciômetro + capacitor)

16

codificados (potenciômetro + capacitor)


3.2.2 Dispositivos lógicos– Dispositivos de entrada classificados pela

ótica do programa aplicativo

– Duas características comportamentais dos

17

– Duas características comportamentais dos

dispositivos de entrada

• A medida que o dispositivo retorna ao

programa

• O tempo em que o dispositivo retorna a medida


– Classes de dispositivos lógicos (PHIGS e GKS)• String• Locator• Pick

18

• Pick• Choice• Dial• Stroke

– OpenGL não adota essa classificação


– String• Fornece ASCII strings ao programa aplicativo• Implementado pelo– Teclado físico ou– Teclado virtual

19

– Teclado virtual


– Locator• Fornece posição em coordenadas do mundo ao programa de aplicação

• Implementado por dispositivos apontadores como

20

como– Mouse

– Trackball

• No OpenGL conversão de coordenadas do dispositivo para coordenadas do mundo é feita pelo programa aplicativo


– Pick• Retorna o identificador de um objeto ao programa aplicativo

• Implementado pelos mesmos dispositivos físicos que implementam locator

21

físicos que implementam locator– Mouse

– Trackball

• Interface de software é diferente da do locator

• No OpenGL pode-se usar um processo chamado selection para o picking


– Choice• Permite que o usuário selecione uma dentre um número discreto de opções

• No OpenGL podem ser usadas widgets fornecidas pelo sistema de janelas

22

fornecidas pelo sistema de janelas– Widgets são dispositivos de interface gráfica

– Menus

– Scrollbars

– Botões gráficos

– Teclas de funções


– Dial ou valuators• Provê entrada analógica ao programa aplicativo– Usar widgets– Slidebars– Limitados: controle de volume em rádio

23

– Limitados: controle de volume em rádio


– Stroke• Retorna um array de posições• Pressionar um botão do mouse– Inicia transferência de posições ao array

• Liberar o botão do mouse

24

• Liberar o botão do mouse– Encerra a transferência


3.2.3 Medida e disparo– Entidades que descrevem a maneira como

um dispositivo de entrada (físico ou lógico) fornece input para o programa aplicativo

25

aplicativo– Medida• O que o dispositivo retorna ao programa

– Disparo• É um input físico no dispositivo com o qual o

usuário pode enviar sinal ao computador


– Exemplos:• Teclado– Medida: string– Disparo: Tecla de “return” ou “Enter”

• Locator

26

• Locator– Medida: posição– Disparo: Botão do mouse ou da trackball

– Medida pode incluir informação de status• Ajuda a identificar quando houve um disparo

indevido


3.2.4 Modos de entrada– Pode-se obter a medida em 3 modos– Cada modo é definido pela relação entre• Processo de medida e

27

• Processo de medida e• Disparo

– Inicialização de um dispositivo de entrada• Inicia o processo de medida• Pode necessitar uma chamada explícita a uma função da API• Medidas são colocadas em um buffer


– Request Mode (Solicitação)• Medida só retorna ao programa após um disparo

28

Request

Medida

DisparoProcesso de

disparoPrograma

Processo de

medida


– Request Mode• Exemplo 1: comando scanf

– Programa pára nesse comando

– Usuário pressiona as teclas, escrevendo a string

29

– Pode demorar o tempo que quiser

– Os caracteres são colocados em um keyboard buffer

– Conteúdo do buffer retorna ao programa após a tecla

“return” ou “enter” é pressionada


– Request Mode• Exemplo 2: Locator

– Mover o dispositivo apontador para a posição

desejada

30

– Disparar pressionando um botão do dispositivo

– Posição retorna ao programa aplicativo


– Sample Mode (amostragem)• Medida retorna imediatamente após a chamada da função• Não necessita disparo • Usuário deve posicionar o dispositivo apontador

31

• Usuário deve posicionar o dispositivo apontador antes da chamada da função

Sample

Medida

ProgramaProcesso

de medida


– Request Mode e Sample Mode em APIs• Usuário deve identificar qual o dispositivo que fornece o input• Interfaces do tipo– request_locator(device_id, &measure);– sample_locator(device_id, &measure);

32

– sample_locator(device_id, &measure);» device_id identifica o dispositivo» measure guarda a medida do dispositivo

• Esses modos são úteis em situações em que o programa guia o usuário• Não são adequados para simuladores de vôo– Vários dispositivos de entrada podem ser usados pelo piloto em um dado instante sem ordem predefinida


– Event Mode (Evento)Possibilidade 1• Cada vez que um dispositivo é disparado um evento é gerado• A medida e o identificador do dispositivo que

33

• A medida e o identificador do dispositivo que gerou o evento são colocados na fila de evento• Programa examina evento na frente da fila– Se a fila estiver vazia, espera por um evento– Se houver um evento, programa decide o que fazer

MedidaDisparo

Processo de disparo Programa

Processo de medida

Fila de Evento

Evento

Espera


– Event Mode (Evento)Possibilidade 2

• Cada vez que um dispositivo é disparado um

evento é gerado

34

• Cada tipo de evento é associado a uma função

chamada callback

– Fução é chamada quando seu evento ocorre

3.3 Cliente-Servidor (A9)

• Computação gráfica deve funcionar em– Ambiente de computação distribuída e redes• Servidores executam tarefas para Clientes

35

• Cliente e servidores podem estar– Distribuídos em uma rede ou– Contidos na mesma unidade computacional

• Exemplos– Servidores de impressão– Servidores de arquivos– Servidores gráficos


Servidorde impressão Estação Estação Laptop

36

iMac

ServidorGráfico

Servidorde arquivos


– Servidor Gráfico• Estação de trabalho com – monitor raster– Keyboard– Dispositivo apontador (mouse, trackball, etc.)

37

– Dispositivo apontador (mouse, trackball, etc.)– …

– Programa OpenGL é um cliente que usa o servidor gráfico

3.4 Display Lists (A9)

3.4.0 Introdução– Idéia herdada

do “display processor” dos anos 1960

Host Display Processor

Display File

38

dos anos 1960• Programa processado no host• Lista compilada de instruções enviada ao DPU• Lista armazenada como display file (display

list) na display memory• Host liberado• Display processor executa, repetidamente, a

display list


– Hoje• O antigo display processor tornou-se um

servidor gráfico

• O programa do usuário tornou-se um cliente• O gargalo é a quantidade de dados que

39

• O gargalo é a quantidade de dados que trafega entre o cliente e o servidor gráfico

– Modos de enviar uma entidade gráfica do

cliente para o servidor gráfico• Immediate mode• Retained mode


– Immediate mode• Envia a descrição completa dos objetos– Vertices

– Atributos

– Tipos de primitivas

40

– Tipos de primitivas

– Transformações de visualização

• Envia assim que o programa executa um comando que define a primitiva

• Primitiva deve ser enviada toda vez que a tela for limpa ou quando a entidade mudar de posição


– Retained mode• Define o objeto uma vez

• Põe objeto em uma display list– Há um overhead para isso

• Armazena a display list no servidor

41

• Armazena a display list no servidor– Servidor precisa de memória para isso

• Cliente envia uma chamada ao servidor solicitando que a display list seja desenhada– Diminui o tráfego na rede

– Cliente tira vantagem de hardware gráfico especializado disponível no servidor


3.4.1 Definição e execução de display lists – Análise de um exemplo em OpenGL#define BOX 1 /* qualquer inteiro não utilizado */glNewList(BOX, GL_COMPILE);

42

glNewList(BOX, GL_COMPILE);glBegin(GL_POLYGON);

glColor3f(1.0, 0.0, 0.0);glVertex2f(-1.0, -1.0);glVertex2f( 1.0, -1.0);glVertex2f( 1.0, 1.0);glVertex2f(-1.0, 1.0);

glEnd();glEndList();

ComentárioBOX: Identificador único

da display listGL_COMPILE: indica que o

sistema deve enviar alista ao servidor mas não deve mostrar o conteúdo

GL_COMPILE_AND_EXECUTE


– Quando quiser desenhar a box (caixa) chame a funçãoglCallList(BOX); – Exemplo

ComentárioCuidado com mudanças de estado causadas pela display list

43

glMatrixMode(GL_PROJECTION);for (i=1; i < 5; i++){

glLoadIdentity();gluOrtho2D(-2.0*i, 2.0*i, -2.0*i, 2.0*i);glCallList(BOX);

}

listPor exemplo: dentro da display list BOX, a cor é alterada para vermelho


3.4.2 Texto e display lists– Ponha cada letra e símbolo do fonte

(raster ou stroke) em uma display list

– Armazene os fontes no servidor usando

44

– Armazene os fontes no servidor usando

as display lists

– Exemplo de como criar seu próprio fonte

com 256 caracteres

• Usar a função OurFont()


base = glGenLists(256);for (i=0; i < 256; i++){

glNewList(base+i, GL_COMPILE);OurFont(i);

45

OurFont(i);glEndList();

}…

ComentárioglGenLists(number): retorna o primeiro inteiro de uma seqüência de números inteiros consecutivos não utilizados como label.


void OurFont(char c){ switch(c)

{case ‘a’:…

ComentárioCada case deve conter os comando OpenGL para desenhar a letra

46

…break;case ‘A’:…break;…

}}

OpenGL para desenhar a letra correspondente.


– Desenhar letra O dentro de um quadrado unitáriocase ‘O’:

glTranslatef(0.5, 0.5, 0.0); glBegin(GL_QUAD_STRIP);

47

glBegin(GL_QUAD_STRIP);for(i=0; i<=12; i++){ angle = 3.14/6.0 * I;

glVertex2f(0.4*cos(angle), 0.4*sin(angle));glVertex2f(0.5*cos(angle), 0.5*sin(angle));

}glEnd();glTranslatef(0.5, -0.5, 0.0);

break;


– Como escrever as letras do font armazenado• Recuperar o identificador base das display lists do font

glListBase(base);

48

glListBase(base);

• Desenhar a string

char *text_string;

glCallLists((Glint) strlen(text_string), GL_BYTE,

text_string);


• 3.4.3 Fonts na GLUT– Alguns fonts • Raster e• Stroke

49

– Não fazem uso de display lists– Acesso a um caracter ou a um conjunto de carecteres uniformemente espaçadosglutStrokeCharacter(GLUT_STROKE_MONO_ROMAN,

int character)


– ExemploglPushMatrix();

glTranslatef(150.0, 190.0, 0.0);glScalef(0.38, 0.4, 1.0);glutStrokeCharacter(GLUT_STROKE_MONO_ROMAN, 'C');glutStrokeCharacter(GLUT_STROKE_MONO_ROMAN, 'r');

50

glutStrokeCharacter(GLUT_STROKE_MONO_ROMAN, 'r');glutStrokeCharacter(GLUT_STROKE_MONO_ROMAN, 'e');glutStrokeCharacter(GLUT_STROKE_MONO_ROMAN, 't');glutStrokeCharacter(GLUT_STROKE_MONO_ROMAN, 'o');

glPopMatrix();


– Acesso a caracteres rasterglutBitmapCharacter( GLUT_BITMAP_8_BY_13,

int character);• São copiados diretamente no frame buffer• Não são afetados por transformações

51

• Não são afetados por transformações geométricas• Usa a variável de estado “raster position”• Cada vez que o comando é executado OpenGL move “raster position” um caracter para a direita


– ExemploglRasterPos2(rx, ry);glutBitmapCharacter(GLUT_BITMAP_8_BY_13, 'C');glutBitmapCharacter(GLUT_BITMAP_8_BY_13, 'r');glutBitmapCharacter(GLUT_BITMAP_8_BY_13, 'e');

52

glutBitmapCharacter(GLUT_BITMAP_8_BY_13, 'e');glutBitmapCharacter(GLUT_BITMAP_8_BY_13, 't');glutBitmapCharacter(GLUT_BITMAP_8_BY_13, 'o');

3.5 Programando Input Dirigido a Eventos (A10)

3.5.1 Usando o dispositivo apontador– Dois tipos de eventos• move event: mouse movido com um botão pressionado– medida (posição do mouse) enviada ao programa

53

– medida (posição do mouse) enviada ao programa

• mouse event: botão pressionado ou liberado– medida retornada inclui» botão que gerou o evento» estado do botão após o evento (up ou down)» Posição do cursor que acompanha o mouse, em coordenadas de tela


– Usar função GLUTglutMouseFunc(mouse)

– Função Callback void mouse (int button, int state, int x, int y){

54

{if (button == GLUT_LEFT_BUTTON &&

state == GLUT_DOWN) exit();}

Código Fonte

Código Exec


– Desenhando quadrados em uma janela

Código Fonte

Código Exec

55

3.5 Programando Input Dirigido a Eventos

3.5.2 Eventos de janelas– Redimensionamento da janela • reshape event

– Se a janela mudar de dimensões

56

– Se a janela mudar de dimensões• Desenhar objetos que estavam na janela?– Precisa de uma função display

• O que fazer se o aspect ratio mudar?– Para evitar distorção corrigir a viewport

• Os atributos e tamanhos dos objetos devem ser mudados?– Depende da aplicação

Código Fonte

Código Exec


3.5.3 Eventos de teclado– Ocorrem quando o • mouse está dentro de uma janela e • uma tecla é pressionada

57


3.5.3 Eventos de teclado– Função GLUT

glutKeyboardFunc(keyboard);• Medidas

Código Fonte

Código Exec

58

– Código ASCII tha tecla pressionada– Posição do mouse

– Função callbackvoid keyboard(unsigned char key, int x, int y){

if (key == ‘q’ || key == ‘Q’) exit(0);}


3.5.4 Os Callbacks Display e Idle– Usar glutDisplayFunc(display);• Quando GLUT determina que a window deve

ser redesenhada– Janela aberta pela primeira vez

59

– Janela aberta pela primeira vez– Janela muda de posição– Nova cena em uma animação

– Usar glutPostRedisplay();• Função display vai ser executada no máximo

uma vez cada vez que o programa entrar no main loop


– Idle Callback é chamado quando não acontecer nenhum evento

60


3.5.5 Gerenciamento de janelas– GLUT suporta• Múltiplas janelas• Subjanela de uma dada janela

61

– Exemplo de uma janela do primeiro nível• Id = glutCreateWindow(“Second window”);

Código Fonte

Código Exec

3.6 Menus (A11)

• Utilizar widgets de window toolkits – Rapidez de desenvolvimento– Estética da interface gráfica

• GLUT oferece pop-up menus

62

• Passos para definição de um menu– Definir as entradas– Associar o menu a um determinado botão do mouse– Definir uma função callback associada a cada entrada do menu

3.6 Menus (A11)

// Defining the callback functionsglutDisplayFunc(display);

// Creating a pop-up menuglutCreateMenu(demo_menu);

63

glutCreateMenu(demo_menu);glutAddMenuEntry("quit",1);glutAddMenuEntry("increase square size",2);glutAddMenuEntry("decrease square size",3);glutAttachMenu(GLUT_RIGHT_BUTTON);

// Entering the main event loopglutMainLoop();

3.6 Menus (A11)

void demo_menu(int id){if (id == 1) exit(0);else if (id == 2) size = size*2;else if (id == 3) size = size/2;

64

else if (id == 3) size = size/2;glutPostRedisplay();

}

Código Fonte

Código Exec

3.7 Picking (A11)

• Operação lógica de entrada – Permite identificar um objeto desenhado

• Três modos

65

Verificar qual o objeto que intercepta o

quadrado em torno do cursor

Verificar qual o objeto cujo retângulo limite

contém a posição do cursor

Consulta a cor do pixel e uma tabela

de cor ×××× objeto

3.7 Picking (A11)

• Picking com retângulo limite (bounding box)– Definir um ponto de picking na tela– Obter as coordenadas do mundo desse ponto

66

ponto– Determinar qual o retângulo limite que contém o ponto– Retornar o identificador do objeto associado àquele retângulo limite

• Útil para selecionar itens de menu

• Picking com back buffer– Imagem renderizada no back buffer não é exibida– Desenhar objetos com as cores de picking

3.7 Picking (A11)

67

– Desenhar objetos com as cores de picking – Obter posição com o mouse callback– Usar glReadPixels() para obter cor do pixel apontado pelo mouse– Procurar na tabela objetos ×××× cores o identificador do objeto cuja cor é igual à do pixel selecionado

3.7 Picking (A11)

3.7.1 Modo de picking e de seleção– Como identificar primitivas cujas

projeções estão próximas a um ponto selecionado na tela

68

– OpenGL provê um modo de renderização chamado selection mode• Objetos não são renderizados no buffer de

cores (frame buffer)• GLint glRenderMode(GLenum mode);

3.7 Picking (A11)

– GLint glRenderMode(GLenum mode);• mode: GL_RENDER (default) • mode: GL_SELECT• mode: GL_FEEDBACK

– Modo GL_SELECT

69

– Modo GL_SELECT• Antes de chamar glRenderMode(GL_SELECT);• Chamar glSelectBuffer(GLsizei size, GLuint

*buffer)– Especifica o array de seleção buffer[size]

• Valor de retorno de glRenderMode usado para indicar o número de hits (número de objetos selecionados)

3.7 Picking (A11)

– Entrar modo de seleção– Renderizar a cena– Cada primitiva renderizada dentro do

volume de clipping gera uma mensagem (hit)

70

(hit)– Cada hit é armazenado em um buffer

(name stack)• Funções relacionadas ao name stack– Inicialização – Pushing informação na pilha– Poping informação da pilha– Manipulação dos dados no topo da pilha

3.7 Picking (A11)

– Informações geradas na name stackchamada de hit list

– hit list é examinada após a renderização• Para obter informação de picking

71

3.7 Picking (A11)

– Funções utilizadas• void glSelectBuffer(GLsizei n, GLunint *buff)– Define buff[size] para armazenar dados

selecionados

• void glInitNames()

72

• void glInitNames()– Inicializa a pilha de nomes (name stack)

• void glPushName(GLunint name)– Push name na pilha de nomes

• void glPopName()– Pop o name do topo da pilha de nomes

• void glLoadName(GLuint name)– Troca o nome do topo da pilha de nomes por name

3.7 Picking (A11)

– Observações• Cada objeto a ser identificado é um conjunto

de primitivas ao qual atribui-se um identificador (name)

• Antes de renderizar o objeto, coloca-se seu identificador na pilha de nomes

73

identificador na pilha de nomes• Não se pode carregar um identificador em

uma pilha vazia– glInitNames();– glPushName(0); // 0 é um nome não utilizado

• Geralmente usa-se o mouse callback para – entrar no modo de seleção– Sair do modo de seleção antes do fim do callback

3.7 Picking (A11)

– ... Observações• Quando retorna-se ao modo GL_RENDER– glRenderMode(GL_RENDER) retorna o número de

hits processados• Dentro do mouse callback– Muda-se o volume de clipping para se obter hits na

74

– Muda-se o volume de clipping para se obter hits na região desejada (próxima à posição do mouse)

– Usar gluPickMatrix(x, y, w, h, *vp)» (x, y): posição do cursor em coordenadas da

OpenGL window (origem no canto inferior esquerdo)

» w x h: retângulo de picking centrado em (x, y)» vp: vp[0] = vp_xmin, vp[1] = vp_xmax,

vp[2] = vp_ymin, vp[3] = vp_ymax

3.7 Picking (A11)

– Objetos que são renderizados dentro do

75

3.7 Picking (A11)

– Objetos que são renderizados dentro do

Código Fonte

Código Exec

76

3.8 Um Programa Simples de Pintura (A11)

• Ilustra o uso de– Callbacks– Display lists– Projeto de um programa interativo

• Características

Código Fonte

Código Exec

77

• Características– Trabalhar com objetos geométricos–Manipular pixels– Oferecer atributos de controle– Incluir menus– Permitir mover e redimensionar janela

3.8 Um Programa Simples de Pintura (A11)

• Esse programa tem uma área de menu que é parte do canvas.– Coordenadas do

78

– Coordenadas do mouse são testadas para identificar qual o menu selecionado

• Botão direito do mouse ativa pull-down menu “quit” ou “clear”

3.9 Animando Programas Interativos (A12)

• Rotacionar um quadrado com single buffer

• Modificar o programa para double buffering

79

buffering• Analisar outros tipos de buffers


3.9.1 O quadrado giratório– Função display: • limpa frame buffer e • Desenha quadrado

(cos θθθθ, sin θθθθ)

(-cos θθθθ, -sin θθθθ)(sin θθθθ, -cos θθθθ)

(-sin θθθθ, cos θθθθ)

80

– vértices no círculo trigonométrico

– Usar a função idle que incrementa o ângulo θθθθ

– Usar a função mouse que chama a função idle com um click no botão esquerdo

(-cos θθθθ, -sin θθθθ)

Código Fonte Código Exec


– Função displayvoid display(){

glClear(GL_COLOR_BUFFER_BIT);glBegin(GL_POLYGON);

thetar = theta/((2*3.14)/360.);

81

thetar = theta/((2*3.14)/360.);glVertex2f( cos(thetar), sin(thetar));glVertex2f( -sin(thetar), cos (thetar));glVertex2f( -cos(thetar), -sin(thetar));glVertex2f( sin(thetar), -cos(thetar));

glEnd();}


– Função idlevoid idle(){

theta+= 2;if(theta >= 360.) theta -= 360;

82

if(theta >= 360.) theta -= 360;glutPostRedisplay();

}– Chamada pela glutIdleFunc(idle);


– Função mousevoid mouse(int button, int state, int x, int y){

if(button==GLUT_LEFT&&state==GLUT_DOWN)glutIdleFunc(idle);

83

glutIdleFunc(idle);if(button==GLUT_MIDDLE_BUTTON&&state==GLUT_DOWN)glutIdleFunc(NULL);

}– Chamada pela glutMouseFunc(mouse);


3.9.2 Double Buffering– Usa dois frame buffers para desenhar e

mostrar a cena • Front buffer é mostrado

84

• Back buffer é usado para desenhar a próxima seqüência

– Trocar os dois buffers usando o comando glutSwapBuffers();• Gera um display callback

Código Fonte Código Exec

3.10 Projeto de Programas Interativos (A12)

• Características de um bom programa interativo– Imagem sem cintilação ou artefatos– Variedade de dispositivos de interação – Variedade de métodos para entrada e saída

85

– Variedade de métodos para entrada e saída de informações– Interface com o usuário intuitiva– Feedback para o usuário– Tolerância aos erros do usuário– Projeto que leve em conta ergonomia


• Área de pesquisa responsável por isso– IHC (Interação Humano-Computador)– HCI (Human-Computer Interaction)

86


• 3.10.1 Toolkits, Widgets e o Frame Buffer– Toolkits• GTK+/gtkmm (http://www.gtkmm.org/)

87

• Trolltech Qt (http://www.trolltech.com/)• FOX Toolkit (http://www.fox-toolkit.com) • FLTK (http://www.fltk.org/)• wxWindows (http://www.wxwindows.org/ )• Tcl/Tk (http://www.tcl.tk/software/tcltk/)


3.10.1 Toolkits, Widgets e o Frame Buffer• Widgets do wxWindows

88


3.10.1 Toolkits, Widgets e o Frame Buffer• Frame Buffer – Como menus e outros objetos podem

aparecer sobre o canvas sem danificar o conteúdo

89

conteúdo• Pop-up menus• Rubberbanding

– Duas soluções• Bit-block-transfer (bitblt)• XOR operation

3.11 Operações Lógicas (A12)

• Exemplo de imagem danificada pelo pop-up menu

Exit

90

Exit


• Exemplo de imagem danificada por rubberbanding

91


• Solução 1– Quando a scan conversion da área do

pop-up menu ou da primitiva desenhada com rubberband for feita• Salvar os bits do Frame-buffer que irão ser

92

• Salvar os bits do Frame-buffer que irão ser substituídos

• Copiá-los de volta quando o pop-up menu desaparecer ou quando uma nova primitiva temporária do rubberbanding for desenhada


• Solução 2– Utilizar o XOR

Pixel Fonte: Pixel da primitiva a ser desenhadaPixel Lido: Pixel a ser substituídoPixel Destino: Valor de substituição depois da

93

Pixel Destino: Valor de substituição depois da operação lógica

Color Buffer

Pixel Fonte

Pixel Lido

Pixel Destino


• Solução 2– Utilizar o XOR

Pixel Fonte: 10100110Pixel Lido: 10001011

Pixel Destino: 00101101

XOR

XOR

94

Pixel Destino: 00101101Pixel Fonte: 10100110

Pixel Destino:10001011

Color Buffer

Pixel Fonte

Pixel Lido

Pixel Destino

XOR

Pixel Lido


• Solução 2 com OpenGL– Sair do default Copy Mode: GL_COPY• glEnable(GL_COLOR_LOGIC_OP);• glLogicOp(GL_XOR);

95


3.11.1 Desenhando linhas deletáveis– Habilitar o modo de operações lógicas

glEnable(GL_COLOR_LOGIC_OP);

– Quando estiver desenhando objetos

96

– Quando estiver desenhando objetos temporários, mude para o modo XORglLogicOp(GL_XOR);


3.11.1 Desenhando linhas deletáveis– No modo XOR• Desenhe o objeto com a cor fonte– A cor que aparece na tela é o resultado da operação XOR entre a cor fonte e a cor que estiver no frame

97

XOR entre a cor fonte e a cor que estiver no frame buffer

• Para apagar o objeto, desenhe-o novamente com a cor fonte– A cor que aparecerá na tela é a cor que estava no frame buffer antes do objeto ser desenhado a primeira vez Código Fonte

Código Exec


3.11.2 XOR e Cor

11111111 00000000 00000000

00000000 11111111 00000000

98

11111111 00000000 00000000

11111111 11111111 00000000

XOR


3.11.3 Cursor e planos sobrepostos (overlay)– Desenhar cursor nos planos overlay• Não interfere com a imagem RGB nos demais

planos

99

planos

Red bit planes

Green bit planes

Blue bit planes

Overlay bit planes


100

RGB Planes RGB Overlay Planes

Display: Imagem Overlayparece copiada sobre of color buffer

computação gráfica i - mat.ufc.bresdras/ck090_2007/notasdeaula/capitulo03.pdf · uma plaqueta...

Documents