CopperLicht

 

 

 

ARTICLE IDLABS

Présentation et exemples d’utilisation de CopperLicht

PÉRIODE 4

(2017-2018)

                

Sommaire


 

 

 

Introduction


 

Depuis le 3 Mars 2011, le développement de contenu 3D interactif a été grandement facilité pour le web, notamment avec l’apparition de WebGL*.

WebGL (Bibliothèque de Graphismes Web) est une API* JavaScript pour l'affichage de graphismes 2D et 3D dans n'importe quel navigateur web compatible sans utilisation de modules complémentaires. WebGL réalise cela en introduisant une API qui se conforme de façon très proche à OpenGL ES 2.0* et qui peut être utilisée dans les éléments canvas d'HTML5.

Lorsqu’un élément graphique de type WebGL est inclus dans une page web, le navigateur exécute un programme en JavaScript utilisant l'interface WebGL. La bibliothèque WebGL appelle à son tour le pilote OpenGL ES du système d'exploitation qui se chargera de faire les calculs nécessaires à l'affichage sur l'écran, en exploitant si possible l'accélération matérielle du ou des processeurs graphiques du terminal.

WebGL permet la réalisation de nombreux projets, et particulièrement la création de jeux. Pour faciliter le développement en WebGL, il existe plusieurs bibliothèques telle que CopperLicht.

 

 

 

 

Présentation de CopperLicht


 

 

 

CopperLicht est une bibliothèque JavaScript open-source pour créer des jeux et des applications 3D interactives utilisant WebGL , développé par Ambiera.

 

CopperLicht est supposé être utilisé avec son éditeur de monde 3D CopperCube, mais il peut aussi être utilisé sans.

CopperLicht comporte les fonctionnalités suivantes :

  • Rendu 3D basé sur un graphe de scène hiérarchique ;

  • Animation squelettique ;

  • Détection de collision intégrée et moteur physique simple ;

  • Support de lumière dynamique ;

  • Système de création et d'utilisation de shaders personnalisés et de matériaux basés sur le langage GLSL* ( OpenGL Shading Language ) ;

  • Animation de texture ;

  • Système de rendu de polices 2D et de primitives 2D intégré ;

  • Support de couleur Vertex ;

  • Système de réduction de dessin automatique ;

  • Animateurs ;

 

 

 

 

Installation


 

Dans un premier temps, il nous faut un éditeur de texte pour manipuler le HTML et le JavaScript. Par exemple, Notepad++* sur Windows.

Par la suite, il faut télécharger le SDK* CopperLicht. Il peut être téléchargé depuis le site officiel de CopperLicht, ou ici.

Et enfin, télécharger l’éditeur de monde 3D pour CopperLicht, CopperCube. Il peut être téléchargé depuis le site officiel de Ambiera, ici. Attention, CopperCube est gratuit pour seulement 14 jours.

CopperCube est un moteur de jeux avec un éditeur graphique développé par Ambiera. Il est simple, léger et ne requiert pas de compétence en programmation pour créer des applications 3D d'un simple drag-and-drop* basé sur un système de comportement et un système logique orienté action. Il a un générateur de terrain, des modèles 3D pré-importés (on peut aussi en télécharger plus sur le site), un moteur physique, et il détecte les collisions.

Une fois tous les pré-requis réalisés, il ne vous reste plus qu’a créer un dossier, et ouvrir CopperCube.

 

 

 

Exemple d’utilisation


Hello World

 

Nous allons réaliser un premier exemple qui consiste à afficher une scène 3D interactive très simple, en utilisant le moteur 3D CopperLicht. Le résultat attendu ressemblera à :

 

Premièrement, il nous faut créer une scène. Pour cela, on utilise le logiciel CopperCube.

Créer un nouveau projet : Fichier → Nouvelle application 3D. Une fois le projet créer, automatiquement il devrait être créer un cube ainsi qu’une skybox. Si c’est le cas, effacer tout. Dans l’onglet Édition de scène, cliquez sur l’icône en forme de cône → ok.

Faites de même pour créer un plan. Enfin, nous allons ajouter un fond de texture préfabriqué. Dans l’onglet en bas préfabriqués → double clique sur sunset skybox.

