Java → Processing → Uvod u 3D Processing

Uvod u 3D Processing – prvi koraci u trodimenzionalnoj grafici

Do sada smo u Processing-u crtali dvodimenzionalne objekte kao što su linije, pravougaonici, kružnice i mnogouglovi. U ovoj lekciji napravićemo prvi korak ka trodimenzionalnoj grafici. Naučićemo kako se aktivira P3D renderer, kako se crtaju prvi 3D objekti i na koji način možemo da ih pomeramo i rotiramo.

Šta je P3D?

Podrazumevano, Processing koristi dvodimenzionalni renderer. U tom režimu možemo crtati samo objekte u ravni ekrana. Ako želimo da koristimo trodimenzionalnu grafiku, potrebno je da uključimo P3D renderer.

size(800,600,P3D);

Treći parametar funkcije size() govori Processing-u da će koristiti trodimenzionalni prikaz. Od tog trenutka možemo koristiti funkcije kao što su:

• box()
• sphere()
• rotateX()
• rotateY()
• rotateZ()

Prvi 3D program

Počećemo od najjednostavnijeg mogućeg primera. Program crta jednu kocku u centru prozora.

void setup(){

    size(800,600,P3D);

}

void draw(){

    background(220);

    translate(width/2,height/2);

    box(150);

}

Funkcija box() crta kocku čija je stranica jednaka zadatoj vrednosti. Pošto je koordinatni početak u gornjem levom uglu prozora, pomoću funkcije translate() pomeramo koordinatni sistem u centar ekrana.

Koordinatni sistem u 3D

U dvodimenzionalnoj grafici koristili smo dve ose:

• X — horizontalna osa
• Y — vertikalna osa

U trodimenzionalnoj grafici dodaje se još jedna osa:

• Z — dubina prostora.

Na početku nije potrebno da pamtite u kom smeru raste Z osa. Mnogo je važnije da shvatite da svaki objekat sada ima položaj određen pomoću tri koordinate:

(x, y, z)

Pomeranje objekta u prostoru

Funkcija translate() može da primi tri parametra.

translate(150,100,-100);

box(120);

Prvi parametar određuje pomeranje po X osi. Drugi parametar određuje pomeranje po Y osi. Treći parametar određuje pomeranje po Z osi. Na taj način objekat možemo postaviti na željeno mesto u prostoru.

Rotacija 3D objekata

Jedna od najvećih prednosti trodimenzionalne grafike jeste mogućnost rotiranja objekata oko različitih osa. U 2D grafici mogli smo da rotiramo objekat samo u ravni ekrana, dok u 3D prostoru postoje tri nezavisne ose rotacije.

• rotateX() – rotacija oko X ose
• rotateY() – rotacija oko Y ose
• rotateZ() – rotacija oko Z ose

Primer 1 – Rotacija kocke oko Y ose

// Ugao rotacije kocke
float ugao = 0;

void setup(){

   // Kreiranje prozora dimenzija 800x600 piksela.
   // Treći parametar P3D uključuje trodimenzionalni renderer.
   size(800,600,P3D);

}

void draw(){

   // Boja pozadine (svetlosiva)
   background(220);

   // Pomeranje koordinatnog sistema u centar prozora.
   // Da ovo ne uradimo, kocka bi bila nacrtana u gornjem levom uglu.
   translate(width/2,height/2);

   // Rotacija kocke oko Y ose.
   // Ugao je izražen u radijanima.
   rotateY(ugao);

   // Crtanje kocke čija je stranica 150 piksela.
   box(150);

   // Povećavanje ugla rotacije.
   // Pošto se funkcija draw() izvršava više puta u sekundi,
   // kocka će izgledati kao da se neprekidno okreće.
   ugao += 0.02;

}

U ovom primeru kocka se okreće oko Y ose. Promenljiva ugao čuva trenutni ugao rotacije i u svakom prolazu kroz funkciju draw() povećava se za malu vrednost. Pošto se ekran osvežava više desetina puta u sekundi, posmatrač stiče utisak kontinuiranog okretanja kocke.

U svakom prolazu kroz funkciju draw() ugao se malo povećava, pa se kocka neprekidno okreće oko Y ose.

Crtanje sfere

Pored kocke, Processing omogućava crtanje sfere pomoću funkcije sphere().

void setup(){

   size(800,600,P3D);

}

void draw(){

   background(220);

   translate(width/2,height/2);

   sphere(90);

}

Argument funkcije predstavlja poluprečnik sfere.

Dodavanje osvetljenja

Za razliku od 2D grafike, u trodimenzionalnim scenama veoma je važno odrediti način osvetljavanja objekata. Najjednostavniji način jeste korišćenje funkcije:

lights();

Ona uključuje podrazumevano osvetljenje i omogućava da se mnogo jasnije vide ivice i zakrivljene površine objekata.

void draw(){

   background(220);

   lights();

   translate(width/2,height/2);

   rotateY(frameCount*0.02);

   sphere(90);

}

U poslednjem delu lekcije naučićemo kako da u istoj sceni nacrtamo više objekata korišćenjem funkcija pushMatrix() i popMatrix(). Te funkcije predstavljaju osnovu za izradu složenijih 3D scena i biće veoma važne u narednim lekcijama kada budemo pravili Sunčev sistem i druge trodimenzionalne simulacije.

Više 3D objekata u istoj sceni

Do sada smo crtali jedan objekat u centru ekrana. U realnim 3D scenama često imamo više objekata koji se nalaze na različitim pozicijama i imaju različite rotacije.

