Hugo Siqueira (hlfs) Lauro Mafra Rafael Correa Rosana Silva Matos (rsm2)

1. Hugo Siqueira (hlfs) Lauro Mafra Rafael Correa Rosana Silva Matos (rsm2)

2. Roteiro • O que é OpenGL • GLUT • Configurando GLUT • Primitivas Geométricas • Cores • Transformações Geométricas • Iluminação • Referências

3. O que é OpenGL • Open Graphics Library • API para renderização gráfica 3D • Adotado por diversas plataformas de hardware (microcomputadores, estações de trabalho,computadores de médio e grande porte) • Bem como em diversos sistemas operacionais como Windows, Linux, entre outros • Amplamente utilizada no desenvolvimento de vários tipos de aplicações • facilidade de aprendizado, fornece estabilidade das rotinas e possui resultados visuais consistentes • As aplicações que mais utilizam OpenGL têm sido as de jogos, científicas e comerciais

4. O que é OpenGL • Pode ser visto como uma máquina de estados • mantém as variáveis de estado • Cor, visualização e transformações correntes • Padrões de tracejado de linhas e polígonos • Modos de desenho de polígonos • Convenções de empacotamento de pixel [pixel packing] • Posições e características de luzes • Propriedades do material dos objetos que estão sendo desenhados • Cada variável de estado possui um valor default que pode ser lido e/ou alterado • Algumas variáveis de estado podem ser habilitadas ou desabilitadas

5. GLUT • OpenGL Utility Toolkit • Sistema de Janelas independente de plataforma para desenvolvimento de aplicações OpenGL • Possui funções para: • Criar/Destruir janelas • Tratar entradas de teclado, mouse e joysticks • Baseado em funções de callback para tratamento de eventos • API simples, não possuindo recursos diretos para criação de GUI's • GLUT é um projeto descontinuado • Aplicações devem utilizar o FreeGLUT ou OpenGLUT, versões open source e com muitos bugs do GLUT corrigidos

6. Configurando GLUT • Windows já possui uma implementação do OpenGL • Necessário utilizar um sistema de janelas no desenvolvimento das aplicações • GLUT • Baixar o GLUT em: • http://www.cin.ufpe.br/~rsm2/GLUT.rar • Descompactar o GLUT.rar em algum diretório • C:\Temp\ • Após descompactar, definir os diretórios de include e library no Visual Studio • Para definir tais diretórios, deve-se seguir: • Menu Tools -> Options • Selecionar Projects -> VC++ Directories

8. Configurando GLUT • Para o diretório de include: • Selecionar a opção Include files • Clicar no ícone do diretório e indicar o diretório include que se encontra abaixo do diretório GLUT, previamente descompactado • Para o diretório de libraries: • Selecionar a opção Library files • Clicar no ícone do diretório e indicar o diretório lib que se encontra abaixo do diretório GLUT, previamente descompactado • Após definir os diretórios de include e library, clicar em OK • GLUT já está devidamente configurado para o desenvolvimento de aplicações OpenGL com sistema de janelas

12. Criando uma aplicação • Criando um projeto • No menu File -> New -> Project... • Escolher Visual C++ Projects -> Win32 -> Win32 -> Console Project • Selecionar o nome do projeto, por exemplo,OpenGL Cube • Selecionar o nome da solução, por exemplo, OpenGL Apps • Selecionar o caminho do projeto, por exemplo, C:\ • Clicar em OK • Clicar em Application Setings -> Empty, para criar um projeto vazio • Clicar em Finish

16. Configurando GLUT • Após a criação do projeto, é necessário copiar o arquivo glut32.dll e o freeglut.dll para a pasta do projeto • baixar em http://www.cin.ufpe.br/~rsm2/glut2.rar • Adicionar um arquivo que conterá a função main e o código da aplicação OpenGL • Clicar na pasta de fontes do projeto com o botão direito e seleciona Add -> Add New Item... • Selecionar a opção C++ File (.cpp) e fornecer o nome do arquivo • Clicar em Open e o arquivo criado será aberto no editor

