Gerando Conteúdo Matemático Visualmente

Matemática em Gráficos:
A Mágica da Geração Procedural
Adriano Gil, Juliana Figueira
adriano.gil@samsung.com
juliana.f@samsung.com

1. Geração Procedural
2.Matemática Visual
3.Resumo sobre Mesh
4.Procedural Mesh Processing

Generative Design?
Generative Art?

● Dezenas de tradições acadêmicas e industriais interdisciplinarmente usam
geradores para síntese de artefatos:
○ “Generative music, parametric architecture, generative methods in programmed instruction, generative
programming, generative grammars for computational linguistics, and generative models for computer-aided
industrial design—not to mention the non-digital traditions of Dada, Pollack, cut-up, and other human-enacted
algorithms.”
No principio, havia geradores...

E continua havendo geradores...
- Kate Compton
.Não-trivial
.Espressivo
.Correto

1. Procedural Content Generation
PCG - criação automática ou semi-automática de conteúdo

O que pode ser
gerado?
● Levels
● Dungeons
● Puzzles
● Músicas
● Experiencias
○ Especificações de design
○ Máquinas de estado
○ Umas regrinhas...
Como?
Use your

- Kate Compton
O que é PCG?
●Uma área de pesquisa com grande influência de áreas como criatividade
computacional

The Survey by Intel (2000)
Debutou o termo “Procedural 3D Content Generation” - PCG
L-systems
Perlin noise
Fractals

Rogue’s (Toy et al. 1980): dungeons

Elite (Braben and Bell 1984): galaxias

.kkrieger (Farbrausch 2004): fps demoscene (96Kb)

Civilization (Firaxis Games 2005): territorios para
exploração

Robot Unicorn Attack ([adult swim games] 2010) e
Canabalt (Saltsman 2009): plataformas

Abordagens
Teleológica: Cria um modelo
baseado na física do ambiente ou
processo e depois “simplesmente
roda” como uma simulação.
● Algoritmos genéticos
● Dinâmica dos fluídos
● Propagação de fogo
Ontogenética: Observa o
resultado final do processo e então
tenta reproduzi-los através de
algoritmos ad hoc
● Geração de cidades
● Mapas de altura
● L-System
● Labirintos
● Diagrama de Voronoi
http://pcg.wikidot.com/pcg-algorithm:teleological-vs-ontogenetic

A busca pelo equilíbrio entre o autoral e o gerado...
● Fazer um gerador super exato e complexo pode não ser necessário...
○ Por vezes força bruta ou um “jeitinho” resolvem
○ Ou pode ser que leve tanto tempo que é melhor e mais barato fazer na mão
● Perguntas a se fazer:
■ O problema pede infinitas possibilidades altamente inteligentes?
■ Ou melhor fazer alguns poucos, mas perfeitos?

Referências
●http://www.fdg2013.org/program/workshops/papers/PCG2013/pcg2013_6.pdf
●http://www.galaxykate.com/pdfs/galaxykate-zine-encyclopedia.pdf
●http://julian.togelius.com/Togelius2011Searchbased.pdf
●https://pdfs.semanticscholar.org/5edd/7d97907122eff6c96c3c3ea6bcda02563ce6.pdf

Como visualizar a matemática?

”Mathematics became an experimental
subject. ...The PC revolution has made
science more visual and more immediate
Words are no longer enough!”
- John D. Barrow, Cosmic Imagery: Key
Images in the History of Science (2008)

Manipulando Equações
E = mc2

ax + b = y
a,b: constantes
x,y: variáveis
Qual a melhor maneira de
gerar a equação com o
comportamento
desejado???

Desmos - https://www.desmos.com/
● Aplicação web
● Permite criar, editar e
visualizar funções
matemáticas

● Aplicação web
matemáticas
● Permite interagir com
os valores de
maneira animada

● Aplicação web
matemáticas
os valores de
maneira animada
● Senóides
(seno, cosseno, …)

● Aplicação web
matemáticas
os valores de
maneira animada
● Senóides
● Seja criativo!

● Aplicação web
matemáticas
os valores de
maneira animada
● Senóides
● Seja criativo!
https://fractad.wordpress.com/tag/desmos-com/

Aplicações em Computação
Gráfica???
R: Shaders!!!!

”A shader is a piece of code, that is
executed on the GPU. The engine
feeds it with 3d model vertices,
textures and other information, and
gets back from it pixel colours.”
O que é Shader?

