Introdução à Opengl

(1)

Introdução à Opengl

SCC0650 - Computação Gráfica

Prof. Rosane Minghim

https://sites.google.com/site/rminghimcg/home

rminghim@icmc.usp.br

P.A.E. Kevin Apaza

k.apazah@gmail.com

Instituto de Ciências Matemáticas e de Computação (ICMC) Universidade de São Paulo (USP)

baseado no material de anos anteriores, vários autores

8 de março de 2016

(2)

Sumário

1

Instalando

2

OpenGL

2 / 28

(3)

Sumário

1

Instalando

2

OpenGL

(4)

Instalando (Ubuntu)

OpenGL Utility Toolkit (GLUT)

# apt-get install freeglut3-dev

Miscellaneous Mesa GL utilities

# sudo apt-get install mesa-utils

X11 miscellaneous utility library, X11 Input extension library

# sudo apt-get install libxmu-dev libxi-dev

Compilar o código fonte

# gcc -o foo foo.c -lglut -lGLU -lGL -lm

4 / 28

(5)

CLion (Opcional)

Instale o CLionhttps://www.jetbrains.com/clion/

Crie um Projeto e agregue a biblioteca no arquivo

"CMakeLists.txt":

1 cmake_minimum_required(VERSION 3.3) 2 project(openglteste)

3

4 set(CMAKE_CXX_FLAGS"${CMAKE_CXX_FLAGS} -Wall -Werror") 5

6 set(SOURCE_FILES main.c)

7 add_executable(openglteste ${SOURCE_FILES}) 8

9 find_package(GLUT REQUIRED)

10 include_directories(${GLUT_INCLUDE_DIRS}) 11 link_directories(${GLUT_LIBRARY_DIRS}) 12 add_definitions(${GLUT_DEFINITIONS}) 13 if(NOT GLUT_FOUND)

14 message(ERROR" GLUT not found!") 15 endif(NOT GLUT_FOUND)

16

17 find_package(OpenGL REQUIRED)

18 include_directories(${OpenGL_INCLUDE_DIRS}) 19 link_directories(${OpenGL_LIBRARY_DIRS}) 20 add_definitions(${OpenGL_DEFINITIONS}) 21 if(NOT OPENGL_FOUND)

22 message(ERROR" OPENGL not found!") 23 endif(NOT OPENGL_FOUND)

(6)

Sumário

1

Instalando

2

OpenGL

6 / 28

(7)

Introdução

Application Programming Interface (API)

Coleção de rotinas que o programador pode chamar

Modelo de como estas rotinas operam em conjunto para gerar gráficos

Programador “enxerga” apenas a interface

Não precisa lidar com aspectos específicos do hardware ou idiossincracias de software no sistema gráfico residente (independente do dispositivo)

Oferece suporte para gerar e exibir cenas 3D complexas, e

também para gráficos 2D simples

(8)

OpenGL

Ambiente p/ escrever e executar programas gráficos Monitor (“tela”) + biblioteca de software – para desenhar primitivas gráficas na tela

API pode ser vista como uma “caixa preta”

Entradas: Chamadas a funções da biblioteca feitas pelo programa do usuário; Medidas fornecidas por dispositivos de entrada; etc

Saídas: Os gráficos exibidos no monitor

Descrita em termos das funções que disponibiliza

8 / 28

(9)

API OpenGL

Programa

Em geral, trabalha com um sistema de janelas (“window system”)

Inicializações: modo de exibição (“display mode”), janela de desenho e sistema de coordenadas de referência (associado à janela)

API oferece centenas de funções...

Diferentes funcionalidades

Funções primitivas: o que

Funções de atributos: como

...

(10)

Programação Dirigida a Eventos

Direcionada a eventos (event-driven)

programa responde a eventos: clique do mouse, tecla pressionada, redimensionamento da janela

Quem chama a função para o tratamento de um evento não é o programador e sim a GLUT

