Matemática e Física Aplicada a Jogos

Prévia do material em texto

- -1
MATEMÁTICA E FÍSICA APLICADA A 
JOGOS
UNIDADE 1 - GEOMETRIA E MECÂNICA 2D
Isabel Cristina Siqueira da Silva
- -2
Introdução
A presente unidade trata dos principais conceitos relacionados à base Matemática e Física dos conteúdos
gráficos e interativos necessários à construção de jogos digitais no espaço 2D. Neste sentido, considerando jogo
estilo , como você imagina que o tiro é animado e como se detecta que este acertou o alvo?space shooter 2D
Quem tem ideia de como e por que conceitos de translação, rotação e escala são empregados em jogos digitais?
Em jogos 2D de plataforma, como se calcula e se implementa um salto de um personagem? Como é
implementada a colisão de um objeto com limites laterais, superior e inferior em um sistema de coordenadas
cartesianas? Como coincidir a colisão com os limites citados anteriormente com as bordas da janela gráfica?
Esta unidade aborda conceitos que auxiliarão nas respostas a tais questões, envolvendo: visão geral sobre
sistemas gráficos interativos, modelagem geométrica de objetos 2D no sistema cartesiano, transformações
geométricas de objetos 2D, focando, principalmente, em translação, escala e rotação, animação de objetos,
explorando conceitos de aceleração e colisão, além de meios de realizar a interação gráficas com tais objetos.
Espera-se, assim, que esta unidade introduza os principais conceitos 2D envolvidos com a criação de jogos
digitais empregando-se, para tanto, a biblioteca gráfica OpenGL.
1.1 Geração de Imagens Gráficas
Esta seção aborda conceitos introdutórios relacionados à geração de imagens gráficas e sua aplicação em
sistemas gráficos interativos, abordando a sua evolução.
Uma das principais ciências que permitem o desenvolvimento de sistemas gráficos é a computação gráfica, a qual
tem por objetivo a produção de imagens gráficas a partir de dados, sendo responsável pela visualização e pelo 
 de objetos bidimensionais (2D) e, principalmente, tridimensionais (3D) (GOMES, 2008). Para tanto,rendering
conceitos de geometria analítica e álgebra linear, relativos à modelagem geométrica de objetos no plano e no
espaço, se fazem necessários (ver tabela a seguir).
VOCÊ SABIA?
Sistemas gráficos interativos (SGI) estão cada dia mais presentes na vida das pessoas, como na
área de entretenimento (indústrias cinematográfica, televisiva e da área de jogos eletrônicos),
simulação de atividades específicas (Aeronáutica, Medicina, Arquitetura e Urbanismo, Design,
Indústria, Meteorologia etc.) e/ou na área da Educação, auxiliando o desenvolvimento de
ambientes virtuais de aprendizagem, jogos lúdicos, entre outras.
- -3
Tabela 1 - Objeto 3D versus objeto 2D.
Fonte: Elaborado pelo autor, 2019.
Técnicas de CG permitem a geração de imagens de modelos que, por sua vez, podem corresponder a uma
representação computacional de um objeto real ou imaginário ou a um conjunto de dados descrevendo uma
entidade ou fenômeno.
1.1.1 Pipeline de Visualização
As etapas de geração de uma imagem por CG podem ser sintetizadas em um pipeline de visualização, seja no
espaço 2D ou no espaço 3D. Como etapas deste pipeline, temos: modelagem geométrica, instanciamento, recorte,
mapeamento e conversão vetorial-matricial (ver figura a seguir).
Figura 1 - Pipeline de visualização.
Fonte: Elaborado pelo autor, 2019.
Este pipeline é seguido tanto para a visualização 2D como para a visualização 3D, com pequenas adequações a
cada espaço de coordenadas.
CASO
A seguir, apresentamos um breve histórico com os principais fatos que marcaram a evolução
- -4
A seguir, apresentamos um breve histórico com os principais fatos que marcaram a evolução
das técnicas de desenvolvimento de sistemas gráficos.
1906 – Lee De Forest desenvolve a válvula ( );audion vacuum tube amplifier
1926 – John Logie Baird apresenta o primeiro protótipo de televisão;
1930 – e criam o ENIAC (John Eckert John Mauchly Electronic Numerical Integrator And
), o primeiro computador eletrônico.Computer
1950 – o MIT ( ) apresenta o primeiro computadorMassachusetts Institute of Technology
gráfico chamado Whirlwind, desenvolvido com finalidades acadêmicas e militares para
aplicações de aerodinâmica e simulação de voo;
1955 – Desenvolvimento do SAGE ( ), sistema de defesaSemi-Automatic Ground Environment
antiaérea dos Estados Unidos, o qual teve como base o computador Whirlwind.
1962 – Ivan Sutherland, do MIT, apresenta o , primeiro editor gráfico que servirá deSketchpad
base das interfaces gráficas interativas. O é voltado para indústrias automobilísticasSketchpad
e aeroespaciais.
1963 – Edward Zajac produz, nos Laboratórios Bell, o primeiro filme gerado por computador: “
” (sistema de controle de gradientes deA two gyro gravity gradient altitude control system
ângulos de giro);
1963 – Inspirada no Sketchpad, a GM desenvolve o DAC-1 ( ),Design Augmented by Computer
precursor dos sistemas CAD ( );Computer Aided Design
1966 – Ivan Sutherland, trabalhando para a Bell Helicopter Company, desenvolve o primeiro 
 (HMD), um capacete que produzia um efeito estereoscópico através deHead Mounted Display
