L'infographie est un vaste sujet utilisé dans un nombre croissant de domaines. Dans ce laboratoire seront présentés les concepts généraux des graphiques ainsi que l'utilisation du processeur graphique à cette fin. Le domaine de l’infographie requiert diverses connaissances: mathématiques, physique, algorithmes, graphismes numériques 2D et 3D, conception d’expérience utilisateur, etc.

Comme écrire une application OpenGL simple ne peut pas être facilement réalisé dans un court laps de temps, mais aussi pour pouvoir présenter les concepts de base de l’infographie moderne de manière plus simple, nous allons travailler dans les laboratoires sur un cadre offrant de nombreuses fonctionnalités prédéfinies. Le framework utilisé offre toutes les fonctionnalités de base d'un moteur graphique minimal, telles que:

• Fenêtre de dessin basée sur un contexte OpenGL 3.3 + (vous découvrirez ce que cela signifie)
• Support pour la téléchargement de modèles 3D (également appelé maillages 3D )
• Support pour la téléchargement d'images pour texturer des modèles 3D
• Support pour la définition et le téléchargement de shaders OpenGL

De plus, en plus des fonctionnalités de base, le framework implémente un modèle générique pour l'écriture d'applications OpenGL. Ainsi, les aspects suivants sont offerts:

• Contrôle de la fenêtre d'affichage
• Gestion de la saisie au clavier et à la souris
• Caméra de visualisation d'entrée prédéfinie pour déplacer et visualiser facilement la scène
• Modèle architectural d'une application OpenGL simple, basé sur tous les aspects présentés

La fonctionnalité du framework est offerte à travers plusieurs bibliothèques (libraries):

• GLFW
  • Site officiel http://www.glfw.org Github https://github.com/glfw/glfw
  • Support pour l'API OpenGL: contexte, fenêtre, entrée, etc.
• GLEW
  • Site officiel http://glew.sourceforge.net Github https://github.com/nigels-com/glew
  • Suport pour les extensions OpenGL de le processeur graphique
• GLM
  • Site officiel http://glm.g-truc.net Github https://github.com/g-truc/glm
  • Fonctionnalités mathématiques basées sur les spécifications GLSL (OpenGL shaders)
  • Assure une interopérabilité facile avec l'API OpenGL
• ASSIMP
  • Site officiel http://www.assimp.org Github https://github.com/assimp/assimp
  • Open Asset Import Library
  • Téléchargement de modèles et de scènes 3D
  • Plupart des formats de stockage 3D utilisés dans l'industrie.
• STB
  • Github https://github.com/nothings/stb
  • Téléchargement / décodage des fichiers JPG, PNG, TGA, BMP, PSD, etc.
• EGC-Components – closed source
  • Fonctionnalités qui seront utilisées à partir du premier laboratoire mais qui seront également implémentées par les étudiants au cours des laboratoires.

• /libs
  • Bibliotecile utilizate în cadrul framework-ului
• /Visual Studio
  • Proiect Visual Studio 2017 preconfigurat
• /Resources
  • Resurse necesare rulării proiecutului
  • /Textures
    • Diverse imagini ce pot fi încărcate și utilizate ca texturi
  • /Shaders
    • Exemple de programe shader - Vertex Shader și Fragment Shader
  • /Models
    • Modele 3D ce pot fi încărcate în cadrul framework-ului
• /Source
  • Surse C++
  • /include
    • O serie de headere predefinite pentru facilitarea accesului la biblioteci
    • gl.h
      • Adaugă suportul pentru API-ul OpenGL
    • glm.h
      • Adaugă majoritatea headerelor glm ce vor fi utilizate
      • Printare ușoara pentru glm::vec2, glm::vec3, glm::vec4 prin intermediul operatorului C++ supraîncărcat: operator«
    • math.h
      • Simple definiții preprocesor pentru MIN, MAX, conversie radiani ⇔ grade
    • utils.h
      • Simple definiții preprocesor pentru lucrul cu memoria și pe biți
  • /Components
    • Diverse implementări ce facilitează lucrul în cadrul laboratoarelor
    • SimpleScene.cpp
      • Model de bază al unei scene 3D utilizată ca bază a tuturor laboratoarelor
    • CameraInput.cpp
      • Implementare a unui model simplu de control FPS al camerei de vizualizare oferite de biblioteca EGC-Components
  • /Core
    • API-ul de bază al framwork-ului EGC
    • /GPU
      • GPUBuffers.cpp
        • Asigură suportul pentru definirea de buffere de date și încărcarea de date (modele 3D) pe GPU
      • Mesh.cpp
        • Loader de modele 3D atât din fișier cât și din memorie
      • Shader.cpp
        • Loader de programe Shader pentru procesorul grafic
      • Texture2D.cpp
        • Loader de texturi 2D pe GPU
    • /Managers
      • ResourcePath.h
        • Locații predefinite pentru utilizarea la încărcarea resurselor
      • TextureManager.cpp
        • Asigură încărcare și management pentru texturile Texture2D
        • Încarcă o serie de texturi simple predefinite
    • /Window
      • WindowCallbacks.cpp
        • Asigură implementarea funcțiilor de callback necesare de GLFW pentru un context OpenGL oarecare
        • Evenimentele GLFW sunt redirecționare către fereastra definită de Engine
      • WindowObject.cpp
        • Oferă implementarea de fereastră de lucru, suport predefinite definire pentru callbacks, dar și un model de buffering pentru evenimente de input tastatură și mouse
      • InputController.cpp
        • Prin moștenire oferă suport pentru implementarea callback-urilor de input/tastatură. Odată instanțiat, obiectul se va atașa automat pe fereastra de lucru (pe care o obține de la Engine) și va primi automat evenimentele de input pe care le va executa conform implementării
        • În cadrul unui program pot exista oricâte astfel de obiecte. Toate vor fi apelate în ordinea atașării lor, dar și a producerii evenimentelor
      • Engine.cpp
        • Asigură inițializarea contextului OpenGL și a ferestrei de lucru
      • World.cpp
        • Asigură implementarea modelului de funcționare al unei aplicații OpenGL pe baza API-ului oferit de Framework
    • /Laboratoare
      • Implementările pentru fiecare laborator EGC
      • Fiecare laborator va pleca de la baza oferită de SimpleScene

