Conceitos importantes da Computação Gráfica [3]

Programa de Educação Tutorial Ciência da Computação - UFRN Minicurso Agosto de 2012

Conceitos importantes da Computação Gráfica [3] Computação Gráfica é a área da Ciência da Computação que estuda a geração, manipulação e análise de imagens, através do computador. Atualmente, é uma das áreas de maior expansão e importância que propicia o desenvolvimento de trabalhos multidisciplinares. A elaboração de aplicações gráficas se popularizou com o surgimento de placas gráficas para computadores pessoais e de bibliotecas gráficas, como OpenGL, que não exigiam conhecimentos extensivos de programação ou de hardware. Atualmente, com as facilidades disponíveis nas bibliotecas gráficas existentes, a programação das aplicações está mais simples. Por exemplo, OpenGL (Open Graphics Library), também definida como uma interface para hardware gráfico, é uma biblioteca de rotinas gráficas e de modelagem, bidimensional (2D) e tridimensional (3D), portável e rápida. Ela permite desenvolver aplicações interativas e gerar imagens de cenas 3D (ou conjunto de objetos), com um alto grau de realismo. Entretanto, a sua maior vantagem é a velocidade, uma vez que incorpora vários algoritmos otimizados, incluindo o desenho de primitivas gráficas, o mapeamento de textura e outros efeitos especiais. Há duas áreas que têm uma relação bastante próxima com a CG: Processamento de Imagens (PI) e Visão Computacional. A área PI abrange o estudo e a pesquisa de técnicas para realizar a manipulação de imagens, tais como ajustes de cor, brilho, contraste ou aplicação de filtros, entre outras. Sistemas de PI são encontrados atualmente, por exemplo, em consultórios de cirurgiões plásticos e salões de beleza. Neste caso, uma pessoa pode ver como será o resultado de uma plástica ou corte de cabelo através de simulações no computador. A Visão Computacional trabalha com a análise de imagens, buscando obter a especificação dos seus componentes para identificação dos modelos geométricos que a compõem. Uma aplicação de técnicas de Visão Computacional é o reconhecimento automático de impressões digitais. Em CG, modelos são usados para representar entidades e fenômenos do mundo físico real no computador. Existem várias categorias ou métodos de construção de modelos tridimensionais. Cada um tem suas vantagens e desvantagens, adaptando-se melhor para uma ou outra aplicação. Modelagem consiste em todo o processo de descrever um modelo, objeto ou cena, de forma que se possa desenhá-lo. Na verdade, a modelagem engloba dois tópicos de estudo: formas de representação dos objetos, que se preocupa com a forma (ou estruturas de dados) como os modelos são armazenados; e técnicas de modelagem dos objetos, que trata das técnicas interativas (e também das interfaces) que podem ser usadas para criar um modelo de objeto.

A forma mais comum de representar modelos 3D é através de uma malha de polígonos. Ou seja, define-se um conjunto de vértices no espaço (geometria) e como esses vértices devem ser ligados para formarem polígonos fechados, chamados de face (topologia), que podem ser triângulos ou quadrados. O armazenamento desse tipo de estrutura é usualmente realizado através de vetores de estruturas, matrizes ou listas. Por exemplo, a Figura 1 apresenta a lista de vértices e faces necessárias para desenhar uma casa simplificada. É aconselhável que todos os modelos sejam sempre definidos de maneira que o seu centro, ou o ponto ao redor do qual ele pode ser rotacionado, seja posicionado na origem (0, 0, 0). Assim, quando for aplicada uma transformação geométrica sobre o objeto, ele não trocará de quadrante. A este espaço de coordenadas, adequado à criação dos modelos, dá-se o nome de Sistema de Referência do Objeto (SRO). Em outras palavras, o SRO é o sistema de coordenadas no qual se define o modelo geométrico. Existe um conjunto de técnicas em CG que permite transformar as informações a respeito de um modelo contidas em uma estrutura de dados, em uma imagem que pode ser exibida em um monitor. Portanto, considera-se que uma imagem consiste em uma matriz de pontos e um modelo é uma representação computacional de um objeto. Para entender como funciona o processo de visualização é importante conhecer o conceito de Universo, que pode ser definido como a região do espaço utilizada em uma aplicação. Como a descrição geométrica de um modelo normalmente envolve coordenadas geométricas, é preciso adotar um sistema de referência que irá definir uma origem em

