Table of Contents

Laboratorul 01

Video Laborator 1:https://youtu.be/Hh-geX8VvxA .
Autor: Anca Morar

Introducere

Grafica pe calculator este un subiect amplu utilizat într-un număr din ce în ce mai mare de domenii. În acest laborator se vor prezenta conceptele ce stau la baza graficii cât și a utilizării procesorului grafic pentru acest scop. Domeniul graficii computerizate necesită cunoștințe variate: matematică, fizică, algoritmică, grafică digitală 2D & 3D, user experience design, etc.

Framework laborator

Întrucât scrierea unei aplicații simple OpenGL nu se poate realiza foarte ușor într-un timp scurt, dar și pentru a putea prezenta mai simplu conceptele de bază ale graficii computerizate moderne, în cadrul laboratoarelor se va lucra pe un framework ce oferă o serie de funcționalități gata implementate. Framework-ul utilizat oferă toate funcționalitățile de bază ale unui motor grafic minimal, precum:

De asemenea, pe langă funcționalitățile de bază, framework-ul implementează un model generic pentru scrierea de aplicații OpenGL. Astfel, sunt oferite următoarele aspecte:

Funcționalitatea framework-ului este oferită prin intermediul mai multor biblioteci (libraries):

Structura framework-ului

Funcționarea unei aplicații grafice (OpenGL)

Orice aplicație trebuie să asigure funcționalitatea pe o anumită perioadă de timp. În funcție de cerințe această perioadă poate fi :

Aplicațiile grafice cu suport de vizualizare în timp real (de exemplu jocurile, sau de exemplu ce vom face noi la EGC) se regăsesc în cel de-al doilea model și au la bază funcționarea pe baza unei bucle (loop) de procesare.
În cadrul framework-ului EGC acest loop constă într-o serie de pași (vezi World::LoopUpdate()):

  1. Se interoghează evenimentele ferestrei OpenGL (input, resize, etc.)
    • Evenimentele sunt salvate pentru a fi procesate mai tarziu
  2. Se estimează timpul de execuție pentru iterația actuală (timpul de execuție al iterației precedente)
  3. Se procesează evenimentele salvate anterior
  4. Se procesează frame-ul actual (este indicat să se ia în considerare timpul de execuție în cadrul modificărilor pentru a oferi actualizare independentă de timp)
  5. Opțional: În cazul double sau triple buffering se interschimbă bufferele de imagine
  6. Se trece la următorul frame (se revine la primul pas)

Cel mai simplu model de aplicație OpenGL va trata evenimentele de input (mouse, tastatură) la momentul producerii lor. Acest model nu este indicat deoarece are numeroase dezavantaje:

  • nu oferă posibilitatea de a trata combinații de taste (Exemplu: utilizatorul apasa W și A pentru a deplasa caracterul in diagonală)
  • nu oferă informații ce țin de starea continuă a unui eveniment
    • Exemplu: Un personaj dintr-un joc trebuie să se deplaseze în față atât timp cât utilizatorul ține apasată tasta W.
      • Pentru a trata corespunzător o astfel de logică este necesar să menținem starea tastei W iar atunci când se face deplasarea personajului, aceasta să fie direct proporțională cu timpul trecut de la ultimul frame procesat
      • Același lucru se aplică și în cazul butoanelor de la mouse

De asemenea, un model bazat pe buffering al evenimentelor de input oferă posibilitatea de a interoga starea input-ului în orice moment al unui frame, deci ofera și o flexibilitate generală mai mare pentru a implementa noi comportamente/logici. Clasa WindowObject asigură suportul pentru buffering, dar și pentru procesarea ulterioară a evenimentelor prin intermediul obiectelor de tipul InputController.

Recomandăm să citiți documentația GLFW despre tratarea evenimentelor de input pentru a înțelege mai bine conceptele prezentate: http://www.glfw.org/docs/latest/input_guide.html

Multi-buffering

