Mapeamento de Texturas

1

TexturasQuando o resultado começa a parecer real

Superfícies “no mundo real” são muito complexas

Não se pode modelar todos os pequenos detalhes

Como podemos então adicionar detalhe na superfície?

Modelo Geométrico Modelo Geométrico

+

Sombreamento

Modelo Geométrico

+

Sombreamento

+

Texturas 5

Motivação

Limites da Modelação Geométrica

Placas gráficas mais recentes...

... pintam biliões de polígonos de segundo

... fazem dezenas de TeraFLOPs

Insuficiente para criar realismo em

Nuvens

Relva

Terreno

Pele

…

6

Exemplo

Modelação de uma Laranja

7

Exemplo

Modelação de uma Laranja

Solução:

Tirar foto de uma laranja

Aplicar imagem na esfera

É necessário alterar a forma

Usa-se bump-mapping

Texture Mapping

Bum

pM

apppin

g

8

Mapeamento de Texturas

Texture Mapping

Usa imagens para preencher os polígonos

Bump Mapping

Altera as normais à superfície durante a visualização

Environment (reflection) Mapping

Usa um snapshot da cena para fazer texture mapping

Simular superfícies altamente especulares sem ray-tracing

9

Modelo Sombreado

10

Texture Mapping

11

Environment Mapping

12

Bump Mapping

13

Onde acontece o mapeamento?

No final do pipeline!

Eficiente porque menos polígonos passam o recorte

14

Mapeamento de texturas: é simples?

Apesar de ser “simples” mapear imagem na superfície

Há 3 ou 4 sistemas de coordenadas envolvidos

2D image

3D surface

15

Sistemas de Coordenadas

Coordenadas da Textura (s, t)

Coordenadas do Mundo (x, y, z)

Coordenadas do Dispositivo

16

Mapeamento Texturas

texture coordinates

world coordinatesdevice coordinates

17

Mapeamento de coordenadas

Textura → Superfície

s

t

(x,y,z)

Considere o mapeamento das coordenadas da textura

para um ponto na superfície:

dada uma posição (s,t) na textura, qual é a posição (x,y,z)

na superfície?

Aparentemente precisamos de:

x = X(s, t)

y = Y(s, t)

z = Z(s, t)

Mas na realidade queremos fazer exactamente o inverso –

ou seja – vamos do dispositivo para a textura.

18

Backward MappingNa realidade queremos andar “para trás”

Dado um fragmento, queremos saber a que ponto do objecto corresponde

Dado um ponto no objecto, queremos saber a que ponto na textura ele corresponde

Precisamos de ter um mapeamentos = s(x,y,z)

t = t(x,y,z)

ou

s = s(u,v)

t = t(u,v)

Estas funções difíceis de determinar genericamente

Com polígonos:

Especificam-se as coordenadas (s,t) nos vértices

Interpola-se (s,t) para os restantes pontos

19

Mapeamento de TexturasMapeamento de Textura adiciona detalhe ao mapear padrões de textura na superfície.

O padrão pode ser repetido.

Por exemplo, o padrão de textura para o cubo à direita é:

Texel = “texture element”.

Um texel é um pixel numa textura.

p.ex., uma textura 128x128 tem 128x128 texels.

No ecrã isto pode resultar em +/- pixeis dependendo da distância a que está o objecto e da escala. 20

Como definir

coordenadas de textura (s,t)?

OU Definir as coordenadas manualmente

Definirmos nós as coordenadas para cada vértice

OU Calcular as coordenadas automaticamente

Usar um algoritmo que define as coordenadas da textura para nós

21

Especificação Manual

Podemos especificar manualmente as coordenadas para cada vértice:

22

Mapeando Textura em Polígonos

23

Mapeamento de Texturas

x

y

z

image

geometry display

24

Mapeamento de Texturas no Pipeline

Imagens e geometria atravessam pipelines separados, que se

juntam no andar de rasterização

Texturas “complexas” não afectam complexidade geometrica

geometry pipelinevertices

pixel pipelineimage

rasterizer

25