relação à qual todos os posicionamentos do universo são descritos. Em geral, este Sistema de Referência do Universo (SRU) consiste em três eixos ortogonais entre si (x, y, z) e uma origem (0,0, 0). Uma coordenada, então, é formada pelos valores de x, y e z, que correspondem às posições ao longo dos respectivos eixos (denominados cartesianos) e todos os procedimentos são definidos em relação a este sistema de referência. Para facilmente identificar como o eixo z é posicionado em relação à x e y, normalmente se utiliza a regra da mão direita ou a regra da mão esquerda. Por exemplo, na regra da mão direita, deve-se posicionar a mão direita de maneira que o indicador aponte para direção positiva de y (para cima), o polegar aponte para a direção positiva de x (para o lado) e o dedo do meio aponte para a direção positiva de z (para frente, como se estivesse saindo da tela do computador ), como ilustra a Figura 2. Fig 2. Regra da mão direita Quando se está trabalhando com a representação de objetos no espaço tridimensional existe uma etapa obrigatória: mapear suas representações 3D para imagens 2D que serão exibidas em um dispositivo como um monitor. Esta operação de obter representações bidimensionais de objetos tridimensionais é chamada de projeção. Como a maioria dos objetos é representada por uma coleção de vértices, sua projeção é definida por raios de projeção (segmentos de retas) chamados de projetantes, que passam através de cada vértice do objeto e interseccionam um plano de projeção. Esta classe de projeções é chamada de projeções geométricas planares. As projeções usualmente são divididas em dois tipos principais: Projeção Paralela Ortográfica, na qual as projetantes são paralelas entre si, passam pelos vértices dos objetos e interseccionam o plano com um ângulo de 90º (Figura 3a); Projeção Perspectiva, quando as projetantes

emanam de um único ponto que está a uma distância finita do plano de projeção e passam pelos vértices (Figura 3b). Fig 3. Projeção de paralelepípedos usando a projeção paralela ortográfica (a) e a projeção perspectiva (b). Na projeção paralela ortográfica (Figura 3a) não há alteração nas medidas do objeto. Sua construção é bastante simples, pois, basicamente, consiste em omitir uma das componentes de cada vértice. Entretanto, a projeção perspectiva é mais utilizada, uma vez que representa melhor o que acontece na realidade. Mesmo após a etapa de projeção, as imagens já 2D no plano de projeção ainda não estão em coordenadas do Sistema de Referência da Tela (SRT) adotado no monitor do computador. Por exemplo, no SRT a origem fica no canto superior esquerdo do monitor e a resolução pode variar, enquanto que o Sistema de Referência de Projeção (SRP), que consiste no plano de projeção, é geralmente definido como [ 1, 1]. Portanto, torna-se necessário realizar o mapeamento entre estes sistemas de referência, que consiste, basicamente, em uma regra de proporção. Além disso, é necessário definir em qual parte da tela se deseja exibir o que foi selecionado e projetado. A esta região dá-se o nome de janela de exibição ou viewport. Uma viewport é delimitada pelas coordenadas de seus cantos, os quais sempre são dados em valores que dizem respeito ao SRT. (Fig. 4)

