mat4 m, ma, mb ; vec4 v, u; m = mb ; // come dire: m = m mb (non mb * m!) u = m * v ; // prodotto matrice-vettore

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "mat4 m, ma, mb ; vec4 v, u; m *= mb ; // come dire: m = m * mb (non mb * m!) u = m * v ; // prodotto matrice-vettore"

Mariana Verde
5 anni fa
Visualizzazioni

1 Computer Graphics Università dell Insubria Corso di Laurea in Informatica Anno Accademico 24/5 Marco Tarini Trasformazioni 3D con three.js Matrici in GLSL mat4 m, ma, mb ; vec4 v, u; m = ma * mb ; // prodotto matrice matrice // (riga per colonna) m *= mb ; // come dire: m = m * mb (non mb * m!) u = m * v ; // prodotto matrice-vettore u = m[ ] ; // prendi la ma colonna di m m[ 3 ] = u ; // setta la 4ta colonna di m m = mat4( v ) ; // matrice diagonale m = mat4(. ) ; // nella diagonale (cioè l ide) Matrici in GLSL mat4 m, ma, mb ; vec4 v, u; m = transpose( m // non oneroso m = inverse( m // molto più oneroso! float k = determinant( m m = ma * 5; // moltipilca tutti gli elementi m = ma + mb; // somma fra matici mat3 submat = mat3( m // sottomatrice 3x3 m = mat4( submat // borda con, e sulla diago Vertex shader con transformazione 3D Trasformazioni 4x4 = matrici 4x4 (uniforms) attribute vec3 vertexpos ; attribute vec3 colattribute ; varying vec3 colvarying; Model-View- Projection (da spazio-oggetto a spazio-clip in un sol colpo) uniform mat4 mvp ; W (coord affine) X Y Z void main(void) { gl_position = mvp * vec4( vertexpos,. colvarying = colattribute ; VERTEX SHADER (GLSL)

2 Setting the uniforms: caso matrici Serializzare le matrici «trascrivere come serie di numeri» (in memoria, su disco, etc) uniform mat4 mvp; var mvp_loc = gl.getuniformlocation( myprog, mvp" «dammi un vettore (non i valori)» «column major order» gl.uniformmatrix4fv ( mvp_loc, false, xxx reneder( // sends the primitives GPU CPU un Float32Array (6 el) a b c d e f g h i j k l m n o p Row-major Order (per riga): a e i m b f j n c g k o d h l p trasposta di Column-Major Order (per colonna): a b c d e f g h i j k l m n o p più standard Settare la matrice di MVP Come una matrice di scalatura? // da invocare nella draw, prima di mandare le primitive function setuniforms(){ gl.uniformmatrix4fv( mvp_loc, false, new Float32Array( [.5,,,, // first column!!!! (not row),.5,,,,,.5,,,,,, ] ) Settare la matrice di MVP Come una matrice di rot di 45 sull asse Z? // da invocare nella draw, prima di mandare le primitive function setuniforms(){ gl.uniformmatrix4fv( mvp_loc, false, new Float32Array( [ +.77, -.77,,, // first column!!!! (not row) +.77, +.77,,,,,,,,,,, ] ) nota: sin(45 ) = cos(45 ) =.77 2

3 Rotazione attorno all'asse x, y, o z R X ( θ ) = -sinθ sinθ R Y ( θ ) = -sinθ - sinθ = sinθ ( θ ) R Z sinθ Ci serve una libreria JavaScript per matrici, vettori, etc three.js GLGE SpiderGL adottiamo questa three.js quick start Matrici in three.js download it ( ) dal package prendere i builds three.js three.min.js (versione minimale, ci basta per ora) metterli a dispozisione della pagina html (es dentro una cartella js/ ) inlcuderli: <html> <head> <script src="js/three.min.js"></script> <script type="text/javascript"> </script> </head> head (come tutte le librerie JavaScript) var m = new THREE.Matrix4( // m = identità /* costruzioni di matrici utili, comprese quelle che abbiamo visto: */ m.maketranslation( dx, dy, dz m.makescale( sx, sx, sz m.makerotationx( radiants m.makerotationy( radiants m.makerotationz( radiants m.makeaxis( axisx, axisy, axisz // dai tre vettori asse m.makeperspective( fov, aspect, nearz, farz /* accesso agli elementi */ m.elements( // un Float32Array con i 6 elementi 3

Matrici in three.js Un modo per definire la matrice di vista var m = new THREE.Matrix4( var b = new THREE.Matrix4( /* moltipilcazione riga colonna: */ m.multiply( b // a destra!

determinant( // un float m.transpose( // in place, cioe m = transposta di m ; m.getinverse( b // m = inversa di b theta /* e molto altro, per es: */ // costruisce una matr.

4 Matrici in three.js Un modo per definire la matrice di vista var m = new THREE.Matrix4( var b = new THREE.Matrix4( /* moltipilcazione riga colonna: */ m.multiply( b // a destra! m *= b; // cioè m = m*b; // (equivale a fare prima b, poi m) una semplice Trackball : var trackball = { phi:., // degrees theta:., dist: 5. ; y /* inversioni etc */ var det = m.determinant( // un float m.transpose( // in place, cioe m = transposta di m ; m.getinverse( b // m = inversa di b theta /* e molto altro, per es: */ // costruisce una matr. vista (vedi esercizio di trasformazione) m.lookat ( eyepos, targetpos, upvec phi z -x Soluz (traccia): Se la camera fosse un oggetto qualsiasi, per portarla nella pos giusta: ricetta: partenza: camera nello, puntata verso Z, etc. prima la sposto sulla Z di dist poi lo ruoto attorno alla X di theta poi lo ruoto attorno alla Y di phi Soluz (traccia): Allora la matrice di vista V si ottiene invertendo (sia ciascuna op che il loro ordine) : ricetta: partenza: spazio mondo prima lo ruoto attorno alla Y di phi poi lo ruoto attorno alla X di theta poi la sposto sulla Z di dist arrivo: spazio vista M M M2 V = M2*M*M 4

5 Setting della view matrix In Javascript (con three.js ) : Setting della projection matrix In Javascript (con three.js ) : Distanze del Near e Far Clipping Plane (in spazio vista!) var view = new THREE.Matrix4( var m = new THREE.Matrix4( var m = new THREE.Matrix4( var m2 = new THREE.Matrix4( var view = ; var projection = new THREE.Matrix4( projection.makeperspective( 6,.,.5,. m2.maketranslation(,, -trackball.dist view.multiply( m2 m.makerotationx( -trackball.theta / 8. * 3.45 view.multiply( m var mvp = new THREE.Matrix4( mvp.multiply( projection mvp.multiply( view Field of View (degrees) Aspect Ratio del viewport m.makerotationy( -trackball.phi / 8. * 3.45 view.multiply( m gl.uniformmatrix4fv( mvp_loc, false, mvp.elements conversione da degree a rad 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 4 / 5 U n i v e r s (ma i t à d meglio e l l I n usare s u b r i Math.PI) a mandiamo la matrice di MVP allo shader come uniform precedentemente trovato (dopo la costruz. dello shader) convenientemente, un Float32Array Proiezione prospettica Paradigmi di interazione 3D matrice di trasformazione per la proiezione prospettica P = / d World in Hand (or Object in Hand) mi immagino la camera fissa, manipolo l oggetto davanti alla camera es: un visualizzatore di oggetti 3D x y P z x y = z z / d divisione per 4ta comp x z / d y z / d d Camera in Hand mi immagino un oggetto / il mondo fermo, muovo la camera intorno es: un game st person shooter 5

6 primitive qui manipolazioni di stato (es. settare la matrice) stato di OpenGL tutto il pipeline (proiezione, setup, rasterizzazione) pixels Depth test, in OpenGL Depth test, in WebGL (o OpenGL) Abilitarlo: gl.enable(gl.depth_test Quando si cancella lo schermo, cancellare anche il depth buffer Determinare la condizione per passare il test: gl.never gl.equal gl.lequal gl.greater gl.notequal gl.depthfunc( GL_LESS gl.less ) gl.gequal gl.always (dafault) gl.clear( gl.color_buffer_bit gl.depth_buffer_bit OR bit a bit (la clear prende una maschera di bits che specifica quali buffer cancellare) Depth test, in WebGL (o OpenGL) Il rasterizzatore produce un valore di depth di default per ogni frammento prodotto interpolando la Z dei vertici proiettati in input Possiamo sovrascrivere questo valore (se vogliamo) nel fragment shader // fragment shader void main() { gl_fragcolor = // un vec4 gl_fragdepth = // un float assegnamento opzionale. (ha un costo grande farlo! depth test va rimandato e alcune ottimizzazioni HW disabilitate) Per i dettagli, vedere l implementazione sul sito (come al solito): lez 9B 6

Documenti analoghi

Aggiungiamo attributi (per vertice!)

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