introdução ao opengle à programação baseada em … · • activaoudesactivaum dado estado...

Licenciatura em Engenharia Informática e de Computadores

Computação Gráfica

Introdução ao OpenGL e à Programação Baseada em Acontecimentos

© 2015 Corpo docente de Computação Gráfica / CG&M / DEI / IST / ULisboa

Edward Angel, Cap. 2

LEIC CGAPI Gráfica

� Interface de software para hardware gráfico

� Fornece funções de baixo nível� Que permitem aceder ao hardware gráfico

� Exemplos de API’s Gráficas� OpenGL

� DirectX

� ThreeJS


LEICCG

Compreender o OpenGLIntrodução ao OpenGL


LEIC CGAPI Gráfica (OpenGL)


Application

GDI

Display Device

OpenGL

Hardware Driver

…

LEIC CGOpenGL

� Standard da indústria

� Hardware independent e OS independent

� Não oferece comandos para: � Gestão de janelas

� Obter input do utilizador

� Não tem suporte de alto nível para descrição de modelos 3D� Apenas suporta primitivas básicas


LEIC CGO que fornece o OpenGL

� Desenho com pontos, linhas, e polígonos.

� Transformações

� Remoção de superfícies ocultas (Z-Buffer)

� Efeitos de iluminação

� Sombreamento Gouraud e Constante (não Phong)

� Mapeamento de texturas

� Operações sobre pixeis


LEIC CGBibliotecas OpenGL� OpenGL Library - GL

� Biblioteca básica para aceder ao hardware gráfico� OpenGL32 no Windows� GL na maioria dos sistemas unix/linux (libGL.a )

� OpenGL Utility Library - GLU� Fornece funções utilitárias baseadas na biblioteca OpenGL

� GLX / WGL / AGL� Bibliotecas dependentes do SO � Ligam o OpenGL library ao sistema de janelas� GLX para X-window, WGL para win32, AGL para Apple

� OpenGL Utility Toolkit – GLUT� Toolkit independente do SO � “Esconde” as complexidades de usar diferentes sistemas de janelas


LEIC CGOpenGL Utility Toolkit - GLUT

� Funções usam o prefixo glut. (ex: glutDisplayFunc())

� Oferece as seguintes operações:� Inicializar e criar janelas

� Manipular acontecimentos da janela e de input

� Desenho de objectos tridimensionais básicos• Cubo, Esfera, Teapot ☺

� Execução do programa

� Todas estas operações são baseadas em acontecimentos


LEIC CGOpenGL Utility Toolkit - GLUT

� Onde encontrar a GLUT? � para Win32 e Unix:

www.opengl.org/resources/libraries/glut/

� para Mac OS X:developer.apple.com/mac/library/samplecode/glut/


LEIC CGOrganização do Software


LEIC CGComo compilar

� Em Microsoft Visual C++:� Criar novo projecto (Win32 Console Application)

� Abrir a caixa de diálogo “Project Settings” • Adicionar em Link/Objects/Library

� opengl32.lib

� glu32.lib

� glut32.lib

� Escrever o vosso código OpenGL

� Compilar e correr

…e já está !!! ☺


LEICCG

Programar em OpenGLIntrodução ao OpenGL


LEIC CGSintaxe dos comandos OpenGL

� Comandos OpenGL usam o prefixo gl e capitalizam a primeira letra de cada palavra

glPopMatrix()

� As constantes definidas no OpenGL começam com GL_, usam apenas letras maíusculas e underscores separam as palavras

GL_MODELVIEW_MATRIX




glVertex3f(…)Prefixo

OpenGLComando Número de

argumentosTipo de

argumentos



gl Vertex 3f (x,y,z)

Pertence à biblioteca GL

Função “Vértice”

x,y,z são floats

glVertex3f v(p)

p é um ponteiro para um array

3 dimensões

LEIC CGTipos de Dados no OpenGL


Tipo OpenGL Representa Equiv. em C Sufixo

GLbyte 8-bit integer signed char b

GLshort 16-bit integer short s

GLint, GLsizei 32-bit integer int or long i

GLfloat 32-bit floating float f

Glclampf 32-bit foating (clamped to [0,1])

GLdouble 64-bit floating double d

GLclampd 64-bit floating (clamped to [0,1])

Glubyte 8-bit unsigned integer unsigned char ub

GLuboolean 8-bit unsigned integer unsigned char ub

GLushort 16-bit unsigned integer unsigned short us

GLuint, GLenum 32-bit unsigned integer unsigned long ui

GLbitfield 32-bit unsigned integer

LEIC CGOpenGL - Máquina de Estados