duas imagens em monitores projetadas diretamente sobre os olhos e que, acoplado a uma
câmera infravermelha, possibilitava a um piloto militar um pouso noturno em terreno
desconhecido;
1967 - Rod Rougelet apresenta o primeiro simulador interativo de voo desenvolvido para a
NASA;
1970 – a Xerox PARC ( ) inventa a interface gráfica;Palo Alto Research Center
1972 – Alan Kay, trabalhando para a Xerox PARC, apresenta o protótipo de um computador
pessoal ( ) para o uso em ambiente de escritório;Alto computer
1972 – Nolan Bushnell e Ted Dabney desenvolvem Pong, o primeiro videogame, e fundam a
empresa Atari;
1973 – Ocorre a primeira conferência SIGGRAPH (International Conference on Computer
);Graphics and Interactive Techniques
1979 – George Lucas funda a ;Lucasilm
1980 – Disney usa CG em um filme pela primeira vez: TRON;
1980 – Dave Zeltzer ( ) desenvolve aFraunhofer Center for Research in Computer Graphics
animação SAS ( ), que apresenta o movimento de um esqueletoSkeleton Animation System
articulado;
1983 – ILM ( ), uma das subdivisões da Lucasfilm, utiliza CG no filmeIndustrial Light & Magic
“Star Trek II - The Wrath of Khan”;
1984 – apresenta “ ”, desenho animado de curtaLucasfilm As aventuras de André & Wally B.
duração criado totalmente por computador exibido no Festival Internacional de Animação em
Toronto;
1986 – "Luxo Jr." foi o primeiro curta animado por computador, da , aPixar Animation Studios
receber uma indicação ao Oscar de Melhor Curta Animado;
1987 – Criação do padrão VGA ( ) pela IBM;Video Graphics Array
1992 – Surge a biblioteca gráfica de programação OpenGL ( ) propostaOpen Graphics Library
pela SGI ( .);Silicon Graphics, Inc
1995 – A produz , o primeiro filme longa metragem totalmente animado porPixar Toy Story
- -5
O pipeline 3D é similar ao pipeline 2D, com a diferença de que devem ser definidos a câmera sintética (ou
virtual) e o tipo de projeção utilizado para a geração da imagem (ver figura a seguir). Ressaltamos também que
os pontos dos objetos são expressos a partir de três coordenadas .
Figura 2 - Pipeline 3D.
Fonte: Elaborado pelo autor, 2019.
Tanto o pipeline de visualização 2D quanto o pipeline de visualização 3D são implementados por sistemas
gráficos interativos, os quais são abordados na próxima subseção.
1.1.2 Sistemas Gráficos Interativos
Um sistema gráfico interativo (SGI) tradicional é responsável por percorrer a estrutura de dados que descreve
um objeto e gerar a imagem deste utilizando funções da API (application programming interface) gráfica.
O processamento gráfico é decomposto em diversas atividades representadas por etapas ou estágios funcionais.
Cada uma destas etapas é implementada por um ou mais estágios correspondentes no gráfico. Ahardware
aplicação, responsável pelo envio de comandos a serem executados pelos demais estágios do pipeline gráfico,
1995 – A produz , o primeiro filme longa metragem totalmente animado porPixar Toy Storycomputador;
1995 – A lança o ;Sony Playstation
1996 – lança o jogo ;id Software Quake
1998 – A ganha o Oscar de Melhor Curta De Animação com “Geri’s Game”.Pixar
- -6
aplicação, responsável pelo envio de comandos a serem executados pelos demais estágios do pipeline gráfico,
roda no processador central da estação de trabalho ou unidade central de processamento (CPU). Os demais
estágios são implementados por uma unidade de processamento especializada, a unidade de processamento
gráfico (GPU).
O subsistema de processamento gráfico nos computadores pessoais modernos tem evoluído em velocidade mais
acelerada do que a evolução das CPUs. O subsistema gráfico é composto por uma placa de expansão (placa de
vídeo) que conecta com o sistema através de barramentos PCI, AGP ou . A GPU situa-se na placa dePCI-Express
vídeo e também é referenciada por VPU (Unidade de Processamento Visual). As imagens geradas pelo sistema
gráfico são armazenadas em espaços de memória denominado .buffers
1.1.3 OpenGL
OpenGL ( ) é uma API destinada às funções de saída (exibição) 2D e 3D que deve ser usadaOpen Graphics Library
juntamente a alguma linguagem de programação (C, C++, Java, Objetc Pascal/Delphi, entre outras). OpenGL é
formada por três outras bibliotecas, a saber: a GL ( ), responsável pelas primitivas geométricas eGraphics Library
gráficas e pelo controle de atributos; a GLU ( ), que fornece funções para a criação deGraphics Utility Library
objetos mais complexos; e a GLUT ( ), responsável pelas funções para comunicação com sistemaGL Utility Toolkit
de janelas. A GL, a GLU e a GLUT são disponibilizadas para diferentes sistemas operacionais, em pacotes
específicos e podem ser obtidos através de vários devido à larga aplicação desta API.sites
1.2 Representação 2D
Para a representação computacional de um objeto devemos, inicialmente, definir a descrição geométrica (forma
e posição) e os seus atributos visuais (cor, transparência, material etc.). A descrição geométrica será realizada
em relação à dimensionalidade do objeto e, para tanto, devemos definir se a visualização do mesmo se dará no
espaço bi (2D) ou tridimensional (3D).
Além disso, também é necessário definir em que sistema de coordenadas o objeto será descrito, de modo a obter
uma referência para a descrição geométrica do objeto dentro da área de trabalho. Tal sistema recebe a
denominação de sistema de referência do universo (SRU) (ver figura a seguir).
Figura 3 - Sistemas de coordenadas cartesianas: (a) espaço 2D; (b) espaço 3D.
Fonte: Elaborado pelo autor, 2019.
Como vemos na figura anterior, as definições de objetos, no SRU, se dão em relação ao sistema de coordenadas
cartesianas (sistema cartesiano), o qual é formado no espaço 2D pelos eixos e no espaço 3D pelos eixos 
.
- -7
.
1.2.1 Sistema de Coordenadas 2D
No espaço 2D, o objeto é definido no plano do SRU (coordenadas ). Para tanto, informações sobre a
topologia (definição de arestas e faces que ligam os vértices) e sobre a geometria (localização dos elementos
topológicos no espaço) devem ser especificadas (ver figura a seguir).
Além do SRU, pode-se definir uma entidade em função do seu próprio sistema de referência – o sistema de
referência do objeto (SRO).
Figura 4 - Sistema de referência do objeto.
Fonte: Elaborado pelo autor, 2019.
Além do SRU, pode-se definir uma entidade em função do seu próprio sistema de referência – o sistema de
referência do objeto (SRO).
Figura 5 - Sistema de referência do objeto.
Fonte: Elaborado pelo autor, 2019.
- -8
OpenGL disponibiliza primitivas geométricas básicas, como pontos, retas, triângulos, quadrados e polígonos. Tais
primitivas são agrupamentos de vértices e especificadas em função do seu tipo, do número de vértices e do tipo
de dado.
1.2.2 tColisão
O conceito de colisão 2D no espaço está relacionado a desenvolver um método de identificar se a posição de dois
objetos no espaço 2D coincide, principalmente quando estes são animados por transformações geométricas.
Desta forma, compara-se as coordenadas de cada vértice de um objeto com as coordenadas x e y de outro
objeto, de modo a analisar suas posições no espaço 2D.
1.3 Transformações Geométricas 2D
Após a modelagem geométrica do objeto e da definição de seus atributos, este deve ser instanciado e, para tanto,
transformações geométricas são aplicadas. São estas que permitem a animação de objetos a partir da definição
de movimentos, giros, saltos etc.
As transformações geométricas alteram os vértices dos objetos e mantém as arestas, ou seja, altera sua
geometria mantendo a topologia. Das transformações existentes, três principais serão abordadas neste capítulo.
Clique nos itens e veja quais são elas.
Translação
Rotação
Escala
Para tanto, será realizada uma revisão de alguns conceitos de álgebra linear.
1.3.1 Translação
A translação no espaço 2D permite a movimentação do objeto, no SRU, nos sentidos dos eixos cartesianos x e y.
Para tanto, as coordenadas do objeto devem ser incrementadas (se a direção é positiva) ou decrementadas (se a
direção é negativa) de acordo com fatores de translação para x e y. Para efetuar a translação de um vértice V
para uma posição , devemos adicionar às suas coordenadas do mesmo o fator t de translação desejado
(Equação 1).
 Equação 1
