Boite à outils pour réaliser des hyperpaysages

I deux étapes et deux familles d'outils.

Remarque liminaire : On n'abordera dans ces lignes que la création d'hyperpaysages avec des outils gratuits ou libres ; il est donc fait l'impasse sur les scènes QTVR ( Quick Time Virtual Reality) ou flash.

Placer un hyperpaysage en ligne suppose d'abord la création d'une photographie panoramique, puis le paramétrage d'une applet java qui en permettra la visualisation.

1- la réalisation d'une photographie panoramique.

Pratiquement tous les appareils photo numériques sont livrés avec un logiciel permettant la réalisation de panoramas. Cette fonction n'est souvent utilisables que lorsque les photographies ont été prises dans un mode dédié ( le mode panorama justement).

Il existe pourtant d'autres logiciels non liés à une marque d'appareil photo , utilisables avec toute image numérique quelque soit sa provenance ( scan de tirage papier , caméra vidéo , APN ...)

- Le plus connu de ces outils est problement Panorama Factory http://www.panoramafactory.com/ qui accompagne l'applet de visualisation pmvr et rend facile la création de visites virtuelles. Une version de démonstration est téléchargeable ( mais elle tatoue les images pour les rendre inutilisables) , mais ni le logiciel ni l'applet n'existent en version utilisable gratuitement ou librement même pour les usages éducatifs.

- L'outil gratuit le plus simple à utiliser est certainement autostich http://www.cs.ubc.ca/~mbrown/autostitch/autostitch.html

La version de démonstration est téléchargeable gratuitement. Elle assemble automatiquement un nombre parfois impressionnant d'images sans aucun réglage préalable. Le résultat est souvent impressionnant, mais lorsque les photographies de départ sont nombreuses et l'assemblage complexe , il apparaît de nombreux défauts dans les détails ( problèmes de parallaxe, fantomes ...) comme le montre l'image ci-dessous. Démonstration de l'usage d'autostitch

Panorama de la grande salle galloromaine du musée Saint-Remi de Reims en 79 photographies réalisées en 3 passages décalés avant recadrage

Panorama de la grande salle galloromaine du musée Saint-Remi de Reims en 79 photographies réalisées en 3 passages décalés aprés recadrage. Pour la mosaïque 2 vues ont été ajoutés prises l'une depuis la droite , l'autre depuis la gauche , donc pas du même point de vue ; pourtant l'assemblage a été parfait.

Autostich en version gratuite ne produit que des panoramas en projection cylindrique. La durée de vie de la démonstration est limitée , mais il est possible d'installer une version plus récente pour aller au dela.

L'outil libre le plus puissant actuellement est hugin http://hugin.sourceforge.net/ http://www.framasoft.net/article3466.html

qui est une interface simple sur des logiciels en ligne de commande ( Panorama tools) produits par une universitaire allemand Helmut Dersch http://www.all-in-one.ee/~dersch/.

Comme souvent dans le libre il existe une documentation abondante en ligne , par exemple http://www.panotools.info/mediawiki/index.php?title=Main_Page , même en français comme à http://www.linuxfocus.org/Francais/September2004/article348.shtml

Cet outil soutient la comparaison avec toutes les solutions payantes . S'il échoue parfois en mode automatique dans les situations très complexes , il est possible de procéder à des ajustages manuels et de reprendre l'assemblage. Démonstration de l'utilisation de Hugin

Hugin génère des panoramas en 5 modes de projection ( dont la projection sphèrique ).

Il demande un peu plus de règlages qu'autostich , mais le résultat final est une image sans défaut visible. et avec moins de déformations.

Prise de vue .

Quelques règles simples :

Il faut utiliser un pied stable , prendre garde à l'horizontalité du support ( avec un niveau à bulle si nécessaire) .

Les photographies doivent se recouvrir d'au moins 20% , avec moins recouvremement , il risque d'y avoir des problèmes ou des erreurs de raccordement.

Il est préférable d'utiliser un objectif standard équivalent au 50 mm argentique , en tout cas jamais un grand angle , sinon les erreurs de parallaxe seront accentuées.

Des sociétés spécialisées vendent des supports spéciaux et des accessoires adaptés mais ils ne sont pas indispensables .

Hugin et autostich permettent d'assembler des panoramas réalisés en plusieurs passages par exemple le panorama suivant a été réalisé en trois passes : une passe centrale avec 19 photographies prises avec l'objectif horizontal , une passe avec l'objectif orienté vers le bas (environ 30°) une passe avec l'objectif orienté vers le haut (idem) on obtient une vue 360 x 180° , qui peut être traîtée en projection cylindrique ( autostich) ou cylindrique et sphèrique ( hugin)

II Deuxième étape : la mise en ligne du panorama.