� OpenGL é uma máquina de estados� Definem-se os estados (modos) e estes manter-se-ão em

efeito até serem alterados explicitamente• Exemplo: a cor actual é um estado

� Cada variável de estado (modo) tem um valor por omissão

� Em qualquer altura pode-se questionar o sistema sobre o estado actual



� glEnable(GLenum); glDisable(GLenum);

• Activa ou Desactiva um dado estado

� glIsEnabled(GLenum);

• Verifica se um dado estado está activado

� glGetBooleanv(GLenum);

� glGetIntegerv(GLenum);

� glGetFloatv(GLenum);

� glGetDoublev(GLenum);

� glGetPointerv(GLenum);

• Interroga o sistema sobre o estado de uma determinada variável



� Exemplo:…

if (glIsEnabled(GL_LIGHTNING)){

…

} else {

glGetFloatv(GL_CURRENT_COLOR, &c) ;

glColor4f(1.0, 0.0,0.0,1.0);

glGetFloatv(GL_CURRENT_COLOR, &c) ;

}

…


LEIC CGRepresentação da Cor

� RGBA� 4 canais : Red, Green, Blue e Alpha.

� Cada canal representa intensidade entre 0.0 ~ 1.0• Valores fora deste intervalo transformados em 0.0 ou 1.0

� Alpha é usado na transparência (e blending)• Exemplos

glColor4f(0.0, 1.0, 0.0, 1.0); // Verde

glColor4f(1.0, 1.0, 1.0, 1.0); // Branco


LEIC CGOpenGL #defines

� Constantes estão definidas nos ficheiros include

� gl.h, glu.h and glut.h

� Nota: #include <GL/glut.h> deve incluir todos

� Exemplos� glBegin(GL_POLYGON)

� glClear(GL_COLOR_BUFFER_BIT)

� Ficheiros include também definem tipos de dados:� GLfloat, GLdouble,…


LEIC CGOrientado a Objectos?

� OpenGL não é orientado a objectos

� Existem múltiplas funções para uma única função� glVertex3f

� glVertex2i

� glVertex3fv

� Seria fácil fazer overload em C++, mas sacrificava-se a eficiência


LEIC CGOrientado a Objectos?

� OpenGL não é orientado a objectos…

� ...mas as aplicações de CG interactiva geralmente são� Orientadas a objectos

� Baseadas em acontecimentos

� Vão desenvolver uma nos laboratórios!


LEICCG

Programação Baseada em Acontecimentos

Introdução ao OpenGL


LEIC CGContexto Histórico

Antes das aplicações interactivas de manipulação directa

� Arquitecturas de interacção eram muito simples:� Programas sequenciais

� Interpretadores linha de comandos (DOS, UNIX)

� Programa controla e pede entradas

� Utilizadores esperam pelo programa

� Utilizadores introduzem informação


LEIC CGProgramas sequenciais� Abordagem típica

Loop (forever)

Programa lê comando do utilizador

Programa analisa entrada

Programa avalia o resultado

Possivelmente gera saídas

End (loop)

� Problema:

� Como tratar múltiplas acções?

� Como tratar acontecimentos assíncronos?


LEIC CGModelo de Acontecimentos� Modelo desenvolvido para suportar criação de Interfaces

de Manipulação Directa

� Permite comunicação entre � objectos interactivos e o sistema de entradas/saídas� os próprios objectos entre si

� Programa não espera pelo utilizador� Continua a processar acontecimentos, se estes acontecerem,

• mesmo sem input dos utilizadores


LEIC CGModelo de Acontecimentos

� Comunicação realizada via Acontecimentos (Event)

� Acontecimento = algo interessante

� Tecla premida

� Janela redimensionada

� Acabou o tempo de vida do meu personagem

� …


LEIC CGModelo de AcontecimentosAcontecimentos armazenados em

lista de acontecimentosGestão da lista de acontecimentos assegura

que acontecimentos são tratados pela ordem em que acontecem


Mouse Move

Key Press

Event Queue

LEIC CGRegisto e Funções de Retorno� Existem inúmeros acontecimentos a acontecer no

sistema

� Nem todos nos interessam

� Aplicação deve indicar explicitamente quais os acontecimentos “interessantes”

� Registo e Funções de Retorno (callback)� Regista-se função de retorno a acontecimentos “interessante”

� Esta função deve “tratar” desse acontecimento


LEIC CG

Registo e Funções de Retorno

Exemplo� Registo de função de retorno

…

void glutKeyboardFunc( TeclaPremida )

…

� Função de Retorno

