OpenGL & WebAssembly – Rotation d’un cube 3D

 

Table des matières

 

OPENGL & WebAssembly – Rotation d’un cube 3D.. 1

Résumé. 3

Introduction. 4

Histoire. 5

Création d’OpenGL et évolution. 5

Fonctionnement 6

Fonctionnement de la librairie OpenGL. 6

Fonctionnement théorique du programme. 6

Installation. 7

Installation d’OpenGL. 7

Création du cube. 8

Création du projet 8

Code du cube et de son interface. 8

WebAssembly. 13

Découverte de l’API 13

Installation de WebAssembly. 13

Références. 15

 

 

 

Résumé

 

OpenGL is a standardized set of 2D and 3D image calculation functions available on different platforms. Can be used in several different languages ​​such as C ++ or Java, OpenGL can perform many treatments on the design or modification of 2D and 3D objects. We will discover how OpenGL works through the design of a 3D cube. Once the cube is fully formed, we will rotate it around a specified axis.

We will talk about the creation of OpenGL and its progress through the evolution of technologies as well as the different integrations to current languages.

We will also discover the whole structure needed in C ++ to create an OpenGL project under Linux. We will also discover the different elements allowing to create a cube with the functions of calculation and creation which are associated to it and we will end by the rotation of the cube with the presentation of the functions allowing to select the angle and the axis of rotation of the cube.

 

 

Introduction

 

OpenGL (Open Graphics Library) est, comme son nom l’indique, une bibliothèque regroupant 250 fonctions permettant la conception et la manipulation d’éléments 2D et 3D. Créée en janvier 1992 par la société Silicon Graphics [1], la librairie OpenGL à évolué jusqu’à celle que nous connaissons et utilisons de nos jours.

Bibliothèque extrêmement complète, elle permet de développer des applications 2D et 3D assez facilement. Écrite en C, OpenGL est principalement utilisée en C++ au travers d’IDE tel que Visual Studio, QT ou encore Code::Blocks qui permettent de compiler des programmes en C++. Il est également possible d’utiliser OpenGL en Python, Delphi et Java. Les fonctionnalités sont quasiment identiques que celles utilisées en C++.

OpenGL dispose de nombreuses fonctionnalités mises à la disposition de l’utilisateur telle que la gestion des textures, la disposition de la caméra, la rotation des objets, le remplissage des faces d’un objet tel qu’un cube, la gestion de la lumière, des ombres, des particules … De nombreux jeux vidéo utilisent l’OpenGL dans leurs conceptions, comme le très célèbre Quake III, afin de modéliser l’environnement ainsi que les différents composants du jeu (armes, personnages, éclairages, ombres, textures, etc.).

OpenGL permet, en outre l’utilisation des différents éléments tels que les textures ou la gestion de l’angle de la caméra ou de la lumière, une gestion du fenêtrage. Il est donc possible de créer de nouvelles fenêtres, de charger des textures dans une plusieurs fenêtres et d’effectuer des actions différentes dans des fenêtres différentes. De plus, il est également possible de gérer des évènements émis par l’utilisateur tels que le mouvement de la souris ou encore les actions clavier comme l’appui de la touche espace pour faire sauter un personnage.

Bien sûr, OpenGL n’est pas la seule librairie graphique mise à disposition pour les développeurs afin de concevoir des applications graphiques 2D et 3D. Il existe comme concurrent principal la bibliothèque graphique de Microsoft appelée Direct3D couplé directement à DirectX. Elle permet également, comme OpenGL, de créer et concevoir des applications en 3D performantes qui sont notamment utilisées sous Windows ainsi que sur les Xbox (version un peu différente que de Direct3D original).

Nous allons donc découvrir, au travers de ce papier, l’utilisation de certaines fonctionnalités d’OpenGL permettant de créer un cube en 3 dimensions et ensuite de le faire tourner autour d’un axe X, Y ou Z. Nous verrons également comment créer un contexte en mettant en place une fenêtre permettant d’afficher le cube créé. De plus, nous verrons également comment gérer les différentes couleurs sur chaque face du cube à la création afin de pouvoir distinguer correctement la rotation du cube.

 

 