O programador define apenas a função a ser chamada, respeitando os parâmetros definidos pela GLUT

10 / 28

(11)

Estados do OpenGL

OpenGL rastreia diversas variáveis de estado

Tamanho atual de um ponto, cor de fundo da janela, cor do desenho, etc.

O valor corrente permanece ativo até que seja alterado Tamanho de ponto: glPointSize(3.0)

Cor de desenho: glColor3f(red, green, blue) Cor de fundo: glClearColor(red, green, blue, alpha)

Limpar janela: glClear(GL_COLOR_BUFFER_BIT) – os bits

do “color buffer” serão modificados para a cor de fundo

(12)

Programando

OpenGL é utilizada junto com outras bibliotecas auxiliares OpenGL Utility (GLU): definir a visão, matrizes de projeção, aproximação poligonal, desenho de superfícies, etc

OpenGL Utility Toolkit (GLUT): define o sistema de janelas, e outras funções de desenho de superfície

12 / 28

(13)

Programando

Esqueleto de um programa OpenGL (event driven)

1 #include <gl/glut.h>

2

3 Definição de todas as callback functions ...

4

5 void main( )

6 {

7 Inicializações

8 Cria janela

9 glutDisplayFunc(myDisplay);

10 glutReshapeFunc(myReshape);

11 glutMouseFunc(myMouse);

12 glutKeyboardFunc(myKeyboard);

13 Outras inicializações

14 glutMainLoop(); /∗ entra loop infinito ∗/

15 }

(14)

Programando

Código para abrir um janela para desenho e desenhar um ponto (principal)

1 int main(int argc, char **argv)

2 {

3 cont=0;

4 glutInit(&argc,argv);

5 glutInitDisplayMode(GLUT_SINGLE | GLUT_RGBA | GLUT_DEPTH);

6 glutInitWindowSize(400,400); /∗ Antes do glutCreateWIndow ∗/

7 glutInitWindowPosition(1,1);

8 glutCreateWindow("Ponto");

9 gluOrtho2D(0,399,399,0); /∗ Apos CreateWindow ∗/

10 glutDisplayFunc(redesenha);

11 glutMainLoop();

12 }

14 / 28

(15)

Programando

Código para abrir um janela para desenho e desenhar um ponto (desenho do ponto)

1 void redesenha()

2 {

3 glClearColor(0.0,0.0,0.0,0.0);

4 glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT );

5 glColor3f(1.0,0.0,0.0);

6 glBegin(GL_POINTS);

7 glVertex2f(200.0,200.0);

8 glEnd();

9 glFlush();

10 }

(16)

Programando

Código para abrir criar duas janelas e desenhar o ponto em cada uma delas.

1 int main(int argc, char **argv)

2 {

3 int w,t;

4 cont=0;

5 glutInit(&argc,argv);

6 glutInitDisplayMode(GLUT_SINGLE | GLUT_RGBA | GLUT_DEPTH);

9 w= glutCreateWindow("Ponto");

10 gluOrtho2D(0,399,399,0); /∗ Apos CreateWindow ∗/

12 glutMainLoop();

16 / 28

(17)

Programando

3 int t = glutCreateWindow("Reta");

4 gluOrtho2D(0,399,399,0);

7 glutSetWindow(w);

9 glutMainLoop();

10 }

(18)

Programando

O pipeline da OpenGL é sempre 3D, mas é possível criar desenhos 2D, definindo

glMatrixMode(GL_PROJECTION) gluOrtho2D(0.0, 200.0, 0.0, 150.0)

18 / 28

(19)

Programando

OpenGL permite desenhar gráficos de modo independente do dispositivo

É possível especificar o Sistema de Coordenadas do Mundo (ponto flutuante) onde os objetos são definidos

Os elementos são traçados no Sistema de Coordenadas do Dispositivo, ou Sistema de Coordenadas da Tela (inteiro)