void TeclaPremida(unsigned char key, int x, int y){

if (key==‘Q’||key==‘q’)

movimento = CIMA;

}


LEIC CGOpenGL e GLUT

� OpenGL não é baseado em acontecimentos “per se”

� GLUT fornece mecanismo básico de gestão de acontecimentos em OpenGL


LEIC CGGestão de Acontecimentos com GLUT

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

glutInit(&argc, argv);………glutReshapeFunc(reshape);glutDisplayFunc(display);………glutMainLoop();return 0;

}© 2015 Corpo docente de Computação Gráfica / CG&M / DEI / IST / ULisboa

InicializaçãoRegisto

de Acontecimentos

Ciclo Principal

LEICCG

Desenhar Objectos GeométricosIntrodução ao OpenGL


LEIC CGDetalhes de um programa

� #1: Inicializar e criar a janela� void glutInit(int, char**);

• Inicializa a biblioteca GLUT

• Deve ser invocado antes de chamar qualquer rotina da GLUT

� void glutInitDisplayMode(unsigned int);

• Especifica o modo de display da janela criada� GLUT_RGBA / GLUT_INDEX

� GLUT_SINGLE / GLUT_DOUBLE

� GLUT_DEPTH, GLUT_STENCIL, GLUT_ACCUM, …



� #1: Inicializar e criar a janela

glutInit(&argc, argv);

• Inicializa a biblioteca GLUT com os parâmetros do main

glutInitDisplayMode(GLUT_RGBA|GLUT_SINGLE);

• Especifica o modo de display da janela criada como sendo RGBA e single-buffer (modos por omissão)



� #1: Inicializar e criar a janela� void glutInitWindowSize(int, int);

• Define a dimensão da janela: largura, altura

� void glutInitWindowPosition(int, int);

• Define a posição da janela no dispositivo

• Origem no canto superior esquerdo

� int glutCreateWindow(char*);

• Cria uma janela com o nome especificado

• Utilizada as definições indicadas nas funções anteriores

• Retorna um identificador único da janela



� #1: Inicializar e criar a janela

void glutInitWindowSize(int width, int height);

void glutInitWindowPosition(int x, int y);


LEIC CGDetalhes de um programa� #1: Inicializar e criar a janela

glutInitWindowSize(400, 400);� A janela terá 400px largura por 400px de altura

glutInitWindowPosition(-1, -1);� É o SO a decidir onde vai ficar a janela

int i = glutCreateWindow(“Teste”);� Cria a janela com o nome “teste” e retorna o identificador



� #2: Processar acontecimentos da janela e de input

� Registar funções de callback para processar os acontecimentos• Estas funções são chamadas quando um acontecimento é despoletado

� void glutDisplayFunc(void (*func)(void));

• Define a função a ser chamada quando o conteúdo da janela necessitar de ser redesenhado

• É dentro desta função de callback que se coloca o que se quer desenhar na janela



� #2: Processar acontecimentos da janela e de input� Registar funções de callback para processar os acontecimentos

• Estas funções são chamadas quando um acontecimento é despoletado

� glutReshapeFunc(void (*func)(int, int));

• Define a função a ser chamada quando a janela é movida ou redimensionada

• Deve-se definir aqui as coordenadas do viewport

� glutKeyboardFunc();

� glutMouseFunc();

� glutIdleFunc();

� …



� #3: Correr o ciclo principal

� void glutMainLoop(void);

• Esta função entra na rotina de processamento de acontecimentos

• Deve ser invocada uma única vez

• Depois de chamada, entra em ciclo e não sai

• Irá invocar funções de callback sempre que necessário

(as que estiverem registadas)


LEIC CGDetalhes de um programa� #2: Processar acontecimentos da janela e de

input

glutDisplayFunc(myDisplay);� Regista a função void myDisplay() como callback para o

desenho na janela

glutReshapeFunc(myReshape); � Regista a função void myReshape() como callback para o

redimensionamento ou movimento da janela

� #3: Correr o programa

glutMainLoop();


LEIC CGAgora tudo…

void main(int argc, char** argv) {


glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB);

glutInitWindowSize (400, 400);

glutInitWindowPosition (-1, -1);

glutCreateWindow(“Teste");

glutDisplayFunc(myDisplay);

glutReshapeFunc(myReshape);

glutMainLoop();

}


LEIC CG…tudo!?







glutDisplayFunc(myDisplay);

glutReshapeFunc(myReshape);

glutMainLoop();

}


LEIC CGAinda não é tudo!







glutDisplayFunc ( myDisplay );

glutReshapeFunc ( myReshape);

glutMainLoop();


LEIC CGReshape callback function

