VIK Wiki

„Számítógépes grafika házi feladat tutorial” változatai közötti eltérés

← Régebbi szerkesztésÚjabb szerkesztés →
VizuálisWikiszöveges
Rohamcsiga (vitalap | szerkesztései)
424 szerkesztés
Rohamcsiga (vitalap | szerkesztései)
424 szerkesztés
Nincs szerkesztési összefoglaló
39. sor: 39. sor:
** '''onIdle()''' - Ez a függvény az idő múlását hivatott jelezni, így itt kell kezelni mindent ami az időtől függ (animáció).
** '''onIdle()''' - Ez a függvény az idő múlását hivatott jelezni, így itt kell kezelni mindent ami az időtől függ (animáció).


==Koordináta-rendszerek és 2D/3D projekció==
== Rajzolás az OpenGL segítségével ==
* Az alapértelmezett koordináta-rendszer X, Y (és Z) koordinátái -1 és +1 között mozognak. 2D-ben (-1,-1) a bal alsó, (+1,+1) a jobb felső sarok. Ezeket ha nem muszáj, ne bolygassuk!
* Ha mégis módosítani kell, ez 2D-ben a gluOrtho2D(), 3D-ben a glFrustum() függvényekkel lehetséges.
* Az OpenGL 3D-s koordináta-rendszere jobb-sodrású, azaz ha az Y-tengely felfelé, míg az X-tengely jobbra mutat, akkor a Z-tengely felénk mutat kifelé a képernyőből
* Az alapértelmezett projekció a 2D-s orthogonális vetítés, 2D-s rajzoláshoz tökéletesen megfelel. 3D-ben általában perspektivikus vetítést használunk, ezt a gluPerspective() függvénnyel állíthatjuk be. Ennek paraméterezése nem triviális, erről bővebben a 3D-ről szóló részben olvashatsz.
* Minden projekció módosító függvény valójában az OpenGL projekciós mátrixait állítja át. Erről bővebben a projekcióról szóló részben olvashatsz. Elöljáróban annyit, hogy ezeket a függvényeket csak egyszer hívd meg (pl.: onInitialization-ben), mert többszöri meghívásuk hatása összeadódik!
 
== Rajzolás az OpenGL-lel ==
 
=== Általánosságban ===


* Az OpenGL néhány csak néhány típusú primitívet tud rajzolni, ezekből kell építkeznünk.
* Az OpenGL néhány csak néhány típusú primitívet tud rajzolni, ezekből kell építkeznünk.
74. sor: 65. sor:
** Tehát 2 dimenzióban a glVertex2f-et, 3 dimenzióban a glVertex3f-et kell használnod.
** Tehát 2 dimenzióban a glVertex2f-et, 3 dimenzióban a glVertex3f-et kell használnod.
* A pontok sorrendje nagyon fontos, már egy quad esetében sem lehet "csak úgy" felsorolni a négy pontot, ha rossz sorrendben adjuk meg őket, akkor két egymásba csúszott háromszöget fogunk látni.
* A pontok sorrendje nagyon fontos, már egy quad esetében sem lehet "csak úgy" felsorolni a négy pontot, ha rossz sorrendben adjuk meg őket, akkor két egymásba csúszott háromszöget fogunk látni.
== Az első házihoz szükséges elmélet ==


=== 2D rajzolás ===
=== 2D rajzolás ===


* A koordináták amiket átadsz azok a normalizált eszköz koordinátarendszerben vannak értelmezve, ahol a (0,0) a képernyő közepe, a (-1, -1) pedig a bal alsó sarok.
* A koordináták amiket átadsz azok a normalizált eszköz koordinátarendszerben vannak értelmezve, ahol a (0,0) a képernyő közepe, a (-1, -1) pedig a bal alsó sarok.
** [http://pastebin.com/8Q526KhA Példaprogram:]
** Példaprogram: [http://pastebin.com/zAMBmSz5 Háromszögek]
<pre>
<pre>
glBegin(GL_TRIANGLES);
glBegin(GL_TRIANGLES);
99. sor: 92. sor:
<br/>
<br/>
* Minden egyes ponthoz külön színt is tudunk megadni. A glColor3f()-el lehet állítani a rajzolószínt, ami utána az összes glVertex hívásra érvényes lesz. Az összetettebb alakzatoknál az egyes pontok színei interpolálódnak, és szép színátmenetet kapunk.
* Minden egyes ponthoz külön színt is tudunk megadni. A glColor3f()-el lehet állítani a rajzolószínt, ami utána az összes glVertex hívásra érvényes lesz. Az összetettebb alakzatoknál az egyes pontok színei interpolálódnak, és szép színátmenetet kapunk.
** [http://pastebin.com/DC0MP7RU Példaprogram:]
** Példaprogram: [http://pastebin.com/GpEqzmB1 Smiley]
<pre>
<pre>
#define CIRCLE_RESOLUTION 32
#define CIRCLE_RESOLUTION 32
147. sor: 140. sor:
<div style="text-align:left;margin:0px auto;">
<div style="text-align:left;margin:0px auto;">
http://i.imgur.com/6yfh7q2.png
http://i.imgur.com/6yfh7q2.png
</div>
=== Eseménykezelés ===
* A grafikus programok általában eseményvezéreltek, azaz a felhasználó által generált események (pl. egérkattintás) vezérlik a programot. A GLUT ehhez nagyon sok segítséget ad, nekünk csak be kell regisztrálnunk egy-egy függvényt, hogy melyik esemény hatására mi történjen, pl az egérkattintásokat az onMouse() függvényben kezeljük.
* A három legfontosabb eseménytípus:
** Billentyűzet esemény:
*** Billentyű lenyomás - onKeyboard
*** Billentyű felengedés - onKeyboardUp
** Idő múlása (lényegében ez is egy esemény) - onIdle
** Egér esemény:
*** Egér mozgatás - onMouseMotion
*** Egér gombbal kattintás - onMouse
*** Az egér eseményekkel kapcsolatban egy apró kellemetlenség, hogy a GLUT a kattintások helyét az oprendszer koordináta rendszerében adja át nekünk (ablak bal fölső sarka az origó, x jobbra, y lefelő nő, az egység pedig a pixel), míg mi normalizált eszköszkoordinátákkal dolgozunk (az albak közepe az origó, a x jobbra, az y felfele nő, és mindkét dimenzióban az ablak méretének a fele az egység). Ezért kénytelenek vagyunk átszámolni azokat az értékeket, amiket a GLUT ad nekünk. Erre egy lehetséges megodás:
<pre>
struct Vector {
  float x, y;
}
Vector convertToNdc(float x, float y) {
  Vector ret;
  ret.x = (x - kScreenWidth/2) / (kScreenWidth/2);
  ret.y = (kScreenHeight/2 - y) / (kScreenHeight/2);
  return ret;
}
</pre> 
* Példa: [http://pastebin.com/Ns0fiFL2 Egyszerű rajzolóprogram]
<div style="text-align:left;margin:0px auto;">
http://i.imgur.com/4WDimmL.png
</div>
</div>


A lap eredeti címe: „https://vik.wiki/Számítógépes_grafika_házi_feladat_tutorial”