{"id":721,"date":"2018-06-21T15:15:41","date_gmt":"2018-06-21T14:15:41","guid":{"rendered":"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/?p=721"},"modified":"2018-06-21T16:24:19","modified_gmt":"2018-06-21T15:24:19","slug":"projet-visite-en-realite-virtuelle-de-listia","status":"publish","type":"post","link":"https:\/\/blog.univ-angers.fr\/polytech_2A\/2018\/06\/21\/projet-visite-en-realite-virtuelle-de-listia\/","title":{"rendered":"Projet ISTIA-VR"},"content":{"rendered":"<ul>\n<strong>Bonjour \u00e0 tous !<\/strong><\/p>\n<p>Dans le cadre des projets de conception de deuxi\u00e8me ann\u00e9e du cycle pr\u00e9paratoire de l&#8217;ISTIA, et int\u00e9ress\u00e9 par la r\u00e9alit\u00e9 virtuelle, nous avons d\u00e9cid\u00e9 de nous lancer dans ce projet !<\/p>\n<div id=\"attachment_723\" style=\"width: 310px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2018\/06\/20180621_1433231.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-723\" src=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2018\/06\/20180621_1433231-300x168.jpg\" alt=\"Casque de r\u00e9alit\u00e9 virtuelle\" width=\"300\" height=\"168\" class=\"size-medium wp-image-723\" srcset=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2018\/06\/20180621_1433231-300x168.jpg 300w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2018\/06\/20180621_1433231-1024x576.jpg 1024w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2018\/06\/20180621_1433231-500x281.jpg 500w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-723\" class=\"wp-caption-text\">Casque de r\u00e9alit\u00e9 virtuelle<\/p><\/div>\n<li><strong>Objectif du projet<\/strong><\/li>\n<p><\/p>\n<p>Le principe de cette visite virtuelle \u00e9tait initialement de pouvoir visiter l&#8217;ISTIA et de montrer les diff\u00e9rents effets des d\u00e9gradations du batiment \u00e0 court, moyen et long terme par de petites animations du d\u00e9cor. Ce projet avait pour but d&#8217;\u00eatre utilis\u00e9 dans les cours de MIS de monsieur Bigaud.<\/p>\n<li><strong>La maquette, cr\u00e9\u00e9e avec Blender<\/strong><\/li>\n<p><\/p>\n<p>Nous avons commenc\u00e9 par reproduire le rez-de-chauss\u00e9e de l&#8217;ISTIA en s&#8217;aidant des plans de l&#8217;\u00e9cole, r\u00e9cup\u00e9r\u00e9s aupr\u00e8s de l&#8217;accueil. <\/p>\n<div id=\"attachment_729\" style=\"width: 310px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2018\/06\/PlanRDCISTIA.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-729\" src=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2018\/06\/PlanRDCISTIA-300x130.png\" alt=\"Plan rez-de-chauss\u00e9e ISTIA\" width=\"300\" height=\"130\" class=\"size-medium wp-image-729\" srcset=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2018\/06\/PlanRDCISTIA-300x130.png 300w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2018\/06\/PlanRDCISTIA-1024x444.png 1024w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2018\/06\/PlanRDCISTIA-500x216.png 500w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2018\/06\/PlanRDCISTIA.png 1363w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-729\" class=\"wp-caption-text\">Plan rez-de-chauss\u00e9e ISTIA<\/p><\/div>\n<p>Quelques mesures de hauteurs de plafonds, de fen\u00eatres, de portes \u00e0 l&#8217;aide d&#8217;un instrument de mesure laser nous ont permis d&#8217;obtenir une maquette la plus r\u00e9aliste possible. <\/p>\n<div id=\"attachment_739\" style=\"width: 235px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2018\/06\/AppareilDeMesureLaser.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-739\" src=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2018\/06\/AppareilDeMesureLaser-225x300.jpg\" alt=\"Appareil de mesure laser\" width=\"225\" height=\"300\" class=\"size-medium wp-image-739\" srcset=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2018\/06\/AppareilDeMesureLaser-225x300.jpg 225w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2018\/06\/AppareilDeMesureLaser.jpg 720w\" sizes=\"auto, (max-width: 225px) 100vw, 225px\" \/><\/a><p id=\"caption-attachment-739\" class=\"wp-caption-text\">Appareil de mesure laser<\/p><\/div>\n<p>Nous n&#8217;avons pas eu le temps de faire les autres \u00e9tages de l&#8217;ISTIA, cela nous aurait demand\u00e9 \u00e9norm\u00e9ment plus de temps ! Voici le gabarit final de notre maquette.<\/p>\n<div id=\"attachment_730\" style=\"width: 1344px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2018\/06\/maquetteRDCISTIA1.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-730\" src=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2018\/06\/maquetteRDCISTIA1.png\" alt=\"maquette rez-de-chauss\u00e9e ISTIA\" width=\"1334\" height=\"774\" class=\"size-full wp-image-730\" srcset=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2018\/06\/maquetteRDCISTIA1.png 1334w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2018\/06\/maquetteRDCISTIA1-300x174.png 300w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2018\/06\/maquetteRDCISTIA1-1024x594.png 1024w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2018\/06\/maquetteRDCISTIA1-500x290.png 500w\" sizes=\"auto, (max-width: 1334px) 100vw, 1334px\" \/><\/a><p id=\"caption-attachment-730\" class=\"wp-caption-text\">maquette rez-de-chauss\u00e9e ISTIA<\/p><\/div>\n<p>Pour la r\u00e9alisation de la maquette nous avons proc\u00e9d\u00e9 selon la m\u00e9thode suivante. <\/p>\n<p><span style=\"text-decoration: underline\"><br \/>\nCr\u00e9ation d&#8217;un cube et extrusion<br \/>\n<\/span><\/p>\n<div id=\"attachment_740\" style=\"width: 1010px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2018\/06\/extrudeditmod.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-740\" src=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2018\/06\/extrudeditmod.png\" alt=\"extrusion d&#039;un cube \" width=\"1000\" height=\"1000\" class=\"size-full wp-image-740\" \/><\/a><p id=\"caption-attachment-740\" class=\"wp-caption-text\">extrusion d&#8217;un cube<\/p><\/div>\n<p>Pour illustrer notre d\u00e9marche voici une partie de la conception du rez-de-chauss\u00e9e sous forme de vid\u00e9o timelapse<\/p>\n<p><iframe loading=\"lazy\" title=\"Projet sans titre\" width=\"584\" height=\"329\" src=\"https:\/\/www.youtube.com\/embed\/pnP7juXFDiw?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><br \/>\nTitre de la musique (libre de droit) : <FONT color=\"#ff0000\">Leap of faith FREE ROYALTY MUSIC FREE ORCHESTRAL MUSIC<\/FONT><BR><\/p>\n<p>Voici maintenant le rendu final avec quelques textures ajout\u00e9es<br \/>\n<a href=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2018\/06\/untitled1.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2018\/06\/untitled1-1024x576.png\" alt=\"Aper\u00e7u d&#039;un rendu de l&#039;entr\u00e9e de l&#039;\u00e9cole\" width=\"584\" height=\"328\" class=\"size-large wp-image-762\" srcset=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2018\/06\/untitled1-1024x576.png 1024w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2018\/06\/untitled1-300x168.png 300w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2018\/06\/untitled1-500x281.png 500w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2018\/06\/untitled1.png 1920w\" sizes=\"auto, (max-width: 584px) 100vw, 584px\" \/><\/p>\n<div id=\"attachment_761\" style=\"width: 594px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2018\/06\/untitled.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-761\" src=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2018\/06\/untitled-1024x576.png\" alt=\"Aper\u00e7u d&#039;un rendu de l&#039;entr\u00e9e de l&#039;\u00e9cole\" width=\"584\" height=\"328\" class=\"size-large wp-image-761\" srcset=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2018\/06\/untitled-1024x576.png 1024w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2018\/06\/untitled-300x168.png 300w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2018\/06\/untitled-500x281.png 500w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2018\/06\/untitled.png 1280w\" sizes=\"auto, (max-width: 584px) 100vw, 584px\" \/><\/a><p id=\"caption-attachment-761\" class=\"wp-caption-text\">Aper\u00e7us d&#8217;un rendu de l&#8217;entr\u00e9e de l&#8217;\u00e9cole<\/p><\/div>\n<li><strong>Le personnage, cr\u00e9\u00e9 avec Unity3D<\/strong><\/li>\n<p><\/p>\n<p>Apr\u00e8s avoir import\u00e9 un personnage transparent (pour la vue en premi\u00e8re personne dans le casque) nous avons commenc\u00e9 \u00e0 travailler sur sa fa\u00e7on de se d\u00e9placer dans l&#8217;espace, c&#8217;est-\u00e0-dire en fonction de l&#8217;orientation de la personne dans l&#8217;espace.<br \/>\nNous avons commenc\u00e9 \u00e0 concevoir un script en C# (langage li\u00e9 \u00e0 Unity3D) dans l&#8217;IDE Visual Studio 2017.<\/p>\n<div id=\"attachment_770\" style=\"width: 310px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2018\/06\/perso.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-770\" src=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2018\/06\/perso-300x163.png\" alt=\"Personnage transparent, avec une cam\u00e9ra li\u00e9e \u00e0 la boite de collision\" width=\"300\" height=\"163\" class=\"size-medium wp-image-770\" srcset=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2018\/06\/perso-300x163.png 300w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2018\/06\/perso-500x271.png 500w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2018\/06\/perso.png 642w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-770\" class=\"wp-caption-text\">Personnage transparent, avec une cam\u00e9ra li\u00e9e \u00e0 la boite de collision<\/p><\/div>\n<p>Pour ce faire, nous avons du manipuler le gyroscope du t\u00e9l\u00e9phone, renvoyant un quaternion (vecteur de dimension 4 permettant de rep\u00e9rer les rotations dans l&#8217;espace). <\/p>\n<div id=\"attachment_783\" style=\"width: 310px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2018\/06\/anglesEuler.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-783\" src=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2018\/06\/anglesEuler-300x228.png\" alt=\"Angles d&#039;Euler\" width=\"300\" height=\"228\" class=\"size-medium wp-image-783\" srcset=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2018\/06\/anglesEuler-300x228.png 300w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2018\/06\/anglesEuler-1024x779.png 1024w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2018\/06\/anglesEuler-393x300.png 393w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2018\/06\/anglesEuler.png 1187w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-783\" class=\"wp-caption-text\">Angles d&#8217;Euler<\/p><\/div>\n<p>Gr\u00e2ce \u00e0 des calculs d&#8217;angles d&#8217;Euler entre les diff\u00e9rents axes de rep\u00e8re fixe en 4 dimensions et les axes d&#8217;orientation du t\u00e9l\u00e9phone, on peut d\u00e9caler le rep\u00e8re li\u00e9 au personnage et le faire se d\u00e9placer dans la direction voulue.<\/p>\n<p>La d\u00e9tection du toucher de l&#8217;\u00e9cran se fait par ces deux petites lignes de code dans la boucle &#8220;Update&#8221; qui se r\u00e9p\u00e8te \u00e0 chaque nouvelle image g\u00e9n\u00e9r\u00e9e lorsque le programme est lanc\u00e9.<\/p>\n<p><a href=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2018\/06\/toucherEcran.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2018\/06\/toucherEcran.png\" alt=\"D\u00e9tection toucher \u00e9cran\" width=\"392\" height=\"64\" class=\"aligncenter size-full wp-image-788\" srcset=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2018\/06\/toucherEcran.png 392w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2018\/06\/toucherEcran-300x48.png 300w\" sizes=\"auto, (max-width: 392px) 100vw, 392px\" \/><\/a><\/p>\n<p>Il ne reste plus qu&#8217;\u00e0 ajouter la translation selon l&#8217;axe X du personnage et nous pouvons nous d\u00e9placer en face d&#8217;o\u00f9 l&#8217;on regarde en vrai !<\/p>\n<p><span style=\"text-decoration: underline\">Exportation sur le t\u00e9l\u00e9phone<\/span><\/p>\n<p><\/p>\n<p>Pour finir, nous avons du installer quelques kits (SDK et JDK). Apr\u00e8s quelques changements de param\u00e8tres dans Unity3D, nous avons pu obtenir une vue adapt\u00e9 au casque de r\u00e9alit\u00e9 virtuelle.<br \/>\nCes kits nous ont aussi permis de g\u00e9rer l&#8217;exportation de tout notre projet sous forme de fichier .apk (fichier d&#8217;installation sous Andro\u00efd) pour ainsi tester et visiter l&#8217;ISTIA directement sur le t\u00e9l\u00e9phone. Voici le r\u00e9sultat final !<\/p>\n<p><iframe loading=\"lazy\" title=\"Projet sans titre\" width=\"584\" height=\"329\" src=\"https:\/\/www.youtube.com\/embed\/dONya1smxx8?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<li><strong>Remerciements<\/strong><\/li>\n<p>\nMerci \u00e0 David BIGAUD et Thierry CAPELLE, nos professeurs r\u00e9f\u00e9rents pour ce projet.<br \/>\nMerci \u00e0 Paul RICHARD pour ces conseils sur Unity3D.<\/p>\n<p><em>Maxime ALLAIN | Maxime PETITJEAN | Projet EI2 (Ann\u00e9e 2017-2018)<\/em><\/p>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Bonjour \u00e0 tous ! Dans le cadre des projets de conception de deuxi\u00e8me ann\u00e9e du cycle pr\u00e9paratoire de l&#8217;ISTIA, et int\u00e9ress\u00e9 par la r\u00e9alit\u00e9 virtuelle, nous avons d\u00e9cid\u00e9 de nous lancer dans ce projet ! Objectif du projet Le principe &hellip; <a href=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/2018\/06\/21\/projet-visite-en-realite-virtuelle-de-listia\/\">Continuer la lecture <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":46310,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[147],"tags":[18,19,20,111,16,170],"class_list":["post-721","post","type-post","status-publish","format-standard","hentry","category-147","tag-blender","tag-c","tag-istia","tag-realite-virtuelle","tag-unity3d","tag-visual-studio-2017"],"_links":{"self":[{"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/posts\/721","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/users\/46310"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/comments?post=721"}],"version-history":[{"count":1,"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/posts\/721\/revisions"}],"predecessor-version":[{"id":760,"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/posts\/721\/revisions\/760"}],"wp:attachment":[{"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/media?parent=721"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/categories?post=721"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/tags?post=721"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}