Mapeando a Textura

Baseado nas coordenadas parametricas da textura

s

t1, 1

0, 1

0, 0 1, 0

(s, t) = (0.2, 0.8)

(0.4, 0.2)

(0.8, 0.4)

A

B C

a

bc

Texture Space Object Space

26

Wrapping Modes

Clamping: if s, t > 1 use color at 1, if s, t < 0 use color at 0

material.map.wrapS = THREE.RepeatWrapping; (GL_REPEAT in OpenGL)

material.map.wrapT = THREE.RepeatWrapping; (GL_REPEAT in OpenGL)

Repeating : use s, t modulo 1

material.map.wrapS = THREE.ClampToEdgeWrapping; (GL_CLAMP in OpenGL)

Atribuir coordenadas de textura fora do intervalo [0,1]: cortar ou repetir a textura

27

Tiling Repetitivo de Texturas

Uma textura pode ser repetida através da superfície repetindo a parametrização

(s,t) ao longo da superfície

Os melhores efeitos obtém quando a textura é composta em azulejos

Isto significa que o lado direito da textura se junta suavemente com o lado

esquerdo (o mesmo para o topo e fundo)

28

Magnification and Minification

Textura Polígono

Magnification Minification

Mais de um texel para um pixel (minification)

Mais de um pixel para um texel (magnification)

point sampling (nearest texel) ou

filtro linear (filtro 2 x 2) para obter valor da textura

Textura Polígono

29

Modos de Filtragem

Modos determinados por

texture.minFilter

texture.magFilter

texture.minFilter = THREE.LinearFilter;

texture.magFilter = THREE.LinearFilter;

Ou

texture.minFilter = THREE.NearestFilter;

texture.magFilter = THREE.NearestFilter;

Nota: Filtro linear requer a margem com

extra texel para filtrar nas arestas

30

Filtro de Minification Um pixel mapeia a vários texels

Comum em vistas perspectivas

Mau mapeamento de texturas

deforma o tabuleiro Usando Mipmaps melhora-se o

mapeamento, reduzindo a

deformação do tabuleiro 31

Mipmaps Ideia base:

criar texturas de tamanho decrescente

usar a subtextura apropriada

Pre-filtrar as texturas (mipmaps)

32

Mipmaps: Optimização no Armazenamento

Lados da textura devem serpotências de 2

33

Sumário sobre Filtragem

“Zoom-in” => filtro Magnification

“Zoom-out” => filtro Minification

Filtros mais avançados

necessitam mais tempo de computação

mas produzem melhores resultados

Mipmapping é um filtro Minification avançado

34

Texturas em Mipmap

Mipmapping permite o uso de texturas pre-filtradas de

resoluções decrescentes

Reduz erros de interpolação para pequenos objectos

texturados

Declara-se o nível do mipmap durante a definição da

textura

Nota: Não têm de usar mipmaps nos laboratórios!

35

Exemplo

point

sampling

mipmapped

point

sampling

mipmapped

linear

filtering

linear

filtering

36

Texturas em Three.JS

Texture( image, mapping, wrapS, wrapT,

magFilter, minFilter, format, type,

anisotropy )

Detalhes

https://threejs.org/docs/#api/textures/Texture

Parametros de Textura

https://threejs.org/docs/#api/constants/Textures

37

Texturas em Three.JS

// load a texture, set wrap mode to repeat

var texture = new

THREE.TextureLoader().load(

"textures/water.jpg" );

texture.wrapS = THREE.RepeatWrapping;

texture.wrapT = THREE.RepeatWrapping;

texture.repeat.set( 4, 4 );

38

Texturas em Three.JS

// load a texture, map it to a mesh, using UV mapping

function createMesh(geom, imageFile) {

var texture =

THREE.ImageUtils.loadTexture(imageFile);

var mat = new THREE.MeshPhongMaterial();

mat.map = texture;

var mesh = new THREE.Mesh(geom, mat);

return mesh;

}

39

UV Mapping

40

UV Mapping

41

p(x,y,z) p(u,v)

UV Mapping

42