În general, aplicațiile grafice folosesc mai multe buffere de imagini separate pentru a evita apariția artefactelor grafice prin modificarea directă a imaginii randate pe ecran. Astfel, imaginea afișată la momentul T a fost procesată la momentul T-1, sau T-2 (în funcție de dimensiunea bufferului).
Informații adiționale despre această tehnică multi-buffering pot fi obțiunute de pe wiki:

Modelul de funcționare al aplicației de laborator

În cadrul unui laborator modelul aplicației grafice prezentat mai sus este implementat de către clasa World.
Pasul 2 este tratat de către instanțele InputController în timp ce pasul 4 este asigurat de funcțiile FrameStart(), Update(float deltaTime), și FrameEnd() moștenite de la clasa World. Clasa World extinde deja InputController pentru a ușura munca în cadrul laboratorului.
Toate laboratoarele EGC vor fi implementate pe baza SimpleScene ce oferă următoarele facilități:

Etapele rulării aplicației

  1. Se definesc proprietățile pentru fereastra de lucru (main.cpp)
  2. Se inițializează Engine-ul astfel - Engine::Init()
    1. Se inițializează API-ul OpenGL (glfwInit())
    2. Se creează fereastra de lucru cu un context OpenGL 3.3+
      1. Se atașează evenimentele de fereastră prin intermediul WindowsCallbacks.cpp
    3. Se inițializează managerul de texturi
  3. Se creează și inițializează o nouă scenă 3D de lucru având la bază modelul de update prezentat anterior (main.cpp)
  4. Se pornește rularea scenei încărcate (LoopUpdate())

Standardul OpenGL

OpenGL este un standard (API) pe care îl putem folosi pentru a crea aplicații grafice real-time. Este aproape identic cu Direct3D, ambele având o influență reciprocă de-a lungul anilor.

Atunci când nu sunteți siguri ce face o anumită comandă sau ce reprezintă parametrii funcțiilor este recomandat să consultați documentația: https://www.opengl.org/sdk/docs/man/

Versiunea curentă a acestui standard este 4.6. Pentru cursul de EGC vom folosi standardul 3.0/3.3, care este în același timp și versiunea actuală pentru varianta pentru mobile a OpenGL, numită OpenGL ES https://en.wikipedia.org/wiki/OpenGL_ES.

Începând cu 2016 a fost lansat și API-ul Vulkan ce oferă access avansat low-level la capababilitățile grafice moderne ale procesoarelor grafice. Standardul Vulkan este orientat dezvoltării aplicațiilor de înaltă performanță iar complexitatea acestuia depășește cu mult aspectele de bază ce vor fi prezentate în cadrul cusului/laboratorului.

Utilizarea API

Pe parcursul laboratoarelor (dar și a cursului) se va trece prin toate etapele importante ce stau la baza redării grafice. Astfel vor fi învățate concepte precum:

Cerințe generale de laborator

C++

Framework-ul este scris în limbajul C++, ce va fi utilizat pe tot parcursul laboratoarelor. Conceptele utilizate în cadrul laboratorului și care trebuie știute sunt:

Pentru cei mai puțin familiarizați cu limbajul C++ recomandăm să parcurgeți tutoriale: Learn C++

Generare și compilare
Visual Studio 2022

Cei care nu au mai utilizat IDE-ul Visual Studio pentru scrierea de aplicații C++ sunt rugați să citească toturialul Getting Started with C++ in Visual Studio

Cei care doresc sa folosească Linux sau macOS pot face acest lucru, însă atenție, suportul în acest moment este experimental (au fost testate funcționalitățile de bază pe unele din cele mai folosite distribuții) și pot apărea diverse bug-uri în funcție de implementarea de pe aceste platforme.

GLM

În grafică, matematica este folosită peste tot, de la simple matrici pentru rotații până la integrale infinit dimensionale pentru algoritmii folosiți în industria filmului, de aceea ne dorim să avem un suport de matematică robust, bine documentat și nu în ultimul rând cât mai apropiat de formatul OpenGL. În loc să scriem noi o bibliotecă de matematică vom folosi biblioteca GLM. GLM ne oferă rotații, translații, vectori de dimensiune 2/3/4, matrici și multe alte funcționalități avansate (de ex. modele de zgomot). Vom folosi doar cele mai simple funcționalități în laboratoarele de la această materie.