� #1: Definir o viewport� void glViewport(Glint, GLint, Glsizei, GLsizei);

• Define a transformação afim que faz o mapeamento janela-viewport� Mapeamento janela-viewport: já têm uma ideia, mas iremos voltar aqui

� Transformação afim: a abordar em breve




� #1: Definir o viewport� void glViewport(Glint, GLint, Glsizei, GLsizei);

x y w h



� #1: Definir o viewportglViewport(0, 0, window_width, window_height);


� #2: Definir a projecção� void glMatrixMode(GLenum);

• Especifica qual é a pilha de matrizes que estará “activa”� As operações subsequentes irão afectar esta pilha



� #2: Definir a projecção� glMatrixMode(GL_PROJECTION);

• Especifica que a matriz de projecção é a “actual”



� #2: Definir a projecção� void glLoadIdentity(void);

• Substitui o conteúdo da matriz no topo da pilha actual pela identidade� Referida como matriz actual (current matrix)




� #2: Definir a projecção� void glLoadIdentity(void);

• Substitui o conteúdo da matriz no topo da pilha actual pela identidade � Referida como matriz actual (current matrix)


� #2: Definir a projecção� void glOrtho( Gldouble left, Gldouble right, Gldouble

bottom, Gldouble top, Gldouble nearVal, GldoublefarVal);

• Define o volume de visualização para projecção paralela ortogonal� Por omissão a câmara está na origem

• Multiplica a matriz actual por uma transformação de projecção



� #2: Definir a projecção

glOrtho( -2.0f, 2.0f, -2.0f, 2.0f, -2.0f, 2.0f);

left right bottom top -near -far

(-2, -2, 2)

(2, 2, -2)



� #2: Definir a projecção

glOrtho( -2.0f, 2.0f, -2.0f, 2.0f, -2.0f, 2.0f);

left right -near -farbottom top



� #3: Inicializar a matriz de modelação-visualização

� glMatrixMode(GL_MODELVIEW);

• Especifica que a matriz de modelação-visualização é a “actual”



� #3: Inicializar a matriz de modelação-visualização

� glMatrixMode(GL_MODELVIEW);

• Especifica que a matriz de modelação-visualização é a “actual”

� glLoadIdentity();



void myReshape(GLsizei w, GLsizei h) {

glViewport(0, 0, w, h);

glMatrixMode(GL_PROJECTION);

glLoadIdentity();

glOrtho(-2.0f, 2.0f, -2.0f, 2.0f, -2.0f, 2.0f);

glMatrixMode(GL_MODELVIEW);

glLoadIdentity();

}


LEIC CGDisplay callback function

� Passos fundamentais:

�#1: Limpar os buffers

�#2: Descrever Pontos, Linhas, e Polígonos

�#3: Forçar o processamento do desenho


LEIC CG

Display callback function

#1: Limpar os buffers� glClearColor (…); glClearDepth (…);

� Definem os valores a serem usados (clearing values) nalimpeza dos buffers de cor ou profundidade

� glClear (GLbitfield mask);� Limpa os buffers especificados em mask, de acordo com os

clearing values definidos• GL_COLOR_BUFFER_BIT,

• GL_DEPTH_BUFFER_BIT,

• …


LEIC CG


#1: Limpar os buffers

glClearColor(0.0f, 0.0f, 0.0f, 0.0f);

void glClear(GL_COLOR_BUFFER_BIT);


LEIC CG

� Especificar a cor� void glColor {34}{sifd}[v](TYPE colors);

� Descrever as primitivas� void glBegin(GLenum mode);

• Marca início de uma lista de vértices

• mode indica que tipo de primitiva é (vamos ver a seguir)

� void glEnd();

• Marca o fim da lista de vértices



#2: Pontos, Linhas e Polígonos

LEIC CG




Value Meaning

GL_POINTS individual points

GL_LINES pairs of vertices interpreted as individual line

segments

GL_LINE_STRIP serious of connected line segments

GL_LINE_LOOP same as above, with a segment added between

last and first vertices

GL_TRIANGLES triples of vertices interpreted as triangles

GL_TRIANGLE_STRIP linked strip of triangles

GL_TRIANGLE_FAN linked fan of triangles

GL_QUADS quadruples of vertices interpreted as four-sided

polygons

GL_QUAD_STRIP linked strip of quadrilaterals

GL_POLYGON boundary of a simple, convex polygon

LEIC CG




GL_QUAD_STRIP

GL_POLYGON

GL_TRIANGLE_STRIP

GL_TRIANGLE_FAN

GL_POINTS

GL_LINES

GL_LINE_LOOP

