2. 2
Sumário
● OpenGL
● GLUT
● Estado Inicial do GLUT
● Manipulação e atualização de janelas
● Registro de Callbacks
● Referências
● Exercícios
3. 3
OpenGL
● O OpenGL (Open Graphics Library) é
uma API livre utilizada na computação
gráfica, para desenvolvimento de aplicativos
gráficos, ambientes 3D, jogos, entre outros.
● O OpenGL é um conjunto de algumas
centenas de funções, que fornecem acesso a
praticamente todos os recursos
do hardware de vídeo.
4. 4
OpenGL
● O OpenGL funciona como uma máquina de estados.
● Usando as funções da API, você pode ligar ou
desligar vários aspectos dessa máquina, tais como
a cor atual, incidência ou não de transparência, se
cálculos de iluminação devem ser feitos e assim por
diante.
● É importante 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.
5. 5
OpenGL
● As funções do OpenGL são identificadas pelo
prefixo “gl” e a primeira letra de cada palavra após
esse prefixo é maiúscula.
● Como exemplo, podemos citar a função glClear,
responsável por “limpar” a área de visualização da
janela de renderização. Internamente utilizamos, por
exemplo, a função glDrawPixels, responsável por
escrever um bloco de pixels (a imagem) no
framebuffer.
6. 6
● GL, GLX, WGL
○ ponte entre o OpenGL e os diversos sistemas
de janelas
● GLU (OpenGL Utility Library)
○ Parte do OpenGL
○ NURBS, tessellators, quadric shapes, etc.
● GLUT (OpenGL Utility Toolkit) e GLFW
○ API portável de sistema de janelas
○ Não é parte oficial do OpenGL
OpenGL - API relacionadas
7. 7
OpenGL – Primitivas
● Alguns trabalhos práticos a serem
desenvolvidos em nosso curso exigirão
conhecimento sobre criação de desenhos
usando as primitivas do OpenGL.
● Em OpenGL, utilizamos primitivas geométricas.
As primitivas são: pontos, linhas e polígonos,
que se descrevem a partir de seus vértices.
8. 8
OpenGL – Primitivas
● Pontos: são conjuntos de números reais chamados
vértices. Pode-se trabalhar com vértices com 2 ou 3
coordenadas.
● Linhas: as linhas em OpenGL são na realidade
segmentos de reta. Os vértices definem os pontos
extremos de cada segmento.
● Polígonos: área envolta por um conjunto finito e
fechado de segmentos de retas. Em OpenGL, os
polígonos devem ser simples (suas bordas não se
sobrepõem) e convexos (dado quaisquer dois pontos
dentro do polígono, o segmento que os une também
esta em seu interior).
10. 10
OpenGL – Primitivas
● A criação de figuras no OpenGL deve ser feita
somente dentro do par de instruções glBegin() e
glEnd() como no exemplo abaixo:
glBegin(GL_LINES);
glColor3f(1.0, 0.0, 0.0);
glVertex2f(0.0, 0.0);
glColor3f(0.0, 1.0, 0.0);
glVertex2f(3.0, 2.0);
glEnd();
● No exemplo acima, foi definida uma cor para cada
vértice da linha. A cor da linha será obtida através da
interpolação entre essas duas cores.
11. 11
Cores
● Em OpenGL utilizaremos o modelo de cor RGB
(vermelho, verde e azul). Veja abaixo alguns
exemplos de cores e seus respectivos códigos:
glColor3f(1.0, 0.0, 0.0);
glColor3f(0.0, 1.0, 0.0);
glColor3f(0.0, 0.0, 1.0);
glColor3f(1.0, 1.0, 0.0);
glColor3f(0.0, 1.0, 1.0);
glColor3f(1.0, 0.0, 1.0);
glColor3f(0.0, 0.0, 0.0);
glColor3f(1.0, 1.0, 1.0);
glColor3f(0.5, 0.5, 0.5);
Modelos de cores serão estudados de forma mais
aprofundada mais à frente no curso.
12. 12
OpenGL – Métodos de desenho
● A forma de representação vista no slide anterior é
chamada de "modo imediato". Este modo, apesar de
simples e de fácil entendimento, possui baixa
performance.
● Existem outras formas mais modernas e mais
rápidas de armazenar e representar objetos em
OpenGL usando:
○ Vertex Arrays
○ Display Lists
○ Vertex Buffer Objects (VBO)
● Veja no site exemplos de cada um desses métodos
em "Códigos (outros)".
13. 13
GLUT
● GLUT é um toolkit para gerenciamento de janelas e
eventos para o OpenGL. A API é portável, fazendo
com que os códigos escritos possam ser
compilados em diversas plataformas como
Windows, Linux, Mac etc.
● É uma API simples, fácil de usar e leve.
● Implementaremos nossos códigos utilizando o
GLUT em C/C++.
14. 14
Estado Inicial do GLUT
Nos arquivos de teste a serem disponibilizados, várias
funções de inicialização do GLUT são chamadas. Algumas
desses funções são as seguintes:
glutInit(&argc, argv);
É usada para inicializar a biblioteca GLUT. Nos exemplos a
serem utilizados, basta chamá-la com os argumentos default.
glutInitDisplayMode(GLUT_RGB | GLUT_DOUBLE | GLUT_DEPTH);
Estabelece os parâmetros iniciais do display. A configuração
acima serve tanto para exibir imagens estáticas quanto
animações (Double Buffer) e de uma forma geral não será
modificada.
15. 15
Manipulação de janelas
glutInitWindowSize(int width, int height );
Define o tamanho inicial da janela de renderização em
pixels. Esse tamanho pode ser modificado utilizando-se a
função glutReshapeWindow.
glutInitWindowPosition(int x, int y );
Define a posição inicial da janela de renderização em pixels
(considere a origem no canto superior esquerdo do
monitor). Esta função é opcional.
glutCreateWindow("Nome da janela");
Cria a janela principal onde será exibida a imagem.
16. 16
Atualização das janelas
Existem funções específicas para definir se
uma janela precisa ou não ser redesenhada e
para atualizar essa janela:
void glutPostRedisplay(void);
Quando chamado, define que a janela corrente precisa ser
redesenhada.
void glutSwapBuffers(void);
Atualiza a janela corrente fazendo um swap entre o buffer
que foi desenhado e o buffer corrente (é necessário usar
double buffer para chamar essa função).
17. 17
Registro de Callbacks
É necessário que registremos no glut funções específicas
para display, teclado, mouse etc. Abaixo temos alguns
exemplos dessas funções com seus respectivos
argumentos:
void glutDisplayFunc(void (*func)(void));
Define a callback responsável pelas funções de desenho.
void glutKeyboardFunc(void (*func)(unsigned char key, int x, int y));
Define a callback para gerenciar eventos de teclado.
void glutMouseFunc(void (*func)(int button, int state, int x, int y));
Define a callback para gerenciar eventos de mouse.
void glutIdleFunc(void (*func)(void));
Define a callback para gerenciar tarefas em background quando
nenhum outro evento está sendo executado ( comumente utilizado
em animações).
18. 18
Loop principal
● Todos os eventos do glut são executados em
um loop. É através da função glutMainLoop()
que esse loop tem início.
19. 19
OpenGL – Window-Viewport
● Existem algumas funções que governam a
relação entre o domínio da cena (onde os
objetos são definidos) e o domínio da imagem
(espaço no qual a janela é renderizada). As
principais funções são as seguintes:
● glOrtho ou gluOrtho2D
● glViewport
● glutReshapeWindow
● glutInitWindowPosition
20. 20
OpenGL – Window-Viewport
● gluOrtho2D(left, right, bottom, top)
● Define uma região de visualização ortogonal 2D ou
tela de domínio de cena. É definida por dois
planos verticais de recorte left e right e dois planos
horizontais de recorte bottom e top.
● A configuração default desta função é (-1,1,-1,1).
● Define uma matriz de projeção ortogonal 2D.
21. 21
OpenGL – Window-Viewport
● glViewport(x, y, width, height)
● Define uma área de visualização na janela da
aplicação, onde x, y especificam o canto inferior
esquerdo e width, height as suas dimensões.
● Se o comando glViewport não for definido, a área
de visualização default ocupa a área gráfica total
da janela de visualização (esta área é definida
através de funções do glut).
● Podem existir várias áreas de visualização dentro
da janela de aplicação.
22. Entidades de Visualização (resumo)
● Window (Janela de Recorte)
● É área do mundo a ser visualizada e é definida em
coordenadas do mundo
● Exemplo de comando: glOrtho
● Viewport
● Área a ser visualizada na janela do dispositivo
● É a área onde a window definida é mapeada.
● Exemplo de comando: glViewport
● Janela
● Janela do dispositivo de saída (janela física)
● Exemplo de comando e criação: glutCreateWindow
22
25. 25
Interface Gráfica
● Os exemplos com interface gráfica fazem uso da
biblioteca GLUI (OpenGL Utility Interface).
● Maiores informações a respeito desta biblioteca
podem ser encontrados no link abaixo:
http://www.cs.unc.edu/~rademach/glui/
26. 26
Saiba mais!
● Todas as funções do glut podem ser
encontradas no link abaixo:
http://www.opengl.org/documentation/specs/glut/spec3/spec3.html
● Material interessante sobre gerenciamento
de janelas em OpenGL
http://www.di.ubi.pt/~agomes/cg/teoricas/03-janelas.pdf
27. Está aula com shaders
27
Learn OpenGL
Vries, Joey. 2017
● A forma de programar os
elementos vistos nesta aula com
shaders está descrita no livro
Learn OpenGL nos seguintes
capítulos:
○ Capítulo 3 - Creating window
○ Capítulo 4 - Hello Window
○ Capítulo 5 - Hello Triangle
28. 28
Prática
● Nate Robins, atualmente desenvolvedor dos estúdios
Disney, desenvolveu uma série de tutoriais que servem de
apoio a temas específicos em cursos de Computação
Gráfica em geral. Utilizaremos este tutorial em várias de
nossas aulas.
● A parte mais interessante deste tutorial é sua interface
interativa, que possibilita simular a alteração do parâmetro
de uma determinada função e ver o resultado desta
alteração na área de renderização (exemplo no próximo
slide).
● Baixe em nosso site o arquivo “Tutors.rar”. Este arquivo já
vem com todas as bibliotecas e demais arquivos
necessários para sua execução e deve ser descompactado
fora do nosso projeto padrão.
29. 29
Prática
● Execute o workspace correspondente ao seu sistema
operacional. Ao abrir o workspace, selecione o projeto
“Primitives”.
● Para alterar o argumento de uma função, basta clicar
com o mouse sobre o parâmetro e movê-lo para cima
ou para baixo (exemplo no próximo slide).
P.S.: Existem várias opções disponíveis em cada tutorial
clicando com o botão direito do mouse, mas boa parte
delas não funcionará em Windows (problema de
incompatibilidade entre os menus do glut e mais nova
versão da freeglut). Para contornar este problema, todas
as opções mais importantes estão disponíveis também
via teclado, com instruções detalhadas no terminal.
31. 31
Exercícios
Para os exercícios a seguir, considere a análise
dos seguintes códigos
● triangle.cpp
● triangleReshape.cpp
● mouseKeyboard.cpp
32. 32
Exercício 1
Desenhe com o OpenGL as ilustrações abaixo. Deve-se
desenhar os objetos e os eixos presentes em cada
ilustração. Utilize funções de teclado para alternar entre as
quatro ilustrações.
(a) (b) (c) (d)
33. 33
Exercício 2
Baseado na técnica de discretização por amostragem linear por partes calcule e
exiba, com o auxílio do OpenGL, as ilustrações abaixo. Em (a) utilizou-se a
função seno (sin de math.h) variando o ângulo de 0º a 360º em 6 partes. Em (b)
utilizou-se a mesma função com uma amostragem de 12 partes e em (c)
utilizou-se uma amostragem mais precisa com 180 partes. Utilize a tecla 'a'
para alternar entre as curvas.
Para este exemplo considere a utilização do seguinte comando:
glOrtho(-10.0, 390, -2, 2, -1.0, 1.0);
(a) (b) (c)
P.S.: a função sin recebe o ângulo em radianos e não em graus.
34. Exercício 3
Para este exercício utilize como base o projeto
Viewport. Verifique o código e entenda o seu
funcionamento antes de prosseguir.
------------------------------------------------------------------------------------------
Desenvolva um programa que crie a ilustração do slide a
seguir. Neste programa, serão desenhadas 4 viewports, e
para cada viewport será projetada uma Window com
parâmetros diferentes. Desenvolva uma função para criar a
ilustração do canto superior esquerdo desta janela e
visualize esta ilustração por esses quatro pontos de vista
diferentes. Lembre-se de criar uma window e uma
viewport para cada um dos quadrantes da imagem ao
lado. Utilize as constantes GL_PROJECTION (para utilizar
o comando glOrtho) e GL_MODELVIEW (para viewport e
desenhos) corretamente.
34