19. Primitivas Geométricas • OpenGL conta com 10 primitivas geométricas, sendo divididas da seguinte forma: • um tipo de ponto • três tipos de linhas • seis tipos de polígonos • Os vértices são definidos pelo comando Vertex glVertex2f( float x, float y); // vértice para um eixo 2D glVertex3d(double x,double y, double z); // vértice para um eixo 3D • As primitivas precisam ser delimitadas através de Begin ... End conforme abaixo: Begin ( nome da primitiva); ... // aqui serão colocados comandos Vertex. End (void);

20. Primitivas Geométricas • Ponto • a primitiva responsável em desenhar pontos na tela é GL_POINTS • O código no exemplo abaixo desenha 3 pontos na tela. Cada vértice torna-se um ponto glBegin( GL_POINTS ); glVertex2f( xf, yf); glVertex2f( xf, yf); glVertex2f( xf, y f); glEnd();

21. Primitivas Geométricas • Linhas • GL_LINES --> No caso de serem colocados números ímpares de vértices, o último é ignorado • Se houvesse um quarto vértice, uma nova linha entre o terceiro e quarto vértice seria exibida • GL_LINE_STRIP --> cria linhas consecutivas, ligando o primeiro vértice com o segundo, o segundo com o terceiro e assim por diante • GL_LINE_LOOP --> Funciona de maneira semelhante ao anterior, porém o último vértice é ligado a primeira, devido a isso o LOOP no seu nome. O espessura de uma linha pode ser modificada através do comando glLineWidth (GLint espessura), bastando passar como parâmetro a espessura da linha

22. Primitivas Geométricas • Polígonos • Áreas formadas por várias linhas conectadas • Arestas do polígono não podem se cruzar • Devem ser áreas convexas • O número de segmentos do polígono não é restrito • OpenGL assume que todos os polígonos são simples • Problema da superfície construída a partir de quadriláteros • Quadriláteros são polígonos não planares • Caso seja feita alguma transformação, podem deixar de ser polígonos simples • Para evitar que isto aconteça, é sempre bom utilizar triângulos para compor as superfícies, pois triângulos são sempre co-planares

23. Primitivas Geométricas • Polígonos • GL_POLYGON --> Desenha polígonos convexos de acordo com as especificações das coordenadas. • É semelhante ao LINE_LOOP no fato de ligar a última coordenada a primeira • GL_TRIANGLE_STRIP --> Desenha uma série de triângulos que são conectados uns aos outros ao longo dos lados que podem ser compartilhados • GL_TRIANGLE_FAN --> Funciona de forma semelhante ao anterior , mas os triângulos criados possuem a mesma origem • GL_TRIANGLES --> Gera como resultado triângulos independentes. Ela ignora os dois últimos vértices, pois cinco vértices não formam dois triângulos independentes • GL_QUAD_STRIP --> Desenha uma série de quadriláteros entre os lados compartilhados • GL_QUADS --> Desenha quadriláteros independentes. Ela ignora os dois últimos vértices, pois 6 vértices não formam dois quadriláteros independentes

24. Cores • As cores em OpenGL são determinadas pelo comando Color • Seguem o padrão RGB (Red Green Blue) adotados em diversos sistemas • Em OpenGL: Color3 {f,d} ( XRed, XGreen, XBlue), onde : XRed: porcentagem de vermelho (variando de 0.0 a 1.0) XGreen: porcentagem de verde (variando de 0.0 a 1.0) XBlue: porcentagem de azul (variando de 0.0 a 1.0)

25. Exercício • Criar um cubo colorido, usando GL_QUADS e GL_TRIANGLES cujo centro encontra-se na origem e possui lado igual a 2f

26. Transformações Geométricas • Em muitas aplicações de computação gráfica, há a necessidade de alterar e manipular o conteúdo de uma cena • Animações, por exemplo, são produzidas pelo movimento da câmera ou dos objetos presentes na cena • Mudanças em orientação, tamanho e formato estão ligadas às transformações geométricas • São cumulativas, ou seja, podem ser aplicadas umas sobre as outras • Uma transformação geométrica de OpenGL é armazenada internamente em uma matriz • A cada tranformação esta matriz é alterada e usada para desenhar os objeto a partir daquele momento, até que seja novamente alterada

