Számítógépes Grafika 6. gyakorlat

42
Számítógépes Grafika 6. gyakorlat Programtervező informatikus (esti) 2009/2010 őszi félév

description

Számítógépes Grafika 6. gyakorlat. Programtervező informatikus (esti) ‏ 2009/2010 őszi félév. Információk. Gyakorlati diák: http://people.inf.elte.hu/valasek/bevgraf_esti/ E-mail: [email protected]. Utasítások. size (w, h, m) ‏ Az m a módot határozza meg: - PowerPoint PPT Presentation

Transcript of Számítógépes Grafika 6. gyakorlat

Page 1: Számítógépes Grafika 6. gyakorlat

Számítógépes Grafika6. gyakorlat

Programtervező informatikus (esti)

2009/2010 őszi félév

Page 2: Számítógépes Grafika 6. gyakorlat

Információk

Gyakorlati diák: http://people.inf.elte.hu/valasek/bevgraf_esti/

E-mail: [email protected]

Page 3: Számítógépes Grafika 6. gyakorlat

Utasítások

• size(w, h, m)– Az m a módot határozza meg:

• JAVA2D: az alap renderelő, pontos és lassú• P2D: Processing saját gyors, de rosszabb minőségű

renderelője• P3D: saját 3D-s renderelő, szintén gyors de pontatlan• OgenGL• PDF: negyedik paraméterben output fájl neve

– A maximális szélesség és magasság az OS által korlátozott

Page 4: Számítógépes Grafika 6. gyakorlat

OpenGL

• Nem elég a size-ban harmadik paraméternek megadni

• Importálni kell az OGL-t: import

processing.opengl.*;

Page 5: Számítógépes Grafika 6. gyakorlat

Képi koordinátarendszer

Page 6: Számítógépes Grafika 6. gyakorlat

Processing 3D

Page 7: Számítógépes Grafika 6. gyakorlat

OpenGL

• Az OpenGL jobbsodrású koordinátarendszert használ

• De nem kell ezzel foglalkozni Processing-ből akkor sem, ha az OpenGL renderer-t használjuk

Page 8: Számítógépes Grafika 6. gyakorlat

Transzformációk

• translate(x, y, z)• rotateX(a), rotateY(a), rotateZ(a):

– „a” radiánnyi elforgatás adott tengely közül, ha „a”>0 akkor óra járásával ellentétes irányban

– PI: beépített konstans– radians(angle): angle-t szögben értelmezve

átváltja radiánba– degrees(rad): radiánból szögbe váltás

• scale(size), scale(x, y), scale(x, y, z):– Léptékezés

Page 9: Számítógépes Grafika 6. gyakorlat

Transzformációk

• rotateX

Page 10: Számítógépes Grafika 6. gyakorlat

Transzformációk

• rotateY

Page 11: Számítógépes Grafika 6. gyakorlat

Transzformációk

• rotateZ

Page 12: Számítógépes Grafika 6. gyakorlat

Transzformációk

• applyMatrix( n00, n01, n02, n03 n04, n05, n06, n07 n08, n09, n10, n11 n12, n13, n14, n15):– Tetszőleges affin transzformáció

Page 13: Számítógépes Grafika 6. gyakorlat

Transzformációk

• A fenti transzformációk a koordinátarendszert transzformálják

• Egy transzformáció után következő újabb transzformáció már az új koordinátarendszert módosítja!

Page 14: Számítógépes Grafika 6. gyakorlat

Transzformációk

Page 15: Számítógépes Grafika 6. gyakorlat

1. Feladat

• Forgassuk a középpont körül ezt a téglalapot, a meglévő kódot nem módosítva már!

void setup(){ size(200, 200, P3D);}

void draw(){ background(140); rect(0, 0, 20, 40);}

Page 16: Számítógépes Grafika 6. gyakorlat

Transzformációk

Page 17: Számítógépes Grafika 6. gyakorlat

Transzformációk

T1

T2

Tn

...

p

Page 18: Számítógépes Grafika 6. gyakorlat

Transzformációk

T1

T2

Tn

...

p

= T1*T2*...*Tn*p

Page 19: Számítógépes Grafika 6. gyakorlat

Transzformációk

• pushMatrix():– Elmenti az aktuális koordinátarendszert

• popMatrix():– A legutoljára elmentett koordinátarendszert hívja

vissza

Page 20: Számítógépes Grafika 6. gyakorlat

Példafill(0);rect(0, 0, 50, 50);pushMatrix();

translate(20, 20); fill(128);rect(0, 0, 50, 50);

translate(10, 10); fill(255);rect(0, 0, 50, 50);

popMatrix();

translate(10, 10); fill(170);rect(0, 0, 50, 50);

Page 21: Számítógépes Grafika 6. gyakorlat

Példafill(0);rect(0, 0, 50, 50);pushMatrix();

translate(20, 20); fill(128);rect(0, 0, 50, 50);

translate(10, 10); fill(255);rect(0, 0, 50, 50);

popMatrix();

translate(10, 10); fill(170);rect(0, 0, 50, 50);

Page 22: Számítógépes Grafika 6. gyakorlat

