Aula Computação Grafica

Prévia do material em texto

Computação Gráfica para 
Jogos Eletrônicos
Visão geral sobre o processo de renderização de 
jogos digitais
Slides por: Leonardo Tórtoro Pereira (leonardop@usp.br)
Assistentes: Gustavo Ferreira Ceccon (gustavo.ceccon@usp.br), 
Gabriel Simmel (gabriel.simmel.nascimento@usp.br) e Ítalo Tobler (italo.tobler.silva@usp.br)
1
Este material é uma criação do 
Time de Ensino de Desenvolvimento de Jogos 
Eletrônicos (TEDJE)
Filiado ao grupo de cultura e extensão 
Fellowship of the Game (FoG), vinculado ao 
ICMC - USP
Este material possui licença CC By-SA. Mais informações em: 
https://creativecommons.org/licenses/by-sa/4.0/legalcode 2
https://creativecommons.org/licenses/by-sa/4.0/legalcode
Objetivos
➔ Introduzir a área de Computação Gráfica (CG)
➔ Mostrar contribuições dos jogos eletrônicos para a área
➔ Mostrar a evolução dos hardwares da área
◆ De CPU a GPU
➔ Introduzir o conceito de pipeline e mostrar o pipeline da 
GPU e OpenGL
3
Objetivos
4
➔ Como modelos são estruturados, representados e 
apresentados para os usuários
➔ Como transformações são feitas em 3D e como isso é 
representado na câmera
➔ Mostrar os conceitos e algoritmos básicos por trás das 
principais técnicas utilizadas na área, além de exemplos 
de utilização
Índice
1. Introdução
2. CPU vs GPU
3. Tipos de imagens
4. Modelos 3D
5. Pipeline & Hardware
6. Renderização
5
1. Introdução
6
1. Introdução
➔ O que é Computação Gráfica (CG)?
◆ Imagens e filmes criados usando computadores
◆ Dados de imagem criados por computador
● Principalmente com ajuda de softwares e 
hardwares gráficos especializados
7
1. Introdução
➔ Quais são os tópicos mais importantes da área?
◆ Design de interface de usuário
◆ Gráficos de sprites e de vetor
◆ Modelagem 3D
◆ Shaders
◆ Design de GPU
◆ Visão computacional
◆ Entre outros!
8
1. Introdução
➔ A CG baseia-se fortemente em 3 ramos da ciência
◆ Geometria
◆ Óptica
◆ Física
9
1. Introdução
➔ É responsável por
◆ Exibir dados de imagem e arte efetivamente e de 
maneira agradável ao usuário.
◆ Processar dados de imagem recebidos do mundo 
físico
10
1. Introdução
➔ Revolucionou
◆ Animação
◆ Filmes
◆ Publicidade
◆ Design gráfico
◆ Jogos Eletrônicos
11
1. Introdução
➔ Bibliotecas gráficas mais usadas:
◆ OpenGL
◆ DirectX
◆ Vulkan
12
2. CPU vs GPU
13
2. CPU vs GPU
➔ No início da CG
◆ Seu processamento era feito em CPU
● Todo computador tem uma! :)
● Poucos núcleos (antigamente só 1!) :(
● Não é usada apenas para gráficos :(
● Alto custo por núcleo :(
14
2. CPU vs GPU
➔ Atualmente
◆ Seu processamento é feito (principalmente) em GPU
● Deve ser comprada à parte :(
● Muitos núcleos :)
○ 1152 - GTX 760
○ 2560 - GTX 1080
○ 5760 - Titan Z
15
https://www.karlrupp.net/2013/06/cpu-gpu-and-mic-hardware-characteristics-over-time/
16
https://www.karlrupp.net/2013/06/cpu-gpu-and-mic-hardware-characteristics-over-time/
https://blogs.mathworks.com/deep-learning/2017/10/20/deep-learning-with-gpus-and-matlab/
17
https://blogs.mathworks.com/deep-learning/2017/10/20/deep-learning-with-gpus-and-matlab/
2. CPU vs GPU
➔ Por que GPUs ficaram tão rápidas?
◆ Intensidade aritmética
● Mais transistores para computações
● Menos para lógica de decisão
◆ Economia
● Demanda é alta devido à 
○ Indústria multibilionária dos jogos eletrônicos
18
3. Tipos de Imagens
19
➔ Tipos de imagem 2D
◆ Raster
◆ Imagem vetorizada
◆ Sprites
3. Tipos de Imagens
20
Imagens Rasterizadas
21
Raster
● Modo de representação de imagem
● Matriz de pixels
● Características do raster:
○ Altura
○ Largura
○ bits/pixel (define o alcance dos 
valores da matriz)
22
Raster
● Pixel Art
○ Arte a nível de pixel
○ Necessita baixa utilização de 
memória
■ Os primeiros consoles 
possuíam memória muito 
pequena
○ Ainda hoje utilizada em jogos
○ Baixo custo para exibição 23
Exemplos Pixel Art
24
*Shameless self 
promotion*
Hyper Light 
Drifter
Blasphemous
Chrono 
Trigger
https://store.steampowered.com/app/257850/Hyper_Light_Drifter/
https://store.steampowered.com/app/257850/Hyper_Light_Drifter/
https://store.steampowered.com/app/774361/Blasphemo
https://store.steampowered.com/app/613830/CHRONO_TRIGGER/
https://store.steampowered.com/app/613830/CHRONO_TRIGGER/
Raster
● Problema: reescalar imagens
○ Algoritmos de interpolação
● Aliasing
○ Solução: Anti-aliasing
25
Raster
26
Raster
27
Raster
● Cuidado com anti-aliasing em pixel art!
● Antes de re-escalar use o método certo (Caixa)
28
128x128 
Filtro Bicúbico
128x128 
Filtro Caixa
64x64
Original
Sprite feito por Leonardo Tórtoro Pereira. Não usar sem permissão :)
Raster
29
320x320 Bicúbica 320x320 Caixa
Sprite feito por Leonardo Tórtoro Pereira. Não usar sem permissão :)
Imagem Vetorizada
30
Imagem Vetorizada
● Representar Imagens por contornos e 
preenchimentos
○ Imagens compostas por “caminhos” e polígonos 
primitivos
● Softwares capazes de transformar imagens 
rasterizadas em vetorizadas
○ Grande perda de informação com imagens de 
tons contínuos
○ Processo inverso relativamente fácil 31
Exemplos Imagens Vetorizadas
32
https://opengameart.org/forumtopic/2d-vector-arti
st-at-your-service
https://www.gamedevmarket.net/asset/desert-2d-
game-vector-background/
https://opengameart.org/forumtopic/2d-vector-artist-at-your-service
https://opengameart.org/forumtopic/2d-vector-artist-at-your-service
https://www.gamedevmarket.net/asset/desert-2d-game-vector-background/
https://www.gamedevmarket.net/asset/desert-2d-game-vector-background/
Imagem Vetorizada
● Imagens vetorizadas não 
possuem problemas para 
re-escalar
○ Pode ser rasterizada em 
diferentes dimensões
● Em contrapartida, a imagem 
precisa ser rasterizada para 
ser exibida e a cada vez que 
for reescalada 33
https://en.wikipedia.org/wiki/Vector_graphics
https://en.wikipedia.org/wiki/Vector_graphics
Sprites
34
Sprites
● Bitmaps integrados a uma cena maior
○ Originalmente se referia a objetos 
independentes, processados 
separadamente e depois integrados a 
outros elementos
○ Esse método de organização facilitava 
detecção de colisões entre diferentes 
sprites
35
Quick Tips!
36
Ferramentas Interessantes para arte 2D
➔ Desenhos em geral:
◆ Krita (Open Source)
◆ Gimp (Open Source)
◆ Photoshop
➔ Pixel art:
◆ Aseprite (Tem na Steam)
◆ Pyxel Edit
➔ Geração de níveis por tileset
◆ Tiled (Com integração para Unity) 37
https://krita.org/en/
https://www.gimp.org/
http://www.adobe.com/products/photoshop.html
https://www.aseprite.org/
http://pyxeledit.com/
http://www.mapeditor.org/
http://www.seanba.com/tiled2unity
Ferramentas Interessantes para arte 2D
➔ Animação com Bones
◆ DragonBones (Open Source)
◆ Spine
◆ Spriter
➔ Evite usar animação com Bones em pixel art!
◆ É recomendado animar frame a frame :)
38
http://dragonbones.com/en/index.html
http://pt.esotericsoftware.com/
https://brashmonkey.com/
4. Modelos 3D
39
➔ Representados através de malhas
◆ Superfícies representadas através de um conjunto de 
triângulos
➔ Por que usar triângulos? Por que não usar quadrados?
◆ Simples, planares e geralmente não quebram em 
transformações
40
4. Modelos 3D
41
4. Modelos 3D
https://www.gfxtotal.com.br/tutoriais/modelar-abridor-de-latas-high-poly-3ds-max/
https://www.gfxtotal.com.br/tutoriais/modelar-abridor-de-latas-high-poly-3ds-max/
MVP
42https://learnopengl.com/Getting-started/Coordinate-Systems 
https://learnopengl.com/Getting-started/Coordinate-Systems
➔ Texturas
◆ São imagens que vão para a memória da placa de 
vídeo
● Toda imagem vira uma textura, até sprites
◆ Mapeamento UV (S,T,U,V,W,X,Y,Z) é necessário para 
representar a superfície 3D numa imagem 2D
◆ Filtro é uma interpolação para suavizar os pixels entre 
os vértices
43
4. Modelos 3D
Imagem (Textura)
44
https://www.pinterest.com/pin/429953095648140137/?from_navigate=true 
https://www.pinterest.com/pin/429953095648140137/?from_navigate=true
Mapa UV
45
http://cgi.tutsplus.com/articles/game-character-creation-series-kila-chapter-3-uv-mapping--cg-26754http://cgi.tutsplus.com/articles/game-character-creation-series-kila-chapter-3-uv-mapping--cg-26754
46
http://learnopengl.com/#!Getting-started/Textures 
➔ Filtros para escolher a melhor textura para dado pixel
➔ Dois modos comuns
◆ Nearest (esquerda) seleciona o pixel que possui centro 
mais próximo da coordenada da textura
◆ Filtro bilinear (direita) valor interpolado dos texels vizinhos 
da textura
6. Renderização
http://learnopengl.com/#!Getting-started/Textures
Quick Tips!
47
Ferramentas interessantes para arte 3D
➔ Blender (Open Source)
◆ Propósitos gerais (Até edição de vídeo)
➔ Autodesk Maya
◆ Propósitos gerais
➔ Houdini 
◆ Animação, focada em geração procedural
➔ ZBrush 
◆ Foco em escultura, integração com várias ferramentas
48
https://www.blender.org/
https://www.autodesk.eu/products/maya/overview
https://www.sidefx.com/
http://pixologic.com/
5. Pipeline & Hardware
49
5. Pipeline & Hardware
➔ Pipeline:
◆ Encadeamento de comandos
◆ Ordem na qual os comandos são executados
➔ Antigamente:
◆ Chips, placas e/ou unidades distintas por estágio
◆ Fluxo de dados fixo pelo pipeline
◆ Hardware costumava seguir isso:
50
Transformada de vértices e iluminação
Construção de triângulos e rasterização
Texturização e sombreamento de pixel
Teste de profundidade e blending (composição)
Transformada de vértices e iluminação 51
5. Pipeline & Hardware
52
Sombream
ento de 
Vértice
Sombream
ento de 
Vértice
Sombream
ento de 
Vértice
Sombream
ento de 
Vértice
Sombream
ento de 
Vértice
Sombream
ento de 
Vértice
Sombream
ento de 
Vértice
Construção 
de triângulo
Seleção de 
profundidad
e
Sombream
ento de 
pixel
Textura
Blend / 
Profundid
ade
Memória
Sombream
ento de 
pixel
Textura
Blend / 
Profundid
ade
Memória
Sombream
ento de 
pixel
Textura
Blend / 
Profundid
ade
Memória
Sombream
ento de 
pixel
Textura
Blend / 
Profundid
ade
Memória
Sombream
ento de 
pixel
Textura
Blend / 
Profundid
ade
Memória
Sombream
ento de 
pixel
Textura
Blend / 
Profundid
ade
Memória
Sombream
ento de 
pixel
Textura
Blend / 
Profundid
ade
Memória
Arquitetura de GPU 
em 2003
➔ Atualmente
◆ GPUs totalmente programáveis
◆ Arquitetura unificada
◆ Programável em C
◆ Fluxo de dados arbitrário
◆ Modelo de programação de múltiplos propósitos
53
5. Pipeline & Hardware
➔ Atualmente
◆ Hardware de propósito específico
◆ Threading e pipelining gerenciados por hardware
◆ “Gráficos” e computação livremente misturados
54
5. Pipeline & Hardware
➔ Clipping (recorte) 
◆ Recorta polígonos ou pedaços fora da visão da tela
55http://n63.icequake.net/doc/n64intro/kantan/images/1-2-3-5.gif
5. Pipeline & Hardware
➔ Culling (Seleção)
◆ Seleciona dados desnecessários para o pipeline 
gráficos
◆ Exemplo: dados para desenhar a parte “de trás” de um 
objeto
◆ N64 suporta dois tipos de culling:
● Back-face e de volume
56
5. Pipeline & Hardware
➔ Back-face culling
◆ Retira a parte de trás de objetos
57http://n63.icequake.net/doc/n64intro/kantan/images/1-2-3-6.gif
5. Pipeline & Hardware
➔ Volume culling
◆ Retira itens que estão completamente fora do campo 
visual da lista de exibição (display list) que desenha 
objetos
58http://n63.icequake.net/doc/n64intro/kantan/images/1-2-3-7.gif
5. Pipeline & Hardware
➔ Z-buffer e z-test
◆ Literalmente a componente Z dos fragmentos
◆ São úteis e configuráveis, importantes para interação entre 
fragmentos, principalmente alpha blending
59
5. Pipeline & Hardware
Design discreto X unificado
60
Arquitetura unificada: Sombreamentos de vértices, pixels, etc. tornam-se 
threads rodando em diferentes programas em núcleos flexíveis
Design discreto
Shader A
Shader B
Shader C
Shader D
Design unificado
 Núcleo de Shader
