O documento introduz conceitos básicos do OpenGL e GLUT, incluindo: - OpenGL é uma API para desenvolvimento gráfico em 3D. GLUT é uma biblioteca que facilita a criação de janelas e tratamento de eventos no OpenGL. - O OpenGL funciona como uma máquina de estados que podem ser ligados ou desligados para controlar aspectos visuais. - GLUT provê funções para criação de janelas, tratamento de eventos, redraw e loop principal da aplicação.

1. Introdução ao OpenGL
Prof. Rodrigo Luis de Souza da Silva
DCC065

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).

9. 9
OpenGL – Primitivas
Primitivas removidas das versões mais modernas do OpenGL

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

23. 23

24. Entidades de Visualização
24

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.

30. 30
Prática

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

35. Exercício 3
35