Shader é definido por um Material

Material
● Shader
● Propriedades do shader

Material
● Permite a Geometria
ser Renderizada!

Material
ser Renderizada!
● Para obter um visual
diferente basta
mudar o material

Material
ser Renderizada!
● Para obter um visual
diferente basta
mudar o material
https://assetstore.unity.com/packages/vfx/shaders/free-
matcap-shaders-8221

• Define uma cor para cada
píxel visível da geometria do
modelo
• Frag retorna uma cor RGBA
• Float4(1.0, 0.0, 0.0, 1.0)
• Representa vermelho 100%
opaco
• Canais variam de 0 a 1.0
Fragment shaders
http://www.alanzucconi.com/2015/07/01/vertex-and-
fragment-shaders-in-unity3d/
https://github.com/adrianogil/meshgeneration

Unity Shaders - https://github.com/setchi/Unity-ShaderSketches

You don't have to have a
degree in Maths, or in
Computer Science to
understand and write shaders.

3. Resumo sobre
Malhas Poligonais

Suficiente?
Mais?
Tessellation

Meshes
=
{Vértices +
Polígonos(triângulos)}

Vertex Color
Image by Eric Chadwick.

"O espaço"
https://www.youtube.com/watch?v=o9RK6O2kOKo—

Meshes procedurais
● Mesh{Vértice {Position, Normal, UV, Vertex Color...}, Triangulos{}}
● Renderer
https://youtu.be/64NblGkAabk

Alinhamento de recursos e objetivos
● Memória: armazenamento em disco x memória em execução
● Processamento: baking (pré processamento) x dinâmico
● A informação a ser passada: precisa ser fisicamente perfeita ou um "efeitinho"
similar resolve?

Como processar grandes
quantidades de meshes?

Como processar grandes
quantidades de meshes?
Por que

Simplificação de Mesh
https://github.com/fogleman/simplify

Simplificação de
Mesh
● Método de colapso
de arestas é um dos
mais utilizados
● Como escolher
arestas?
● Minimizar erro de
geometria!!!
M.Garland and P.S Heckbert. Surface
simplification using quadric error
metrics. Computer Graphics 31: 209– 216,
1997
Hoppe, Hugues. "Progressive
meshes." Proceedings of the 23rd annual
conference on Computer graphics and
interactive techniques. ACM, 1996.

CGAL
● Computational Geometry Algorithms Library (CGAL)
● Escrita em C++, mas com bindings para Python, Java
● Projeto fundado em 1996 como um consórcio de 8 instituições da Europa
e de Israel
● https://www.cgal.org/

CGAL
● Mesh Generation
https://pypi.org/project/pygalmesh/

CGAL
● Mesh Generation
● Reconstrução a partir
de Imagens 3D
https://doc.cgal.org/latest/Surface_mesher/index.html

CGAL
● Mesh Generation
de Imagens 3D
de conjuntos de
pontos
https://doc.cgal.org/latest/Poisson_surface_reconstruction_3/index.html

Geogram/Graphitte
• Geogram: Biblioteca de
Algoritmos Geométricos
• Graphitte: interface Visual
• Simplificação de Mesh
• Delaunay triangulation
• Diagrama de Voronoi,
• Busca e ordenação de
dados espaciais

Remoção de
Partes internas
● Modelos podem possuir
faces que não serão
visualizadas pelo usuário
● Sobrecarregam a
renderizacão
http://meshlabstuff.blogspot.com/2009/04/how-to-remove-
internal-faces-with.html

Meshlab
Simplificação de Mesh
http://meshlabstuff.blogspot.com/2009/12/practical-quad-
mesh-simplification.html
● Possui diversos
filtros para
simplificação
● Triangle-To-Quad
● Pode trazer
melhorias visuais

Parametrização
de Mesh
● Coordenadas de UV
possibilitam utilizar
imagens nos modelos
● Geração Automática das
coordenadas de UV
http://meshlabstuff.blogspot.com/2009/07/almost-isometric-
mesh-parameterization.html

Obrigado. Perguntas?
@ju_figueira, juliana.f@samsung.com
@sandmangil, adriano.gil@samsung.com
https://bit.ly/2KIsHhL

Gerando Conteúdo Matemático Visualmente

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Gerando Conteúdo Matemático Visualmente

Semelhante a Gerando Conteúdo Matemático Visualmente (20)

Gerando Conteúdo Matemático Visualmente