Computação Grafica 2
Computação Grafica 2
Computação Grafica 2
Material Teórico
Primitivas Gráficas e Transformações Geométricas
Revisão Textual:
Prof.ª Dr.ª Selma Aparecida Cesarin
Primitivas Gráficas e Transformações
Geométricas
• Contextualização;
• Primitivas Geométricas: A Teoria e as Aplicações;
• Tipos de Primitivas Geométricas;
• Transformações Geométricas Lineares;
• Criação de Primitivas e Aplicação de Transformações com o Blender.
OBJETIVO DE APRENDIZADO
· Entender a construção e a representação de Primitivas Gráficas 2D e
3D e a importância delas nas mais variadas aplicações em Compu-
tação Gráfica;
· Compreender que as várias Primitivas Gráficas podem ser combina-
das para formar outra Primitivas expandido a capacidade de geração
e manipulação de gráficos para diversas aplicações 2D e 3D;
· Relacionar as Primitivas Gráficas com as transformações lineares (ge-
ométricas) e explicar tais transformações na manipulação das Primi-
tivas podendo, assim, gerar gráficos e cenas elaboradas e complexas;
· Utilizar uma ferramenta gráfica, como o Blender 3D, para reutilizar
as ferramentas gráficas disponíveis e ganhar agilidade no desenvol-
vimento de projetos de Computação Gráfica.
Orientações de estudo
Para que o conteúdo desta Disciplina seja bem
aproveitado e haja maior aplicabilidade na sua
formação acadêmica e atuação profissional, siga
algumas recomendações básicas:
Conserve seu
material e local de
estudos sempre
organizados.
Aproveite as
Procure manter indicações
contato com seus de Material
colegas e tutores Complementar.
para trocar ideias!
Determine um Isso amplia a
horário fixo aprendizagem.
para estudar.
Mantenha o foco!
Evite se distrair com
as redes sociais.
Seja original!
Nunca plagie
trabalhos.
Não se esqueça
de se alimentar
Assim: e de se manter
Organize seus estudos de maneira que passem a fazer parte hidratado.
da sua rotina. Por exemplo, você poderá determinar um dia e
horário fixos como seu “momento do estudo”;
No material de cada Unidade, há leituras indicadas e, entre elas, artigos científicos, livros, vídeos
e sites para aprofundar os conhecimentos adquiridos ao longo da Unidade. Além disso, você
também encontrará sugestões de conteúdo extra no item Material Complementar, que ampliarão
sua interpretação e auxiliarão no pleno entendimento dos temas abordados;
Após o contato com o conteúdo proposto, participe dos debates mediados em fóruns de discus-
são, pois irão auxiliar a verificar o quanto você absorveu de conhecimento, além de propiciar o
contato com seus colegas e tutores, o que se apresenta como rico espaço de troca de ideias e
de aprendizagem.
UNIDADE Primitivas Gráficas e Transformações Geométricas
Contextualização
Nesta unidade, você verá que as Primitivas Geométricas/Gráficas são importan-
tíssimas na criação e na manipulação de Gráficos 2D e 3D de qualidade.
Pois é... você verá que a teoria por trás dessas aplicações é simples e extrema-
mente interessante, e que com a utilização de uma boa ferramenta gráfica, pode
ser fácil e divertido criar essas Primitivas Geométricas que compõem as cenas de
muitas aplicações gráficas incríveis.
Bons estudos!
8
Primitivas Geométricas:
A Teoria e as Aplicações
Primitivo significa o que existe primeiro, algo rudimentar/elementar (PRIBE-
RAM, 2018), o que dá a ideia de antigo e dá base para coisas novas.
Ao longo dos anos, a Geometria evoluiu e se tornou uma sólida subárea da Ma-
temática e estuda as formas dos objetos e as relações matemáticas que permitem a
manipulação e a modelagem dessas formas de objetos.
As aplicações desses modelos são diversas; entre elas, filmes, jogos e maquetes
3D (entre outras aplicações).
9
9
UNIDADE Primitivas Gráficas e Transformações Geométricas
Pode até ser difícil de acreditar, mas todos os personagens e objetos de Toy
Story foram modelados partindo de Primitivas Geométricas. Todos esses persona-
gens 3D têm milhões de vértices (pontos), polígonos e informações de cores.
Quer saber outra aplicação famosa e importante que é feita por milhões de pon-
tos, polígonos e cores?
Aqui vai...
A Figura 2 mostra uma cena do jogo Resident Evil 5 para Xbox 360.
10
Vou apresentar os trabalhos com Primitivas Geométricas a você, de forma práti-
ca e divertida. Para isso, iremos utilizar um software chamado Blender 3D.
Esse software irá fazer todo o trabalho pesado por nós, pois irá realizar os
cálculos necessários e nos livrará de termos de trabalhar com a programação
de computadores.
Mas antes de iniciarmos os trabalhos com o Blender, terei de mostrar a ma-
temática e a programação de computadores envolvida nesse processo, ou seja, o
trabalho que o Blender fará por nós. Só para que você entenda como ele trabalha.
A Primitiva Geométrica mais básica é o ponto, e para trabalharmos com pontos
necessitamos de um espaço. Vamos iniciar com o espaço 2D, que pode ser explo-
rado com a manipulação de valores nos planos X e Y.
Pense no espaço 2D como sendo uma lousa e no ponto como sendo uma boli-
nha minúscula que podemos fazer com um giz ou um “canetão”.
Imagine que essa lousa tem 200 centímetros de largura por 140 centímetros
de altura; podemos, por exemplo, desenhar um ponto no centro dela. Esse ponto
teria de estar localizado em 100 centímetros, partindo da borda esquerda da lousa,
e 70 centímetros partindo da borda de baixo da lousa.
Assim, como o exemplo da lousa e do ponto desenhado no centro, é o funcio-
namento de um plano e um Sistema de coordenadas, no qual você tem de passar
sempre dois valores para desenhar o ponto numa determinada localidade.
Agora, suponha que você quer desenhar um triângulo. Serão necessários três
pontos, ok? Então, você vai até a localidade 50 e 40 da lousa e desenha um ponto.
Seria esse ponto P com x, valendo 50 e y valendo 40.
Certo, agora só faltam dois pontos para formar o triângulo...
Então, imagine que você desenhou outro ponto P2 nas coordenadas 100 e 40
(mais à direita e com a mesma altura do ponto P). Agora imagine que desenhou um
ponto P3 nas coordenadas 75 e 80.
Ok, você já tem os três pontos que formam o triângulo; mas para formar o tri-
ângulo de fato, você terá de interligar esses pontos com retas.
Vamos, então, aprender a desenhar pontos e retas no computador?
Lembrando de que antes de irmos para o Blender, vou mostrar um pouco de
programação de computadores; mas não se preocupe, pois irei fazer os códigos.
Vou dar a você os códigos prontos e somente explicar as partes importantes;
depois vamos para o Blender para fazer de forma mais fácil.
O Código a seguir apresenta a criação dos três pontos, utilizando a biblioteca
OpenGL e a linguagem JavaScript:
• gl.beginShape(gl.POINTS);
• gl.stroke(255, 0, 0);
11
11
UNIDADE Primitivas Gráficas e Transformações Geométricas
• gl.strokeWeight(5);
• gl.vertex(50, 40, 0);
• gl.vertex(100, 40, 0);
• gl.vertex(75, 80, 0);
• gl.endShape();
A linha 1 do código acima indica que vamos desenhar pontos; a linha 2 diz que
a cor dos pontos será vermelha no modelo RGB; a linha 3 faz com que o tamanho
do ponto seja 5 (ele fica mais largo); os pontos têm as localizações para X e Y,
de acordo com os pontos P, P2 e P3 mencionados anteriormente; o valor 0 (o
terceiro valor dos pontos) é a coordenada Z, que não importa no momento então
deixamos fixo; a linha 7 diz que terminamos os desenhos de pontos, e tudo que
estiver fora dessas linhas não será considerado ponto.
Figura 4 – Desenho simples formado pela combinação de Primitivas e com o uso de transformações geométricas
Fonte: Acervo do Conteudista
Se você prestar atenção à Figura 4, verá que utilizei pontos, retas, triângulos e
quadriláteros para desenhar a cena. Dessa forma, provei que Primitivas Geométricas
podem ser utilizadas para compor desenhos/modelos de objetos do mundo real.
12
Explor
O código que gera esse desenho está disponível no endereço/hyperlink: https://goo.gl/NctHtt
Você deve estar se perguntando: mas você falou que dava para fazer desenhos
em 3D como os de Toy Story e de Resident Evil 5 que mostrou antes, não é?;
Para criar um ponto, ou representá-lo, basta ter um plano e uma localização para
esse ponto em coordenadas desse plano. É comum, em Computação Gráfica, que
13
13
UNIDADE Primitivas Gráficas e Transformações Geométricas
um ponto seja chamado de vértice. Todas as outras Primitivas são formadas por
pontos, ou seja, todas as outras Primitivas têm pontos/vértices em sua composição.
Para desenharmos uma reta, necessitamos de pelo menos dois pontos: o ponto
inicial da reta e o ponto final. Com esses dois pontos, são desenhados vários pon-
tos intermediários e a reta é formada.
A
Figura 6 – Uma reta e seu dois pontos de extremidade
O Triângulo é uma forma que tem três lados e três ângulos internos (TAVARES,
2013). Às formas que tem três ou mais lados/ângulos chamamos de polígonos
(significa muitos ângulos); o triângulo é o primeiro polígono.
É necessário tomar cuidado quanto a esses três pontos, pois não são quaisquer
três pontos que formam um triângulo, por exemplo, se esses três pontos estive-
rem alinhados, você irá formar uma reta, e não um triângulo. A Figura 7 mostra
um triângulo.
14
A
A b
c
C C
B
a
B
D
r
15
15
UNIDADE Primitivas Gráficas e Transformações Geométricas
Explor
A reta r em vermelho representa o raio e a reta D roxa representa o seu diâmetro.
Primitivas Geométricas 3D
No plano 3D, continuamos tendo pontos/vértices, só que com três dimensões
(componentes x, y e z). E temos retas em 3D e, ainda, triângulos, quadrados e mais.
Acontece que essas Primitivas são utilizadas para formar outras figuras geométricas.
Em 3D, as formas mais comuns são o cubo, a esfera e a pirâmide, além de ou-
tras (Toroide, Cone, Cilindro etc.)
Veja que o lado do dado que vale dois é formado por um quadrado, assim como
o que vale quatro que é formado por outro quadrado, e assim por diante.
A esfera é a forma que uma bola tem. Podemos construir uma esfera de várias
formas, podemos utilizar vários círculos ou vários polígonos para construir uma esfera.
Figura 11 – Demonstração de que uma esfera pode ser construída com círculos
ou com polígonos e que uma bola tem o formato de uma esfera
16
Veja mais detalhes sobre as Primitivas Geométricas 3D nos links: https://goo.gl/fdDGw9
Explor
e https://goo.gl/rHQvjR
Lembra que todas as Primitivas Geométricas podem ser formadas por pontos/
vértices e retas?
Vamos praticar isso utilizando o Blender 3D? Então, chega de teoria e vamos
para a prática!
17
17
UNIDADE Primitivas Gráficas e Transformações Geométricas
Perceba que o software já traz uma Primitiva, do tipo cubo, desenhada no cen-
tro da tela.
Para você poder manipular os objetos na sua área de trabalho, dentro do Blender,
você pode rolar o scroll do mouse para dar zoom in e zoom out; com isso, você
conseguirá distanciar ou aproximar a cena.
Se você pressionar o botão do mouse e arrastar, ele fará com que a cena gire.
18
Para subir, descer e mover para direita ou para a esquerda, pressione e arraste
o scroll do mouse segurando a tecla shift ao mesmo tempo.
Você pode entender mais sobre esses comandos assistindo ao vídeo disponível no link a
Explor
seguir: https://youtu.be/DzXWLGxk8qM
Clique no menu Add, depois em Mesh e Plane. Isso fará com que um pequeno
plano (quadrado) apareça na cena, como mostra a Figura 15.
19
19
UNIDADE Primitivas Gráficas e Transformações Geométricas
Depois, eu farei com que esse plano seja a base da nossa cena (o chão/piso da cena).
Agora, adicione um cone; basta clicar no menu Add, depois em Mesh e Cone.
20
Então, mova a esfera para trás e coloque o cone em cima do cubo.
O cone e o cubo serão a nossa casinha e o plano será o jardim, mas será neces-
sário aumentar o plano e o cone.
Clique com o botão direito no cone e aperte a tecla S do teclado e segure-a; isso
habilitará a função escala; arraste o mouse (com S pressionada) e o cone aumen-
tará de tamanho.
Faça o mesmo com o plano (aumente de tamanho segurando a tecla S); o resul-
tado será o da Figura 19.
21
21
UNIDADE Primitivas Gráficas e Transformações Geométricas
Vamos aplicar uma cor ao plano. Clique com o botão direito sobre o plano e vá
até a ferramenta chamada material, que está mostrada na Figura 20.
22
Tente adicionar mais formas e aplicar mais cores para chegar à cena mostrada
na Figura 23.
Se você tiver dificuldade para Transladar, Escalonar e Rotacionar os objetos, assista ao vídeo:
Explor
https://youtu.be/Jba0EtxVK-M
Caso tenha dificuldades em aplicar as cores, o vídeo a seguir ajuda a aplicar cores com o
Blender: https://youtu.be/ualUgnD0Oco
Você deve ter percebido que conhecer as formas Primitivas e usar as transforma-
ções de translação e escala foram muito importantes para compor essa cena simples.
Veja que eu consegui montar algo semelhante a uma casa e uma árvore no jardim.
Com um pouco mais de treino e detalhamento, podemos fazer cenas mais reais
e melhores.
O Blender ajuda muito, mas fica mais fácil mexer com o Blender quando você
sabe a teoria envolvida por trás desses conceitos de Computação Gráfica.
23
23
UNIDADE Primitivas Gráficas e Transformações Geométricas
Material Complementar
Indicações para saber mais sobre os assuntos abordados nesta Unidade:
Sites
Geometria Plana
SILVA, D. D. Geometria Plana. 2018.
https://goo.gl/aTK9ve
Geometria Espacial
ESCOLA, B. Geometria espacial. 2018.
https://goo.gl/hG8Meo
Vídeos
Geometria Analítica no Espaço com Blender e Python
https://youtu.be/jNaBo5SnYfY
Blender – Transformações
https://youtu.be/eH0FLpliYys
Criando Primitivas no Blender
https://youtu.be/CxLM_8vli2w
Leitura
Álgebra Vetorial e Geometria Analítica
VENTURI, J. J. Álgebra Vetorial e Geometria Analítica. 2015.
https://goo.gl/Nd3ThJ
24
Referências
ANDALÓ, Flávio. Modelagem e animação 2D e 3D para jogos. São Paulo:
Érica, 2015.
25
25