No exemplo da figura a seguir, foi aplicada a translação aos vértices do objeto V1, V2 e V2 obtendo-se,
VOCÊ QUER VER?
O vídeo a seguir aborda a detecção de colisão entre objetos 2D usando a linguagem C++ com a
biblioteca gráfica Allegro, voltada ao desenvolvimento de jogos simples. Acesse:
https://www.youtube.com/watch?v=prJXXSz-tkw
- -9
No exemplo da figura a seguir, foi aplicada a translação aos vértices do objeto V1, V2 e V2 obtendo-se,
assim, os novos vértices .
Figura 6 - Exemplo de translação aplicada a um objeto no espaço 2D.
Fonte: Elaborado pelo autor, 2019.
Em um jogo digital, a movimentação de um objeto do cenário é realizada através da transformação geométrica
de translação. No entanto, a maioria das encapsula tais cálculos, que não são visíveis para ogame engines
usuário.
1.3.2 Escala
Para aplicar a transformação de escala sobre as coordenadas x e y de um objeto, é preciso definir um fator de
escala e que será multiplicado pelas mesmas (Equação 2).
 Equação 2
No exemplo da próxima figura, podemos observar o resultado do fator de escala aplicado às coordenadas
dos vértices V1, V2 e V3 resultando no novo objeto formado pelos vértices .
- -10
Figura 7 - Exemplo de escala aplicada a um objeto no espaço 2D.
Fonte: Elaborado pelo autor, 2019.
A escala, quando aplicada a um objeto que não se encontra na origem do SRU, gera uma translação involuntária.
Figura 8 - Escala com translação involuntária.
Fonte: Elaborado pelo autor, 2019.
Para que tal fato não ocorra, deve-se definir um ponto do objeto em torno do qual se deseja aplicar a escala e,
então, calcular a translação necessária para levá-lo para a origem. Uma vez calculada tal translação, aplica-se a
mesma às coordenadas dos vértices do objeto de modo a transladá-lo para a origem.
Por exemplo, a figura a seguir apresenta a escala sobre o objeto da figura anterior (“Escala com translação
involuntária”) tomando-se por base o ponto central do mesmo: P(1.5, 1.5). A translação necessária para levá-lo
para a origem é de . Aplicando-se t aos vértices V1, V2, V3 e V4, obtém-se o objeto transladado
para a origem, com seu vértice central coincidindo com esta. A seguir, aplica-se a escala sobre todos os
- -11
para a origem, com seu vértice central coincidindo com esta. A seguir, aplica-se a escala sobre todos os
vértices do objeto e translada-o novamente para a posição original com a translação .
Figura 9 - Escala relativa a um ponto do objeto: (a), (b), (c) e (d) apresentam, respectivamente, as etapas de 
realização da escala.
Fonte: Elaborado pelo autor, 2019.
A seguir, veremos sobre rotação.
1.3.3 Rotação
A rotação de um objeto no espaço 2D pode ser positiva (sentido anti-horário) ou negativa (sentido horário).
Assim, paraefetuar a rotação de um vértice para uma posição , deve-se definir o ângulo desejado, bem
como o sinal deste, e aplicar as equações 3 e 4 sobre as coordenadas de .
 Equação 3
 Equação 4