27. Transformações Geométricas • Translação • Quando aplicada a um objeto, reposiciona o mesmo mudando suas coordenadas (x,y,z) no espaço tridimensional, por fatores Tx, Ty e Tz, respectivamente. Dessa forma, considerando, inicialmente, um objeto com coordenadas espaciais (x,y,z), sua nova posição (x',y',z') após uma operação de translação será: x‘ = x + Tx y‘ = y + Ty z‘ = z + Tz

28. Transformações Geométricas • Translação • Em OpenGL: Translate {f,d} ( Tx, Ty, Tz ), onde: Tx: é o quanto se quer transladar o objeto em relação ao eixo X Ty: é o quanto se quer transladar o objeto em relação ao eixo Y Tz: é o quanto se quer transladar o objeto em relação ao eixo Z • exemplo: glTranslatef(xf, yf, zf); glBegin(GL_POLYGON); glVertex2f( xf, yf); glVertex2f( xf, yf); glVertex2f( xf, yf); glEnd();

29. Transformações Geométricas • Rotação • Rotacionar um objeto significa girar o mesmo em torno de um eixo de acordo com determinado ângulo • Em OpenGL: Rotate {f,d} (Angulo, x, y, z ), onde: Angulo -> é o angulo de rotação • x,y,z -> definem o eixo onde o objeto será rotacionado • exemplo: glRotatef(45.0f,0.0f,0.0f,1.0f);// roda 45 graus no eixo z glBegin(GL_POLYGON); glVertex2f( xf, yf); glVertex2f( xf, yf); glVertex2f( xf, yf); glEnd();

30. Transformações Geométricas • Escala • O escalamento altera o tamanho dos objetos, multiplicando as coordenadas (x,y,z,) usadas para defini-los, por fatores Sx, Sy e Sz, respectivamente. Supondo, por exemplo, um vértice de um polígono definido pelas coordenadas (x,y,z), as novas coordenadas (x',y',z') deste vértice • após uma operação de escalamento seria: x‘ = x.sx y‘ = y.sy z‘ = z.sz • Os fatores Sx, Sy e Sz podem assumir quaisquer valores positivos, sendo que para valores menores que 1, o tamanho do objeto é reduzido, para valores maiores que 1, o aumenta-se o tamanho do objeto e para valores iguais a 1, o tamanho original do objeto é mantido

31. Transformações Geométricas • Escala • Em OpenGL: Scale {f,d} ( Sx, Sy,Sz ), onde: Sx: é o fator de escala em relação a X. Sy: é o fator de escala em relação a Y. Sz: é o fator de escala em relação a Z. • exemplo: glScalef(1.0f,1.3f,1.0f); // aumenta o tamanho do objeto numa escala // de 1.3 em relação a Y glBegin(GL_POLYGON); glVertex2f( xf, yf); glVertex2f(xf, yf); glVertex2f(xf, yf); glEnd();

32. Exercício • Alterar o comportamento do cubo fazendo com que ele se movimente no sentido positivo e negativo do eixo z quando forem pressionadas as teclas : seta para cima e seta para baixo.

33. Iluminação • Em OpenGL a cor de uma fonte de luz é caracterizada pela quantidade de vermelho (R), verde (G) e azul (B) que ela emite • E o material de uma superfície é caracterizado pela porcentagem dos componentes R, G e B que chegam e são refletidos em várias direções • No modelo de iluminação a luz em uma cena vem de várias fontes de luz que podem ser "ligadas" ou "desligadas" individualmente • No modelo de iluminação OpenGL a fonte de luz tem efeito somente quando existem superfícies que absorvem e refletem luz • Assume-se que cada superfície é composta de um material com várias propriedades • O material pode emitir luz, refletir parte da luz incidente em todas as direções, ou refletir uma parte da luz incidente numa única direção

34. Iluminação • Para sintetizarmos imagens realistas, precisamos saber a quantidade de luz associada a um ponto qualquer, na face de um objeto a respeito do qual queremos gerar a imagem • Em OpenGL, criamos um modelo de iluminação definindo as características das fontes de luz e as propriedades do material do objeto. Aqui veremos três: • Ambiente: resultado da luz refletida no ambiente; é uma luz que vem de todas as direções • Difusa: luz que vem de uma direção, atinge a superfície e é refletida em todas as direções; assim, parece possuir o mesmo brilho independente de onde a câmera está posicionada; • Especular: luz que vem de uma direção e tende a ser refletida numa única direção; • Basicamente existem dois comandos que serão utilizados na criação de um modelo de iluminação: • Light: define as características da fonte de luz • Material: define as propriedades do material do objeto

35. Iluminação • Light glLightfv ( source , parameter , pointer_to_array) glLightf ( source , parameter , value) • A diferença entre as duas está nos parâmetro parameter. Alguns exigem seus atributos como um ponteiro para um vetor e outros exigem um valor • source -> indica qual a fonte de luz que está sendo definida • Em OpenGL é possível definir até 8 fontes de luzes distintas: GL_LIGHT0 GL_LIGHT1 ... GL_LIGHTn >> n máximo = 7 • parameter -> especifica as características da fonte de luz • pointer_to_array -> significa os atributos referentes a características

36. Iluminação • Material glMaterialfv(face, type, pointer_to_array) ; ou glMaterialf ( face, type, value); onde: • face: indica quais as faces (face frontal, face de trás ou ambas) • type: indica qual propriedade será configurada • pointer_to_array: indica os atributos referentes a propriedade • Value: atributo referente ao tipo • As faces podem ser especificadas pelas constantes: GL_FRONT: somente as faces da frente GL_BACK : somente as faces de trás GL_FRONT_AND_BACK : ambas

37. Iluminação • Luz Ambiente • ilumina todas as faces do objeto de maneira uniforme • Em OpenGL: GLfloat luz_ambiente[] = { XR, XG, XB, X } GLfloat objeto_ambiente[] = { YR, YG, YB, Y} glLightfv(GL_LIGHT0, GL_AMBIENT, luz_ambiente) glMaterialf (GL_FRONT_AND_BACK, GL_AMBIENT,objeto_ambiente) glEnable(GL_LIGHTING) glEnable(GL_LIGHT0)

38. Iluminação • Reflexão Difusa • As faces onde os raios de luz incidem de maneira mais perpendicular parecem mais brilhantes que aquelas nas quais a luz incide de maneira mais inclinada • Em OpenGL: GLfloat luz_difusa[] = { XR, XG, XB, X } GLfloat objeto_difusa [] = { YR, YG, YB, Y} glLightfv(GL_LIGHT0, GL_DIFFUSE, luz_difusa) glMaterialfv (GL_FRONT_AND_BACK, GL_DIFFUSE, objeto_difusa) glEnable(GL_LIGHTING) glEnable(GL_LIGHT0)

39. Iluminação • Reflexão Especular • Em OpenGL: GLfloat luz_especular[] = { XR, XG, XB, X } GLfloat objeto_especular[] = { YR, YG, YB, Y} glLightfv(GL_LIGHT0, GL_SPECULAR, luz_especular ) glMaterialfv (GL_FRONT_AND_BACK, GL_SPECULAR, objeto_especular) glMaterialf (GL_FRONT_AND_BACK, GL_SHININESS, n ) glEnable(GL_LIGHTING); glEnable(GL_LIGHT0); • GL_SHININESS: define o quanto a superfície é polida, ou seja, o brilho dessa superfície • O intervalo de GL_SHININESS em OpenGL é de 0.0 a 128.0

40. Exercício • Alterar a cor da luz, a cor do buffer e a intensidade do brilho da esfera do arquivo questao_3.cpp

41. Referências • http://www.opengl.org/ • http://www.inf.pucrs.br/~manssour/OpenGL/ • http://nehe.gamedev.net/