UGR1 - Úvod do počítačovej grafiky

1. cvičenie

• Kreslenie základných útvarov, kód pre 1. cvičenie s použitím knižnice LWJGL
• Úlohy
  1. Nakreslite úsečky od stredu po okraj obrazovky s odstupom 20 pixelov. Na vytvorenie jednotlivých úsečiek použite Bresenhamov algoritmus (viď pseudokód nižšie, resp. prednáška). Jedna zo súradníc všetkých úsečiek je rovnaká a to stred obrazovky.
     
     dx ← x2-x1
     dy ← y2-y1
     y ← y1
     k1 ← 2*dy
     k2 ← 2*dy-2*dx
     d ← 2*dy-dx
     for x from x1 to x2
       Bod(x, y)
       if (d < 0)
         d ← d+k1
       else
         d ← d+k2
         y ← y+1
     
     
     upravený kód z cvičenia

2. cvičenie

• Úlohy
  1. Nakreslite na biele pozadie päť kružníc s polomerom 60 pixelov a stredmi v [180,160], [320,160], [460,160], [250,220] a [390,220], každú v inej farbe. Na vykreslenie kružníc použite Midpoint algoritmus.
     
     x ← 0
     y ← r
     d ← 1-r
     while (x ≤ y)
      Bod(±x, ±y)
      Bod(±y, ±x)
      if (d < 0)
       d ← d+(2*x)+3
      else
       d ← d+(2*(x-y))+5
       y ← y-1
      x ← x+1
     
  2. Simulujte hodiny vrátane sekundovej, minútovej a hodinovej ručičky. Hodiny musia ukazovať aktuálny systémový čas. Na vykreslenie úsečiek použite Bresenhamov algoritmus a na vykreslenie kružnice Midpoint algoritmus. Ručičky kreslite rôznymi farbami a hrúbkami čiar.
     
     kód sekundovej ručičky z cvičenia

3. cvičenie

• Vypĺňanie oblastí, kód pre 3. cvičenie
• Úlohy
  1. Napíšte metódu, ktorá vyplní oblasť (danú farbou pozadia) riadkovým semienkovým algoritmom. Plochy vyplňte troma rôznymi farbami.
     
  2. Vytvorte metódu, ktorá vyplní ľubovoľný trojuholník (teda dostane súradnice troch bodov) zadanou farbou. Následne volajte túto metódu v cykle s náhodne vybranými bodmi a farbou, pričom pozadie nemažte, ale nechajte ho prekresliť vždy novým vyplneným trojuholníkom. Algoritmus by si mal vedieť poradiť aj s prípadmi, ak všetky tri body ležia na priamke alebo sú dokonca totožné.
     
     
     BONUS1: pri použití len celočíselných výpočtov Bresenhamovho algoritmu.
     BONUS2: vyplnenie šrafovaním (Fill style).
     

4. cvičenie

• Vykresľovanie, kód pre 4. cvičenie
• Úlohy
  1. Vytvorte 2D projekciu 3D kocky, ktorej hrany sú viditeľné a je možné ju rotovať okolo všetkých troch osí, posúvať v smere všetkých troch osí oboma smermi a aj škálovať. Rotácia musí stále prebiehať okolo stredu kocky, nech je posunutá kamkoľvek. Transformácie implementuje pomocou matíc 4x4 a ich aplikovanie cez násobenie matíc. Každú hranu vykreslite inou farbou.
     
     Vector3f[] vrcholy;
     int[][2] hrany;
     glBegin(GL_LINES);
  2. V predchádzjúcej úlohe namiesto kocky zobrazujte vaše iniciály v 3D. Každé písmeno (teda jeho hrany) vykreslite inou farbou.
     

5. cvičenie

• Úlohy
  1. Vytvorte 2D projekciu 3D kocky, ktorej steny sú viditeľné, pričom každá ma inú farbu. Je možné ju škálovať, rotovať okolo všetkých troch osí a taktiež posúvať v smere všetkých troch osí oboma smermi. Rotácia musí stále prebiehať okolo stredu kocky, nech je posunutá kamkoľvek. Transformácie implementuje pomocou matíc 4x4 a ich aplikovanie cez násobenie matíc. Steny, ktoré nevidno, naozaj nesmie byť vidno.
     
     Vector3f[] vrcholy;
     int[][4] steny;
     glBegin(GL_QUADS);
  2. Vytvorte 2D projekciu 3D kocky, ktorej steny sú viditeľné, pričom každá ma inú farbu a čím je viac odvrátená od pozorovateľa, tým je tmavšia. Je možné ju škálovať, rotovať okolo všetkých troch osí a taktiež posúvať v smere všetkých troch osí oboma smermi. Rotácia musí stále prebiehať okolo stredu kocky, nech je posunutá kamkoľvek. Transformácie implementuje pomocou matíc 4x4 a ich aplikovanie cez násobenie matíc. Steny, ktoré nevidno, naozaj nesmie byť vidno.
     

