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
…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
0t
0s t s’ t’
s
1t
1s
2t
2…
coord texture per ogni vertice
Il texture fetch (o: texture lookup)
• Operazione molto semplice in GLSL, es:
internamente, corrisponde a molte operazioni
– vediamo quali
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
vec4 col = texture( rgb_map , textureCoords );
risultato fetch del
il sampler (campionatore) della tessitura. Praticamente, specifica quale texture sheet
le coordinate texture un float (s) – per una texture 1D un vec2 (s,t) – per una texture 2D un vec2 (s,t,p) – per una texture 3D
Il texture lookup:
sequenza di operazioni implicate
1. Bordi: gestire (s,t) fuori dall’intervallo normalizzato [0,1] N – in modalità repeat, clamp, …
2. Scaling: passare da: [0,1] N a: coordinate texel,
– es a (s’,t’) in [0..1024] x [0..1024] , per una texture 2D 1024x1024 – NB: sono ancora in float!
3. Capire se la texture sta venendo rimpicciolita o ingrandita – nel passare da texel nel texture sheet a pixel sulle schermo – texture “minification” o “magnification”
– questo determina quale algo applicare nelle due fasi successive 4. Filtering:
– Interpolazione (bi-, tri-…) lineare dei texel intorno a (s’,t’) 5. Pre-filtering:
– MIP map-ping!
Il texture lookup:
sequenza di operazioni implicate
• Nota implementativa:
– Le operazioni sono vengono eseguite implicitamente e automaticamente (sono “hard-wired”)
– sono guidate da alcuni parametri
determinati (per ogni texture)
attraverso appositi comandi WebGL
(prima del rendering)
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
s 1- gestione dei bordi: modo "clamp"
if (s<0) s←0; if (s>1) s←1;
if (t<0) t←0; if (t>1) t←1;
1 1
t
Significato di “Clamp”
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
clamp( s , MIN , MAX );
s = clamp( s , 0 , 1 );
MIN se s < MIN
s altrimenti MAX se s > MAX
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
1- gestione dei bordi: modo “repeat"
s t
1 1
s ← s – [ s ] t ← t – [ t ]
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
Tessiture ripetute (tiled textures)
• Tipico utilizzo:
Molto efficiente in spazio!
Nota: deve essere un’immagine “TILEABLE”
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
In WebGL
gl.texParameteri(
gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE );
gl.texParameteri(
gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT );
o
nota:
setto per s e t separatemente
esempio: repeat sulla s e clamp sulla t sono parametri della tessitura. Ogni tessitura caricata in memoria ha i
propri parametri.
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 Look-up
• Reminder: un frammento ha coordinate (s,t) non intere (in texels)
Texture Space Screen Space
texture look-up
2. Passaggio da spazio texture normalizzato a spazio texels
8 16 8
16
0
il texel a coordinate intere [15,0]
s t
1 s 1
t
0 1
1
[0,1] 2
2. Passaggio da spazio texture normalizzato a spazio texels
• Spazio texture (normalizzato)
– non dipende dalla risoluzione della texture (comodo!)
– non dipende neanche dalla forma rettangolare:
in una texture rettangolare (es. 1024 x 512 ) l’angolo in alto a dx ha cmq coordinate (s,t) = (1,1) (comodo!)
• Spazio texel
– i texel sono campioni a coordinate intere
• Passaggio:
– una semplice moltiplicazione
Osservazione
• La texture 2D e lo screen buffer sono simili
A. texture : un’immagine rastrizzata
(array 2D di campioni – i texel della tessitura) B. screen buffer : un’immagine rasterizzata
(array 2D di campioni – gli screen pixel)
• L’uso standard del 2D texture mapping può essere visto come un’operaz di ricampionamento di immagni (da A a B)
valgono le regole e i problemi del ricampionamento di immagini
– la prima cosa da scoprire è…
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
3. “minification” o “magnificaiton” ?
• Domanda: in quale caso siamo?
– 1 texel : 1 pixel
ogni texel finisce in pixel diverso, e viceversa (possiamo escludere questo caso particolare) – 1 texel : N pixel
tanti pixel si riferiscono allo nello stesso texel stiamo ingrandendo la tessitura!
caso “MAGNIFICATION”
– N texel : 1 pixel
tanti texel finiscono in uno stesso pixel stiamo rimpicciolendo la tessitura caso “MINIFICATION”
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
pixel
3. “minification” o “magnificaiton” ?
Texture Space Screen Space
pixel texel
un pixel = meno di un texel
un pixel = più di un texel
minification magnification
3. “minification” o “magnificaiton” ?
• La risposta dipende da:
– l’uv-mapping della mesh, – le trasformazioni attuali
• tutte!
modellazione – da come e’ disposto l’oggetto, vista – da dove lo vedo,
proiezione – la prospettiva
– la risoluzione dello schermo / del viewport – la risoluzione della tessitura
• La risposta varia da pixel a pixel – persino dentro uno stesso triangolo
• come scoprirla, dato uno specifico accesso?
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
Derivate in spazio schremo (concetto generale)
• Idea: i frammenti vengono processati sempre in gruppi – in parallelo! (vedi lez rasterizz)
– eseguono tutti uno stesso programma! (il fragment shader)
• Durante il processing di un frammento, data un’espressione (any!)
possiamo... spiare quanto risulta il suo valore nei frammenti vicini
– con un piccolo costo di sincroniz. / comunicaz.
• la differenza = quanto sta variando l’espressione – “in spazio schermo”
• ( posso chiedere le “derivate in spazio schermo”
di qualsiasi espressione) – es: in GLSL – solo nel fragment shader, ovviamente
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
Derivate in spazio schremo (per il texture mapping)
• Se un frammento sta accedendo alla tessitura alle coordiante s,t,
allora lo stanno facendo anche i frammenti vicini!
– (es: quello accanto e quello sopra)
• La differenza fra le coordiante usate dai vicini per l’accesso determina se stiamo nel caso magnification oppure minification
– qui, la derivata in spazio schermo è usata implicitamente dal sistema (come parte del texture lookup)
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
0.5 1.5 2.5 3.5 4.5 5.5 6.5 0.5
1.5 2.5 3.5 4.5 5.5 6.5 7.5
Caso Magnification
u v
Soluzione 1:
prendo il texel in cui casco (cioè il texel il cui centro è più vicino alle coordinate u,v
del frammento) equivale ad arrotondare
le coordinate texel ad interi
"Nearest Filtering"
7.5
Caso Magnification
texture 128x128
Nearest Filtering: risutlato visivo
"si vedono i texel !"
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
0.5 1.5 2.5 3.5 4.5 5.5 6.5 0.5
1.5 2.5 3.5 4.5 5.5 6.5 7.5
Caso Magnification
u v
Soluzione 2:
Medio il valore dei quattro texel più vicini
Interpolazione Bilineare
7.5
Ripasso:
interpolazione lineare (1D) interpolazione bi-lineare (2D)
Formule...
Interpolazione lineare
(in un campionamento di una funzione 1D)
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
s f[ s ]
0 0.5
1 0.9
2 0.7
3 0.3
… …
2 3
2.25
? = 2.25 = 2 ∗ 0.75 + 3 ∗ 0.25
perché 2.25 sta fra 2 e 3, al 25% della strada da 2:
(e al 75% della strada da 3) 2.25 = 2 + 0.25 2
3
?
( )
1D texture
Interpolazione lineare
(in un campionamento di una funzione 1D)
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
s f[ s ]
0 0.5
1 0.9
2 0.7
3 0.3
… …
2 3
2.25 2
3
?
( )
1D texture
= ∗ + +1 ∗ = +
= = − = 1 −
Dove:
Interpolazione bi-lineare
(in un campionamento di una funzione 2D)
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
= 5 , 1 ∗ 0.25 + 6 , 1 ∗ 0.75
= 5 , 2 ∗ 0.25 + 6 , 2 ∗ 0.75
? = (5.75,1.20) = ∗ 0.80 + ∗ 0.20
valore in valore in valore in
2
1
5 , 2
5 , 1
6 , 2
6 , 1 6 5
?
5.75 1.20
Interpolazione bi-lineare
(in un campionamento di una funzione 2D)
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
2
1
5 , 2
5 , 1
6 , 2
6 , 1 6 5
?
? = 5 , 1 ∗ 0.25 ∗ 0.80 + 6 , 1 ∗ 0.75 ∗ 0.80 + 5 , 2 ∗ 0.25 ∗ 0.20 + 6 , 2 ∗ 0.75 ∗ 0.20
5.75 1.20
Interpolazione bi-lineare
(in un campionamento di una funzione 2D)
interpolare linearmente (in orizzontale) poi, di nuovo, linearmente
(in verticale) interpolare linearmente =
(in verticale) poi, di nuovo, linearmente
(in orizzontale) interpolare bi-linearmente =
(fra i 4 valori)
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
Interpolazione bi-lineare
(in un campionamento di una funzione 2D)
+1 ,
?
= +0 , +0 ∗ ̅ ∗ ̅
+1
̅
+1 , +1 , +1
, +1
̅
+ +1 , +0 ∗ ∗ ̅ + +0 , +1 ∗ ̅ ∗
, +1
?
Filtro di interpolazione lineare
• Texture 1D:
lineare (fra 2 texels)
• Texture 2D:
bi-lineare (fra 2x2=4 texel)
• Texture 3D:
tri-lineare (fra 2x2x2 = 8 texels)
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
Caso Magnification
texture 128x128
Bilinear Interpolation: risutlato visivo
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
Caso Magnification
• Modo Nearest:
– “si vedono i texel”
– va bene se i bordi fra i texel sono voluti – meno oneroso
• Modo Interpolazione (bi)-lineare
– di solito qualità migliore – può essere più lento
– rischia di apparire “sfuocato”
Caso Minification
• N texels 1 pixel
• problema ulteriore:
sottocampionamento tessitura
– prendo un texel, ne salto N – interpolazione bilineare non basta
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
Caso Minification
Nearest Filtering Bilinear interpolation
non risolve il problema
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
Caso Minification: MIP-mapping
MIP-map level 0
MIP-map level 1
MIP-map level 2
MIP-map level 3
MIP-map level 4 (un solo texel)
MIP-mapping: "Multum In Parvo"
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
Mipmap Math
• Definiamo un fattore di scala, ρ=texels/pixel
– ottenuto attraverso le derivate in spazio schremo di s e t
– può variare entro lo stesso triangolo
• il livello di mipmap da utilizzare è: log 2 ρ
– livello 0 = massima risoluzione – se livello<0 cosa significa?
– nota: il livello non è necess. un numero intero
Caso Minification: MIP-mapping
Bilinear interpolation
non risolve il problema