Une fois la scène créée, il nous faut la publier. Pour pouvoir charger et montrer cette scène 3D dans CopperLicht, nous devons l'exporter dans un fichier .ccbjs ou .ccbz. CopperCube enregistre les scènes dans son propre format de fichier (.ccb) mais peut exporter également ces fichiers pour les utiliser dans CopperLicht sous format .ccbjs ou .ccbz :

  1. Enregistrer le document CopperCube : Fichier → Sauvegarder

  2. Publier la scène pour WebGL : Outils → Tester comme WebGL (.html)

Un navigateur s'ouvrira et affichera votre scène WebGL à l'intérieur. CopperCube a maintenant créé un fichier .html qui démarre CopperLicht et charge et affiche le fichier .ccbjs ou .ccbz pour vous. Vous trouverez le fichier .ccbjs / .ccbz et les textures dans un sous-répertoire nouvellement créé dans lequel vous avez enregistré votre fichier .ccb auparavant.

Lors de la publication de la scène, CopperCube a créé un fichier .html à l’endroit où nous avions enregistré notre scène sous format .ccb. Si nous examinons ce fichier, on peut voir qu’il importe copperlicht.js, et qu’une fonction startCopperLichtFromFile() est exécuté. Je vous conseille de remplacer le fiichier copperlicht.js créé par celui du SDK précédemment téléchargé. Le fichier copperlicht.js créé par CopperCube n’est pas le plus récent.

 En effet, startCopperLichFromFile() créer le moteur 3d et dit de charger le fichier .ccbz/.ccbjs Le deuxième paramètre de la fonction peut être remplacé par un autre fichier de même type.

Pour manipuler le moteur 3d, on peut stocker cette fonction dans une variable qui sera une instance de la classe CopperLicht. Avec cet objet, il nous est possible de manipuler toute la scène 3d.

Si nécessaire, il est possible de remplacer l’include copperlicht.js par une version plus récente du moteur 3d.

 

 

Mouvement et entrée clavier

 

Ce deuxième exemple consiste à déplacer un objet 3d dans une scène 3d en utilisant le clavier (déplacer un objet), et comment utiliser les animateurs (faire tourner à l’infini un objet).

Comme vu précédemment, il nous faut créer une scène 3d. Dans cette scène, on créé une skybox (préfabriqué), un plan, un cube et une sphère. Vérifiez bien que le nom du cube est bien « cubeMesh1 » et celui de la sphère « sphereMesh1 ». Il est possible de changer les textures des objets, soit en important de nouvelles textures, soit en utilisant les textures par défaut, situé en bas à droite de CopperCube. Cliquez sur votre objet, et double cliquez sur la texture souhaité.

Pour pouvoir charger cette scène avec CopperLicht, il faut exporter notre scène vers un fichier .ccbz ou .ccbjs, comme dans l’exemple du Hello World. Enregistrez le document CopperCube dans un nouveau répertoire et publiez la scène avec WebGL :

Outils → Tester comme WebGL (.html). Si tout s’est bien passé, le fichier .html s’est créer dans le nouveau répertoire.

Nous allons pouvoir maintenant manipuler la partie JavaScript du fichier .html à l’endroit où le moteur CopperLicht est instancié. Remplacez toute la partie javascript par ce code :

En premier lieu, on stocke l’instance de la classe CopperLicht dans une variable « moteur », et on lui dit de charger le fichier « copperlichtdata/tuto2.ccbz ». CopperLicht utilisera la balise « canvas » du document html ayant pour ancre (id) « 3darea », comme précisé dans le premier paramètre de la fonction startCopperLichtFromFile(). Grâce à cette objet « moteur », nous pouvons désormais manipuler la scène 3d.

  Avant de manipuler la scène, il faut attendre que celle-ci soit chargé au complet. Pour être notifier de cet événement, il existe la fonction OnLoadingComplete(). Par exemple, cette fonction peut être utilisé pour masquer un écran de chargement après que le chargement d’un fichier soit terminé.

À l’intérieur de cette fonction, nous allons ciblé la scène, et chercher les éléments que l’on souhaite manipuler. Ces éléments sont plus précisément des nœuds appartenant à la scène. Pour cibler la scène 3d, on utilise la fonction getScene(). Pour cibler les éléments (le cube et la sphère), on utilise la fonction getSceneNodeFromName() qui prendra comme paramètre le nom du nœud.

