vertex shaderfragment shader

(1)

Computer Graphics

Marco Tarini

Università dell’Insubria Corso di Laurea in Informatica Anno Accademico 2014/15

Lezione 13: textures e Texture Mapping

M a r c o T a r i n i ‧ C o m p u t e r G r a p h i c s ‧ 2 0 1 4 / 1 5 ‧ U n i v e r s i t à d e l l ’ I n s u b r i a

Memoria RAM nelle schede grafiche

Fr am m en ti + va ry in g in te rp .

Ve rti ci in o bj . s pa ce + at tri bu ti

Screen buffer (RGBA)

Depth Buffer Stencil Buffer Ve rti ci in c lip s pa ce + va ry in gs

rasterizer lines rasterizer

triangles rasterizer points ve rte x sh ad er

Texture RAM

fra gm en t sh ad er Vertex

Buffer Index Buffer

Texture: cosa è

• buffers di memoria a bordo della video RAM

– mem condivisa (fra i vari frammenti)

– paginata e formattata in modi specifici (vedremo)

• accedibili dal fragment shader

– (recentemente, anche dal vertex shader) – con modalità di accesso particolari

• indirizzo: locazione 2D float (o 1D o 3D)

• interpolazione fra valori vicini (vedremo)

• prefiltering (vedremo)

• …

• in sola lettura!

Texture: struttura

• la memoria texture è paginata in texture sheets

(spesso: semplicemente “textures”)

• un texture sheet è una griglia regolare

– 1D, – 2D – 3D

di texels (di uno stesso tipo) – (da «texture element»)

caso più comune

(2)

Texture sheets (or textures)

Una “paginazione della memoria texture”

1D 2D 3D

un texel

(tipicamente, 4 bytes, intepretato come un un vec4: [0..1]

⁴

)

Texture: struttura

• un texture sheets ha una data risoluzione:

– es: 1024x1024 (per una 2D texture) o 32x64x32 (per una 3D texture) – tipicamente, potenze di due per lato

• res max (per lato):

– dipendente dall’implementaz – di solito, fra 2048 e 4096

– (inoltre, è limitato il numero di texel totale di ogni singola texture)

Texture: struttura

• 1 texel = un vett di N floats,

– con N = 4, 3, 2, o 1 – N = il numero di canali

della tessitura

– (ma negli shader, un accesso restituisce un vec4 )

• ciascuno memorizzato come, per es:

– 8 bits, fixed point – 16 bits, fixed point – 32 float, …

caso più comune

Reminder: fixed point notation, con 8 bits, range [0,1]

Codifica Valore

rappre- sentato:

bits: in Hexa: in base 10:

00000000 0x00 0 0.0

00000001 0x01 1 1 / 255

00000010 0x02 2 2 / 255

00000011 0x03 3 3 / 255

… … … …

11111111 0xFF 255 1.0

(3)

Prima del rendering, le textures vanno caricate in video RAM (attraverso il bus)

Fr am m en ti + va ry in g in te rp .

Ve rti ci in o bj . s pa ce + at tri bu ti

Screen buffer (RGBA)

Depth Buffer Stencil Buffer Ve rti ci in c lip s pa ce + va ry in gs

rasterizer lines rasterizer

triangles rasterizer points ve rte x sh ad er

Texture RAM

fra gm en t sh ad er Vertex

Buffer Index Buffer

L O A D

Texture: accesso (texture fetch, o texture look-up)

• Un’operazione in cui le textures si differenziano dalle comuni memorie RAM

• Comuni memorie RAM:

si indicizzano ad 1 indirizzo intero

• tessiture (in 1,2,3 dimensioni):

si indicizzano con 1,2,3 floats !

– accesso (bi- tri- ) linearmente interpolato (vedremo) – prefiltering (vedremo)

• Accesso ad una tessitura =

analogo di campionamento di un’immagine

Una texture si accede a delle coordinate

1D 2D 3D

un texel

s 1 - s

t

u t

1-

1 - s

( s ) ( s , t ) ( s , t , u )

Notazione alternativa (es usata in Direct X)

1D 2D 3D

un texel

u u 1 -

v

s

v 1-

1 - u

( u ) ( u , v ) ( u , v , s )

(4)

Texture: utilizzo tipico

Texture Space

s t

1-

1 -

Remember: due notazioni

Texture 2D Texture Space