Histoire

 

Création d’OpenGL et évolution

 

Comme évoqué précédemment, OpenGL est une bibliothèque graphique conçue par la société Silicon Graphics en janvier 1992. La société Silicon Graphics (SGI) [2] est une société américaine qui développait et mettait en place des stations de travail dédiées à la conception 3D, l’infographie, le traitement vidéo et le calcul de haute performance.

Parmi les différentes branches de leurs activités, on peut noter la conception de la machine Origin 3000 [3] utilisée par la NASA afin d’effectuer de super calculs. L’Origin 3000 fonctionnait sur un système d’exploitation natif de Silicon Graphics appelé IRIX.

Toujours dans le cadre de ses différentes activités, la Silicon Graphics développa une API graphique nommée IRIS GL afin d’en équiper ses différentes stations de travail. Face à une concurrence en croissance constante et à une standardisation des différents matériels, Silicon Graphics décida de rendre son API publique et la renomma OpenGL.

Alors que Silicon Graphics continu d’effectuer la création de ses produits propriétaires comme IRIS Inventor ou IRIS Performer, OpenGL sert de produit d’entrée de gamme permettant d’effectuer des appels d’offres gratuitement et ainsi d’étendre son carnet de clients.

Le 8 mai 2006, Silicon Graphics annonce sa mise en faillite en vertu du chapitre 11 de la loi américaine sur les faillites. A la suite de la mise en faillite, le 1er avril 2009, la société SGI se remet sous la protection du chapitre 11 et qu’un premier accord de rachat à été trouvé avec la société Rackable Systems pour 25 millions de dollars. Enfin, le 11 août 2016, la société Silicon Graphics est rachetée par Hewlett-Packard Enterprise pour une somme de 275 millions de dollars [4].

La version actuelle de la librairie OpenGL est en 4.2 et est en fonctionnement depuis le 8 août 2011.

 

 

 

Fonctionnement

 

 Fonctionnement de la librairie OpenGL

 

Nous avons déjà parlé de ce qu’OpenGL pouvait faire pour vous. Maintenant, avant de commencer le développement de notre cube 3D en rotation, nous allons voir plus en détail le fonctionnement de la librairie et comment elle effectue les traitements pour atteindre le résultat dont nous avons besoin.

 La bibliothèque fonctionne en utilisant des variables qui sont interpolées afin de calculer et d’effectuer un rendu visuel dans un espace en 3 dimensions. Le programme récupère des valeurs qui sont mises en entrée par l’utilisateur, et ensuite les redisposent dans l’espace 3D en calculant les coordonnées ainsi que les liaisons possibles entre les différents points voulus.

Afin de pouvoir effectuer ces différents calculs, la librairie fonctionne en utilisant des états. Chaque instruction à pour but de déclarer un état ou de modifier un état.

Prenons un exemple : si nous voulons colorer un plan ou une face d’un cube (ou d’une autre figure peu importe), il nous faut spécifier la couleur avant de créer les points. Ainsi, lorsque les différents points de la figure vont ensuite être créés, ils seront tous construits en utilisant l’étant précédent qui sera la couleur voulue.

C’est en partant de ce principe d’états que nous allons pouvoir construire, à l’aide de la librairie OpenGL, notre cube en 3 dimensions et ainsi pouvoir le faire tourner sur un axe par la suite.

 

 

 

 Fonctionnement théorique du programme

 

Avant de s’attaquer au code, nous allons voir de manière théorique les différentes étapes de conception dont le code va avoir besoin afin de pouvoir créer et modifier les différents états de notre cube.

Pour pouvoir construire notre cube, il va nous falloir dans un premier temps inclure la librairie dans notre feuille de code, ensuite créer une fonction d’initialisation qui va nous permettre de remettre à 0 certains paramètres tels que la couleur.