Fig 4. Mapeamento para diferentes viewports. As técnicas explicadas anteriormente permitem a geração de imagens simples, cuja aparência é artificial. Para que essas imagens tenham mais realismo, é preciso considerar outros aspectos como a idéia de iluminação e a técnica de mapeamento de texturas. Não abordaremos esses temas em nosso minicurso, mas as referências no final desse documento possuem muita informação a respeito. Uma das funcionalidades mais importantes das aplicações gráficas, é a possibilidade de manipular e alterar interativamente as características dos objetos que compõem uma cena. Já foi visto na Seção 2 que a maioria dos objetos em OpenGL consiste de uma combinação de um conjunto de primitivas gráficas definidas através de vértices. As transformações geométricas, simplificadamente, consistem em operações matemáticas realizadas sobre estes vértices, permitindo alterar uniformemente o aspecto de um modelo já armazenado no computador. Tais alterações não afetam a estrutura do desenho, mas sim o aspecto que ele vai assumir. Os três tipos fundamentais de transformações geométricas, ilustradas na Figura 5, são translação, rotação e escala. Fig 4. Exemplo da aplicação das transformações geométricas em um cubo. Após a etapa de mapeamento para a tela, é preciso definir exatamente quais são os pixels que irão compor uma linha e como preencher os diferentes polígonos com uma determinada cor. Estes procedimentos são conhecidos como rasterização. Em CG, é comum agrupar um conjunto de objetos descritos geometricamente para formar o que chamamos de cena 3D. Como uma imagem na tela do computador consiste em uma matriz de pixels, é necessário executar todas etapas descritas nesta seção e sumarizadas na Figura 6, para fazer a Síntese de Imagens. Inicialmente, é feita a modelagem

e o instanciamento dos objetos para formar a cena 3D. Depois, a câmera é posicionada e direcionada, e os objetos da cena 3D são mapeados para o SRC. Uma vez definido o volume de visualização, é realizado o recorte 3D e a projeção. Os últimos passos consistem em fazer o mapeamento para o SRT e a rasterização. Fig 6. Pipeline de visualização 3D. Como a evolução da Computação Gráfica depende da evolução do hardware, recentemente, as novas gerações de placas gráficas possibilitaram o desenvolvimento de várias aplicações e um grande avanço em muitas áreas da CG. Muitas imagens podem ser geradas em tempo real devido à possibilidade de programar o hardware gráfico. Isso também tem beneficiado a área de visualização, que, em geral, trabalha com uma grande quantidade de dados que pode ser armazenada na memória das placas gráficas. Atividade Prática: Durante o minicurso vamos criar uma versão do consagrado jogo SNAKE. A primeira parte da nossa atividade será a modelagem. Começaremos criando as classes correspondentes à cobra e ao cenário do nosso jogo. Releia o texto, procure entender bem o que significa modelagem nesse contexto e crie o seu próprio modelo. Lembre-se que não iremos trabalhar em 3D mas em 2D. Mãos à obra!

Introdução à OpenGL A OpenGL (Open Graphics Library) é uma API livre utilizada na computação gráfica, para desenvolvimento de aplicativos gráficos, ambientes 3D, jogos, entre outros. Ela reúne algumas centenas de funções, que fornecem acesso a praticamente todos os recursos do hardware de vídeo. Internamente, ele age como uma máquina de estados, que de maneira bem específica diz ao OpenGL o que fazer. Usando as funções da API, você pode ligar ou desligar vários aspectos dessa máquina, tais como a cor atual, se transparência será usada, se cálculos de iluminação devem ser feitos, se haverá ou não o efeito de neblina, e assim por diante. Um bom programador deve conhecer cada um desses estados, pois não é incomum a obtenção de resultados indesejados simplesmente por deixar um ou outro estado definido de maneira incorreta. A OpenGL fornece um conjunto de comandos primitivos, em baixo nível de abstração, muito importantes para modelagem e visualização de objetos geométricos [1]. Apesar de não possuir rotinas de gerenciamento de menus e janelas, frequentemente acompanham toolkits que são instaladas junto com a OpenGL que fazem esse gerenciamento. Algumas aspectos que devem ser lembrados a. O OpenGL trabalha com a medida de ângulos em graus e não em radianos, como ocorre com a maioria das linguagens; b. Cada componente de cor no OpenGL é normalmente definido por um número de ponto flutuante, que varia de 0 até 1, e não um número inteiro de 0 até 255; c. As coordenadas gráficas no OpenGL seguem o eixo cartesiano. Assim, o número da linha é decrescente, e não crescente, como em boa parte das implementações. d. Matrizes no OpenGL são calculadas com base nas colunas, e não nas linhas. A OpenGL fornece um conjunto poderoso de comandos, mas restrito apenas ao desenho. Várias bibliotecas existem para facilitar a manipulação de outros aspectos da aplicação, como as seguintes: a. OpenGL Utility Library (GLU): Fornece diversas funções para auxiliar na montagem de matrizes de visualização e projeção, desenho de superfícies e imagens 3D. Essa biblioteca é fornecida juntamente com as implementações do OpenGL e todas as rotinas dessa biblioteca tem o prefixo glu. b. Cada ambiente de janelas tem uma biblioteca de extensão do OpenGL. Por exemplo, o sistema X possui o GLX, enquanto o Windows fornece a extensão

