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
2d rajzolás részt újraírtam.
46. sor: 46. sor:
* 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!
* 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!


==2D rajzolás==
== Rajzolás az OpenGL-lel ==
* A rajzoláshoz válasszunk egy primitívet, majd adjuk meg annak pontjait. A pontok megadása a glBegin() és a glEnd() parancsok között történik. A primitívek neve és használata a következő képen láthatók:


<div style="text-align:center;margin:0px auto;">
=== Általánosságban ===
http://i.imgur.com/if8gaHR.gif
 
* Az OpenGL néhány csak néhány típusú primitívet tud rajzolni, ezekből kell építkeznünk.
* A típusok:
** Pontok: GL_POINTS
** Vonalak: GL_LINES, GL_LINE_STRIP, GL_LINE_LOOP
** Háromszögek: GL_TRIANGLES, GL_TRIANGLE_STRIP, GL_TRIANGLE_LOOP
** Háromszögekből összetett alakzatok:
*** Négyszögek (igazándiból 2 háromszög): GL_QUADS, GL_QUAD_STRIP
*** Sokszög (ez is háromszögenként rajzolódik ki): GL_POLYGON
 
<div style="text-align:center;margin:0px auto;">
http://i.imgur.com/if8gaHR.gif
</div>
</div>


* A glBegin paraméterében kell megadni a rajzolandó primitívet (csupa nagybetűvel, mert ezek beépített konstansok)
* A rajzolás az alábbi módon történik:
* A primitívek egyes pontjait 2-dimenzióban a glVertex2f() illetve 3-dimenzióban a glVertex3f() függvényekkel célszerű megadni. A primitívek ugyanúgy használhatók 2 és 3 dimenzióban is.
<pre>
* Ha különálló háromszögeket/négyszögeket szeretnénk rajzolni, nem kell a 3 vagy 4 koordinátából álló blokkokat külön-külön glBegin-nel és glEnd-el körülvenni, írhatjuk folyamatosan őket, az openGL eleve 3-asával/4-esével fogja őket értelmezni.
glBegin("Primitív típus");
 
"Pontok felsorolása"
 
glEnd();
</pre>
* A pontok megadásához glVertex{2,3}f függvények valamelyikét kell használnod, az alapján, hogy hány dimenzóban dolgozol.
** 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.


* Pl.:
=== 2D rajzolás ===
 
* A koordináták amiket átadsz azok a normilizá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/FQ1mCtfj Példaprogram:]
<pre>
<pre>
glBegin(GL_TRIANGLES);
glBegin(GL_TRIANGLES);
65. sor: 86. sor:
glVertex2f(0.2,0);
glVertex2f(0.2,0);


glVertex2f(0.6,0.8);
glVertex2f(0.6,0.8); // Egy pass-on belül több háromszög csúcspontjait is fel lehet sorolni.
glVertex2f(0.9,0.3);
glVertex2f(0.9,0.3);
glVertex2f(0.5,0.9);
glVertex2f(0.5,0.9);
72. sor: 93. sor:
</pre>
</pre>


<div id="AnchorQUAD"></div>
Az eredménye:
* QUAD-ok használatakor figyeljünk rá, hogy a 4 pontot a négyszög körüljárása szerint adjuk meg. Pl. Bal fölső, jobb fölső, jobb alsó, bal alsó. Ha itt az utolsó két pontot felcserélnénk, akkor két egymásba csúsztatott háromszöget látnánk.
<div style="text-align:left;margin:0px auto;">
http://i.imgur.com/bOSuMin.png
</div>
<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.
** [http://pastebin.com/DC0MP7RU Példaprogram:]
<pre>
#define CIRCLE_RESOLUTION 32
 
  // Piros kor, a kepernyo bal oldalan
  glBegin(GL_TRIANGLE_FAN); {
    float radius = 0.25f, center_x = -0.5f, center_y = 0.4f;
 
    glColor3f(1.0f, 0.0f, 0.0f);
    glVertex2f(center_x, center_y);
 
    for(int i = 0; i <= CIRCLE_RESOLUTION; i++) {
      float angle = float(i) / CIRCLE_RESOLUTION * 2.0f * M_PI;
      // Itt a kor paramtetrikus alakjat hasznaljuk: x = x0 + r*cos(t), y = y0 + r * sin(t)
      glVertex2f(center_x + radius*cos(angle), center_y + radius*sin(angle));
    }
  } glEnd();
 
  // Szinatmenetes kor, a kepernyo jobb oldalan
  glBegin(GL_TRIANGLE_FAN); {
    float radius = 0.25f, center_x = 0.5f, center_y = 0.4f;
 
    glColor3f(0.0f, 1.0f, 1.0f);
    glVertex2f(center_x, center_y);
   
    for(int i = 0; i <= CIRCLE_RESOLUTION; i++) {
      float angle = float(i) / CIRCLE_RESOLUTION * 2.0f * M_PI;
      glColor3f(0.0f, 0.5f + 0.5f*cos(angle), 0.5f + 0.5f*sin(angle));
      glVertex2f(center_x + radius*cos(angle), center_y + radius*sin(angle));
    }
  } glEnd();
 
  // Felkoriv
  glBegin(GL_LINE_STRIP); {
    float radius = 0.75f, center_x = 0.0f, center_y = 0.0f;
 
    glColor3f(1.0f, 1.0f, 1.0f);
   
    for(int i = CIRCLE_RESOLUTION/2; i <= CIRCLE_RESOLUTION; i++) {
      float angle = float(i) / CIRCLE_RESOLUTION * 2.0f * M_PI;
      glVertex2f(center_x + radius*cos(angle), center_y + radius*sin(angle));
    }
  } glEnd();
</pre>
 
Az eredménye:
<div style="text-align:left;margin:0px auto;">
http://i.imgur.com/6yfh7q2.png
</div>


==Projekciós mátrixok, transzformációk==
==Projekciós mátrixok, transzformációk==
A lap eredeti címe: „https://vik.wiki/Számítógépes_grafika_házi_feladat_tutorial”