glm::mat4 identity = glm::mat4 (1, 0, 0, 0, 
                                0, 1, 0, 0,
                                0, 0, 1, 0,
                                0, 0, 0, 1); 
glm::mat4 identity2 = glm::mat4(1); // short form for writing identity matrices           
glm::vec3 culoare = glm::vec3(1, 0.5, 1);
glm::vec2 directie = glm::vec3(-1, 1);
glm::vec3 pozitie = glm::vec3(100, 10, -20);
pozitie.x = 2; // you can select components like so: .x .y .z .t .r .g. b. a

Laboratorul 1

Framework

Framework-ul de laborator se găsește pe Github
Puteți să descărcați direct arhiva accesând acest link

Informații laborator

Sursele ce stau la baza fiecărui laborator se află în directorul: /src/lab_m1/labN/, N reprezentând numărul laboratorului.

În cadrul laboratorului 1 puteți încărca modele 3D în cadrul scenei și cere afișarea scenei utilizând funcția

RenderMesh(Mesh * mesh, glm::vec3 position, glm::vec3 scale)

Culorile pixelilor prin care se reprezintă scena sunt salvate într-un buffer, numit Framebuffer. Contextul definit oferă automat un astfel de buffer și este configurat să ruleze cu double-buffering

API-ul OpenGL utilizat în cadrul laboratorului:

// defineste un spatiu de desenare in spatiul ferestrei de afisare a aplicatiei
// x, y reprezinta coordonatele coltului stanga jos
// width, height reprezinta dimensiunea spatiului de desenare.
void glViewport(GLint x,  GLint y,  GLsizei width,  GLsizei height); 
 
// seteaza culoarea cu care va fi colorat tot ecranul la operatia de clear
void glClearColor(float r, float g, float b, float a);
 
 // implementeaza operatia de clear
void glClear(GL_COLOR_BUFFER_BIT);

Culorile în OpenGL sunt specificate ca float în intervalul 0 - 1

Bufferul de culoare utilizat (atât în cadrul laboratorului dar și în mod uzual datorită limitărilor impuse de afișarea pe monitoare) este în format RGBA8. Fiecare componentă (red, green, blue, alpha) este memorată pe 8 biți, deci are o valoare in intervalul 0 – 255. Astfel:

  • roșu (255, 0, 0) este reprezentată ca (1, 0, 0) pe procesorul grafic
  • galben este (1, 1, 0) și tot așa

Control aplicație

Programul rulat oferă posibilitatea vizualizării scenei create prin intermediul unei camere predefinite.

Taste de control pentru cameră

  • W, A, S, D, Q, E - deplasare față, stânga, spate, dreapta, jos, sus
  • MOUSE RIGHT + MOUSE MOVE - rotație cameră

Cerințe laborator

  1. Descărcați framework-ul, compilați și rulați proiectul
    • Trebuie să deschideți proiectul GFXFramework.sln (din folderul de /build) în Visual Studio 2019
  2. Încărcați un alt model 3D și randați-l în scenă la o poziție diferită față de cele 2 cuburi
    • /assets/models conține o serie de modele 3D ce pot fi încărcate
    • În Lab1::Init() găsiți modul în care puteți să declarați (și încărcați) un nou obiect de tip Mesh
  3. La apăsarea unei taste să se schimbe culoarea de ștergere a ecranului
  4. La apăsarea unei taste să se schimbe forma/mesh-ul unuia dintre obiectele afisate (render) astfel incat să se cicleze prin 3 obiecte (de ex cube, teapot, sphere)
  5. Să se miște prin spațiu un obiect oarecare la apăsarea tastelor W, A, S, D, E, Q (pozitiv și negativ pe toate cele 3 axe)

Citiți cu atenție documentația evenimentelor de input din fișierul input_controller.h întrucât le veți utiliza în cadrul fiecărui laborator