in OpenGL (s,t)

s t

1.0 1.0 u

v

1.0

1.0 Texture Space in DirectX

(u,v)

(0,0)

Nota: s e t variano in [0..1] indipendentemente da risoluzione / rettangolarità della texture

Texture 2D

s t

texel

Texture Space

(o "spazio parametrico" o "spazio s-t" o "spazio u-v")

Una Texutre è definita nella regione [0,1] x [0,1]

dello "spazio parametrico"

es: 512 texels

es: 1024 texels

1.0 1.0

Textures: l’uso di gran lunga più comune

(5)

Textures: l’uso di gran lunga più comune

• Situazione: voglio avere un segnale che vari sulla sup. modellata dalla mesh M

– es: normale, colore, altri parametri materiale, … come lo memorizzo?

• Soluzione 1: come per-vertex attribute

– ma, per segnali complessi, devo disporre di molti vertici = mesh hi-res.

– di solito, pochi campioni (1 per vertice)

• Soluzione 2: come texel di una tessiura 2D rimappata sulla mesh M

– molto ecomonico,

– molti campioni (1 per texel)

Textures: l’uso di gran lunga più comune

• Serve un mapping (una corrispondenza):

superficie mesh spazio tessitura 2D = [0..1] ²

– «parametrizzazione» della superficie

• Idea: memorizzo questo mapping come attributo: (s,t) per vertice

– l’«u-v mapping» della superficie (u,v) == (s,t)

Esempio di UV mapping

MESH TEXTURE SPACE

…

s t

A = Z A Z

B C B C

(vertex seam)

Preliminare: Costruzione dell’UV-mapping

• Tipico task del modelling

– programmi (semi-)automatici (molto studiati) – modellatori professionisti

• usando tools appositi

• In pratica, bisogna trovare un posto in spazio tessitura per ogni triangolo della mesh

• Analogo a:

– sbucciare una mela (o uno stanford bunny ☺ ) – disporre la buccia su un rettangolo piano

• Nota richiede di solito di “tagliare” la superficie:

– discontinuità dei valori u,v – cioè vertex-seams

(6)

Alcuni esempi di segnali memorizzati in tessiture:

• ogni texel un base-color (componenti: R-G-B)

– la tessitura è una “diffuse-map“ / “color-map“/ “RGB-map“

• ogni texel una componente alpha – la tessitura è una "alpha-map"

• ogni texel una normale (componenti: X-Y-Z)

– la tessitura è una "normal-map" o "bump-map“ (in che spazio?)

• ogni texel contiene un valore di specularità – la tessitura è una “specular-map"

• ogni texel contiene un valore di glossiness – la tessitura è una “glossiness-map"

• ogni texel contiene un valore di lighting baked...

– la tessitura è una (baked) “light-map“

Tipica applicazione (quella storica):

rimappare immagini sulla geometria

geometria 3D (insieme di quadrilateri)

+

RGB texture 2D (color-map)

=

Altro esempio di diffuse-map

+ =

Altri esempi di diffuse-map

(7)

3D MODEL TEXTURE

+ =

Altri esempi di diffuse-map

M a r c o T a r i n i ‧ C o m p u t e r G r a p h i c s ‧ 2 0 1 4 / 1 5 ‧ U n i v e r s i t à d e l l ’ I n s u b r i a M a r c o T a r i n i ‧ C o m p u t e r G r a p h i c s ‧ 2 0 1 4 / 1 5 ‧ U n i v e r s i t à d e l l ’ I n s u b r i a

Texture Mapping: cenni storici

• 1974 introdotto da Ed Catmull

– nella sua Phd Thesis

• Solo nel 1992 (!) si ha text. mapping hardware

– Silicon Graphics RealityEngine

• Dal 92 a oggi:

rapido aumento della diffusione

– strada intrapresa soprattutto da low end graphic boards

• Oggi:

una delle fondamentali primitive di rendering

– la principale tecnica image based di rendering

Ed Catmull

Texture Space t s

Texture Mapping

• Ad vertice (di ogni triangolo) assegno le sue coordinate s,t nello spazio tessitura

Screen Space

x

0

,y

0

x

2

,y

2

x

₁

,y

₁

s

0

,t

0

s

1

,t

1

s

2

,t

2

posizione del 1mo vertice

attributi del 1mo vertice

s₀,t₀ s1,t1

s₂,t₂

Texture Mapping

• Così in pratica definisco un mapping fra il triangolo 3D e un triangolo di tessitura

Texture Space

Screen Space

(8)

Texture Mapping

• Ogni frammento

ha le sue coordinate s,t nello spazio tessitura

Texture Space Screen Space

texture look-up

(anche: “texture fetch”)

Problema difficile: u-v mapping

• Assegnare una coppia di coordinate texutres ad ogni vertice della mesh

– In preprocessing

s t

Problema difficile: “u-v mapping” (“u-v” == “s-t”)

fatto a mano, oppure automatizzato

Prima del rendering, le textures vanno caricate in video RAM (attraverso il bus)

Fr am m en ti + va ry in g in te rp .

Ve rti ci in o bj . s pa ce + at tri bu ti

Screen buffer (RGBA)

Depth Buffer Stencil Buffer Ve rti ci in c lip s pa ce + va ry in gs

rasterizer lines rasterizer

triangles rasterizer points ve rte x sh ad er

Texture RAM fra gm en t sh ad er Index

Buffer Vertex Buffer

L O A D

(9)

Prima del rendering, le textures vanno caricate in video RAM (attraverso il bus) …

Fr am m en ti + va ry in g in te rp .

Ve rti ci in o bj . s pa ce + at tri bu ti

Screen buffer (RGBA)

Depth Buffer Stencil Buffer Ve rti ci in c lip s pa ce + va ry in gs

rasterizer lines rasterizer

triangles rasterizer points ve rte x sh ad er

Texture RAM fra gm en t sh ad er Index

Buffer Vertex Buffer

…e si memorizza le coord texture (s,t) per ogni vertice

Fr am m en ti + va ry in g in te rp .

Ve rti ci in o bj . s pa ce + at tri bu ti

Screen buffer (RGBA)

Depth Buffer Stencil Buffer Ve rti ci in c lip s pa ce + va ry in gs

rasterizer lines rasterizer

triangles rasterizer points ve rte x sh ad er

Texture RAM fra gm en t sh ad er Index

Buffer Verex Buffer

texture look-up alle coord

( s , t ) interpolazione

di ( s , t ) down di pass

( s , t )

s t s

0

t

0

s t s’ t’

s

1

t

1

s

2

t

2

…

coord texture per ogni vertice

UV-mapping

• Memorizziamo le coord texture x vertice (come ogni altro attributo)

• Nota: in GLSL:

– sinomini delle componenti di un vec4:

r g b a x y z w

s t p q

coordinate affini xyz di un punto

componenti rosso verde blu (e alpha) di un colore coordiante texture affini s t (e p,q) (spazio parametrico)

Interpolazione lineare coordinate texture

• Dettaglio: non è esatto per la proiezione prospettica – ma si possono trovare le coord baric. di p in v

1

v

2

v

3

a partire dalle coord baric. di t(p) in t(v

1

) t(v

2

) t(v

3

)

V

₁

V

2

V

3

p

R 3 R ²

t(p)

t( v

1

)

t( v

2

) t( v

3

)

trasformaz t ^affine

p ha coord.

baricentriche a,b,c nel triangolo v

1

v

2

v

3

t(p) ha coord.

baricentriche a,b,c

nel triangolo t(v

1

) t(v

2

) t(v

3

)

(10)

Textures con canale alpha usato nell’Alpha Test / Alpha Blending

– es: alberi, foliage

Textures con canale alpha usato nell’Alpha Test / Alpha Blending

Alpha map RGB map

Textures con canale alpha usato nell’Alpha Test / Alpha Blending

• Es: pelo, pellicce

tessitura (ripetuta)

Textures con canale alpha usato nell’Alpha Test / Alpha Blending

– es: drappi, barba...

by Micheal Filipowski

2004

tessitura

(11)

Normal maps

Textures nei cui texel sono memorizzate Normali

stessa geometria (una sfera) diffuse maps + bumpmaps diverse

M a r c o T a r i n i ‧ C o m p u t e r G r a p h i c s ‧ 2 0 1 4 / 1 5 ‧ U n i v e r s i t à d e l l ’ I n s u b r i a M a r c o T a r i n i ‧ C o m p u t e r G r a p h i c s ‧ 2 0 1 4 / 1 5 ‧ U n i v e r s i t à d e l l ’ I n s u b r i a