Nous allons avoir ensuite une fonction plus fournie qui sera chargée de la construction du cube en lui-même : elle comportera donc les coordonnées des différents points qui doivent être interpolés par la librairie ainsi que les couleurs des faces du cube. Chacune de ces lignes sera donc des configurations de différents états du cube afin de pouvoir entièrement le concevoir.

Il nous faudra ensuite une fonction nous permettant de créer l’animation concernant l’élément « cube ». Enfin, avant de terminer, nous devrons coder une fonction de modelage qui nous permettra d’afficher le cube dans un contexte précis qui sera notre fenêtre.

Pour terminer notre programme, il nous faudra code la fonction principale qui nous permettra de compiler le programme avec nos différentes fonctions précédemment décrites et ainsi construire notre cube et l’afficher une fois construit.

Afin de pouvoir commencer notre code, il va nous falloir installer la librairie sur notre système d’exploitation.

 

 

Installation

 

Installation d’OpenGL

 

Étant donné que nous travaillons sous Linux Ubuntu 16.4, il nous installer OpenGL en ligne de commande directement dans le terminal. La commande d’installation est très simple et peut être trouvée ici dans la documentation officielle d’Ubuntu :

 

Nous avons besoin dans notre programme de deux versions d’OpenGL. La première est la version classique que vous pouvez installer en tapant la commande suivante dans un terminal sous Linux :

 

La seconde version est la version de développement qui s’installe de la même manière que la première version, mais en utilisant cette fois-ci cette commande dans le terminal :

 

Les installations des deux versions de la librairie étant faite en mode super-users, il vous faudra renseigner votre mot de passe administrateur afin que les installations se lancent et se terminent.

 

 

 

Création du cube

 

Création du projet

 

Avant toute chose, nous allons utiliser un IDE pour compiler notre programme en C++. Je vais utiliser Qt qui fonctionne très bien et permet d’effectuer et de compiler de nombreux type de projet en langage C et C++.

Il vous faudra donc commencer par créer un projet en faisant :

« Menu -> nouveau projet -> Qt non application -> plain C++ »

 

 

Code du cube et de son interface

 

Maintenant que nous avons le projet, nous pouvons commencer à coder les différentes parties qui nous permettront de concevoir le cube en 3D et de l’animer par la suite. Nous commençons donc par inclure les différentes parties de la bibliothèque OpenGL précédemment installée que nous allons utiliser ainsi que le namespace utilisé :

 

 

 

Nous déclarons ensuite différentes variables globales nécessaires dans notre programme de type GLfloat comme suivant :

 

 

Une fois les variables globales déclarées, nous allons écrire une méthode d’initialisation permettant de démarrer le procédé de couleurs présent dans la bibliothèque OpenGL :

 

 

Il nous faut maintenant une méthode permettant de concevoir ce qui nous intéresse, c’est-à-dire, un cube en 3 dimensions avec une couleur sur chaque face nous permettant ainsi de mieux visualiser le cube ainsi que sa rotation. Voici donc la méthode qui va s’occuper de créer le cube en 3 dimensions :

 

 

La première partie de cette fonction permet de gérer le contexte dans lequel le cube va être créé ainsi que la définition de la rotation du cube suivant les axes X et Y.

La seconde partie de la fonction est la mise en place des différents états nous permettant de créer le cube en 3 dimensions. Nous allons créer chaque face du cube en renseignant la coordonnée de chaque coin de chaque face du cube :

 

 

Maintenant que notre cube se dessine, il nous faut l’animer et le faire tourner. Nous allons donc écrire la fonction d’animation qui nous permettra de gérer l’animation du cube :

 

 

La fonction de rotation étant faite, il nous reste à créer une méthode permettant de créer le contexte d’affichage du cube. Il nous faut gérer le fenêtrage, l’angle de vue ainsi que la position de l’objet par rapport au plan. La méthode suivante s’occupe de ça :

 

 

