{"id":1229,"date":"2022-03-02T12:48:58","date_gmt":"2022-03-02T11:48:58","guid":{"rendered":"https:\/\/seriousfactory.com\/blog\/?p=1229"},"modified":"2025-08-22T14:24:10","modified_gmt":"2025-08-22T12:24:10","slug":"julian-fremaux-decors-360-vts-editor","status":"publish","type":"post","link":"https:\/\/seriousfactory.com\/blog\/fr\/julian-fremaux-decors-360-vts-editor\/","title":{"rendered":"Julian Fremaux nous parle des D\u00e9cors 360\u00b0 dans VTS Editor"},"content":{"rendered":"

Qu\u2019est-ce qu\u2019un d\u00e9cor 360\u00b0 ?<\/h3>\n

Ce nom fait en fait r\u00e9f\u00e9rence \u00e0 un d\u00e9cor 360 degr\u00e9s qui correspond \u00e0 un tour complet sur soi-m\u00eame. Il s\u2019agit donc d\u2019un d\u00e9cor permettant d\u2019orienter sa vue comme bon nous semble, de tourner sur soi-m\u00eame vers la gauche, la droite, mais aussi vers le ciel ou le sol. Ce d\u00e9cor est compos\u00e9 d\u2019images dites \u00ab Sph\u00e9riques \u00bb. Ces images, souvent en haute r\u00e9solution, ont leurs bords droit et gauche identiques tels que, si on les repliait sur eux-m\u00eames, un peu comme si on les appliquait sur une sph\u00e8re, ils se regrouperaient naturellement. A la diff\u00e9rence d\u2019un panorama, les images sph\u00e9riques int\u00e8grent aussi en hauteur le ciel et le sol, d\u00e9form\u00e9s via la perspective. Ces images repr\u00e9sentent donc un environnement dans son ensemble, sans discontinuit\u00e9s, et sont ensuite effectivement appliqu\u00e9es sur une sph\u00e8re autour de l\u2019utilisateur afin de l\u2019englober dans ce cadre.<\/span><\/p>\n

\n
\n

\"\"<\/p>\n

D\u00e9cor 2D classique<\/em><\/div>\n
<\/div>\n<\/div>\n
\n

\"\"<\/p>\n

D\u00e9cor 360 Sph\u00e9rique<\/em><\/div>\n<\/div>\n<\/div>\n
<\/div>\n

 <\/p>\n

 <\/p>\n

Voici un exemple de ce \u00e0 quoi ressemble ces images pour le d\u00e9cor du Bar de VTS :<\/p>\n

 <\/p>\n

\"\"<\/p>\n

Image Sph\u00e9rique 360<\/em><\/p>\n

 <\/p>\n

\n

\"\"<\/p>\n

Appliqu\u00e9e<\/em><\/div>\n
<\/div>\n<\/div>\n
\n

\"\"<\/p>\n

Vue de la cam\u00e9ra<\/em><\/div>\n<\/div>\n
<\/div>\n

Comme pour les d\u00e9cors plus classiques, ceux-ci sont compos\u00e9s de plusieurs \u00ab plans \u00bb qui permettent de r\u00e9aliser un effet de profondeur. En effet, dans cette image, certains \u00e9l\u00e9ments tels que la table au premier plan doivent masquer les personnages que nous allons inclure dans la sc\u00e8ne.<\/span><\/p>\n

\n

\"\"<\/p>\n

D\u00e9cor 360\u00a0<\/em><\/div>\n
<\/div>\n<\/div>\n
\n

\"\"<\/p>\n

Premier plan associ\u00e9<\/div>\n<\/div>\n
<\/div>\n

 <\/p>\n

Pourquoi et comment utiliser un d\u00e9cor 360 ?<\/h3>\n

Les d\u00e9cors 360 sont donc compos\u00e9s d\u2019une ou plusieurs images en haute d\u00e9finition (4096×2048 pixels majoritairement), ce qui fait d\u2019eux des d\u00e9cors bien plus lourds que les autres. En ce sens, il est recommand\u00e9 de ne pas en abuser. Il faut donc utiliser cette fonctionnalit\u00e9 lorsque celle-ci s\u2019y pr\u00eate. Il existe de nombreux cas d\u2019usages qui utilisent l\u2019orientation du regard, telle que la recherche d\u2019informations dans une salle, ou m\u00eame la navigation dans une pi\u00e8ce avec plusieurs points de vue. L\u2019id\u00e9e g\u00e9n\u00e9rale est de faire en sorte que l\u2019apprenant se sente immerg\u00e9 dans ce d\u00e9cor et consid\u00e8re que ce qu\u2019il voit \u00e0 l\u2019\u00e9cran repr\u00e9sente bien ses yeux.<\/span><\/p>\n

A contrario, il y a \u00e9galement de nombreuses situations qui ne n\u00e9cessitent pas un tel environnement, voire m\u00eame qui pourrait lui \u00eatre n\u00e9faste. D\u00e8s qu\u2019un personnage parle, l\u2019utilisateur devrait \u00eatre orient\u00e9 vers lui, plut\u00f4t que d\u2019avoir un son qui provient d\u2019un endroit qui lui est inconnu, et bien que le regard puisse \u00eatre forc\u00e9, dans de nombreux dialogues, un mouvement de cam\u00e9ra peut s\u2019av\u00e9rer confusant. Un d\u00e9cor 360 propose au moins 4 fois plus d\u2019\u00e9l\u00e9ments \u00e0 regarder dans une sc\u00e8ne, et donc, il faut environ 4 fois plus de temps avant de bien apprivoiser son environnement. N\u2019utiliser ce type de d\u00e9cors que lorsque n\u00e9cessaire est une bonne pratique \u00e0 suivre de mani\u00e8re g\u00e9n\u00e9rale pour captiver ses apprenants. De plus, dans cette configuration l\u2019apprenant saura que s\u2019il a la possibilit\u00e9 de regarder autour de lui, c\u2019est s\u00fbrement pour une bonne raison.<\/span><\/p>\n

Enfin, les d\u00e9cors \u00e9tant plus lourds, le nombre de personnages pr\u00e9sent dans la sc\u00e8ne doit \u00eatre r\u00e9duit au minimum, pour des soucis d’optimisation. Si votre sc\u00e8ne contient trop de personnages, alors, sous certaines configurations, la formation pourra ne pas fonctionner, ou \u00eatre lente \u00e0 charger. Il est conseill\u00e9 de ne pas d\u00e9passer les 5 personnages sur des d\u00e9cors de ce type, surtout si la formation est pr\u00e9vue pour \u00eatre d\u00e9ploy\u00e9e en WebGL ou en SCORM.<\/span><\/p>\n

L\u2019usage des d\u00e9cors 360 dans VTS Editor<\/h3>\n

Les images sph\u00e9riques peuvent \u00eatre utilis\u00e9es dans le configurateur de VTS Editor (\u00e0 partir du Pack IMMERSION) afin de r\u00e9aliser vous-m\u00eame ces environnements pour votre formation digitale.<\/span><\/p>\n

\"\"<\/p>\n

Il existe plusieurs fa\u00e7ons de cr\u00e9er ou d\u2019obtenir des images sph\u00e9riques. Tout d\u2019abord, il existe de tr\u00e8s nombreux sites permettant d\u2019acheter des images qui contiennent ce type de m\u00e9dias, qu\u2019il s\u2019agisse de photographie, ou de rendus d\u2019un environnement 3D. Ensuite, certains appareils photos sont sp\u00e9cialis\u00e9s dans les prises de vue 360 et permettent de ne pas avoir recours \u00e0 de la mod\u00e9lisation 3D. Pour ces d\u00e9cors, nous recommandons des images au format JPG pour le d\u00e9cor, puis au format PNG pour le premier plan, avec une taille de 4096×2048 pixels. Vous retrouverez tous ces conseils ainsi que de nombreux autres sur notre documentation en ligne<\/a>.<\/p>\n

Certains d\u00e9cors, plus complexes, peuvent n\u00e9cessiter plus qu\u2019un seul plan. Dans ce cas, il est possible de demander \u00e0 nos \u00e9quipes de cr\u00e9er un d\u00e9cor pour vous en contactant le service commercial. De m\u00eame, si vous n\u2019arrivez pas \u00e0 trouver un environnement qui corresponde \u00e0 votre besoin, notre \u00e9quipe graphiste pourra le r\u00e9aliser pour vous.<\/p>\n

VTS Editor contient deux blocs qui sont \u00e9troitement li\u00e9s \u00e0 ces d\u00e9cors : Figer 360<\/a> et Forcer 360<\/a>. Le bloc Figer 360 a pour effet d’emp\u00eacher ou de r\u00e9tablir le contr\u00f4le sur l’orientation de la cam\u00e9ra par l’apprenant alors que le bloc Forcer 360 va forcer le regard dans une direction pr\u00e9cise avec un mouvement anim\u00e9. Les deux blocs se combinent efficacement afin de forcer la direction du regard vers le centre de l\u2019attention d\u00e9sir\u00e9 \u00e0 un moment pr\u00e9cis dans votre sc\u00e9nario. A noter que le bloc Forcer 360 peut \u00e9galement influer sur le contr\u00f4le de la cam\u00e9ra par l\u2019apprenant dans ses param\u00e8tres Avanc\u00e9s.<\/p>\n

\"\"<\/p>\n

Pour les d\u00e9tenteurs de Pack IMMERSION et sup\u00e9rieur, plusieurs fonctionnalit\u00e9s suppl\u00e9mentaires arrivent avec les Variables, telles que la fonction set360Speed qui permet de modifier la vitesse de rotation de la cam\u00e9ra par l\u2019apprenant, ou la fonction isLookAt qui permet de v\u00e9rifier si la vue est bien orient\u00e9e dans un angle particulier. Ces fonctions sont d\u2019ailleurs utilis\u00e9es dans le projet d\u2019exemple Le Village<\/a>.<\/p>\n

Diff\u00e9rence avec la VR<\/h3>\n

La R\u00e9alit\u00e9 Virtuelle (ou VR pour Virtual Reality en anglais), disponible \u00e0 partir du pack INFINITY de VTS Editor, fonctionne de mani\u00e8re similaire. Pour pouvoir \u00eatre compatible avec les visionneuses type Cardboard, il faut deux images sph\u00e9riques diff\u00e9renci\u00e9es pour chaque \u0153il. C\u2019est cette diff\u00e9rence entre l\u2019\u0153il droit et l\u2019\u0153il gauche qui va donner cette impression de profondeur. On peut consid\u00e9rer la VR comme deux d\u00e9cors 360, pris \u00e0 quelques centim\u00e8tres d\u2019intervalles. Ces deux images doivent repr\u00e9senter un d\u00e9cor exactement identique pour fonctionner. Si la lumi\u00e8re ou la position de certains \u00e9l\u00e9ments est diff\u00e9rente sur l\u2019une ou l\u2019autre des images, le rendu sera tr\u00e8s perturbant pour l\u2019utilisateur et son cerveau qui n\u2019est pas habitu\u00e9 \u00e0 ce que ces yeux lui envoient des informations contradictoires. Dans ce cas, pour r\u00e9aliser des d\u00e9cors VR, nous recommandons vivement de passer par de la mod\u00e9lisation 3D, afin d\u2019\u00eatre assur\u00e9 qu\u2019aucune diff\u00e9rence m\u00eame mineure n\u2019apparaisse sur les images.<\/span><\/p>\n

VTS Editor permet \u00e9galement de d\u00e9finir des d\u00e9cors VR via son configurateur de d\u00e9cor. L\u2019immersion y est totale pour l\u2019apprenant et la mise en place d\u2019un sc\u00e9nario dans lequel l\u2019apprenant est directement mis \u00e0 contribution est un peu diff\u00e9rente d\u2019un sc\u00e9nario plus classique avec des d\u00e9cors 2D ou 360. Nous reviendrons sur la VR prochainement dans un autre article qui sera consacr\u00e9 enti\u00e8rement \u00e0 ce concept.<\/span><\/p>\n

Conclusion<\/h3>\n

La possibilit\u00e9 d\u2019orienter son regard dans une sc\u00e8ne est une composante importante de l\u2019immersion de l\u2019apprenant dans sa formation digitale. En plus d\u2019apporter un c\u00f4t\u00e9 ludique, un tel d\u00e9cor permet d\u2019apporter de nombreuses informations suppl\u00e9mentaires \u00e0 l\u2019apprenant sans le changer d\u2019environnement. Cet outil puissant est cependant \u00e0 utiliser avec mod\u00e9ration et dans les cas o\u00f9 cela s\u2019y pr\u00eate afin de ne pas devenir trop perturbant pour l\u2019utilisateur.<\/p>\n

Vous pouvez d\u00e9couvrir toutes ces fonctionnalit\u00e9s en t\u00e9l\u00e9chargeant la version d\u2019essai du logiciel VTS Editor :<\/p>\n

 <\/p>\n

\"\"<\/a><\/p>\n

\n

Liens utiles<\/h2>\n