GL_LINE_STRIP

GL_TRIANGLES

LEIC CG


#2: Pontos, Linhas e Polígonos� Chamadas válidas entre glBegin () e glEnd ()

� glVertex*(); glNormal*(); glColor*(); glIndex*(); glTexCoord*(); glMaterial*(); …

� Especificação de vértices� glVertex{234}{sifd}[v](TYPE coords);

• Especificação do vértice a ser usado na descrição do objecto • Só tem efeitos se invocado entre glBegin() e glEnd()


LEIC CG


#2: Pontos, Linhas e Polígonos� OpenGL apenas desenha correctamente polígonos

que sejam:� Simples: arestas não se cruzam

� Planares: todos os vértices estão no mesmo plano

� Convexos: todos os pontos num segmento de recta entre quaisquer dois vértices no polígono pertencem ao polígono


V0 V1

V2 V3

LEIC CG


#2: Pontos, Linhas e Polígonos� OpenGL apenas desenha correctamente polígonos

que sejam:� Simples: arestas não se cruzam

� Planares: todos os vértices estão no mesmo plano

� Convexos: todos os pontos num segmento de recta entre quaisquer dois vértices no polígono pertencem ao polígono

� Validar condições acima� Resultados inesperados se não respeitadas

� Triângulos satisfazem sempre estas condições


LEIC CG



glColor3f(1.0f, 1.0f, 1.0f);

glBegin(GL_POLYGON);

glVertex3f(-1.0f, -1.0f, 0.0f);

glVertex3f(1.0f, -1.0f, 0.0f);

glVertex3f(1.0f, 1.0f, 0.0f);

glVertex3f(-1.0f, 1.0f, 0.0f);

glEnd();


LEIC CG


#3: Forçar processamento� void glFlush (…);

� Força todos os comandos a serem processados• Diferentes implementações do GL usam buffers de comandos em

locais distintos, incluindo buffers de rede e aceleradores gráficos

• Esta chamada “esvazia” estes buffers, fazendo com que os comandossejam processados pelo rendering engine

� Deve ser invocada sempre que o desenho estiver terminado• Especialmente quando se fica à espera de input do utilizador que

depende da imagem gerada


LEIC CGDisplay callback function

void myDisplay(void) {

glClearColor(0.0f, 0.0f, 0.0f, 0.0f);

glClear(GL_COLOR_BUFFER_BIT);

glColor3f(1.0f, 1.0f, 1.0f);

glBegin(GL_POLYGON);

glVertex3f(-1.0f, -1.0f, 0.0f);

glVertex3f(1.0f, -1.0f, 0.0f);

glVertex3f(1.0f, 1.0f, 0.0f);

glVertex3f(-1.0f, 1.0f, 0.0f);

glEnd();

glFlush();


#1

#2

#3

LEIC CG


#include <GL/glut.h>

void myReshape(GLsizei w, GLsizei h) {glViewport(0, 0, w, h);glMatrixMode(GL_PROJECTION);glLoadIdentity();glOrtho(-2.0f, 2.0f, -2.0f, 2.0f, -2.0f, 2.0f);glMatrixMode(GL_MODELVIEW);glLoadIdentity();

}

void main(int argc, char** argv) {glutInit(&argc, argv);glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB);glutInitWindowSize (400, 400);glutInitWindowPosition (-1, -1); glutCreateWindow("Teste"); glutDisplayFunc(myDisplay);glutReshapeFunc(myReshape);glutMainLoop();

}

void myDisplay(void) {glClearColor(0.0f, 0.0f, 0.0f, 0.0f);glClear(GL_COLOR_BUFFER_BIT);glColor3f(1.0f, 1.0f, 1.0f);glBegin(GL_POLYGON);

glVertex3f (-1.0f, -1.0f, 0.0f);glVertex3f (1.0f, -1.0f, 0.0f);glVertex3f (1.0f, 1.0f, 0.0f);glVertex3f (-1.0f, 1.0f, 0.0f);

glEnd();glFlush();

}

LEIC CGResultado final


LEIC CGCiclo Update/Display


LEIC CG

E o trabalho de laboratório é… Micro Machines:


LEIC CG... mas mais parecido com:


LEIC CGNa próxima aula

Enquadramento e Conceitos Fundamentais

Conceitos básicos de Computação Gráfica

Modelo Conceptual de um Sistema Gráfico Interactivo

Dispositivos de SaídaMatemática para CG (inclui trigonometria e matrizes)


Edward Angel, Cap. 3

introdução ao opengle à programação baseada em … · • activaoudesactivaum dado estado...

Documents