WGL e já o Mac OS X fornece o CGL. c. OpenGL Utility Toolkit (GLUT): É um toolkit que abstrai o sistema de janelas, fornecendo uma interface simples para a criação de uma aplicação OpenGL. Funcionamento da OpenGL A OpenGL é uma API complexa, com muitos detalhes que podem confundir o iniciante [1]. Portanto, é interessante começar conhecendo a estrutura básica de um programa com OpenGL. Começaremos com um exemplo de aplicação simples, mas completo que usam os principais conceitos envolvendo OpenGL e GLUT. Para trabalhar com OpenGL, você deve primeiro criar um contexto de trabalho, este contexto contém o estado atual da máquina de estados, bem como referências aos diferentes buffers de trabalho, estes buffers podem ser visto como áreas de memória correspondentes à tela na qual OpenGL irá desenhar, geralmente a parte do buffer colorido (GL_COLOR_BUFFER) que é o buffer no qual serão desenhadas as primitivas. Existem outros buffers mais especializados. PrimeiroPrograma.cpp #include <stdlib.h> #include <GL/glut.h> // Função callback de redesenho da janela de visualização void Desenha(void) { glloadidentity(); // Limpa a janela de visualização com a cor branca glclearcolor(1,1,1,0); glclear(gl_color_buffer_bit); // Define a cor de desenho: vermelho glcolor3f(1,0,0); // Desenha um triângulo no centro da janela glbegin(gl_triangles); glvertex3f( 0.5, 0.5,0); glvertex3f( 0.0, 0.5,0); glvertex3f( 0.5, 0.5,0);

glend(); } //Executa os comandos OpenGL glflush(); // Função callback chamada para gerenciar eventos de teclas void Teclado (unsigned char key, int x, int y) { if (key == 27) exit(0); } // Função responsável por inicializar parâmetros e variáveis void Inicializa(void) { // Define a janela de visualização 2D glmatrixmode(gl_projection); gluortho2d( 1.0, 1.0, 1.0, 1.0); glmatrixmode(gl_modelview); } // Programa Principal int main(void) { // Define do modo de operação da GLUT glutinitdisplaymode(glut_single GLUT_RGB); // Especifica o tamanho inicial em pixels da janela GLUT glutinitwindowsize(400,400); // Cria a janela passando como argumento o título da mesma glutcreatewindow("primeiro Programa"); // Registra a função callback de redesenho da janela // de visualização glutdisplayfunc(desenha); // Registra a função callback para 'idle' glutidlefunc(desenha); // Registra a função callback para tratamento das teclas ASCII glutkeyboardfunc (Teclado);

// Chama a função responsável por fazer as inicializações Inicializa(); // Inicia o processamento e aguarda interações do usuário glutmainloop(); } return 0; Explicando o Programa A primeira coisa que fazemos é incluirmos as bibliotecas usadas no nosso programa #include <stdlib.h> #include <GL/glut.h> Considerando que a GLUT é baseada em eventos, criamos uma função que será chamada cada vez que quisermos desenhar a tela. Em nosso programa ela se chama Desenha.Ela é uma função do tipo callback. Callback é uma referência a um pedaço de código executável que é passado como argumento para outro código. Isto permitem um software de camada de nível mais baixo chamar uma sub-rotina definida em um software de uma camada mais elevada. Além da função Desenha teremos outras que vão ser chamadas em eventos como teclado, mouse, etc. Definimos aqui a cor de fundo da janela e a limpamos. glclearcolor(1,1,1,0); glclear(gl_color_buffer_bit); Definimos agora a cor do desenho glcolor3f(1,0,0); E desenhamos um triângulo na janela glbegin(gl_triangles); glvertex3f( 0.5, 0.5,0); glvertex3f( 0.0, 0.5,0); glvertex3f( 0.5, 0.5,0); glend();