Dans CopperCube, nous avions appelé le cube « cubeMesh1 » et la sphère « sphereMesh1 ». Le cube sera stocké dans une variable pour que nous puissions changer sa position plus tard avec les touches du clavier.

Pour que l’utilisateur voit le cube se déplacer sur la scène, il faut redessiner la scène à chaque modification de la position du cube. Il faut utiliser la fonction forceRedrawNextFrame() à chaque changement de position. Pour cet exemple, il est préférable d’utiliser une autre fonction, setRedrawMode() qui prendra en paramètre la constance REDRAW_EVERY_FRAME. De cette façon, nous n'avons pas besoin d'appeler forceRedrawNextFrame() à chaque fois que nous faisons un petit changement de la scène 3D.

Pour faire tourner la sphère constamment, il faut utilisé une fonctionnalité de CopperLicht : les animateurs. Les animateurs sont des classes qui manipulent les nœuds de scène de manière simple. Il y a des animateurs qui peuvent déplacer des nœuds de scène le long d'un chemin, animer leurs textures ou les faire pivoter. Dans notre cas, nous allons créer un objet AnimatorRotation auquel on va définir une vitesse de rotation, et nous allons l’ajouter à la sphère.

Il ne nous reste plus qu’à faire monter ou descendre le cube lorsqu’on appuie sur une touche. Pour cela, on créé une fonction qui recevra les différentes entrées du clavier.

En javascript pure, pour récupérer la touche sur laquelle on vient d’appuyer, il existe la fonction keyCode() qui renvoi un code. Par exemple Z renverra 70, et S le code 83. Pour ne pas s’embêter avec un code, il existe une autre fonction String.fromCharCode() qui prend en paramètre le code, et renverra la lettre exacte. Prenons pour référence la touche T qui fera monté le cube, et la touche B qui le fait descendre. Ce qui nous donne :

 Notez que si nous n'avions pas changé le mode ‘redraw every frame’ avec scene.setRedrawMode(), nous aurions dû appeler Scene.forceRedrawNextFrame() après ce changement, afin que CopperLicht sache que nous voulons redessiner la scène parce que nous avons changé manuellement la position du cube.

Si l’on veut bouger la caméra tout en déplaçant le cube, il faut également enregistrer le gestionnaire du clavier du moteur 3D.

Notez que lorsqu'une instance du moteur CopperLicht est créée, elle enregistre le gestionnaire de clavier pour lui-même. En enregistrant notre propre gestionnaire de clavier (onkeydown), nous supprimons l'entrée du clavier du moteur CopperLicht. C'est pourquoi nous transmettons l'entrée clavier à CopperLicht dans la dernière ligne.

 

 

 

 

 

 

Glossaire


WebGL : spécification pour les navigateurs web qui permet de faire de l'affichage 3D sur le Web.

API : interface de programmation qui permet de se « brancher » sur une application pour échanger des données.

JavaScript : langage de script orienté objet principalement utilisé dans les pages HTML.A l'opposé des langages serveurs (qui s'exécutent sur le site), Javascript est exécuté sur l'ordinateur de l'internaute par le navigateur lui-même.

OpenGL ES 2.0 : Open Graphics Library for Embedded System est une spécification du Khronos Group qui définit une API multiplate-forme pour la conception d'applications générant des images 3D dérivée de la spécification OpenGL.

GLSL : OpenGL Shading Language est un langage de programmation de shaders. Ces derniers permettent un contrôle avancé du pipeline de la carte graphique.

Notepad++ : éditeur de code source qui prend en charge plusieurs langages.

SDK : Software Development Kit est un ensemble d’outils d’aide à la programmation proposé aux éditeurs / développeurs d’applications.

drag and drop : dans une interface graphique, une méthode consistant à utiliser une souris, pavé ou écran, pour déplacer d'un endroit à un autre un élément graphique présent sur l'écran d'un smartphone, tablette ou ordinateur.

Références


 

 

 

 

 

 

Auteur


  Article écrit par Marciniak Marius, élève de 3ème année, dans le cadre de l’année scolaire à CampusID.

 

 

 

   

Laisser un commentaire

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