A figura a seguir apresenta um exemplo de rotação, com aplicado aos vértices V1, V2 e V3 do objeto
triângulo.
- -12
Figura 10 - Exemplo de rotação aplicada a um objeto no espaço 2D.
Fonte: Elaborado pelo autor, 2019.
As Equações 2 e 3, apresentadas anteriormente, são definidas em função do seno e do cosseno do
ângulo .
A exemplo da operação de escala, quando se deseja aplicar a rotação sobre o objeto em relação a um
determinado ponto P deste, deve-se calcular a translação necessária para levar tal ponto à origem do SRU. A
seguir, aplica-se a rotação desejada e, então, translada-se o objeto novamente para sua posição original em
relação ao ponto P. A figura a seguir ilustra tal operação.
- -13
Figura 11 - Rotação relativa a um ponto do objeto: (a), (b), (c) e (d) apresentam, respectivamente, as etapas de 
realização da rotação.
Fonte: Elaborado pelo autor, 2019.
Em um jogo digital, a rotação de um objeto em torno do seu eixo ou do eixo de outro objeto do cenário é
realizada através da transformação geométrica de rotação. No entanto, tal como ocorre com a translação e com a
escala, a maioria das encapsula tais cálculos, que não são visíveis para o usuário.game engines
1.3.4 Representação Matricial 2D
Nos exemplos de translação, escala e rotação apresentados, notamos que tais operações devem ser aplicadas a
cada vértice do objeto separadamente. Tais operações podem ser realizadas, também, através da manipulação de
matrizes e, para tanto, os vértices do objeto devem ser agrupados em uma matriz bem como cada uma das
transformações geométricas.
A fim de exemplificar a operação de translação por manipulação de matrizes, toma-se por base um objeto
formado por três vértices V1, V2 e V3. O primeiro passo é expressar seus vértices em forma de matriz (matriz O)
e o fator de translação como uma matriz linha (matriz T). A seguir, realiza-se a soma entre as matrizes,
resultando na matriz como pode ser observado na Equação 5.
O + =O’ Equação 5
Da mesma forma, a operação de escala também pode ser representada por uma matriz E, como pode ser
observado na Equação 6 (exemplo para três vértices V1, V2 e V3 de um objeto).
- -14
O =O’ Equação 6
A realização da operação de rotação através da manipulação de matrizes deve ser realizada tal como é
apresentado na Equação 7.
O =O’ Equação 7
Anteriormente, vimos que a escala e a rotação em torno de um ponto qualquer precisa utilizar operações de
translação. Tal fato prejudica a eficiência do processo de visualização no sistema gráfico, uma vez que aumenta a
complexidade da realização de transformações geométricas.
A fim de atenuar tal processo, utiliza-se a multiplicação matricial, a qual permite a concatenação de mais de uma
operação em uma única matriz. Para tanto, nota-se que as operações de escala e rotação já são realizadas através
de multiplicação matricial; porém, a translação constitui-se de uma operação de soma, fato que não permite sua
combinação com a escala e com a rotação.
Pode-se, contudo, reformular a matriz de translação a fim de realizar tal operação através de multiplicação
matricial. No entanto, esta reformulação necessita da utilização do conceito de coordenadas homogêneas, de
modo a permitir a multiplicação das coordenadas dos vértices do objeto pela matriz de translação gerando,
assim, a mesma transformação obtida através da soma apresentada na Equação 5.
No espaço 2D, os vértices do objeto são expressos através de suas coordenadas x e y. O sistema de coordenadas
homogêneas, por sua vez, utiliza três valores para representar um vértice: ou . A transformação
do sistema homogêneo para o sistema cartesiano se dá através da relação expressa na Equação 8.
 Equação 8
