3D-grafiikka

Ennen kuin tutustut 3D-maailman mahdollisuuksiin, kannattaa käydä läpi luku 2D-transformaatioista. Lähes kaikki seuraavissa esimerkeissä ja tutoriaaleissa esiteltävät asiat nojaavat 2D-transformaatioihin. Käymme tässä materiaalissa pintaraapaisuna läpi vain yhden esimerkin. Aihe on niin laaja, että kannattaa ehdottomasti tutustua esimerkiksi Processing.orgin P3D-tutoriaaliin ja etsiä itse netistä lisätietoa.

Esimerkki: Laatikko

3D-grafiikassa meidän on määriteltävä size-metodissa renderöijä, sillä aiemmin käytössä ollut Processingin oletusrenderöijä ei riitä kaikkiin kolmiulotteisiin tarpeisiimme. Yksinkertaisen laatikko-objektin saamme esille määrittelemällä renderöijän size-metodissa, siirtämällä kuvan translate-metodilla (3D-grafiikassa välttämätön!) ja piirtämällä laatikon box-metodilla. Lisätään vielä pari hiireen reagoivaa rotate-metodia, jotta havaitsemme kuvan kolmiulotteisuuden.

void setup(){
// määritellään P3D-renderer size-metodissa
  size(500, 500, P3D);
  fill(200);
  noStroke();
}

void draw(){
  background(0);

// siirretään piirettävät asiat haluttuun paikkaan
  translate(width/2, height/2, 0);  

// hiiren liikuttelu kiertää kuvaa
  rotateX(mouseX*0.01);
  rotateY(mouseY*0.01);  

// piirretään laatikko, jonka koko on 100
  box(100);
}

Laatikkomme on vielä kummallinen möhkylä eikä kierrossa ole meille juuri mitään uutta. Lisätään ohjelmaan valot lights-metodilla ja mahdollistetaan perspektiivin muutokset käyttämällä perspective-metodia. Kaksi uutta muuttujaa mahdollistavat kameran liikuttelun nuolinäppäimillä vaaka- ja syvyyssuunnassa.

// field of view: näkymän laajuus radiaaneina
float fov = PI/3.0;

// kameran sijainti x-akselilla
float posx = 0;

void setup(){
  size(500, 500, P3D);
  fill(200);
  noStroke();
}

void draw(){
  background(0);
// lights() asettaa oletusvalot päälle
  lights();

// määritellään perspektiivi: näkymän laajuus,
// leveyden suhde korkeuteen, sekä lähin ja kaukaisin
// piirrettävä taso z-akselilla
  perspective(fov, float(width)/float(height), width/2.0, height*2.0);    

// otetaan posx huomioon translate-metodissa
  translate(width/2+posx, height/2, 0);   
  rotateX(mouseX*0.01);
  rotateY(mouseY*0.01); 
  box(100);
}

void keyPressed(){
 
// käytetään näppäimistön nuolinäppäimiä perspektiivin ja
// kameran sijainnin määrittelyyn
  if (keyCode == UP){
    fov -= 0.1;
  } else if (keyCode == DOWN){
    fov += 0.1;
  } else if (keyCode == LEFT){
    posx -= 5;
  } else if (keyCode == RIGHT){
    posx += 5;
  }
}

Alla lopullinen ohjelma. Kokeile pyörittää laatikkoa hiirellä ja liikuttaa kameraa nuolinäppäimillä.