Differences
This shows you the differences between two versions of the page.
|
egc:laboratoare:fr:01 [2019/10/02 22:53] alexandru.gradinaru created |
egc:laboratoare:fr:01 [2019/10/03 06:46] (current) alexandru.gradinaru |
||
|---|---|---|---|
| Line 42: | Line 42: | ||
| * Fonctionnalités qui seront utilisées à partir du premier laboratoire mais qui seront également implémentées par les étudiants au cours des laboratoires. | * Fonctionnalités qui seront utilisées à partir du premier laboratoire mais qui seront également implémentées par les étudiants au cours des laboratoires. | ||
| + | ==== Structure du framework ==== | ||
| + | * **/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 | ||
| + | |||
| + | ==== Les application graphique (OpenGL) ==== | ||
| + | |||
| + | 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 () ''): | ||
| + | - 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 | ||
| + | - 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) | ||
| + | - Les événements précédemment enregistrés sont traités | ||
| + | - 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) | ||
| + | - // Facultatif //: en cas de double ou de triple tamponnage, les tampons d'image sont échangés | ||
| + | - Aller à l'image suivante (revenir à la première étape) | ||
| + | |||
| + | <note> | ||
| + | Le modèle d'application OpenGL le plus simple gérera les événements d'entrée (souris, clavier) au moment de leur production. Ce modèle n'est pas indiqué car il présente de nombreux inconvénients: | ||
| + | * n'offre pas la possibilité de gérer des combinaisons de touches (Exemple: l'utilisateur appuie sur W et A pour déplacer le caractère en diagonale) | ||
| + | * ne fournit pas d'informations concernant l'état continu d'un événement | ||
| + | * ** Exemple **: un personnage dans une partie doit avancer tant que l'utilisateur appuie sur la touche ** W **. | ||
| + | * Pour gérer correctement cette logique, il est nécessaire de conserver le statut de la touche ** W **. Lorsque le caractère est déplacé, il est directement proportionnel au temps écoulé depuis le dernier traitement de la trame. | ||
| + | * La même chose s'applique aux boutons de la souris | ||
| + | |||
| + | En outre, un modèle de mise en mémoire tampon des événements d'entrée permet d'interroger le statut des entrées à tout moment d'une image. Il offre donc une plus grande flexibilité globale pour la mise en œuvre de nouveaux comportements / logiques. La classe '' WindowObject '' prend en charge la mise en mémoire tampon, mais également le traitement ultérieur d'événements à travers des objets de type '' InputController ''. | ||
| + | |||
| + | Nous vous recommandons de lire la documentation de GLFW sur la gestion des événements d'entrée pour mieux comprendre les concepts présentés: http://www.glfw.org/docs/latest/input_guide.html | ||
| + | |||
| + | </note> | ||
| + | |||
| + | ===Multi-buffering=== | ||
| + | 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 | ||
| + | |||
| + | ==== Le modèle de fonctionnement de l'application de laboratoire ==== | ||
| + | |||
| + | 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 === | ||
| + | |||
| + | Pendant les travaux pratiques (mais également pendant le cours), vous passerez par toutes les étapes importantes qui sont à la base du rendu graphique. Cela enseignera des concepts tels que: | ||
| + | * chargement et rendu d'objets 3D simples | ||
| + | * opération de pipeline graphique | ||
| + | * visualisation, projection, contrôle de la caméra | ||
| + | * utiliser des shaders (vertex et fragment shader) | ||
| + | * éclairage | ||
| + | * texture | ||
| + | |||
| + | ==== Conditions générales de laboratoire ==== | ||
| + | |||
| + | * Lisez très attentivement le cadre du laboratoire, car vous l'utiliserez tout au long du laboratoire EGC, y compris les devoirs. | ||
| + | * Lisez les commentaires dans le code - il devrait répondre à la plupart des questions que vous avez. | ||
| + | * Lisez la documentation sur [[https://github.com/UPB-Graphics/Framework-EGC/blob/master/Source/Core/Window/InputController.h | __InputController.h__]] car vous utiliserez constamment les fonctions de cette classe (écrasement) pour définir des interactions et un comportement personnalisé | ||
| + | * Si vous ne comprenez pas le modèle d'exploitation de l'application, demandez à l'assistant d'expliquer à nouveau comment fonctionne l'application dans son ensemble. | ||
| + | |||
| + | == C++ == | ||
| + | |||
| + | Le framework est écrit en C ++, et sera utilisé dans tous les laboratoires. | ||
| + | Les concepts utilisés en laboratoire et qui doivent être connus sont: | ||
| + | * concepts de base de la POO - objets, héritage, méthodes virtuelles, etc. | ||
| + | * utiliser des bibliothèques standard: en particulier [[http://www.cplusplus.com/reference/vector/vector/ | std::vector]], [[ http://www.cplusplus.com/reference/list/list/ | std::list ]] et [[ http://www.cplusplus.com/reference/unordered_map/unordered_map/ | std::unorderd_map ]] | ||
| + | |||
| + | <note tip> | ||
| + | Pour ceux qui sont moins familiers avec C ++, nous vous recommandons de suivre des tutoriels: [[http://www.learncpp.com/ | Learn C++ ]] | ||
| + | </note> | ||
| + | |||
| + | == Visual Studio 2017 == | ||
| + | * En laboratoire, nous utiliserons [[https://visualstudio.microsoft.com/vs/older-downloads/|Visual Studio 2017 Community Edition]] ou à votre choix [[https://www.visualstudio.com/vs/community/|Visual Studio 2019 Community Edition]] (par conversion de projet) | ||
| + | * Le programme d’installation de Visual Studio offre la possibilité d’installer de manière modulaire uniquement les éléments requis. Pour cet atelier uniquement le module par défaut ** Développement de bureau avec C ++ **, disponible dans ** Workloads ** | ||
| + | * Le framework contient déjà un projet préconfiguré pour Visual Studio 2017 __Framework_EGC.sln__ (dossier[[https://github.com/UPB-Graphics/Framework-EGC/tree/master/Visual%20Studio| /Visual Studio]]) | ||
| + | * Ouvrez la solution dans Visual Studio 2017 | ||
| + | |||
| + | <note tip> | ||
| + | Ceux qui n’ont pas utilisé **Visual Studio** pour écrire des applications C ++ sont invités à lire le fichier Toturial [[https://msdn.microsoft.com/en-us/library/jj620919.aspx#BKMK_CreateApp | Getting Started with C++ in Visual Studio]] | ||
| + | </note> | ||
| + | |||
| + | |||
| + | ==== GLM ==== | ||
| + | |||
| + | Dans les graphiques, les mathématiques sont utilisées partout, des simples matrices de rotation aux intégrales infiniment dimensionnelles des algorithmes utilisés dans l'industrie cinématographique. C'est pourquoi nous souhaitons disposer d'un support mathématique robuste, bien documenté et aussi proche de Format OpenGL. Au lieu d'écrire une bibliothèque mathématique, nous utiliserons la bibliothèque GLM. GLM nous fournit des rotations, des translations, des vecteurs de taille 2/3/4, des matrices et de nombreuses autres fonctionnalités avancées (par exemple, des modèles de bruit). Nous n'utiliserons que les fonctionnalités les plus simples dans les laboratoires de ce sujet. | ||
| + | |||
| + | <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> | ||
| + | |||
| + | |||
| + | ==== Laboratoire 1 ==== | ||
| + | |||
| + | === Framework === | ||
| + | |||
| + | Le cadre de laboratoire peut être trouvé sur [[https://github.com/UPB-Graphics/Framework-EGC | Github]] \\ | ||
| + | |||
| + | Vous pouvez télécharger l'archive directement en y accédant [[https://github.com/UPB-Graphics/Framework-EGC/archive/master.zip | ce lien ]] | ||
| + | |||
| + | |||
| + | === Informations de laboratoire === | ||
| + | |||
| + | <note important> Les sources sous-jacentes à chaque laboratoire figurent dans le dossier: __/Source/Laboratoare/Laborator**N**/__, **N** représentant le numéro de laboratoire. | ||
| + | </note> | ||
| + | |||
| + | Dans le laboratoire 1, vous pouvez télécharger des modèles 3D sur la scène et demander l’affichage de la scène à l’aide de la fonction | ||
| + | <code cpp> | ||
| + | RenderMesh(Mesh * mesh, glm::vec3 position, glm::vec3 scale) | ||
| + | </code> | ||
| + | |||
| + | Les couleurs de pixel par lesquelles la scène est représentée sont stockées dans une mémoire tampon appelée Framebuffer. Le contexte défini fournit automatiquement un tel tampon et est configuré pour fonctionner avec une double mise en mémoire tampon. | ||
| + | |||
| + | L'API OpenGL utilisée dans le laboratoire: | ||
| + | <code cpp> | ||
| + | // définit un espace de dessin dans l'espace de la fenêtre | ||
| + | // x, y représente les coordonnées du coin inférieur gauche | ||
| + | // width, height représente la taille de l'espace de dessin. | ||
| + | void glViewport(GLint x, GLint y, GLsizei width, GLsizei height); | ||
| + | |||
| + | // Définit la couleur avec laquelle tout l'écran sera coloré lors de l'effacement | ||
| + | void glClearColor(float r, float g, float b, float a); | ||
| + | |||
| + | // met en œuvre l'opération d'effacement | ||
| + | void glClear(GL_COLOR_BUFFER_BIT); | ||
| + | </code> | ||
| + | |||
| + | <note important> | ||
| + | Les couleurs dans OpenGL sont spécifiées en tant que float dans la plage 0 - 1 | ||
| + | |||
| + | Le tampon de couleur utilisé (à la fois dans le laboratoire et généralement en raison de limitations imposées par l'affichage sur le moniteur) est au format RGBA32. Chaque composant (rouge, vert, bleu, alpha) occupe 8 bits, donc la plage 0 - 255. Ainsi: \\ | ||
| + | * le rouge (255, 0, 0) est représenté par (1, 0, 0) sur le processeur graphique\\ | ||
| + | * le jaune est (1, 1, 0) et ainsi de suite | ||
| + | |||
| + | </note> | ||
| + | |||
| + | == Contrôle d'application == | ||
| + | |||
| + | Le programme en cours offre la possibilité de visualiser la scène créée par une caméra prédéfinie. | ||
| + | |||
| + | <note tip> | ||
| + | Touches de contrôle pour la caméra | ||
| + | * **W, A, S, D, Q, E** - avant, gauche, arrière, droite, bas, haut | ||
| + | * **MOUSE RIGHT + MOUSE MOVE** - roatation de caméra | ||
| + | </note> | ||
| + | |||
| + | |||
| + | === Exigences de laboratoire === | ||
| + | |||
| + | - Téléchargez le framework, compilez et exécutez le projet | ||
| + | * Vous devez ouvrir le projet Framework_EGC.sln (dossier __/Visual Studio__) avec Visual Studio IDE | ||
| + | - Téléchargez un autre modèle 3D et affichez-le dans une position différente de celle des deux cubes. | ||
| + | * __/Resources/Models__ contient un certain nombre de modèles 3D pouvant être téléchargés | ||
| + | * Dans ''Laborator1::Init()'' découvrez comment vous pouvez déclarer (et télécharger) un nouvel objet de type ''Mesh'' | ||
| + | - Appuyer sur une touche change la couleur de la gomme à l'écran | ||
| + | - Lorsque vous appuyez sur une touche, modifiez l'objet affiché (rendu) en une position (pour parcourir 3 objets, par exemple un cube, une théière, une sphère - cube, teapot, sphere) | ||
| + | - Pour déplacer un objet dans l'espace en appuyant sur les touches W, A, S, D, E et Q (positif et négatif sur les 3 axes) | ||
| + | |||
| + | |||
| + | <note important>Veuillez lire attentivement la documentation des événements saisis dans le fichier ''[[https://github.com/UPB-Graphics/Framework-EGC/blob/master/Source/Core/Window/InputController.h | InputController.h]]'' comme vous les utiliserez dans chaque laboratoire</note> | ||
| + | |||
| + | |||
| + | <hidden> | ||
| + | Bonusuri posibile: | ||
| + | * Rotația continuă a unui obiect în jurul unui punct, cu o anumită rază. | ||
| + | * Implementarea acțiunii de a sări aplicată pe un obiect (există un model 3D uman la __/Resources/Models/Characters/Archer/Archer.fbx__). | ||
| + | * Când e apasată tasta **CTRL** (sau alt modifier) și una din tastele W, A, S, D, E, Q, să deplaseze obiectul doar o singură dată în direcția corespunzătoare cu 1 unitate (sau oricât doresc ei). Cereți să trateze acest comportament împreună cu cel de deplasare continuă la apăsarea tastelor de mai sus când nu intră în combinație cu tasta modifier aleasă. | ||
| + | </hidden> | ||