Toute application doit garantir la fonctionnalité sur une certaine période. En fonction des besoins, cette période peut être:

• déterministe - le programme exécutera une certaine tâche puis se terminera (la plupart des programmes créés au sein de la faculté respectent jusqu'à présent ce modèle)
• continu - exécute une ou plusieurs tâches de manière continue (jusqu'à ce que l'utilisateur ou un événement externe ferme l'application).

Les applications graphiques prenant en charge la visualisation en temps réel (par exemple, les jeux ou ce que nous ferons par exemple chez Infographie) se trouvent dans le second modèle et sont basées sur une boucle de traitement. Dans le framework, cette boucle consiste en une série d'étapes (voir World::LoopUpdate () ):

1. Les événements de la fenêtre OpenGL sont interrogés (entrée, redimensionnement, etc.)
   • Les événements sont sauvegardés pour un traitement ultérieur
2. Le temps d'exécution de l'itération en cours est estimé (le temps d'exécution de l'itération précédente)
3. Les événements précédemment enregistrés sont traités
4. La trame actuelle est traitée (il est conseillé de prendre en compte le temps d'exécution dans les modifications pour fournir une mise à jour inépendante du temps)
5. Facultatif : en cas de double ou de triple tamponnage, les tampons d'image sont échangés
6. Aller à l'image suivante (revenir à la première étape)

En général, les applications graphiques utilisent plusieurs tampons d'image pour éviter l'apparition d'artefacts graphiques en modifiant directement l'image affichée à l'écran. Ainsi, l'image affichée à l'heure T a été traitée à l'heure T-1 ou T-2 (en fonction de la taille du tampon). Des informations supplémentaires sur cette technique de mise en mémoire tampon multiple peuvent être obtenues à partir du wiki:

• https://en.wikipedia.org/wiki/Multiple_buffering
• https://en.wikipedia.org/wiki/Multiple_buffering#Double_buffering_in_computer_graphics
• https://en.wikipedia.org/wiki/Multiple_buffering#Triple_buffering

Dans lelaboratoire, le modèle d'application graphique présenté ci-dessus est mis en oeuvre par la classe World. L'étape 2 est gérée par les instances de InputController, tandis que l'étape 4 est fournie par les variables FrameStart () , Update (float deltaTime) et FrameEnd () héritées de la classe 'World'. . La classe World étend déjà InputController pour faciliter le travail en laboratoire.
Tous les laboratoires seront mis en œuvre sur la base de “SimpleScene” qui offre les fonctionnalités suivantes: * Scène 3D avec rendu d'un système de référence cartésien en coordonnées OpenGL * plan horizontal XOZ * en soulignant l'espace positif (OX, OY, OZ) * la caméra prédéfinie pour l'exploration de la scène * shaders prédéfinis pour le travail dans les premiers laboratoires * gestion du stockage des shader et modèles nouvellement créés, basés sur un nom unique === Étapes de l'exécution de l'application === - Les propriétés de la fenêtre de travail sont définies (Main.cpp) - Le moteur est donc initialisé - Engine::Init() - L'API OpenGL est initialisée (glfwInit()) - La fenêtre de travail est créée avec un contexte OpenGL 3.3+ - Attacher des événements de fenêtre via WindowsCallbacks.cpp - Le gestionnaire de texture est initialisé - Une nouvelle scène de travail 3D est créée et initialisée sur la base du modèle de mise à jour présenté ci-dessus. (Main.cpp) - La scène chargée commence à courir (LoopUpdate()) ==== Le standard OpenGL ==== OpenGL est un standard (API) que nous pouvons utiliser pour créer des applications graphiques en temps réel. Il est presque identique à Direct3D, qui ont tous deux une influence mutuelle au fil des ans. * Plus d’informations sur l’histoire OpenGL sont disponibles sur: https://en.wikipedia.org/wiki/OpenGL * Vous trouverez des explications complètes sur l’API OpenGL et son utilisation sur la page standard de la norme: https://www.opengl.org/sdk/docs/man/ <note tip>Si vous ne savez pas quoi faire pour une commande particulière ou quels sont les paramètres de la fonction, il est conseillé de consulter la documentation: https://www.opengl.org/sdk/docs/man/ </note> La version actuelle de cette norme est la 4.6. Pour le cours EGC, nous utiliserons la norme 3.0 / 3.3, qui est en même temps la version actuelle de la version mobile d’OpenGL, appelée OpenGL ES https: fr.wikipedia.org/wiki/OpenGL_ES.
Depuis 2016, l'API Vulkan a été lancée. Elle offre un accès bas niveau avancé aux capacités graphiques modernes des processeurs graphiques. La norme Vulkan est orientée vers le développement d’applications hautes performances et sa complexité dépasse de loin les aspects fondamentaux qui seront présentés dans les points suivants: laboratoire / point de rebroussement. === Utiliser l'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: * încărcare și randare de obiecte 3D simple * funcționarea pipeline-ului grafic * vizualizare, proiecție, control camera * utilizare shadere (vertex și fragment shader) * iluminare * texturare ==== Cerințe generale de laborator ==== * Citiți cu foarte mare atenție Framwork-ul de laborator întrucât îl veți utiliza pe tot parcursul laboratorului de EGC inclusiv și la temele de casă * Citiți comentariile din cod – ar trebui să răspundă la majoritatea întrebărilor pe care le aveți * Citiți documentația de la __InputController.h__ întrucât veți utiliza constant funcțiile din cadrul acestei clase (prin suprascriere) pentru definirea de interacțiuni și comportament personalizat * Dacă nu ințelegeți modelul de funcționare al aplicației rugați asistentul să explice încă o dată cum funcționează toată aplicația == 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: * concepte de bază de OOP - obiecte, moștenire, metode virtuale, etc * utilizarea standard libraries: în special std::vector, std::list și std::unorderd_map <note tip> Pentru cei mai puțin familiarizați cu limbajul C++ recomandăm să parcurgeți tutoriale: Learn C++ </note> == Visual Studio 2017 == * În cadrul laboratorului vom utiliza Visual Studio 2017 Community Edition sau la alegere Visual Studio 2019 Community Edition (prin conversie de proiect) * Installer-ul de Visual Studio vine cu posibilitatea de a instala modular doar ceea ce este necesar. Pentru acest laborator trebuie instalat doar modulul default Desktop development with C++, care se regăsește în Workloads * Framework-ul conține deja un proiect preconfigurat pentru Visual Studio 2017 Framework_EGC.sln (folderul /Visual Studio) * Deschideți soluția în Visual Studio 2017 <note tip> 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 </note> ==== 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 librărie de matematică vom folosi librăria GLM. GLM ne oferă rotații, translații, vectori de dimensiune 2/3/4, matrici și multe alte funcționalități avansate (e.g. modele de zgomot). Vom folosi doar cele mai simple funcționalități în laboratoarele de la această materie. <code cpp> 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 </code> ==== 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 === <note important> Sursele ce stau la baza fiecărui laborator se află în directorul: /Source/Laboratoare/LaboratorN/, N reprezentând numărul laboratorului. </note> În cadrul laboratorului 1 puteți încărca modele 3D în cadrul scenei și cere afișarea scenei utilizând funcția <code cpp> RenderMesh(Mesh * mesh, glm::vec3 position, glm::vec3 scale) </code> 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: <code cpp> defineste un spatiu de desenare in spatiul ferestrei de vizualizare 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); </code> <note important> 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 monitore) este în format RGBA32. Fiecare componentă (red, green, blue, alpha) ocupă 8 biți, deci 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 </note> == Control aplicație == Programul rulat oferă posibilitatea vizualizării scenei create prin intermediul unei camere predefinite. <note tip> 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ă </note> === Cerințe laborator === - Descărcați framework-ul, compilați și rulați proiectul * Trebuie să deschideți proiectul Framework_EGC.sln (folderul /Visual Studio) în Visual Studio 2017 - Încărcați un alt model 3D și randați-l în scenă la o poziție diferită față de cele 2 cuburi * /Resources/Models conține o serie de modele 3D ce pot fi încărcate * În Laborator1::Init() găsiți modul în care puteți să declarați (și încărcați) un nou obiect de tip Mesh - La apăsarea unei taste să se schimbe culoarea de ștergere a ecranului - La apăsarea unei taste să se schimbe obiectul afisat (render) la o poziție (să cicleze prin 3 obiecte, de ex cube, teapot, sphere) - 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) <note important>Citiți cu atenție documentația evenimentelor de input din fișierul InputController.h'' întrucât le veți utiliza în cadrul fiecărui laborator</note>