6. cvičenie

• 3D v OpenGL, kód pre 6. cvičenie (s perspektívou)
• Úlohy
  1. Vykreslite vedľa seba (ako na obrázku) biely trojuholník a červený štvorec.
     
     
  2. Vykreslite rotujúcu pyramídu so štvorcovou podstavou (a trojuholníkovými stranami), pričom každá stena má mať inú farbu.
     
     glCullFace(GL_BACK); glEnable(GL_CULL_FACE); //Zneviditeľnenie privrátených/odvrátených strán
     
     
  3. Vykreslite šesť rotujúcich pyramíd so štvorcovými podstavami (a trojuholníkovými stranami), pričom každá pyramída má mať inú farbu pri základni a prechádzať plynulo do bielej pri vrchole. Všetky pyramídy sa majú navzájom dotýkať vrcholmi a tento bod dotyku má byť aj stredom otáčania. Pyramídy majú byť od seba rovnomerne odklonené, vždy o 90 stupňov.
     
     glDepthFunc(GL_LEQUAL); glEnable(GL_DEPTH_TEST); //zapnutie Z-Buffera

7. cvičenie

• kód pre 7. cvičenie
• Úlohy
  1. Vytvorte rotujúcu kocku, ktorej steny budu otexturované textúrou s rôznymi textúrovými súradnicami. Ako textúru použite logo Lekárskej fakulty k tohtoročnému 75. výročiu.
     glBindTexture(GL_TEXTURE_2D, createTexture(SUBOR));
     glEnable(GL_TEXTURE_2D);
     
     glTexCoord2d(0, 0); //pred každým vrcholom nastavíme súradnice textúry pre daný bod
     
  2. Vytvorte rotujúcu pyramídu, ktorej steny budu otexturované textúrou stena.jpg a podstava textúrou podstava.jpg.
     

8. cvičenie

• kód pre 8. cvičenie
• Úlohy
  1. Zobrazte dva trojuholníky s rôznymi textúrami, pričom jedna z nich sa bude pohybovať.
     
  2. Doplňte ďalší trojuholník, na ktorom budú dve textúry súčasne, pričom jedna bude pohybujúca sa (ARB OpenGL rozšírenie - multitextúry).
     
     import static org.lwjgl.opengl.ARBMultitexture.*;
     
     //nastavenie 1. textury
     glActiveTextureARB(GL_TEXTURE1_ARB);
     glEnable(GL_TEXTURE_2D);
     glBindTexture(GL_TEXTURE_2D, ?);
     
     //nastavenie suradnic v texturach pre kazdy vrchol
     glMultiTexCoord2dARB(GL_TEXTURE1_ARB, ?, ?);
     glMultiTexCoord2dARB(GL_TEXTURE2_ARB, ?, ?);
     
  3. Vytvorte mapu podobnú ako v príklade s možnosťou sa po nej voľne prechádzať. Podlaha aj pyramídy majú byť texturované. Celý svet uzavrite do kocky, ktorej steny budú potiahnuté textúrami back.jpg, bottom.jpg, front.jpg, left.jpg, right.jpg, top.jpg. Pre tieto textúry treba nastaviť parametre GL_TEXTURE_WRAP_S a GL_TEXTURE_WRAP_T na GL_CLAMP_TO_EDGE (org.lwjgl.opengl.GL12.*), aby nevznikali artefakty na okrajoch.
     
     for(int ax=-50; ax<=50; ax+=2){
      for(int az=-50; az<=50; az+=2){
       if (abs(ax+az)%7 == abs(ax-az)%5){
        ihlan(ax,az);
       }
       else {
        podlaha(ax,az);
       }
      }
     }
     
  4. BONUS3: Vytvorte jednoduchý klon Wolfenstein3D. Chodby majú byť len pravouhlé a každé políčko má byť bud plná stena, alebo chodba. Implementujte aj kolíziu so stenami, aby sa cez ne nedalo prechádzať. Mapu buď načítajte zo súboru mapa.txt, alebo ju vložte priamo do programu. Môžete spraviť aj mapu, ktorá má byť zobrazená len pri stlačení tlačidla m (zmena projekcie cez glOrtho).
     

9. cvičenie