Assim, a matriz responsável por realizar a translação através de multiplicação matricial pode ser observada na
Equação 9.
 Equação 9
Porém, para que tal matriz possa ser aplicada ao objeto expresso em coordenadas homogêneas, é necessário
aumentar a mesma a partir da inclusão de uma coluna à direita, transformando-a em matriz canônica. A Equação
10 apresenta um exemplo de aplicação desta matriz sobre um objeto formado pelos vértices V1, V2 e V3
expressos em coordenadas homogêneas.
 Equação 10
Devido ao aumento da matriz de translação, para que as matrizes de escala e de rotação possam ser
concatenadas à mesma, é necessário aumentar estas também. Assim, as matrizes canônicas de escala e de
rotação podem ser observadas, respectivamente, nas Equações 11 e 12.
A partir das matrizes canônicas apresentadas, as operações de escala e rotação em torno de um ponto P
qualquer a partir da concatenação destas com a matriz canônica de translação.
Assim, a Equação 13 apresenta a matriz responsável por concatenar as transformações de translação do
objeto para a origem , de escala E e de translação de volta para a posição original .
• =
Equação 13
A Equação 14 traz a concatenação das transformações de translação do objeto para a origem , de rotação
R e de translação de volta para a posição original a fim de formar a matriz responsável pela rotação
do objeto em torno de um determinado ponto.
- -15
do objeto em torno de um determinado ponto.
• =
Equação 14
Em OpenGL, as transformações geométricas são realizadas através de multiplicação matricial. OpenGL empilha
as chamadas das transformações geométricas e as chamadas de desenho na “ModelView”, de acordo com a
ordem das chamadas dentro da rotina passada para a função “glutDisplayFunc” (nos exemplos, a rotina
“DesenhaCena”).
O quadro a seguir apresenta um exemplo de código para desenho de três quadrados. Em tal código, a exemplo
dos demais códigos apresentados, a rotina “DesenhaCena” é a responsável pela definição da cena, a ser exibida
na imagem final, e é nela que foram inseridas as chamadas das transformações geométricas.
- -16
- -17
Quadro 1 - Código de um programa OpenGL para desenho de três quadrados utilizando transformações 
geométricas.
Fonte: Elaborado pelo autor, 2019.
A figura a seguir, por sua vez, traz a imagem gerada pelo código do quadro anterior.
- -18
Figura 12 - Imagem gerada pelo código apresentado no Quadro 3.
Fonte: Elaborado pelo autor, 2019.
A ordem de chamada das funções dentro da “DesenhaCena” define o modo como os objetos serão exibidos. No
código do quadro anterior (“Código de um programa OpenGL para desenho de três quadrados utilizando
transformações geométricas”), o quadrado 3 (verde) sofre todas as transformações chamadas antes de sua
exibição: escala, rotação e duas translações. Já o objeto 2 (azul) sofre apenas uma translação (a de )
enquanto o objeto 1 (vermelho) não sofre transformações, uma vez que não há nenhuma chamada antes da sua
função de desenho em meio ao código.
Todas as chamadas de desenho e de transformações listadas no código anterior são empilhadas e, somente após
do empilhamento de todas estas, a cena será gerada com a aplicação da matriz “ModelView”. A figura a seguir
apresenta a imagem resultante do código do quadro anterior (“Código de um programa OpenGL para desenho de
três quadrados utilizando transformações geométricas”).
- -19
Figura 13 - Ordem de desenho da cena referente ao código do Quadro 3.
Fonte: Elaborado pelo autor, 2019.
No entanto, podemos desejar isolar as transformações entre os objetos da cena, de modo que as transformações
de uma não interfiram no outro (como ocorre com o objeto 3 que, como o objeto 2, também sofre a translação de 
). Para tanto, OpenGL possui duas funções especiais – a “glPushMatrix” e a “glPopMatrix” – encarregadas
de empilhar e desempilhar transformações na matriz corrente (“ModelView”), respectivamente.
Observe o código anterior alterado com a inclusão das funções “glPushMatrix” e “glPopMatrix” no quadro a
seguir.
- -20
- -21
Quadro 2 - Código do quadro anterior com a inclusão das funções “glPushMatrix” e “glPopMatrix”.Fonte: Elaborado pelo autor, 2019.
A seguir, a figura apresenta a imagem gerada pelo código do quadro anterior.
- -22
Figura 14 - Imagem gerada pelo código apresentado no quadro anterior.
Fonte: Elaborado pelo autor, 2019.
Após a aplicação de transformações geométricas sobre objetos de uma cena gráfica, passa-se para a etapa de
recorte, onde é definida que parte da cena será exibida na imagem. A próxima seção apresenta os aspectos da
etapa de recorte.
1.4 Recorte 2D
Após a realização da modelagem geométrica de um objeto e do instanciamento deste, é necessário definir a
região da cena que será exibida na imagem final. Para tanto, conceitos de recorte 2D e de mapeamento de
imagem, no SRU, para coordenadas de tela devem ser aplicados.
Neste sentido, esta seção aborda relação “viewport x janela de exibição x tela do dispositivo gráfico” e traz
VOCÊ QUER LER?
A leitura dos capítulos 1 e 2 (2.1 e 2.2) do livro “Introduction to Computer Graphics” (ECK,
2018) reforça a apresentação dos conteúdos apresentados nesta unidade. Acesse:
http://math.hws.edu/eck/cs424/downloads/graphicsbook-linked.pdf.
- -23
Neste sentido, esta seção aborda relação “viewport x janela de exibição x tela do dispositivo gráfico” e traz
exemplos e conceitos implementados com a biblioteca gráfica OpenGL. Já no espaço 3D, esses conceitos estão
relacionados à definição de projeções e câmera.
1.4.1 Recorte 2D e Exibição da Imagem
O processo de recorte 2D, ou , visa a definir a área do SRU que será visível na imagem final. Para tanto, éclipping
preciso definir uma janela de recorte tal como exemplificado na figura a seguir.
Figura 15 - Exemplo de recorte 2D.
Fonte: Elaborado pelo autor, 2019.
Assim que a porção visível do SRU é definida através do recorte, esta deve ser mapeada para a imagem e, para
tanto, as dimensões da imagem devem ser especificadas cuidando a relação entre recorte e imagem.
O recorte aplica procedimentos específicos para o recorte de pontos, retas e ou polígonos (ver figura a seguir).
- -24
Figura 16 - Diferentes tipos de recorte 2D: (a) Pontos; (b) Retas; (c) Polígonos.
Fonte: Elaborado pelo autor, 2019.
Após a delimitação da região visível do SRU pelo recorte, devemos realizar a conversão vetorial-matricial, em
que são definidos quais pixels da imagem final devem ser “pintados”, de modo a exibir os objetos modelados.
Algoritmos clássicos da Computação Gráfica para recorte e conversão vetorial-matricial não serão descritos
neste material, mas recomenda-se a sua leitura a fim da obtenção de informações sobre o processo.
Ao exibir um objeto 2D em OpenGL, por , é exibido por inteiro se os valores de suas coordenadas "x" e "y"default
não ultrapassarem 1 ou -1, considerando que a origem do SRU se encontra no centro da janela, do contrário, é
realizado um recorte pelo sistema. No entanto, tais aspectos podem ser alterados através do uso da função
"gluOrtho2D", que permite definir a área visível do SRU na imagem final.
O quadro a seguir traz um exemplo de código usando tais conceitos de recorte 2D enquanto a figura a seguir
(“Imagem gerada pelo código do quadro Código exemplificando o uso da “gluOrtho2D") apresenta a imagem
gerada por este código. Pode-se notar que a "gluOrtho2D" está recebendo como parâmetros valores entre -1 e 1,
os quais não farão diferença à cena caso tal função seja retirada pois são os valores default de recorte do OpenGL.
- -25
- -26
Quadro 3 - Código exemplificando o uso da “gluOrtho2D".
Fonte: Elaborado pelo autor, 2019.
Quando são aplicadas transformações geométricas aos objetos da cena, deve-se chamar novamente as funções
"glMatrixMode" e "glLoadIdentity", após a definição da função "gluOrtho2D”, passando "GL_MODELVIEW" como
parâmetro para a primeira. Isso é necessário em função da necessidade de preparar o ambiente para a alteração
das coordenadas dos vértices do objeto pelas transformações.
Além do recorte realizado com a função "gluOrtho2D", outra função é oferecida pela OpenGL relacionada ao
recorte – a “glViewport” (melhor detalhada na próxima seção). Viewport é o conceito para a região, dentro da
janela de exibição, em que a imagem será visualizada (ver figura a seguir).
- -27
Figura 17 - Janela de recorte, viewport e janela de exibição.
Fonte: Elaborado pelo autor, 2019.
Como podemos observar, é possível a exibição de mais de uma em uma mesma janela de exibição.viewport
1.4.2 Relação Viewport x Janela de Exibição x Tela do Dispositivo Gráfico
Além dos sistemas de referência do universo (SRU) e do objeto (SRO), um terceiro sistema deve ser considerado
na exibição de uma imagem – o sistema de referência da tela (SRT) do dispositivo gráfico -, definido em termos
de pixels e cuja origem está posicionada no canto superior esquerdo.
Neste sentido, a janela de exibição OpenGL mede, por default, 300 x 300 pixels em relação ao SRT, sendo
posicionada na origem do mesmo (ver figura a seguir).
VOCÊ O CONHECE?
Nolan Bushnell e Ted Dabney fundaram a Atari no início dos anos 70 e lançaram o jogo Pong, o
qual rapidamente se tornou um sucesso, representando a primeira máquina de videogame
arcade comercialmente bem-sucedida, a qual auxiliou no estabelecimento da indústria de
videogames.
- -28
Figura 18 - Relação Janela de Exibição OpenGL x Tela do Dispositivo Gráfico.
Fonte: Elaborado pelo autor, 2019.
A definição da , por sua vez, é realizada em relação às coordenadas da janela de exibição OpenGL (emviewport
pixels), que possui origem no canto inferior esquerdo. Se a não for definida, seus valores coincidemviewport
com os valores da janela de exibição.
Síntese
Nesta unidade, tivemos a oportunidade de estudar os principais conceitos de Matemática e Física relacionados a
jogos digitais no espaço 2D.
Nesta unidade, você teve a oportunidade de:
• trabalhar conceitos Sistemas Gráficos Interativos;
• trabalhar conceitos Modelagem geométrica 2D;
• trabalhar conceitos Transformações geométricas 3D;
• trabalhar conceitos Recorte.
Bibliografia
ANGEL, E. : A Top-Down Approach with OpenGL. 3. ed. São Paulo: Addison-Interactive Computer Graphics
Wesley, 2003.
ANTON, H.; RORRES, C. . 8. ed. São Paulo: Bookman, 2000.Álgebra Linear com Aplicações
AZEVEDO, E. . São Paulo: Campus, 2003.Computação Gráfica
BOURG, D. M.; BYWALEC, B. : Science, math, and code for realistic effects. Newton:Physics for Game Developers
O'Reilly Media, 2013.
COHEN, M.; MANSSOUR, I. H. : uma abordagem prática e objetiva. São Paulo: Novatec, 2006.OpenGL
•
•
•
•
- -29
COHEN, M.; MANSSOUR, I. H. : uma abordagem prática e objetiva. São Paulo: Novatec, 2006.OpenGL
ECK, D. J. . 1.2 ed. Geneva: Addison-Wesley Professional, 2018.Introduction to Computer Graphics
FOLEY, J. . – Principles and Practice. São Paulo: Addison-Wesley, 1990.et al Computer Graphics
GOMES, J. . Brasília: IMPA, 2008.Fundamentos da Computação Gráfica
HILL JR., F. S. . 2. ed. Nova Jersey: Prentice-Hall, 2001.Computer Graphics using OpenGL
OPENGL. . Disponível em: .The Industry's Foundation for High Performance Graphics www.opengl.org
Acesso em: 26 set. 2019.
SHREINER, D.; WOO, M.; NEIDER, J.; DAVIS, T. . 4. ed. São Paulo: Addison-Wesley,OpenGL Programming Guide
2004.
SILVA, I. C. S. . Porto Alegre: UniRitter, 2007.Aprendendo computação gráfica com OpenGL e Blender
WATT, A. . 3. ed. São Paulo: Addison-Wesley, 2000.3D Computer Graphics
WIEDERMANN, J. Colonia: Taschen, 2004.Animation Now!