WebGL ja matriisilaskenta

Jihuu osaan matriisilaskentaa!

http://threejs.org/ avasi tien tässä

Näin se menee:

Otetaan neljä pistettä 3D avaruudessa (x,y,z): esim (1,  0 , 1), (1,  0 , -1), ( -1,0 ,1 ), ( -1,0 , -1 )

Kuten kaikki tiedämme näistä pisteistä syntyy neliö. Siitä voi varmistua piirtämällä pisteet  ruutupaperiin. Kolmiulotteista ruutupaperia ei tarvita koska y akselilla arvo on O, joten pisteet on paperin pinnalla.

  1. three.js – javascript koodilla neliö luodaan näillä riveillä:
    
    this.geometry = new THREE.Geometry();
    this.geometry.vertices.push( new THREE.Vector3( 1,  0 , 1 ));
    this.geometry.vertices.push( new THREE.Vector3( 1,  0 , -1 ));
    this.geometry.vertices.push( new THREE.Vector3( -1, 0 ,1 ));
    this.geometry.vertices.push( new THREE.Vector3( -1, 0 , -1 ));
    this.geometry.faces.push( new THREE.Face3(  0,   2, 1 ));
    this.geometry.faces.push( new THREE.Face3( 1, 2, 3) );
    

    Tältä tulos näyttää:

    nelio01

  2. Toki tarvitaan hieman muutakin koodia, jotta jotain näkyisi, sitä varten tsekkaa githubin eka kommit: https://github.com/juyshy/webglstuff/
  3. Mitäs jos nyt haluasin lähteä siirtämään näitä pisteitä 3D kordinaatiostossa siten, että vaikkapa muutamalla koodirivillä voisin luoda lisää tällaisia neliomuotoisia pisteryppäitä jolloin niistä muodostuisi tällainen kuva:
    kuvawebgl_matrix_malli03
    otetaan käyttöön matriisit ja ryhdytään hivuttamaan pisteitä:
    luodaan uusi matriisi:

    
    var m1 = new THREE.Matrix4();
    
  4. siirretään pisteitä askel ylöspäin, eli laitetaan matriisi-objektin translate metodiin vektori, joka tuuppaa pisteitä y akselilla yhden pykälän ylös: x on 0, y = 1 ja z nolla:
    
    m1.translate( new THREE.Vector3( 0, 1 , 0 )  )  ;
    

    Itse asiassa tämä on fuskausta. Varsinaista matriisilaskentaa ei tarvitse osata koska THREE.Matrix4 objekti tekee sen koodaajan puolesta.

  5. napataan verteksien lista ja loopataan se läpi. Kloonataan pisteet väliaikaiseen listaan koska haluan luoda lisää pisteitä enkä siirtää alkuperäisiä. Lasketaan kukin vertekstipiste matriisilla ja lisätään kloonit uuteen listaan.
    
    var extraVerts = new Array();
    for (var j= 0; j < this.geometry.vertices.length; j++) {
    	var vertex = this.geometry.vertices[j].clone()
    	vertex.applyMatrix4( m1 ) ;
    	extraVerts.push(vertex );
    	//console.log(vertex);
    }
    // lets concatenate new vertex points to geometry
    this.geometry.vertices=this.geometry.vertices.concat(extraVerts);
    // and add faces:
    this.geometry.faces.push( new THREE.Face3( 4, 4+1, 4+2 ) );
    this.geometry.faces.push( new THREE.Face3( 4+1, 4+2, 4+3 ) );
    
  6. kokeillan myös pyörittämistä: lisätään rotateZ metodi eli pyöritetään pisteitä Z-akselin ympäri three.js käyttää pyörityskulmissa radiaaneja (tarkoittaa sitä, että Piin arvo vastaa 180 astetta, jolloin asteet saa muunnettua radiaaneiksi kaavalla: radiaanit= asteet * Math.PI/180
    m1.translate( new THREE.Vector3( 0, 1, 0 )  )  ;
    var kulma = 15;
    m1.rotateZ( kulma * Math.PI/180 )  ;
    

Wow!  Tältä se nyt näyttää:

nelio03

Tästä se lähtee. Lisätään vain uudet “facet” eli polygonpinnat ja uusi setti neliöitä..

 

 

This entry was posted in 3D graphics, JavaScript, WebGL. Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL.

Leave a Reply

Your email address will not be published. Required fields are marked *