Vamos relembrar o conceito de primitiva do OpenGL. Primitivas são comandos que desenham as formas básicas da OpenGL. Essas formas servem como peças, para montar qualquer desenho desejado. O comando básico para desenho de primitivas é: glbegin(nome_da_primitiva); Ele permite à você dizer à OpenGL que você está pronto para começar um desenho e o que vai ser desenhado. Você pode usar um dos 10 modos abaixo para desenhar qualquer uma das três formas básicas. Observe que a OpenGL trata de maneira especial dois tipos de polígonos: os triângulos e os quadriláteros. GL_POINTS: Representando pontos individuais; GL_LINES: Linhas composta por pares de vértices; GL_LINE_STRIP: Uma série de linhas conectadas; GL_LINE_LOOP: Uma série de linhas conectadas. Também conecta o primeiro e o último vértice; GL_TRIANGLES: Desenha triângulos a cada 3 vértices fornecidos; GL_TRIANGLE_STRIP: Uma série de triângulos conectados. Após o desenho do primeiro triângulo, cada vértice adicional forma um novo triângulo com dois últimos pontos fornecidos; GL_TRIANGLE_FAN: Uma série de triângulos com um único vértice em comum. O vértice comum é o primeiro vértice fornecido; GL_QUADS: Desenha um quadrilátero a cada 4 vértices fornecidos; GL_QUAD_STRIP: Desenha uma série de quadriláteros. Após o primeiro, apenas mais 2 vértices precisam ser fornecidos para o desenho do segundo quadrilátero; GL_POLYGON: Desenha polígonos convexos simples com um número arbitrário de vértices. Você diz à OpenGL que terminou de desenhar através da função glend(). A função é void e não aceita qualquer tipo de parâmetro. É considerada boa prática fazer sempre a indentação do que aparece dentro dos blocos glbegin()e glend(). Por fim usamos o comando que força a execução de todos as chamadas OpenGL, efetivamente realizando o desenho: glflush(); A função Teclado() é também do tipo callback e é chamada em resposta a eventos no teclado

É comum criarmos uma função para inicializar alguns estados da máquina do OpenGL. Essa função é chamada somente na inicialização do programa e é ela quem determina o tipo e os parâmetros da projeção. Se não recordar o que é a projeção, dê uma lida no parágrafo da aula anterior no qual explicamos um pouco. No nosso caso estamos definindo uma projeção paralela ortográfica 2D glmatrixmode(gl_projection); gluortho2d( 1.0, 1.0, 1.0, 1.0); glmatrixmode(gl_modelview); OpenGL fornece 4 diferentes tipo de matrizes (GL_MODELVIEW, GL_PROJECTION, GL_TEXTURE e GL_COLOR) e rotinas de transformações para essas matrizes (glloadidentity(), gltranslatef(), glrotatef(), glscalef(), glmultmatrixf(), glfrustum() and glortho() ). A função glmatrixmodeserve para especificar qual matriz será o alvo das transformações subsequentes. GL_MODELVIEW define como seus objetos são transformados (quero dizer, translação, rotação e escala) em suas coordenadas. GL_PROJECTIONdefine as propriedades da projeção. Vamos passear um pouco pelo programa principal. Fazemos primeiro uma chamada para inicialização do GLUT glutinitdisplaymode(glut_single GLUT_RGB); Esta chamada avisa a GLUT que tipo de modo de exibição deve ser usado quando a janela é criada. Neste caso os argumentos indicam a criação de uma janela single-buffered (GLUT_SINGLE) com o modo de cores RGBA (GLUT_RGB). O primeiro significa que todos os comandos de desenho são feitos na janela de exibição. Uma alternativa é uma janela double-buffered, onde os comandos de desenho são executados para criar uma cena fora da tela para depois rapidamente colocá-la na view (ou janela de visualização). Este método é geralmente utilizado para produzir efeitos de animação. O modo de cores RGBA significa que as cores são especificadas através do fornecimento de intensidades dos componentes red, green e blue separadas. [4] O próximo passo é especificar o tamanho da janela glutinitwindowsize(400,400);