ibuffer ibuffer ibuffer ibuffer
obuffer obuffer obuffer obuffer
Por que unificar?
61
http://www.nvidia.com/content/nvision2008/tech_presentations/Technology_Keynotes/NVISION08-Tech_Keynote-GPU.pdf
Por que unificar?
62
http://www.nvidia.com/content/nvision2008/tech_presentations/Technology_Keynotes/NVISION08-Tech_Keynote-GPU.pdf
Bonus Stage: 
Arquitetura do N64
63
64
https://media0dk-a.akamaihd.net/24/12/e7f4ff8d93dd9182292772a7815e8305.jpg http://vignette1.wikia.nocookie.net/banjokazooie/images/a/ab/Ss-banjo-kazooie-xb
la-007.jpg/revision/latest?cb=20100413020934
https://www.serebii.net/stadium/mewtwo.jpg
http://n63.icequake.net/doc/n64intro/kantan/images/1-2-3-1.gif 65
Blocos de processos do RCP
66http://n63.icequake.net/doc/n64intro/kantan/images/1-2-3-2.gif
Blocos de processos do RSP
67http://n63.icequake.net/doc/n64intro/kantan/images/1-2-3-2.gif
Arquitetura do N64
➔ Processos gráficos executados no RSP
◆ A maioria dos processos do RSP são executados 
quando os dados de vértices são carregados no cache 
de vértices
◆ Os processos principais são:
● Transformadas geométricas
○ Necessárias para mover ou escalar objetos 3D
68
Exemplo de Volume Culling do N64
69
https://www.youtube.com/watch?v=dKpmnUez2Xc
Unidades do RDP
70
http://n63.icequake.net/doc/n64intro/kantan/images/1-2-3-2.gif
● Rasterizador (RS) transforma triângulos 
e retângulos em pixels
● Motor de Textura (TX) provê 
amostragem para texels (elementos de 
imagem) através do uso de TMEM 
(Memória de Textura)
● Filtro de Textura (TF) provê filtragem 
para texels criados pelo TX
● Combinador de Cor/Combinador Alpha 
(CC/AC) combina duas cores de pixels 
criadas pelo RS e texels criados pelo TF e 
interpola entre essas duas cores.
Unidades do RDP
71http://n63.icequake.net/doc/n64intro/kantan/images/1-2-3-2.gif
● O Misturador (Blender) (BL) mistura a cor 
do pixel determinada em CC, a cor no 
frame buffer, a cor de fog, e assim em 
diante. Desenha a cor resultante no 
frame buffer. Nestemomento, também 
provê o Z-buffering para a primeira parte 
do processo de anti-aliasing.
● Interface de Memória (MI) processa 
informação de pixel no frame buffer 
incluindo operações de ler, modificar e 
escrever
Bonus Stage: 
Arquitetura do SNES
72
https://upload.wikimedia.o
rg/wikipedia/en/thumb/f/f
4/Supermarioworld.jpg/25
0px-Supermarioworld.jpg
73
http://cdn.gamer-net
work.net/2017/usgam
er/street_fighter_II_t
urbo_snes_classic_02.
png
https://tctechcrunch201
1.files.wordpress.com/2
017/09/ffvi.jpg
http://4.bp.blogspot.co
m/_9MOywHCf_4Y/S_b
Aab1OJEI/AAAAAAAAFB
4/amu6EOdDsd4/s400/
gfs_4582_2_2.jpg
Arquitetura do SNES
➔ SNES
◆ Velocidade da CPU 2.86MHz (até 10.74 MHz)
◆ 16bits
◆ 24 bit bus - usado para acessos gerais
◆ 8 bit bus - usado para acesos de registro APU e PPU
◆ Instruções por segundo: 1.79 MIPS
74
75http://meseec.ce.rit.edu/551-projects/fall2014/3-1.pdf
Arquitetura do SNES
➔ SNES
◆ Velocidade da CPU 2.86MHz (até 10.74 MHz)
◆ 16bits
◆ 24 bit bus - usado para acessos gerais
◆ 8 bit bus - usado para acessos de registro APU e PPU
◆ Instruções por segundo: 1.79 MIPS
76
77http://meseec.ce.rit.edu/551-projects/fall2014/3-1.pdf
Arquitetura do SNES
➔ Picture Processing Unit (PPU)
◆ 2 unidades: PPU1 e PPU2
◆ PPU1 gera dados, rotação e escala de caracteres de 
background
◆ PPU2 realiza efeitos especiais
◆ 32.768 cores
◆ Mesmo sinal de clock da CPU
◆ 7 modos de vídeo diferente 78
Arquitetura do SNES
➔ Picture Processing Unit (PPU): 64kB de RAM
◆ 256x224
◆ 512x224
◆ 256x239
79
◆ 512x239
◆ 512x448
◆ 512x478
Arquitetura do SNES
➔ SNES pode mostrar 256 cores de uma vez
◆ Divididas em 16 sub-paletas, com 16 cores (1 sempre 
transparente)
◆ Tiles de BG usam qualquer uma das 8 primeiras 
sub-paletas, enquanto os sprites usam as outras 8
80
Arquitetura do SNES
➔ Modos de vídeo
◆ Alteram entre si quantidade de camadas e cores nas 
paletas
◆ Especificação e decodificação de elementos varia
81
Arquitetura do SNES
➔ Mode 7
◆ Camada única que pode ser rotacionada e escalada 
usando transformações de matrizes
◆ HDMA (Horizontal Direct Memory Access) é 
normalmente usadopara mudar os parâmetros da 
matriz para cada scanline para gerar efeitos de 
perspectiva
82
83
https://www.coranac.com/tonc/img/mode7/m7_ex_00.png https://www.heyuguys.com/images/2012/05/mode7_example
.jpeghttp://www.nintendoblast.com.br/2014/01/revisit
ando-os-tempos-aureos-do-mode-7.html
http://www.nintendoblast.com.br/2014/01/revisit
ando-os-tempos-aureos-do-mode-7.html
Arquitetura do SNES
➔ Cartuchos
◆ Super FX chip
● CPU RISC
● Renderiza gráficos que a CPU normal não consegue
● Processa principalmente polígonos 3D
● 10.5 MHz de clock
◆ Super Accelerator System
84
https://en.wikipedia.org/wiki/File:SNES_Star_Fox.png
85
86http://meseec.ce.rit.edu/551-projects/fall2014/3-1.pdf
http://meseec.ce.rit.edu/551-projects/fall2014/3-1.pdf
Cx4 - Co-processador matemático
87
http://www.vgmuseum.com/end/snes/a/mmx2-3.gif
Engine do DKC 2 (feita em Assembly)
88
Bonus Stage: Uncanny 
Valley
89
Uncanny Valley
Mass Effect: Andromeda
90
https://www.youtube.com/watch?v=tO_-ezQBaZ8
Bonus Stage: Uncanny Valley
➔ Gráficos atuais ultra realistas
◆ Uncanny Valley
● Parece e move-se quase igual um ser real
○ Mas não totalmente
● Causa asco em algumas pessoas
91
Uncanny Valley
92https://upload.wikimedia.org/wikipedia/commons/f/f0/Mori_Uncanny_Valley.svg
Uncanny Valley
93https://www.japan-zone.com/culture/bunraku.shtml
6. Renderização
94
6. Renderização
➔ Requer
◆ Geometria (modelo)
◆ Instruções de como desenhar (shader)
➔ Shader
◆ Vertex Shader
◆ Geometry Shader
◆ Fragment (Pixel) Shader
95
6. Renderização
➔ Shaders
◆ São literalmente programas (instruções) que passamos 
para a placa de vídeo
◆ GPU compila e guarda o programa na memória (limitações)
● Por isso alguns jogos demoram para iniciar
◆ Especificações DirectX e OpenGL tentam padronizar
96
Pipeline da renderização
97
http://learnopengl.com/#!Getting-started/Hello-Triangle 
http://learnopengl.com/#!Getting-started/Hello-Triangle
➔ Materiais
◆ Descrevem como o objeto deve se comportar visualmente
◆ Pode conter informações como reflexão, transparência, 
quão metálico, quão liso etc.
◆ Depende diretamente dos shaders
6. Renderização
98
Fragment (Pixel) Shader
99
http://polycount.com/discussion/70739/lcubershader-cgfx-a-maya-viewport-shader-for-fun-and-learning 
http://polycount.com/discussion/70739/lcubershader-cgfx-a-maya-viewport-shader-for-fun-and-learning
Iluminação Especular e Difusa
➔ Difusa
◆ Cor que objeto recebe sob luz direta
◆ Mais forte na direção da luz e esmaece conforme o 
ângulo da superfície aumenta
➔ Especular
◆ Cor de destaque de um objeto.
◆ Aparece como reflexão da luz na superfície
➔ https://clara.io/learn/user-guide/lighting_shading/materials/material_types/webgl_materials
100
https://clara.io/learn/user-guide/lighting_shading/materials/material_types/webgl_materials
➔ Vertex Shader
◆ Transformações de mundo
◆ Matriz MVP (Model View Projection)
◆ Mapeamento de coordenadas
➔ Geometry Shader
◆ Altera os vértices
◆ Cria novos vértices
101
6. Renderização
➔ Tesselation Shader
◆ Quebra a geometria
◆ Adiciona detalhes
➔ Fragment Shader
◆ Processamento paralelo
◆ Interpolação dos vértices
102
6. Renderização
Geometry Shader
103
http://irrlicht.sourceforge.net/forum/viewtopic.php?t=35500&start=15 
http://irrlicht.sourceforge.net/forum/viewtopic.php?t=35500&start=15
➔ Mapeamentos (Mapping)
◆ Texturas
◆ Bump
● Displacement
● Normal
● Parallax
● Height
◆ Cube
◆ Shadow 104
6. Renderização
➔ Normal Map
◆ Modifica a luz através da superfície da textura
◆ Baseia-se no vetor normal à superfície
105
6. Renderização
Normal Map
106
http://blog.digitaltutors.com/bump-normal-and-displacement-maps/
http://blog.digitaltutors.com/bump-normal-and-displacement-maps/
➔ Heigth ou Parallax map
◆ Similar ao normal, mas mais complexo (e mais 
pesado)
◆ Normalmente usado em conjunto com mapas normais
◆ Move áreas da textura da superfície visível
● Alcança um efeito a nível de superfície de oclusão
◆ Protuberâncias terão suas partes próximas (frente à 
camera) exagerados. E a outra parte reduzida
107
6. Renderização
Heightmap ou Parallax Map
108
http://docs.unity3d.com/Manual/StandardShaderMaterialParameterHeightMap.html 
http://docs.unity3d.com/Manual/StandardShaderMaterialParameterHeightMap.html
Normal e Parallax Map
109
http://learnopengl.com/#!Advanced-Lighting/Parallax-Mapping 
http://learnopengl.com/#!Advanced-Lighting/Parallax-Mapping
Displacement Map
110
http://blog.digitaltutors.com/bump-normal-and-displacement-maps/
http://blog.digitaltutors.com/bump-normal-and-displacement-maps/
Bump Map
111
http://blog.digitaltutors.com/bump-normal-and-displacement-maps/
http://blog.digitaltutors.com/bump-normal-and-displacement-maps/
Bump e Displacement Maps
112
http://blog.digitaltutors.com/bump-normal-and-displacement-maps/
http://blog.digitaltutors.com/bump-normal-and-displacement-maps/
Cube Map
113
http://learnopengl.com/#!Advanced-OpenGL/Cubemaps 
http://learnopengl.com/#!Advanced-OpenGL/Cubemaps
Skybox
114
http://learnopengl.com/#!Advanced-OpenGL/Cubemaps 
http://learnopengl.com/#!Advanced-OpenGL/Cubemaps
Reflexão
115
http://learnopengl.com/#!Advanced-OpenGL/Cubemaps 
http://learnopengl.com/#!Advanced-OpenGL/Cubemaps
Refração
116
http://learnopengl.com/#!Advanced-OpenGL/Cubemaps 
http://learnopengl.com/#!Advanced-OpenGL/Cubemaps
➔ Blending
◆ Aritmética entre Alpha
◆ Transparência
◆ Translucência
117
6. Renderização
Blending
118
http://learnopengl.com/#!Advanced-OpenGL/Blending 
http://learnopengl.com/#!Advanced-OpenGL/Blending
Blending
119
http://andersriggelsen.dk/glblendfunc.php 
http://andersriggelsen.dk/glblendfunc.php
➔ Post Processing
◆ Fotografia
◆ Aplicar shader no framebuffer
◆ Médio custo
◆ Realismo
120
6. Renderização
Post Processing
121
http://haxepunk.com/documentation/tutorials/post-process/ 
http://haxepunk.com/documentation/tutorials/post-process/
Bloom
122
http://haxepunk.com/documentation/tutorials/post-process/ 
http://haxepunk.com/documentation/tutorials/post-process/
HDR
123
http://gamesetwatch.com/ 
http://gamesetwatch.com/
Depth of Field
124
https://steamcommunity.com/sharedfiles/filedetails/?id=134522361 
https://steamcommunity.com/sharedfiles/filedetails/?id=134522361
➔ Sombra
◆ Alto custo
◆ Mapeamento
◆ Aproximação
◆ Anti-aliasing
125
6. Renderização
Shadow Map
126
https://takinginitiative.wordpress.com/2011/05/25/directx10-tutorial-10-shadow-mapping-part-2/ 
https://takinginitiative.wordpress.com/2011/05/25/directx10-tutorial-10-shadow-mapping-part-2/
Shadow Map
127
https://takinginitiative.wordpress.com/2011/05/25/directx10-tutorial-10-shadow-mapping-part-2/ 
https://takinginitiative.wordpress.com/2011/05/25/directx10-tutorial-10-shadow-mapping-part-2/
Soft Shadow e Penumbra
128
https://en.wikipedia.org/wiki/Umbra,_penumbra_and_antumbra 
https://en.wikipedia.org/wiki/Umbra,_penumbra_and_antumbra
● http://acko.net/files/fullfrontal/fullfrontal/webgl
math/online.html
129
6. Renderização
http://acko.net/files/fullfrontal/fullfrontal/webglmath/online.html
http://acko.net/files/fullfrontal/fullfrontal/webglmath/online.html
Ray tracing
130
https://en.wikipedia.org/wiki/Ray_tracing_(graphics) 
https://en.wikipedia.org/wiki/Ray_tracing_(graphics)
Dúvidas?
131
Referências
132
Referências
[1]http://www.nvidia.com/content/nvision2008/tech_presentations/Technology_Keynotes/NVISION08-Tech_Keynote-G
PU.pdf
[2]http://n64.icequake.net/doc/n64intro/kantan/
[3]https://en.wikipedia.org/wiki/Microcode
[4]https://en.wikipedia.org/wiki/Texel_(graphics)
[5]http://www.nvidia.com/object/cuda_home_new.html
[6]https://llpanorama.wordpress.com/2008/05/21/my-first-cuda-program/
[7]http://www.nvidia.com/content/gtc/documents/1055_gtc09.pdf
[8]https://en.wikipedia.org/wiki/Computer_graphics
[9]http://www.graphics.cornell.edu/online/tutorial/
[10]https://en.wikipedia.org/wiki/2D_computer_graphics
[11]https://en.wikipedia.org/wiki/Pixel_art[12]https://en.wikipedia.org/wiki/Font_rasterization
[13]http://acko.net/files/fullfrontal/fullfrontal/webglmath/online.html
[14]http://blog.digitaltutors.com/bump-normal-and-displacement-maps/
133
http://www.nvidia.com/content/nvision2008/tech_presentations/Technology_Keynotes/NVISION08-Tech_Keynote-GPU.pdf
http://www.nvidia.com/content/nvision2008/tech_presentations/Technology_Keynotes/NVISION08-Tech_Keynote-GPU.pdf
http://n64.icequake.net/doc/n64intro/kantan/
https://en.wikipedia.org/wiki/Microcode
https://en.wikipedia.org/wiki/Texel_(graphics)
http://www.nvidia.com/object/cuda_home_new.html
https://llpanorama.wordpress.com/2008/05/21/my-first-cuda-program/
http://www.nvidia.com/content/gtc/documents/1055_gtc09.pdf
https://en.wikipedia.org/wiki/Computer_graphics
http://www.graphics.cornell.edu/online/tutorial/
https://en.wikipedia.org/wiki/2D_computer_graphics
https://en.wikipedia.org/wiki/Pixel_art
https://en.wikipedia.org/wiki/Font_rasterization
http://acko.net/files/fullfrontal/fullfrontal/webglmath/online.html
http://blog.digitaltutors.com/bump-normal-and-displacement-maps/
Referências
[12]https://en.wikipedia.org/wiki/Sprite_(computer_graphics)
[13]https://en.wikipedia.org/wiki/Vector_graphics
[14]https://en.wikipedia.org/wiki/3D_computer_graphics
[15]https://en.wikipedia.org/wiki/Computer_animation
[16]https://en.wikipedia.org/wiki/Uncanny_valley
[17]https://www.youtube.com/watch?v=eN3PsU_iA80 
[18]https://images.nvidia.com/content/pdf/tesla/whitepaper/pascal-architecture-whitepaper.pdf
[19]http://meseec.ce.rit.edu/551-projects/fall2014/3-1.pdf
[20]https://www.karlrupp.net/2013/06/cpu-gpu-and-mic-hardware-characteristics-over-time/
[21]https://help.poliigon.com/en/articles/1712652-what-are-the-different-texture-maps-for
134
https://en.wikipedia.org/wiki/Sprite_(computer_graphics)
https://en.wikipedia.org/wiki/Vector_graphics
https://en.wikipedia.org/wiki/3D_computer_graphics
https://en.wikipedia.org/wiki/Computer_animation
https://en.wikipedia.org/wiki/Uncanny_valley
https://www.youtube.com/watch?v=eN3PsU_iA80
https://images.nvidia.com/content/pdf/tesla/whitepaper/pascal-architecture-whitepaper.pdf
http://meseec.ce.rit.edu/551-projects/fall2014/3-1.pdf
https://www.karlrupp.net/2013/06/cpu-gpu-and-mic-hardware-characteristics-over-time/
https://help.poliigon.com/en/articles/1712652-what-are-the-different-texture-maps-for
Referências Complementares
[1]http://nesdev.com/NESDoc.pdf
[2]http://www.vasulka.org/archive/Writings/VideogameImpact.pdf#page=24
[3]https://en.wikipedia.org/wiki/Real-time_computer_graphics
[4]http://dkc-forever.blogspot.com.br/2015/11/curiosidades-designer-da-rare-revela.html
[5]http://level42.ca/projects/ultra64/Documentation/man/
[6]http://www.nintendoblast.com.br/2014/01/revisitando-os-tempos-aureos-do-mode-7.html
[7] Asset usado na Unity: https://assetstore.unity.com/packages/3d/vegetation/trees/hd-dry-tree-125878
135
http://nesdev.com/NESDoc.pdf
http://www.vasulka.org/archive/Writings/VideogameImpact.pdf#page=24
https://en.wikipedia.org/wiki/Real-time_computer_graphics
http://dkc-forever.blogspot.com.br/2015/11/curiosidades-designer-da-rare-revela.html
http://level42.ca/projects/ultra64/Documentation/man/
http://www.nintendoblast.com.br/2014/01/revisitando-os-tempos-aureos-do-mode-7.html
https://assetstore.unity.com/packages/3d/vegetation/trees/hd-dry-tree-125878