<script type="text/glsl" id="vertShader" >

(1)

1

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

Un altro modo per includere gli shaders nei file HTML

<head>

<script type="text/glsl" id="vertShader" >

</script>

<script type="text/javascript" >

</script>

</head>

file:index.html

...

void main() { ...

}

...

var vertShaderSource =

document.getElementById("vertShader").textContent;

...

GLSL

JavaScript

HTML5

Controlli in JavaScript / HTML5: bottoni

<head>

<script type="text/javascript" >

</script>

</head>

<body>

...

<button onclick=" y_function( ">

text on button!

</button>

...

</body>

file: index.html

...

function my_function() { // button has been pressed!

}

my_function()

la callback per l’evento click

Controlli in Javascript / HTML5: checkbox

<head>

<script type="text/javascript" >

</script>

</head>

<body>

...

<input type="checkbox" onclick=" function1()" id="my_check" >

text!

</input>

...

</body>

file:index.html

...

var is_checked = document.getElementById("my_check").checked;

...

function my_function() {

// checkbox has been checked / unchecked!

}

my_function()

Nota sui linguaggi:

funzioni matematiche / geometriche

• Stiamo manipolando punti , vettori , matrici in due lingue:

– in JavaScript (gira in CPU, nell’inerprete del browser), – in GLSL (gira in GPU, negli shaders)

• In particolare:

– in GLSL:

• usando costrutti nativi – in JavaScript:

• usando libreria Three.js

• (potevamo usare : GLGE )

• (potevamo usare : SpiderGL )

• Le funzioni sono concettualmente le stesse, ma hanno sintassi diverse

– Vediamo alcuni esempi di traduzioni side-to-side…

– in C++ avremmo usato, per es:

• GLM library

(bouns: sintassi ≅ GLSL!)

• o, Eigen library

• o, VcgLib (usa eigen lib)

(2)

2 Nota sui linguaggi:

funzioni matematiche / geometriche

Definire nuovi vettori / matrici :

v0.x = 2.0;

float k = v0.x; // .y , .z // oppure:

float k = v0[ 0 ]; //

1 , 2

v0.x = 2.0;

var k = v0.x; // .y , .z // oppure:

var k = v0.getComponent( 0 ); // 1 , 2

GLSL JS + three.js

vec3 v0 = vec3(0.5, 1.0, 0.0);

vec4 v1,v2;

mat3 Ma;

mat4 Mb;

var v0 = new THREE.Vector3(0.5, 1, 0);

var v1 = new THREE.Vector4();

var v2 = new THREE.Vector4();

var Ma = new THREE.Matrix3();

var Mb = new THREE.Matrix4();

GLSL JS + three.js

Accedere alle singole coords :

Nota sui linguaggi:

funzioni matematiche / geometriche

Funzioni su vettori :

vec3 v0, v1, v2;

v0 = vec3( 2.0, 0.5, 0.5 );

v0 += v1;

v2 = v0 + v1;

v0 -= v1;

v2 = v0 – v1;

**v0 *= 3.0;**

v0 /= 3.0;

// prodotto comp. x comp.

v2 = v0 * v1;

var v0 = new THREE.Vector3();

var v1 = new THREE.Vector3();

var v2 = new THREE.Vector3();

v0.set( 2, 0.5, 0.5 );

v0.add( v1 );

v2.addVectors( v0 , v1 );

v0.sub( v1 );

v2.subVectors( v0 , v1 );

v0.multiplyScalar( 3.0 );

v0.divideScalar( 3.0 );

// prodotto comp. x comp.

v2.multiplyVectors( v0 , v1 );

GLSL JS + three.js

Nota sui linguaggi:

funzioni matematiche / geometriche

Funzioni su vettori :

vec3 v0, v1, v2;

float k;

v0 = -v0;

k = length( v0 );

v0 = normalize( v0 );

k = dot( v0 , v1 );

v2 = cross( v0 , v1 );

v0 = cross( v0 , v1 );

var v0 = new THREE.Vector3();

var v1 = new THREE.Vector3();

var v2 = new THREE.Vector3();

var **k; /* float */**

v0.negate();

k = v0.length();

v0.normalize(); // (in place) k = v0.dot( v1 );

v2.crossVectors( v0 , v1 );

v0.cross( v1 );

GLSL JS + three.js

Nota sui linguaggi:

funzioni matematiche / geometriche

Funzioni su matrici, e fra matrici e vettori :

vec3 v0 ;

mat3 Ma , Mb , Mc ;

**Ma *= 2.0 ;**

// riga-per-colonna:

**Ma *= Mb** ; // a dx: Ma=Ma*Mb **Mc = Ma * Mb** ;

Ma = inverse( Mb );

Ma = transpose( Ma );

float k = determinant( Ma );

// prodotto matrice vettore:

**v0 = Ma * v0 ;**

var v0 = new THREE.Vector3();

var Ma = new THREE.Matrix3();

var Mb = new THREE.Matrix3();

var Mc = new THREE.Matrix3();

Ma.multiplyScalar( 2.0 );

// riga-per-colonna:

**Ma.multiply( Mb ); // a dx: Ma=Ma*Mb Mc.multiplyMatrices( Ma , Mb );**

Ma.getInverse( Mb );

Ma.transpose(); // (in place) var k = Ma.determinant();

// prodotto matrice vettore:

v0.applyMatrix3( Ma );

GLSL JS + three.js

(3)

3 Implementazione lighitng:

diario delle scelte implementative fatte in classe

• luci direzionali

– non posizionali, c’est plus facile – TODO: provare posizionali

• dir di vista approssimata a costante su tutta la scena – (la dir 0,0,1 in spazio vista)

– è solo un’approssimaz! (per semplicità) (vista prospettica!) – altrimenti? (come computare dir vista nel vertex shader?)

• computo del lighting in spazio oggetto

– portare tutti gli altri vettori coinvolti in questo spazio – motivo: più efficiente?

trasformare pochi vettori: light dir, etc (ma, in CPU: slow!) invece che tutte le molte normali (ma, in GPU: fast!)

Implementazione lighitng:

diario delle scelte implementative fatte in classe

• Dir luci costanti in spazio vista (headlight) o in spazio mondo (luci fisse nella scena)?

– entrambi: selezionabile da un checkbox – in ogni caso, passare a spazio oggetto!

• Nelle mesh: normali computate proceduralmente – come lo sono le posizioni dei vertici

– nb: devono essere vettori unitari

• Caso cilindro: facile

• Caso cono: usare stessa connettività del cilindro – ma con geometria della faccia sup collassata in un punto – cioè creare un caso estremo di vertex seam nell’apex – per modellare la discontinuità di normale nella punta

• Caso cubo: TODO

– (richiede vertex seams: 6x4 verts in totale, non più solo 8)

Implementazione lighitng:

diario delle scelte implementative fatte in classe

• Modello di lighting:

– materiale: come costanti nello shader (per semplicità) TODO: come uniforms e/o attributes (quando serve?) – componenti dell’equaz:

• diffuse: lo standard Lambertian

• specular: con Blinn-Phong

• ambient: invece di costante additiva (piatto!), usiamo una formula a fantasia:

un diffuse tenue da direzione opposta di luce principale

• Shading:

– per frammento (“phong shading”) – (normali interpolate, cioè varying)

– nota: re-normalizzazione normali interpolate

Per i dettagli,

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

lez 22B