Példafill(0);rect(0, 0, 50, 50);pushMatrix();

translate(20, 20); fill(128);rect(0, 0, 50, 50);

translate(10, 10); fill(255);rect(0, 0, 50, 50);

popMatrix();

translate(10, 10); fill(170);rect(0, 0, 50, 50);

Page 23: Számítógépes Grafika 6. gyakorlat

Példafill(0);rect(0, 0, 50, 50);pushMatrix();

translate(20, 20); fill(128);rect(0, 0, 50, 50);

translate(10, 10); fill(255);rect(0, 0, 50, 50);

popMatrix();

translate(10, 10); fill(170);rect(0, 0, 50, 50);

Page 24: Számítógépes Grafika 6. gyakorlat

Példafill(0);rect(0, 0, 50, 50);pushMatrix();

translate(20, 20); fill(128);rect(0, 0, 50, 50);

translate(10, 10); fill(255);rect(0, 0, 50, 50);

popMatrix();

fill(170);rect(10, 10, 50, 50);

Page 25: Számítógépes Grafika 6. gyakorlat

Transzformációk

• Először közös koordinátarendszerbe helyezzük a színtér alkotóelemeit - ez a világ transzformáció

• Utána az aktuális nézőpontunknak megfelelően tovább transzformálódik a színtér - ez a nézet transzformáció

• Végül pedig létrejön a 3D-s színterünk 2D-s vetülete - ez a vetítési transzformáció

Page 26: Számítógépes Grafika 6. gyakorlat
Page 27: Számítógépes Grafika 6. gyakorlat
Page 28: Számítógépes Grafika 6. gyakorlat
Page 29: Számítógépes Grafika 6. gyakorlat

Kamera

center

eye

up

X

Y

Z

Page 30: Számítógépes Grafika 6. gyakorlat

Kamera

• camera(eyeX, eyeY, eyeZ, centerX, centerY,

centerZ, upX, upY, upZ):– Két pont és egy vektor segítségével megadhatjuk

Page 31: Számítógépes Grafika 6. gyakorlat

Vetítési transzformáció

• perspective(fov, aspect, zNear, zFar)– Perspektív transzformáció beállítása, aspect a

szélesség/magasság arány

Page 32: Számítógépes Grafika 6. gyakorlat

Vetítési transzformáció

• ortho(left, right, bottom, top, near, far):– Ortogonális vetítés– left, right: a vágótéglatest bal és jobb síkja– top, bottom: a vágótéglatest felső és alsó síkja– near: a legnagyobb távolság az origótól a nézőig– far: a legnagyobb távolság az origótól a nézőtől el

Page 33: Számítógépes Grafika 6. gyakorlat

Beépített alakzatok

• sphere(radius)– Origó középpontú gömb

• box(size), box(w, h, d):– Origó középpontú, size élhosszúságú kocka, vagy

w széles, h magas és d mély téglatest

Page 34: Számítógépes Grafika 6. gyakorlat

Példavoid setup(){ size(400, 400, P3D);}

void draw(){ background(140);

box(100);translate(150, 0, 0);box(50);camera( 200, 200, 0,

0, 0, 0, 0, -1, 0 );}

Page 35: Számítógépes Grafika 6. gyakorlat

2. Feladat

• Innen tölthetjük le az előbbit: http://people.inf.elte.hu/valasek/bevgraf_esti/06/ForgAlap.zip

• Az egér jobbra-balra mozgatásával járjuk körbe a kockáinkat!

• A fel-le gomb segítségével közelítsünk/távolodjunk az origótól

Page 36: Számítógépes Grafika 6. gyakorlat

3. Feladat

• Az „o” billentyű hatására váltsunk át ortogonális vetítésre

• A „p” billentyűvel térjünk vissza perspektívre

Page 37: Számítógépes Grafika 6. gyakorlat

Feladat +

• Forogjon a kisebbik kocka a saját tengelyei körül illetve a nagyobbik kocka körül, mindhárom tengely mentén!

• Legyen kisebbik kockából 40, mind különböző pályán mozogjon

• Mindegyik kocka színe változzon folyamatosan, folytonosan

Page 38: Számítógépes Grafika 6. gyakorlat

Néhány megjelenítési mód

Page 39: Számítógépes Grafika 6. gyakorlat

4. Feladat

• A fenti három móddal történő megjelenítést valósítsuk meg az „1”, „2”, „3” gombokkal történő váltással!

Page 40: Számítógépes Grafika 6. gyakorlat

Utasítások

• noFill():– Nem lesz kitöltése a zárt alakzatoknak

• beginShape(), endShape(MODE):– Csúcspontokból (vertex) álló összetett alakzatok

(shape) megjelenítése– A MODE határozza meg, miként értelmezendőek a

beginShape() és endShape() hívások között definiált csúcspontok („összekötési szabály”)

Page 41: Számítógépes Grafika 6. gyakorlat

Utasítások

Page 42: Számítógépes Grafika 6. gyakorlat

5. Feladat

• Csináljunk egy tetraédert háromszöglistával!• Kiindulás:

http://people.inf.elte.hu/valasek/bevgraf_esti/06/TetraederAlap.zip