O mapeamento entre esses sistemas de coordenadas é feito de

forma transparente pela OpenGL

(20)

Primitivas

Traçado requer um sistema de referência para posicionamento espacial

Em CG trabalha-se com diversos sistemas de coordenadas...

Inicialmente, adotamos um muito simples Associado ao sistema de coordenadas da janela Distâncias medidas em pixels

Zero no canto superior esquerdo da janela

Primitivas básicas

Pontos, linhas, poli-linhas, polígonos (GL_POINTS, GL_LINES, GL_POLYGON, etc.)

Para descrever um objeto, uma lista de vértices é informada

1 glBegin(GL_POINTS);

2 glVertex2i(100, 50);// desenha 3 pontos

3 glVertex2i(100, 130);

4 glVertex2i(150, 130);

5 glEnd();

20 / 28

(21)

Primitivas

(22)

Tipos de Dados

OpenGL suporta um conjunto fixo de tipos dedados.

Tabela: Tipo de dados

Sufixo Tipo Tipo C Nome

b inteiro 8 bits signed char GLbyte s inteiro 16 bits short GLshort i inteiro 32 bits int/long GLint f float 32 bits float GLfloat

... ... ... ...

22 / 28

(23)

Outras Primitivas: Poli-linhas e Polígonos

Poli-linha: GL_LINE_STRIP, GL_LINE_LOOP seqüência de linhas conectadas... fechada ou não

Outras primitivas GL_TRIANGLES GL_QUADS

GL_TRIANGLE_STRIP

GL_TRIANGLE_FAN

GL_QUAD_STRIP

(24)

Outras Primitivas: Poli-linhas e Polígonos

24 / 28

(25)

Interação com o teclado

void glutKeyboardFunc(Teclado)

Trata o pressionamento de teclas comuns

void <nomeFunção> (unsigned char tecla, int x, int y) Tecla representa o código ASCII da tecla pressionada Os parâmetros x e y representam as coordenadas do mouse quando o evento ocorreu

1 void Teclado(unsigned char tecla, int x, int y)

2 {

3 if (tecla == 27) // tecla ESC

4 exit(0);

5 if (tecla == 'a') // muda para tela cheia

6 glutFullScreen();

7 if (tecla == 'A') // restaura tela

8 glutReshapeWindow(400, 400);

9 }

(26)

Interação com o mouse

void glutMouseFunc(GerenciaMouse)

Trata eventos de pressionamento e liberação de botões do mouse

void <nomeFunção> (int botao, int estado, int x, int y) botão: GLUT_LEFT_BUTTON,

GLUT_MIDDLE_BUTTON, GLUT_RIGHT_BUTTON estado: GLUT_UP, GLUT_DOWN

1 void myMouse(int button, int state, int x, int y){

2 if (button == GLUT_LEFT_BUTTON && state == GLUT_DOWN) {

3 glColor3f(1.0f, 0.0f, 0.0f);

4 glBegin(GL_POINTS)

5 glVertex2f(x, y);

6 glEnd();

7 glFlush();

8 }

9 }

26 / 28

(27)

Movimento do mouse

void glutMotionFunc(myMovedMouse) Trata eventos de movimento do mouse

void <nomeFunção> (int estado, int x, int y)

Os parâmetros x e y representam as coordenadas do mouse

1 void myMovedMouse(int MouseX, int MouseY)

2 {

3 int x = mouseX;

4 int y = ScreenHeight - mouseY;

5 int brushSize = 20;

6 glRecti(x,y, x + brushSize, y + brushSize);

7 glFlush();

8 }

(28)

Exercício

Fazer um programa que desenhe alguma imagem 2D Esse programa deve possibilitar fazer zoom e pan

Fazer um programa que possa desenhar linhas com o mouse Esse programa só deve desenhar com o mouse pressionado Esse programa deve fazer uso do teclado para trocar o cor

28 / 28