• Úlohy
  1. Doplňte mapu z úlohy 8/3 o hmlu
     
     float fogColor[] = {1.0f, 1.0f, 1.0f, 1.0f};
     
     glClearColor(fogColor[0], fogColor[1], fogColor[2], fogColor[3]);
     glFogi(GL_FOG_MODE, type); //GL_EXP, GL_EXP2, GL_LINEAR
     glFogfv(GL_FOG_COLOR, fogColor);
     glHint(GL_FOG_HINT, GL_DONT_CARE);
     
     // near/far (GL_LINEAR);
     glFogf(GL_FOG_START, near);
     glFogf(GL_FOG_END, far);
     // density (GL_EXP/GL_EXP2);
     glFogf(GL_FOG_DENSITY, 0.5f);
     
     glEnable(GL_FOG);
  2. Doplňte úlohu 8/3 o osvetlenie - 3 rôznofarebné svetlá (RGB) po 3 rôznych dráhach. Svetlo nech sa pohybuje nad ihlanmi po kružnici/elipse - zobrazte ho ako bod (GL_POINTS).
     float[] farba_ambient = {1.0f, 1.0f, 1.0f, 1.0f};
     float[] farba_diffuse = {1.0f, 1.0f, 1.0f, 1.0f};
     float[] pozicia = {0, 0, 0, 1};
     
     glLightfv(GL_LIGHT0, GL_AMBIENT, farba_ambient);
     glLightfv(GL_LIGHT0, GL_DIFFUSE, farba_diffuse);
     glLightfv(GL_LIGHT0, GL_POSITION, pozicia);
     glEnable(GL_LIGHTING); //Zapnutie osvetlenia
     glEnable(GL_LIGHT0); //Zapnutie prvého svetla
     
     
     Na správne fungovanie výpočtu svetla je potrebné pre každú stenu zadať normálu.
     glEnable(GL_NORMALIZE); //Normalizuje normalove vektory (na jednotkovu velkost)
     
     glNormal3f(); //medzi glBegin a glEnd, pred glVertex
     

10. cvičenie

• Úlohy
  1. Načítajte modely (body a steny) zo súboru a zobrazte ich otáčajúce sa.
  2. Doplňte úlohu 9/2 o zobrazovanie rýchlosti prekreslovania - počet vygenerovaných obrázkov za sekundu (FPS) v titulku okna. Vyskúšajte, aký vplyv má použitie textúr, osvetlenia, hmly - nastavte ich zapnutie/vypnutie pomocou klávesnice.
     glfwSetWindowTitle(window, "Cas: "+glfwGetTime());
  3. V predchádzajúcom príklade vykreslujte objekt (trojúholníkové steny X Y Z u/Tx v/Ty) s textúrou namiesto ihlanov, použite ale rovnaký vzor.

11. cvičenie

• Úlohy
  1. V predchádzajúcom príklade vykreslujte objekt (trojúholníkové steny X Y Z u/Tx v/Ty) s textúrou namiesto ihlanov, použite ale rovnaký vzor.
     2. použitím DisplayList
        int dl = glGenLists(1);
        glNewList(dl, GL_COMPILE);
        //prikazy na vykreslenie
        glEndList();
        
        glCallList(dl);
        
     3. pomocou poľa (glDrawArray)
        import static org.lwjgl.opengl.GL15.*;
        
        FloatBuffer buf = BufferUtils.createFloatBuffer(velkost);
        buf.put(buffer).flip();
        
        int vbo = glGenBuffers(); //OpenGL Vertex Buffer Object
        glBindBuffer(GL_ARRAY_BUFFER, vbo);
        glBufferData(GL_ARRAY_BUFFER, buf, GL_STATIC_DRAW);
        //zapnutie buffer-a s vrcholmi
        glVertexPointer(3, GL_FLOAT, 8*Float.BYTES, 0);
        glEnableClientState(GL_VERTEX_ARRAY);
        //zapnutie buffer-a so súradnicami pre textúry
        glTexCoordPointer(2, GL_FLOAT, 8*Float.BYTES, 3*Float.BYTES));
        glEnableClientState(GL_TEXTURE_COORD_ARRAY);
        //zapnutie buffer-a s normálami
        glNormalPointer(GL_FLOAT, 8*Float.BYTES, 5*Float.BYTES);
        glEnableClientState(GL_NORMAL_ARRAY);
        
        glDrawArrays(GL_TRIANGLES, 0, pocet);
        
        
  Porovnajte rýchlosti vykreslovania jednotlivých spôsobov pri vykresľovaní objektu s textúrou.

12. cvičenie

• Stencil buffer, Zobracovací řetezec
• Úlohy
  1. Použitím Stencil buffera vykreslite farebný štvorec do masky v tvare štvorcípej hviezdy.
     
     glEnable(GL_STENCIL_TEST);
     glStencilOp(GL_KEEP, GL_KEEP, GL_REPLACE); //GL_KEEP, GL_ZERO, GL_REPLACE, GL_INCR, GL_INCR_WRAP, GL_DECR, GL_DECR_WRAP, GL_INVERT
     
     glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT | GL_STENCIL_BUFFER_BIT);
     
     glStencilFunc(GL_ALWAYS, 1, 0xFF); //GL_NEVER, GL_LESS, GL_LEQUAL, GL_GREATER, GL_GEQUAL, GL_EQUAL, GL_NOTEQUAL, GL_ALWAYS
     glStencilMask(0xFF); //0x00
     
  2. Použitím Stencil buffera vykreslite objekt z úlohy 11/1 s obrysom.

© 2003-2023