====== RÉALITÉ AUGMENTÉE ====== * **Porteur du projet :** Selma Benramdane, Morgane Guillaume, Chloé Gautier, Marine Laurent, Delphine Kreis, Estelle Joly * **Date :** du mardi 10 novembre au vendredi 11 décembre 2015 * **Contexte :** Médiation graphique d'œuvres artistiques présentées dans le cadre de l'exposition Histoires Parallèles. ---- ====== EVARISTE RICHER - CMYK ====== L’artiste Evariste Richer part du principe que tous les éléments avaient déjà été inventés par la nature avant l’homme et que celui-ci se les réapproprie pour les classifier. Le propos de l’artiste est illustré dans l’œuvre CMYK. Il a utilisé ces pierres semi-précieuses pour représenter le monde de l’imprimerie et sa hiérarchie des couleurs. On a observé une seconde thématique dans l’œuvre : celle de la lenteur des éléments confrontée à l’immédiateté de l’image. à partir de ces deux approches et de la technique associée nous avons pu mettre en place une médiation réalisée en réalité augmentée. à chaque pierre colorée nous avons créé un petit monde faisant référence à sa caractéristique identitaire, symbolique (ex: pierre rose = monde aquatique). Les mondes apparaissent en réalité augmentée grâce à des marqueurs de grande taille disposés au sol, grâce à un programme sur le logiciel processing, la webcam reconnaît les marqueurs et génère la réalité augmentée sur un écran de télévision. Nous avons voulu ré-exploiter la texture des pierres dans nos mondes miniatures. Ceux-ci ont été modélisés sur le logiciel 3D blender. Notre installation a été établie de manière parallèle à l’œuvre pour garder un contact direct avec celle-ci tout en invitant à s’y plonger davantage. ---- ===== Documentation concernant l'artiste ===== * {{:wiki:projets:open-frac-2:evariste_richer_cmyk.docx|}} > son projet CMYK * {{:wiki:projets:open-frac-2:richer_oct2015.pdf|}} > sa démarche artistique {{:wiki:projets:open-frac-2:realite_augmentee_evariste_richer_cmyk.jpg|}} //CMYK//, 2009, 4 pierres semi-précieuses non polies, étagère blanche. **Mots clés :** * Temporalité / Espace / Vision * L'immédiateté de l'image vs la lenteur des éléments. * Un cabinet de curiosité portatif. * Renvoie à l'imprimerie. * Le geste de prélever {{:wiki:projets:open-frac-2:img_3591.jpg?nolink&300|}} {{ :wiki:projets:open-frac-2:img_3592.jpg?nolink&300|}} {{:wiki:projets:open-frac-2:img_3595.jpg?nolink&300 |}} {{ :wiki:projets:open-frac-2:img_3597.jpg?nolink&300|}} ---- ---- ---- ====== DESCRIPTION DU PROJET ====== ===== Première réflexion sur l’œuvre de Richer ===== La Nature est créatrice du monde dans lequel nous vivons. L'Homme n'a fait que ré-exploiter les éléments de la Nature, se les réapproprier, les transformer, tout prenant soin les classifier. La Nature avait déjà tout inventé. ---- ===== Thématiques de départ ===== * RATIONALISATION & TRANSFORMATION DE LA NATURE PAR L'HOMME * LENTEUR DE LA CRÉATION DE LA NATURE DANS LE MONDE RÉEL vs CRÉATION IMMÉDIATE PAR L'HOMME D'UN MONDE NUMÉRIQUE ---- ===== L'intention de notre projet ===== À partir des couleurs de chacune des pierres - Cyan, Magenta, Jaune, Noir - nous allons créer un petit monde tel qu'un petit cabinet de curiosité portatif, pour chacune des quatre pierres. Les mondes apparaissent en réalité augmentée grâce à des marqueurs de grande taille posés au sol. Chacun de ces mondes est unique, il possède des caractéristiques propres à la pierre, créant ainsi un véritable univers vivant pour chacune des pierres. Pour recréer numériquement la texture et la forme des pierres, nous pensons utiliser la technique de la photogrammétrie*, permettant d'obtenir un modèle 3D d'une surface ou d'un volume. Les données obtenues seront ré-exploitées pour concevoir les mondes en 3D sur Blender. //* technique de la photogrammétrie [[http://www.collectif21.fr/tutorial-photogrammetrie-pour-vfx/]]// **__Ce qu'il faut retenir :__ Lenteur de la nature créatrice vs immédiateté de l'image numérique : faisant donc référence aux pierres, créées par la Nature, VS aux mondes numériques, relatifs à chacune des pierre, créés par l'Homme.** **Référence** : [[http://www.festival-gamerz.com/gamerz11/#superusers|De la naissance à la mort de mondes numériques]] **Classification du naturel par l'homme > en rapport aux objets et aux textures qui apparaissent dans chaque monde, et ceux en fonction de chaque couleur.** {{ :wiki:projets:open-frac-2:principe.jpg?nolink |}} ---- ===== Les caractéristiques intrinsèques des 4 pierres ===== * **Cobalte Calcite** - fonds marins - grottes - régions chaudes - composante des coquillages et des coraux - circulation des énergies (pierre rose). * **Souffre** - pierre du soleil - équilibre - énergie de vie - volcan - Pérou (pierre jaune). * **Tourmaline** - absorption des énergies négatives - terre - bouclier contre les mauvaises ondes, et les rejette dans la terre - rempart - Afrique / Madagascar (pierre noire). * **Hémimorphite** - pierre du calme - positivité - anti-colère - facilite le dialogue - tolérance - Grèce / Algérie / Mexique / Italie (pierre bleue). ---- ===== Présentation du dispositif de la réalité augmentée - test et fonctionnement ===== {{:wiki:projets:open-frac-2:marqueur_cmjn.jpg?direct|}} {{:wiki:projets:open-frac-2:sans-titre-1.jpg|}} //Marqueurs reconnus par la webcam, sur lesquels une modélisation 3D y apparaît à partir des axes X, Y, Z.// ---- ===== Emplacement de l'installation ===== **Installation :** positionnement de l'augmentation face à l'installation tout en gardant une distance et donc un passage pour les gens. Cet emplacement permet de voir l’œuvre tout en regardant l'écran et en ayant une plus grande place pour la manipulation des marqueurs. **Marqueurs :** devant le caisson, sous la caméra. Possibilité de les déplacer, de les toucher. **Écran :** fabrication d'un caisson en bois et peint en blanc. Positionnement de l'écran plat dessus/dedans légèrement en biais (environ 75 degrés) pour vraiment immerger les gens dans l’œuvre et son augmentation. Le caisson permettrait de cacher l'ordinateur en dessous. Conserver la sobriété de l'installation. **Caméra HD :** placée au-dessus du caisson à environ 2m50 (?). Elle sera accrochée sur le poteau qui est sur la droite du caisson par le biais d'un manche. **Aperçu général :** Les éléments servant l'augmentation (pierres, écran, caméra,marqueurs) auront leur propre couleur, tandis que les support, dans un souci de neutralité/d'invisibilité, seront blancs. {{ :wiki:projets:open-frac-2:plan.jpeg?nolink |}} {{:wiki:projets:open-frac-2:openfrac_2_cmjn.1jpg.jpg?direct&300|}} {{ :wiki:projets:open-frac-2:openfrac_2_cmjn.2.jpg?nolink&300|}} {{ :wiki:projets:open-frac-2:fullsizerender.jpg?300 |}} {{ :wiki:projets:open-frac-2:doc00007420151124155118.jpg |}} **Plan de la réalisation d'un meuble, qui soutiendra l'écran, tel un pupitre** {{ :wiki:projets:open-frac-2:boite_1.jpeg?nolink |}} //Réalisation du pupitre par l'équipe du FRAC PACA.// ---- ===== Matériel à prévoir ===== **Fourni par le Frac :** * Écran plat Samsung 40 pouces * Caisson en bois, peint en blanc, pour l'écran * Multi prise **Fourni par Résonance Numérique :** * Ordinateur **Fourni par le Lycée :** * Caméra HD * Impression (traceur) * Rallonges USB caméra (4m) **Fournitures à acheter par le Frac (demander facture / estimer les coûts) :** * Carton plume * Colle en bombe ---- ===== Cartel de l'installation ===== **Cartel présentant l'installation lors de l'événement Open Frac :** Intitulée RGB, cette installation augmente l’œuvre CMYK d'Evariste Richer. On peut parler d'une classification du naturel par l'homme car les couleurs des pierres et leur ordre de placement rappellent les couleurs de l'imprimerie (Cyan, Magenta, Jaune, Noir) L'autre thématique évoquée dans ce projet est la dualité entre la lenteur de la formation des éléments de la Nature et la rapidité de la production par l'Homme aujourd'hui. Chaque pierre nous transporte dans son univers à travers le dispositif de la réalité augmentée. Ainsi se crée le contraste entre le réel et le virtuel. ---- ====== ORGANISATION ====== ===== Planning ===== Vendredi 27/11/15 - placement de la caméra et décision par rapport au caisson. Mardi 01/12/15 - Frac : scann des pierres grâce au procédé de la photogrammétrie + séparation de l'écran & début dessins 3D des petits mondes. ---- ===== Échanges et commentaires ===== ACC: la page réalisée par les médiatrices du FRAC sur cette œuvre :{{:wiki:projets:open-frac-2:evariste_richer_cmyk.docx|}} AA+SP: Pouvez-vous développer un peu plus votre propos. a distance on ne comprend pas ou vous souhaitez en venir. Bonne séance de travail ---- ====== OPEN SOURCE : tutoriels, fichiers, codes... ====== Pour concevoir la réalité augmentée, nous avons utilisé deux logiciels : BLENDER pour faire de la modélisation 3D et PROCESSING pour faire exécuter la machine grâce au code. **Dossier à télécharger de l'ensemble du projet** Ce dossier comporte : * le code Processing utilisé pour l'installation * les 4 pierres et leurs textures * les 4 marqueurs {{:wiki:projets:open-frac-2:cmyk_openfrac.zip|}} ---- ===== Blender ===== ==== Tutoriel pour appliquer une texture sur un objet ==== __Étape 1/2 : le mapping__ {{:wiki:projets:open-frac-2:12343513_10207979833194129_917650804_o.jpg?700|}} 0: Ouvrir le fichier par défaut de Blender. Je vous conseille de paramétrer votre fenêtre de la même manière que la mienne. {{:wiki:projets:open-frac-2:2.jpg?700|}} 1: //UV/Image Editor// 2: vérifier que tout l'objet soit sélectionné 3: en //Material// (remarque: vous pouvez également faire le 3 avant le 2, pas de problème) 4: //Mesh// > //UV Unwrap// > //Profect from view (bounds)// REMARQUE : dans le l'onglet //UV Unwrap//, plusieurs possibilités vous sont proposé pour plaquer votre texture sur l'objet. Jouez avec les différentes propositions, vous trouverez peut-être un paramètre plus adéquat à ce que vous cherchez à obtenir. La proposition //Profect from View (bonds)// est un paramètre qui permet d'appliquer votre texture en fonction de l'orientation de la caméra. Prenons un exemple : nous voulons offrir une belle bouteille de vin à une personne, nous voulons également l'emballer avec du beau papier. Pour cela, nous allons plaquer le papier mais en commençant par la surface plane du bouchon. Nous partons donc du haut de la bouteille, pour ensuite envelopper le reste. {{:wiki:projets:open-frac-2:3.jpg?700|}} 5: //Open// > recherchez la texture dans votre fichier, format .jpeg ou .png __Étape 2/2__ {{ :wiki:projets:open-frac-2:67.jpg?700}} 6: //Proprieties// 7: il s'agit d'une étape un peu bourrue, dans le sens où il faut vraiment suivre pas à pas cette étape, sinon cela risque de ne pas marcher une fois sur Processing. Vous êtes donc dans les paramètres de //Texture// {{ :wiki:projets:open-frac-2:8910_.jpg?700 |}} 8: Vous cliquez sur //New//, puis //Open// et vous recherchez votre même fichier texture .jpg ou .png. 9: paramètre //UV// 10: cliquez sur //Both//, ce paramètre permet de voir votre texture et la manière dont elle reflète la lumière (si elle est mate ou brillante, si une couleur se reflète sur elle, etc.) {{ :wiki:projets:open-frac-2:1112.jpg?700 |}} 11: vérifiez que nous avons le paramètre //Image or Movie// 12: prenez bien soin de nommer ensuite votre texture, conseil précieux pour ne pas se mêler les pinceaux et se retrouver avec une multitude de textures identiques téléchargées, cela rendra votre fichier bien trop lourd et Processing pourrait avoir du mal par la suite. {{ :wiki:projets:open-frac-2:131415.jpg?700 |}} 13: dirigez-vous dans //Material// 14: renommez votre texture 15: et n'oubliez pas d'assigner votre texture. Normalement, tout est bon! Après cela, il faut effectuer des tests avec Processing, voir comment la modélisation 3D se comporte. Si les tests sur Processing sont concluants, vous pouvez commencer à texturer l'ensemble de votre monde,tout en suivant précisément ce tutoriel. ==== L’exportation :==== {{ :wiki:projets:open-frac-2:export.jpg?700 |}} en format .obj {{ :wiki:projets:open-frac-2:export2_.jpg?700 |}} //Fontward et Up//: ce sont des paramètres qui déterminent l'orientation de votre objet une fois qu'il apparait sur votre marqueur dans Processing. En fonction de votre rendu, choisissez les axes X,Y,Z qui vous conviendront. //Triangulate//: très important, à ne pas oublier, car sans ce paramètre, votre réalité augmentée sur Processing ne fonctionnera pas. Ce paramètre permet de triangler l'ensemble de vos faces, il peut également baisser le poids de votre ficher. //Copy//: cela permet de mettre en copie/créer un lien des textures utilisées Et enfin, exportez en haut à droite. ---- ===== Processing ===== ** Code utilisé pour l'installation ** /** NyARToolkit for proce55ing/1.0.0 (c)2008-2011 nyatla airmail(at)ebony.plala.or.jp This sample proglam handles 2 ARToolKit marker. The markers are "patt.hiro" and "patt.kanji" 2 differents 3D .obj models textured */ // 4 marqueurs (CMYK) + 4 .obj // appeler les Librairies import processing.video.*; //cette librairie permet de jouer avec la vidéo de la webcam import jp.nyatla.nyar4psg.*; // cette librairie permet la réalité augmentée et est basée sur ARToolKit import saito.objloader.*; // cette librairie permet d'importer la texture // Variables camera + nyar Capture cam; MultiMarker nya; // déclaration objet 3D OBJModel cyan; OBJModel magenta; OBJModel jaune; OBJModel noir; // Gestion du rendu, texture, maillage // variables de type booléenne true/false boolean bTexture = true; boolean bStroke = false; boolean bMaterial = true; // int Width Height int arWidth = 640; int arHeight = 480; //appel du début de la programmation, initiation des paramètres void setup() { //taille de la fenêtre de l'écran ordinateur , l'OPENGL appelle la 3D size(1280,720,OPENGL); // mode de couleur colorMode(RGB, 100); //pas d'affichage du curseur noCursor(); //afficher, pour vérification de la fonction Multimarker println(MultiMarker.VERSION); //création (appel) de la webcam cam=new Capture(this,1280,720);//taille de la caméra //création (appel) de la fonction Multimarker (reconnaissance des marqueurs) la taille de l'apparition des marqueurs à l'écran nya=new MultiMarker(this,width,height,"camera_para.dat",NyAR4PsgConfig.CONFIG_PSG); //appel de chaques marqueurs nya.addARMarker("data/patt.cyan",80);//id=0 importation du marqueur1 nya.addARMarker("data/patt.magenta",80);//id=1 importation du marqueur 2 nya.addARMarker("data/patt.yellow",80);//id=2 importation du marqueur 3 nya.addARMarker("data/patt.black",80);//id=3 importation du marqueur 4 // importation du modèle cyan et association au marqueur correspondant (Delphine) cyan = new OBJModel(this, "data/cyan.obj", "absolute", TRIANGLES); cyan.enableDebug(); //enableDebug a trouver des precision sur le site de Processing // taille du modèle cyan.scale(8); // importation du modèle magenta (Marine et Estelle) magenta = new OBJModel(this, "data/magenta.obj", "absolute", TRIANGLES); magenta.enableDebug(); // taille du modèle magenta.scale(20); // importation du modèle jaune (Chloé et Morgane) jaune = new OBJModel(this, "data/jaune.obj", "absolute", TRIANGLES); jaune.enableDebug(); // taille du modèle jaune.scale(18); // importation du modèle noir (Selma) noir = new OBJModel(this, "data/noir.obj", "absolute", TRIANGLES); magenta.enableDebug(); // taille du modèle noir.scale(20); // démarrage caméra cam.start(); } // rafraichissement en boucle void draw() { //Boucle vérification de l'activation de la caméra if (cam.available() !=true) { return; } //ajout de lumière directionalLight(255,255,255,0,-1,-1); // création du lien entre la webcam et la librairie nya cam.read(); nya.detect(cam); background(0); //détermination de ce qui apparaitra à 'écran image(cam, 0, 0, width,height); /////// A partir d'ici, le programme manque de commentaires précis sur les actions effectuées... nya.drawBackground(cam); PImage cSmall = cam.get(); cSmall.resize(arWidth, arHeight); //boucle for for(int i=0;i<1;i++){ if((!nya.isExistMarker(0))){ continue; } nya.beginTransform(i); //pas de contour noStroke(); // translate l'île cyan de 5 cm vers le haut dans l'apparition écran translate(0,0,5); cyan.draw(); nya.endTransform(); } //condition boucle for(int i=1;i<2;i++){ if((!nya.isExistMarker(1))){ continue; } nya.beginTransform(i); //pas de contour noStroke(); // translate l'île magenta de 10 cm vers le haut dans l'apparition écran translate(0,0,10); // rotation rotateX(-PI/2); magenta.draw(); nya.endTransform(); } for(int i=2;i<3;i++){ if((!nya.isExistMarker(2))){ continue; } nya.beginTransform(i); //pas de contour noStroke(); // translate l'île jaune de 10 cm vers le haut dans l'apparition écran translate(0,0,10); jaune.draw(); nya.endTransform(); } for(int i=3;i<4;i++){ if((!nya.isExistMarker(3))){ continue; } nya.beginTransform(i); //pas de contour noStroke(); // translate l'île noir de 20 cm vers le haut dans l'apparition écran translate(0,0,20); noir.draw(); nya.endTransform(); } } ---- =====Réalisation des marqueurs===== Précaution à savoir : afin que les marqueurs soient reconnus par Processing, il faut impérativement réaliser des marqueurs de couleur noir et blanc, sans dégradé, avec des formes biens précises, bien délimitées. Par ailleurs, vous allez avoir besoin d'une lumière ni trop puissante, ni trop basse, afin que votre webcam puisse correctement percevoir votre marqueur. Enfin, attention aux reflets de vos marqueurs sous la lumière, cela peut déranger la lecture de Processing. Les reflets sont dus à un papier trop brillant ou à une encre qui reflète la lumière et donne ainsi cette brillance. Après avoir créer graphiquement nos marqueurs sur Illustrator (ou autre logiciel), nous les avons imprimé sur des feuilles de format A3 afin d'obtenir des marqueurs d'une dimension de 20 x 20 cm. Nous les avons coupé puis contre-collé sur du carton plume (carton léger blanc) avec de la colle à bois, tout en marouflant la surface pour éviter que la feuille collée gondole. Par ailleurs, nous avons ajouter une seconde couche de carton plume en dessous de cette dernière afin de prévoir une surface de prise en main du marqueur par les visiteurs. Cette couche, collée donc en dessous de la première couche, est plus large de 5 cm de chaque côté. Afin de faire reconnaître les marqueurs par processing, nous vous proposons de télécharger ce logiciel [[http://www.artoolkit.org/download-artoolkit-sdk| ARToolKit Marker Generator]] ou via par cette adresse : [[http://flash.tarotaro.org/blog/2008/12/14/artoolkit-marker-generator-online-released/]] Cette opération permet de créer vos fichiers au format .pat qui seront invoqués dans votre code Processing. ---- ====== PROJET FINAL ====== {{vimeo>148810914?large}} **Lors de l'événement Open Frac :** {{ :wiki:projets:open-frac-2:p1080500.jpg?nolink |}} {{ :wiki:projets:open-frac-2:p1080510.jpg?nolink |}} {{ :wiki:projets:open-frac-2:p1080515.jpg?nolink |}} {{ :wiki:projets:open-frac-2:p1080547.jpg?nolink |}} === Réalisation finale 3D des petits mondes === {{ :wiki:projets:open-frac-2:capture_d_e_cran_2016-01-23_a_12.10.41.png?nolink |}} monde de la pierre //Hémimorphite// réalisé par Delphine Kreis {{ :wiki:projets:open-frac-2:capture_d_e_cran_2016-01-23_a_12.14.42.png?nolink |}} monde de la pierre //Cobalte Calcite// réalisé par Marine Laurent et Estelle Joly {{ :wiki:projets:open-frac-2:capture_d_e_cran_2016-01-23_a_12.15.33.png?nolink |}} monde de la pierre //Souffre// réalisé par Morgane Guillaume et Chloé Gautier {{ :wiki:projets:open-frac-2:capture_d_e_cran_2016-01-23_a_12.16.25.png?nolink |}} monde de la pierre //Tourmaline// réalisé par Selma Benramdane ---- ====== NOTRE CONTRIBUTION ====== Un récapitulatif de notre travail pour chacune de nous. **Marine Laurent :** * documentation du wiki pendant le projet et croquis d'intention * monde magenta avec Estelle * retravail des matières de tous les mondes * tests des mondes matièrés sur Processing * photographie des textures des pierres **Delphine Kreis :** * mise à disposition des librairies avec Morgane et Thomas * réalisation du monde cyan * recherche des problèmes liés à l'application des textures et à la visualisation sur Processing * tests sur Processing * réalisation des marqueurs avec Estelle, impression et découpe * documentation et modification du wiki principalement après le projet **Morgane Guillaume :** * mise à disposition des librairies * test des ordis (supports de réalité augmentée) * décryptage du code avec Estelle * création du monde jaune (objets 3D sur l'ile : totem + arbres) avec Chloé * prise de photos pour le monde jaune * peinture du pupitre en blanc ** Selma Benramdane :** * Recherches documentaires sur le travail/la vision d'Evariste Richer * Recherches sur le procédé de la photogrammétrie * Prises de vue en photogrammétrie (avec Chloé) * Réalisation du monde noir (Tourmaline) * Tests in situ ** Estelle Joly :** * Monde magenta avec Marine * Réalisation des marqueurs avec Delphine, impression et découpe * Peinture du pupitre en blanc * Prises de vues photos et vidéos lors de l'exposition pour le monter afin de restituer de le projet * Améliorer les commentaires du code Processing sur le wiki ** Chloé Gautier :** * Croquis d'intentions, & documentation du projet sur le wiki. * Réalisation du monde jaune sur blender, le petit monde dans son ensemble, avec Morgane, notamment pour les autres objets 3D (arbres, totem). * Test de prise de vues des pierres en photogrammétrie, avec l'application 123D Catch (avec Selma). * Photographies, prise de vues des textures des pierres. * Quelques prises de vues in situ, lors de l'expo. ---- ====== CONTACT ====== **Anne-Catherine Céard - enseignant DSAA d'Art Graphique** * 06 83 77 85 19 * ac.ceard@gmail.com **Thomas Ricordeau - enseignant DSAA de Design Graphique** * 06 09 04 88 19 * thomas.ricordeau@gmail.com **Reso-Nance numérique** * contact@reso-nance.org **Annabelle Arnaud - responsable projets milieu scolaire et formation** * 04 91 90 28 72 * annabelle.arnaud@fracpaca.org **Stéphanie Putaggio - projets milieu scolaire** * 04 91 90 28 72 * stephanie.putaggio@fracpaca.org ** Morgane Guillaume- Dsaa2** *mmorgane.guillaume@gmail.com **Estelle Joly - Dsaa1** *06 78 45 41 43 * estellejoly5@gmail.com **Marine Laurent - Dsaa2** *06 75 69 68 09 *mrnlaurent@gmail.com **Delphine Kreis - Dsaa1** *06 68 67 09 22 *delphine-kreis@hotmail.fr