Da bismo to postigli, moramo pravilno da upravljamo transformacijama.

Problem: zašto se sve rotira zajedno?

Pogledajmo sledeći primer:

translate(width/2,height/2);

rotateY(fi);

box(100);

translate(200,0,0);

box(50);

Na prvi pogled očekujemo da drugi objekat bude odvojen, ali on se i dalje ponaša kao deo iste transformacije.

Rešenje: pushMatrix() i popMatrix()

Funkcije pushMatrix() i popMatrix() omogućavaju da sačuvamo i vratimo stanje koordinatnog sistema.

• pushMatrix() – čuva trenutno stanje
• popMatrix() – vraća prethodno stanje

Primer pravilnog crtanja više objekata

void draw(){

  // Boja pozadine prozora.
  background(220);

  // Pomeranje koordinatnog sistema u centar prozora.
  // Na taj način će se objekti crtati oko centra ekrana.
  translate(width/2,height/2);

  // Rotacija koordinatnog sistema oko Y ose.
  // Svi objekti nacrtani nakon ove naredbe biće rotirani.
  rotateY(fi);

  // ==================================================
  // Prvi objekat - kocka
  // ==================================================

  // Čuvamo trenutno stanje koordinatnog sistema.
  pushMatrix();

  // Crtanje kocke stranice 120 piksela.
  // Pošto nismo menjali položaj koordinatnog sistema,
  // kocka će biti nacrtana u centru scene.
  box(120);

  // Vraćamo prethodno stanje koordinatnog sistema.
  popMatrix();

  // ==================================================
  // Drugi objekat - sfera
  // ==================================================

  // Ponovo čuvamo stanje koordinatnog sistema.
  pushMatrix();

  // Pomeramo koordinatni sistem za 200 piksela po X osi.
  // Time određujemo položaj sfere u odnosu na kocku.
  translate(200,0,0);

  // Rotacija sfere oko X ose.
  rotateX(fi);

  // Crtanje sfere poluprečnika 60 piksela.
  sphere(60);

  // Vraćamo koordinatni sistem na stanje pre pomeranja.
  // Sledeći objekti neće biti pogođeni ovim transformacijama.
  popMatrix();

  // Povećavanje ugla rotacije.
  // U svakom prolazu kroz draw() objekti će se
  // nalaziti u novom položaju.
  fi += 0.02;

}

Svaki objekat sada ima svoj “lokalni prostor” i ne utiče na druge.

Mini projekat – 3D scena sa više objekata

U sledećem primeru kreiramo jednostavnu 3D scenu koja se sastoji od:

• rotirajuće kocke u centru
• sferе koja kruži oko nje
• male pomoćne ose prostora

// Ugao koji određuje rotaciju objekata
float fi = 0;

void setup(){

  // Kreiranje prozora dimenzija 800x600 piksela.
  // Parametar P3D uključuje trodimenzionalni renderer.
  size(800,600,P3D);

}

void draw(){

  // Tamna pozadina bolje ističe 3D objekte.
  background(30);

  // Uključivanje podrazumevanog osvetljenja scene.
  // Bez osvetljenja objekti mogu izgledati ravno.
  lights();

  // Pomeranje koordinatnog sistema u centar prozora.
  translate(width/2,height/2);

  // ==================================================
  // Crtanje koordinatnih osa
  // ==================================================

  // X osa (crvena)
  stroke(255,0,0);
  line(0,0,0,200,0,0);

  // Y osa (zelena)
  stroke(0,255,0);
  line(0,0,0,0,200,0);

  // Z osa (plava)
  stroke(0,0,255);
  line(0,0,0,0,0,200);

  // Isključujemo crtanje ivica objekata.
  noStroke();

  // ==================================================
  // Centralna rotirajuća kocka
  // ==================================================

  // Čuvamo trenutno stanje koordinatnog sistema.
  pushMatrix();

  // Rotacija kocke oko Y ose.
  rotateY(fi);

  // Boja kocke.
  fill(200,100,255);

  // Crtanje kocke.
  box(120);

  // Vraćamo prethodno stanje koordinatnog sistema.
  // Sve transformacije izvršene između pushMatrix()
  // i popMatrix() važe samo za ovu kocku.
  popMatrix();

  // ==================================================
  // Sfera koja kruži oko kocke
  // ==================================================

  // Ponovo čuvamo stanje koordinatnog sistema.
  pushMatrix();

  // Rotiramo koordinatni sistem oko Y ose.
  rotateY(fi);

  // Pomeramo koordinatni sistem za 200 piksela po X osi.
  // Pošto je koordinatni sistem već rotiran,
  // sfera će kružiti oko centralne kocke.
  translate(200,0,0);

  // Boja sfere.
  fill(255,200,0);

  // Crtanje sfere poluprečnika 40 piksela.
  sphere(40);

  // Vraćamo koordinatni sistem na prethodno stanje.
  popMatrix();

  // Povećavanje ugla rotacije.
  // Time se u sledećem prolazu kroz draw()
  // objekti nalaze u novom položaju.
  fi += 0.02;

}

Mini kviz

Zadaci za samostalan rad

Šta dalje?

U sledećoj lekciji prelazimo na veoma važan koncept:

• kamera u 3D prostoru (camera())
• perspektiva (perspective())
• kontrola pogleda u sceni

Zatim ćemo primeniti sve što smo naučili i napraviti: Sunčev sistem u 3D-u