La mise en ligne se fait ici, en incorporant dans une page web une applet java. (d'autres solutions existent , à base de Flash ou de Quicktime ).

Deux applets sont couramment utilisées : il s'agit de pmvr ( commerciale) et ptviewer (open-source).

pmvr est un produit commercial qu'il faut acquérir , en général avec la licence du logiciel Panorama Factory .

Les versions téléchargeables ( à durée limitée) permettent de créer des visites virtuelles utlisables , mais à la visualisation le panorama est tatoué par le message « not registred » .

On trouve sur l'Internet de « vieilles » versions n'affichent pas ce message et elles semble très utilisées , mais le caractère légal de cet usage semble plus que douteux.

Ptviewer ne présente pas ces problèmes , puisque c'est un produit open-source lié aux travaux du même universitaire allemand Helmut Dersch . site http://webuser.fh-furtwangen.de/%7Edersch/

Cette applet offre beaucoup plus de possibilités que pmvr ( elle gère tous les types de projection) , mais elle est aussi plus complexe à paramétrer.

Il existe un outil qui permet de créer automatiquement des visites virtuelles avec Ptviewer ( ptviewer scripter ) mais cet outil n'est pas gratuit et des versions de démonstration ne permettent pas de sauvegarder les travaux réalisés.

Il est donc nécessaire de paramétrer cette applet manuellement , le plus simple étant de partir de modèles de pages que l'on adaptera à ses besoins.

Ptviewer comprend une gestion d'interface (boutons de zoom, défilement...) qui peut être paramétrée dans l'applet elle même ou par des scripts javascripts extérieurs.

exemple création d'une barre d'outils en dessous de la zone d'affichage de l'applet

<MAP name="control">

<AREA 
shape=rect coords="0,0,14,14" alt="Autorotation Start" href="javascript:DoAutorotationStart()"> 
<AREA shape=rect coords="14,0,28,14" alt="Autorotation Stop" 
href="javascript:DoAutorotationStop()"> <AREA shape=rect 
coords="28,0,42,14" alt="Zoom In" href="javascript:DoZoomIn()"> 
<AREA shape=rect coords="42,0,56,14" alt="Zoom Out" 
href="javascript:DoZoomOut()"> <AREA shape=rect coords="56,0,70,14" 
alt="Show/Hide Hotspots" href="javascript:DoShowHideHotspots() 
"> <AREA shape=rect coords="70,0,84,14" alt="Reset" 
href="javascript:DoReset()"> <AREA shape="default" 
nohref> </MAP>

Le code javascript suivant permet l'interaction entre les boutons et l'applet

<SCRIPT language="JavaScript1.1"> 
function DoAutorotationStart() { document.ptviewer.startAutoPan( 0.5, 0.0, 1.0 
); } function DoAutorotationStop() { document.ptviewer.stopAutoPan(); } function 
DoZoomIn() { document.ptviewer.startAutoPan( 0.0, 0.0, 1.0/1.03 ); } function 
DoZoomOut() { document.ptviewer.startAutoPan( 0.0, 0.0, 1.03 ); } function DoShowHideHotspots() 
{ document.ptviewer.toggleHS(); } function DoReset() { document.ptviewer.gotoView( 
-45, -60, 80 ); } function DisplayPan() { status = document.ptviewer.pan().toString() 
; } function DisplayTilt() { status = document.ptviewer.tilt().toString() ; } 
function DisplayFov() { status = document.ptviewer.fov().toString() ; } function 
mousehs(n) { if( n== -1 ) document.cn.hsnum.value = "---" ; else document.cn.hsnum.value 
= n ; } function getview(p,t,f) { document.cn.pan.value = p ; document.cn.tilt.value 
= t ; document.cn.fov.value = f ; } function NewPano( ) { document.ptviewer.newPanoFromList(0); 
} function wpano() { document.ptviewer.newPanoFromList(0); } function fpano() 
{ document.ptviewer.newPanoFromList(1); } </SCRIPT>

Le code html suivant définit l'image sensible correspondant au mappage control

<TD ALIGN=RIGHT BGCOLOR="#C0C0C0"><IMG 
SRC="images/control.gif" ALT="" BORDER=0 usemap="#control" 
HEIGHT=14 WIDTH=84></TD>

Parmi les possibilités , il est possible de créer des zones sensibles ( hotspot) équivalents à des liens vers d'autres panoramas , vers une image fixe , ou vers une autre page web .

En bas à droite sous l'applet les zones actives correspondant au mappage explique plus haut.

Les cercles jaunes sont une variété de hot-spot à affichage permanent.

L'étiquette 'Tombeau de Jovin » correspond à un hot-spot qui apparaît lorsque la souris passe au dessus de la zone sensible . Les hot-spots peuvent être ou non actifs et envoyer sur un autre panorama défini dans la même page , sur une image ( en restant dans l'applet) sur une page web externe quelconque ...

{hotspot3=x20 
y299 a25 b350 c0000ff p q n'Salle 2' u'ptviewer:newPanoFromList(1)'} ouvre le 
panorama n° 2 .

{hotspot4=x100 
y287 a150 b421 c0000ff p i'Sommaire Histoire'e u'http://www.ac-reims.fr/datice/hist-geo' 
t'_blank'} ouvre la page sommaire du site académique histoire-géographie 
{hotspot1=x363 y278 cFFFF00 p i'Attis'e u'panorama/attis.jpg'} 
affiche la statue dite du dieu Attis et revient dans l'hyperpaysage à la 
fermeture.

Lorsque l'applet affiche la photographie panoramique les défaut de parallaxe sont automatiquement corrigés comme le montre l'image ci-dessus ( portion du panorama réalisé avec hugin) .

Pour finir , Ptviewer sait afficher de grandes images ( testée avec des images de 6000x600) et gère éventuellement le préchargement des images diverses composant l'ensemble des scènes .

Voir un exemple d'hyperpaysage actif ( maquette en cours de création) : La grande salle galloromaine du musée Saint Remi de Reims

A titre d'exemple , une partie du code source de cet hyperpaysage est présenté ci-dessous

<applet name="ptviewer" archive=ptviewer.jar code=ptviewer.class width=800 height=500 mayscript=true>

<param name=applet0 value="{code=ptflat.class} {file=panorama/P2120013-P2120034.jpg}">