E em seguida criar a janela glutcreatewindow("primeiro Programa"); Agora associamos a função Desenha() ao evento de desenho (callback) da GLUT glutdisplayfunc(desenha); E também a função Teclado() ao evento de pressionar alguma tecla glutkeyboardfunc (Teclado); Chamados a rotina de incialização que havíamos criado Inicializa(); E iniciamos o processamento de eventos pepal GLUT, passando a aguardar eventuais interações por parte do usuário glutmainloop(); Atividade Prática: Agora que você já conhece os princípios básicos da OpenGL, você já é capaz de começar a desenhar a sua personagem e também o cenário que vai compor o seu jogo. Então, libere sua criatividade!

Trabalhando com transformações e suas matrizes Em Matemática, transformações são quaisquer funções que mapeiam um dado conjunto X em outro ou nele mesmo. Porém, frequentemente, o dado conjunto X possui alguma estrutura algébrica ou geométrica adicional e o termo transformação vai referir-se a uma função de X sobre ele mesmo que preserva essa estrutura. Elas são facilmente efetuadas utilizando a Álgebra Linear e podem ser descritas explicitamente com matrizes Transformações Geométricas são operações aplicadas à descrição geométrica de um objeto para mudar sua posição (translação) orientação (rotação) tamanho (escala) As transformações geométricas são usadas para manipular um modelo, isto é, através delas é possível mover, rotacionar ou alterar a escala de um objeto. A aparência final da cena ou do objeto depende muito da ordem na qual estas transformações são aplicadas. Isto ocorre porque uma transformação geométrica em OpenGL é armazenada internamente em uma matriz. A cada transformação que é aplicada, esta matriz é alterada e usada para desenhar os objetos a partir daquele momento. A cada nova alteração é feita uma composição de matrizes. ATENÇÃO: Para evitar este efeito "cumulativo", é necessário utilizar as funções glpushmatrix() e glpopmatrix(), que salvam e restauram, respectivamente, a matriz atual em uma pilha interna da OpenGL. [4] A translação é feita através da função gltranslatef(tx, Ty, Tz),que pode receber três números float ou double (gltranslated) como parâmetro. Neste caso, a matriz atual é multiplicada por uma matriz de translação baseada nos valores dados.[4] Ex: gltranslatef(10,10,10); DesenhaObjeto(); A rotação é feita através da função glrotatef(ângulo, x, y, z), que pode receber quatro números float ou double (glrotated) como parâmetro. Neste caso, a matriz atual é multiplicada por uma matriz de rotação de "Ângulo" graus ao redor do eixo definido pelo vetor "x,y,z" no sentido anti-horário.[4] Ex:

glrotatef(20,1,0,0); DesenhaObjeto();//Gira o objeto 20 graus ao redor do eixo X glrotatef(30,1,0,0); DesenhaObjeto();//Gira o objeto mais 30 graus ao redor do eixo X A escala é feita através da função glscalef(ex, Ey, Ez), que pode receber três números float ou double como parâmetro. Neste caso, a matriz atual é multiplicada por uma matriz de escala baseada nos valores dados.[4] Ex: glscalef(0,0.5,0); DesenhaObjeto();// Diminui a altura do objeto // à metade do original Para permitir que a transformação atual seja reinicializada há o comando glloadidentity(). Dica importante: É possível criar um laço que continuamente altera as coordenadas do objeto antes de chamar a função "Desenha". Isto daria a impressão de que o desenho se move na janela. Porém, a biblioteca GLUT fornece a possibilidade de registrar uma função callback que torna mais fácil o processo de fazer uma simples animação. A função gluttimerfuncpega o nome da função callback que deve ser chamada e o tempo que ela deve esperar antes de chamar a função. void gluttimerfunc(unsigned int milissegundos, value), value); void (*func)(int Atividade Prática: As transformações geométricas são o que dão vida e animação à computação gráfica. Então, agora que vocẽ já conhece a teoria, vamos para a prática. Utilizando as matrizes de transformação do OpenGL e as funções callback você pode movimentar a sua personagem pelo cenário controlando-a pelo teclado! Vamos lá!