VERTEX ShaderFRAG Shad.VERTEX ShaderFRAGMENT Shader

1 Prossimo passo:

• Aggiungiamo attributi (per vertice!)

• Roadmap:

1. includiamoli nel buffer

2. facciamoli prendere dal vetex puller 3. usiamoli nel vertex shader

4. (verranno inteprolati autmaticamente nel rast.) 5. usiamo la loro interpolaz nel fragment shader

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

ES: attributo COLORE

• Se abbiamo, per ogni vertice:

– X,Y,Z (geometria = attributo di indice 0)

– R,G,B (attributo colore = attributo di indice 1)

• Vari modi per formattare dati:

– in un buffer interleaved:

X 0 ,Y 0 ,Z 0 ,R 0 ,G 0 ,B 0 , X 1 ,Y 1 ,Z 1 ,R 1 ,G 1 ,B 1 ,…

– in buffer separati:

X ⁰ ,Y ⁰ ,Z ⁰ , X ¹ ,Y ¹ ,Z ¹ , … R ⁰ ,G ⁰ ,B ⁰ , R ¹ ,G ¹ ,B ¹ , – oppure anche:

X

,X

, … Y ⁰ ,Y ¹ ,… Z 0 ,Z 1 ,… R 0 ,R 1 ,… G 0 ,G 1 … – etc

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

segliamo questo

Attributo colore

• Un secondo indice, per un altro attributo

• Aggiungiamo i dati

– es: un vertice blu, uno verde, uno rosso:

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

const positionAttribIndex = 0;

const rgbAttributeIndex = 1;

var positions = [

0.0, 0.0, 0.0,0.0,1.0, // 1st vertex 1.0, 0.0, 0.0,1.0,0.0, // 2nd vertex 0.0, 1.0, 1.0,0.0,0.0, // 3rd vertex ];

X

Y

R

G

B

X

Y

R

G

B

X

… (globali, costanti)

Spieghiamo il formato dei buffer al Vertex Puller

• Attributo Posizione:

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

gl.vertexAttribPointer( positionAttributeIndex , 2, gl.FLOAT ,

false , 5*4, 0);

X

Y

R

G

B

X

Y

R

G

B

X

… stride

5 x 4 bytes = n. elem = 2 (float)

Buffer:

stride

2 Spieghiamo il formato dei buffer al Vertex Puller

• Attributo Colore:

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

X

Y

R

G

B

X

Y

R

G

B

X

… Buffer:

gl.vertexAttribPointer( colorAttributeIndex , 3, gl.FLOAT , false , 5*4, 2*4);

stride 5 x 4 bytes = n. elem = 3 (floats)

offset 2 x 4 bytes =

stride

Negli shaders: prima

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

attribute vec2 aPosition;

void main(void) {

gl_Position = vec4( aPosition, 0.0, 1.0 );

}

void main(void) {

gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);

}

VE R TE X Sh ad er FR AG Sh ad .

Negli shaders: dopo

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

attribute vec2 position;

attribute vec3 baseColor;

varying vec3 color;

void main(void) {

gl_Position = vec4( position, 0.0, 1.0 );

color = baseColor ;

}

VE R TE X Sh ad er

precision highp float;

varying vec3 color;

void main(void) {

gl_FragColor = vec4( color , 1.0);

}

FR AG M EN T Sh ad er

L I N K

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 0 / 1 1 ‧ U n i v e r s i t à d e l l ’ I n s u b r i a

Linguaggio GLSL:

classi di allocazione

• attribute

– valore definito su ogni vertice – nel vertex shader: INPUT (sola lettura) – nel fragment shader: non usato

• varying

– valore che varia dentro la primitiva – nel vertex shader: OUTPUT (sola scrittura) – interpolato dal rasterizzatore

– nel fragment shader: INPUT (sola lettura) varying vec3 color;

attribute vec3 baseColor;

3 Linking di vertex e fragment shader

• Vertex Shader:

– input:

• gli attributes – output:

• i varyings

• gl_Position (vec4)

• Fragment Shader:

– input:

• i varyings – output:

• gl_FragColor (vec4)

• gl_Depth (float) (opzionale)

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

LINK

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 0 / 1 1 ‧ U n i v e r s i t à d e l l ’ I n s u b r i a

Linguaggio GLSL: (per completezza)

altre classi di allocazione

• const

– valore costante, noto a compilazione – definito quando dichiarato (obbligatoriamente) – risolto direttamente dal compilatore

• temporanea

– valore “usa e getta” , di lavoro – var locale o globale

– lettura / scrittura

– nota: non sopravvive mai allo shader ! (neanche se globale) const vec3 PINK_COLOR = vec3( 1.0, 0.5, 0.5 );

vec3 tmp ; niente

Per i dettagli,

vedere l’implementazione sul sito (come al solito):

lez 18A

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