Nous avons maintenant toutes les fonctions nécessaires à la création de l’environnement, du cube et de sa rotation par OpenGL. Il ne reste maintenant plus qu’à effectuer les différents appels dans la méthode principale afin de pouvoir tout compiler.

La méthode main va nous permettre d’initialiser les différentes fonctions de Glut de la librairie OpenGL qui vont créer la fenêtre, la positionner et lui indiquer qu’est-ce qui va devoir être affiché à l’intérieur (en l’occurrence, la création de notre cube).

Elle nous permettra également de lancer l’animation du cube une fois la création de la fenêtre et du contexte effectué et le cube dessiné. Nous pourrons ainsi visualiser le cube en rotation dans notre fenêtre.

 

 

Lorsque nous compilons notre programme, nous obtenons le résultat final qui est notre cube en rotation :

 

 

 

WebAssembly

Découverte de l’API

 

L’API WebAssembly est un compilateur permettant de générer, à partir de programmes en langage C et C++, des fichiers HTML, CSS et JavaScript dans le but de rendre le programme fonctionnel sur le web. Cette API a pour but, entre autres, de rendre les programmes appelés « client / serveur » portables sur le Net.

Cette API est sous licence Apache et donc libre de droits. Les principaux développeurs travaillant sur le projet sont Google, Apple, Microsoft W3C et Mozilla Foundation. La première version de WebAssembly a été présentée le 17 juin 2015 [5].

 

Installation de WebAssembly

 

WebAssembly utilise un compilateur différent que le standard utilisé par Linux pour compiler ses programmes en C. Afin de pouvoir rendre les programmes en C et C++ portables sur le web, WebAssembly utilise un compilateur nommé Emscripten.

Emscripten rend possible la transformation d’un code en C ou C++ en JavaScript directement en compilant le programme. Il nous faut donc, afin de rendre la compilation de notre programme en C++ possible, installer le compilateur.

Toutes les étapes d’installation sont indiquées sur le site officiel de WebAssembly au niveau de leurs documentations ici ( https://webassembly.org/getting-started/developers-guide/ ).

Afin d’installer le compilateur et faire que tout puisse être compilé, il vous faudra suivre les différentes étapes suivantes :

  • Dans le terminal sous Linux, il faudra entrer les différentes commandes suivantes afin de pouvoir cloner le compte GitHub où se trouvent les ressources pour l’installation et pouvoir installer et activer la dernière version.

  • Une fois l’installation effectuée, il faut ajouter les variables d’environnement au fichier PATH afin de pouvoir utiliser l’environnement de compilation. Pour se faire, toujours dans le même terminal, entrez la commande suivante :

  • Enfin, dernière étape, il nous reste la compilation qui se fait de la même manière qu’en utilisant le compilateur GCC de Linux, mais cette fois-ci, Emscripten le remplace :

Le compilateur va alors vous générer tous les fichiers nécessaires au déploiement de notre programme en C++ sur le web. L’ensemble des fichiers HTML et JavaScript seront regroupés dans le dossier de compilation qui sera signifié par votre positionnement dans le système de fichiers, lorsque le terminal compilera.

 

 

Références

 

[1] – Source Wikipédia : https://fr.wikipedia.org/wiki/OpenGL. Dernier accès à l’article le 04/05/2018.

[2] – Source Wikipédia : https://fr.wikipedia.org/wiki/Silicon_Graphics. Dernier accès à l’article le 04/05/2018.

[3] – Source Emmanuel Romagnoli CampusID : Cours sur la bibliothèque OpenGL. Dernier accès à l’article le 04/05/2018.

[4] – Source Wikipédia : https://fr.wikipedia.org/wiki/Silicon_Graphics. Dernier accès à l’article le 04/05/2018.

[5] – Source Wikipédia : https://fr.wikipedia.org/wiki/WebAssembly. Dernier accès à l’article le 13/05/2018.

 

Référence et auteur du code présenté : https://www.codemiles.com/c-opengl-examples/draw-3d-cube-using-opengl-t9018.html

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *