_1140319
Mercredi pratique 22

MP #101 : Fabriquer son propre effet Lytro sans se ruiner

Pour ce 101ème Mercredi Pratique, nous sommes heureux d’inviter un photographe amateur souhaitant partager une technique photo un peu particulière basée sur le principe du Lytro. Yann a ainsi réussi à reproduire l’effet et les images produites par un appareil Lytro sans pour autant en posséder un. Le résultat est bluffant et Yann nous a proposé de partager avec vous sa réussite. A lui la parole !

Comme moi, vous avez peut-être découvert avec une curiosité mêlée d’émerveillement la caméra Lytro sortie il y a maintenant quelques mois. Pour ceux qui n’auraient pas suivi, les « photos » produites par l’appareil permettent de se passer de mise au point au moment du déclenchement, celle-ci étant reléguée à la post-production.

Les galeries de photo Lytro permettent donc au visiteur de faire le focus lui-même sur la zone qui l’intéresse, produisant ainsi une photo « interactive » qui donne envie de jouer avec. Cette idée de photo « interactive » m’a beaucoup plu et je me suis posé la question suivante : comment réaliser le même effet, moi qui n’ai pas de camera Lytro et qui ai d’autres priorités sur ma shopping-list ?

La réponse est toute simple : en prenant plusieurs photos de la même scène et en faisant à chaque fois le focus sur une zone différente, j’obtiens une série d’images qu’il me suffit d’afficher alternativement au visiteur selon l’endroit où il clique.

Pour vous présenter la technique plus en détail, je me suis empressé de subtiliser les dinosaures préférés de mon collègue et de m’en servir pour peupler mon salon ainsi :

428, 173, 600, 450
0, 0, 600, 150
0, 0, 600, 150
0, 150, 600, 248
0, 248, 600, 450
396, 95, 455, 191
249, 140, 387, 288
26, 192, 255, 401
428, 173, 600, 450


Allez-y, cliquez sur les différentes zones de l’image !

Matériel nécessaire

Il n’y a pas besoin de matériel complexe pour créer cette image interactive, mais certains éléments sont indispensables :

1 – Un trépied

2 – Un Appareil photo permettant :

  • Une faible profondeur de champ
  • Le réglage de la zone de mise au point

3 – Optionnel (mais recommandé) :

  • Un mode manuel (M)
  • Shooter en RAW

Prise de vue

Attardons-nous d’abord sur la prise de vue. Il y a 3 points auxquels il faut particulièrement prendre soin :

  • Bloquer l’appareil photo sur un trépied.

En effet, il faudra prendre plusieurs photos de la même scène avec un cadrage identique. Vous avez peut-être des bras d’une précision millimétrique, mais ça n’est pas mon cas. Autant maximiser les chances d’avoir un cadrage identique sur toutes les photos, et cela passe par l’utilisation du trépied.

  • Définir chacun des plans focaux pertinents et vérifier le cadrage pour chacun des plans.

Soyons réaliste, il est impossible de prendre une photo pour chaque distance de mise au point… Il faut donc trouver les zones où faire la mise au point et qui permettront de couvrir l’ensemble de la scène.

Dans mon cas, j’ai défini une distance de mise au point pour chaque dinosaure de ma scène. Les plans focaux les plus proches ont une profondeur de champ tellement faible que je pourrais faire plus de photos, mais je me suis limité à 5 zones d’intérêt pour cet exemple :

  • Passer en mode manuel, et faire la balance des blancs manuellement.

Encore une fois, l’objectif est d’avoir les photos les plus semblables possible à l’exception de la zone de mise au point. Des réglages d’ouverture, de durée d’obturation et de sensibilité identiques permettront d’avoir des photos semblables en terme d’intensité lumineuse.

La balance des blanc manuelle n’est pas vraiment nécessaire (surtout si vous shootez en RAW), mais c’est un plus qui vous permettra d’économiser un peu de temps de traitement si vous pouvez la faire lors de la prise de vue.

  • Une fois que tout est paré, il ne reste plus qu’à prendre chacune des photos envisagées.

Evidement on règle l’appareil pour avoir l’ouverture maximale (ie : la profondeur de champ la plus faible), histoire d’avoir l’effet le plus saisissant possible. S’il s’agit d’un zoom, la plus longue focale devrait également permettre d’intensifier l’effet.

Pour ma part j’ai utilisé un équivalent 40mm à ouverture f/1.7 pour cet essai.

        
        

Cliquer sur les miniatures pour les voir en grand

Traitement des images

Le traitement des images est on ne peut plus simple si la prise de vue a été bien faite :

  • l’alignement des images est en principe déjà correct grâce à l’utilisation du trépied ;
  • les couleurs sont en principe déjà similaires sur toutes les images grâce aux réglages et la balance des blancs identiques.

Il n’y a donc qu’à faire les réglages de base sur l’une des photos, et les dupliquer pour chaque photo.

On obtient alors la série de photos à utiliser :

        
        

Cliquer sur les miniatures pour voir les mises au point

Affichage web

Maintenant que toutes les images sont prêtes, reste à préparer l’affichage web qui garantira l’interactivité de la photo. N’étant pas moi-même développeur Web, j’ai demandé à un ami designer de sites internet de m’écrire un petit script qui aurait les propriétés suivantes :

  • pouvoir superposer les différentes images ;
  • pouvoir définir une zone de clic pour chaque image ;
  • lors du clic sur la zone prédéfinie d’une image, réaliser un fondu enchainé vers l’image.

Il m’a donc écrit un script (MagicFocus) facilement utilisable : vous pouvez le télécharger ici et le mettre sur votre serveur, vous aurez ensuite besoin de l’URL. Et pour ceux à qui le principe de script ne parle pas, pas de panique : il vous suffira de copier / coller la version complète et de changer la source des images et du script pour que cela fonctionne.

Section contenant l’effet

Les images servant l’effet doivent être placées dans une section à part, taillée aux dimensions des images :

<div id=" DinoLand" style=" height: 600px; position: relative; width: 800px;" >
</div>

Délimitation des zones de clic de chaque image

La délimitation des zones de clic se fait en donnant la position du coin supérieur gauche et du coin inférieur droit de chaque zone de clic dans le champ ‘alt’ de l’image :

<div id=" DinoLand" style="height: 600px; position: relative; width: 800px;">
<img alt="400, 0, 800, 600" src=" _1140317.jpg" title=" Rex"/>
</div>

Pour connaitre les coordonnées de chaque zone de clic à créer, je suis passé par Photoshop et j’ai utilisé la tab bar « info », qui permet de connaitre les coordonnées de la souris lorsqu’on passe sur l’image (pour avoir les coordonnées en pixel, il faut que les règles soient configurées en pixel également) :

Il me suffit ensuite d’utiliser les coordonnées dans le champ alt de mon image, et ce pour chacune de mes images. dans mon cas, cela donne :

<div id="DinoLand" style="height: 600px; position: relative; width: 800px;">
<img alt="570, 230, 800, 600" src="_1140317.jpg" title="Rex" />
<img alt="0, 0, 800, 200" src="_1140324.jpg" title="Fond" />
<img alt="528, 127, 607, 255" src="_1140321.jpg" title="Velociraptor" />
<img alt="332, 187, 516, 384" src="_1140320.jpg" title="Triceratops" />
<img alt="34, 256, 340, 535" src="_1140318.jpg" title="Tyrannosaurus" />
<img alt="570, 230, 800, 600" src="_1140317.jpg" title="Rex"/>
</div>

Ajout du scripts

Pour que le script puisse agir sur les images choisies, il est nécessaire de le charger ainsi que ses dépendances de la manière suivante :

<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"> </script><script src="jquery.magicfocus" type="text/javascript"> </script>
Ne reste plus qu’à appeler le script MagicFocus pour enfin voir apparaitre l’effet, et cela se passe de la façon suivante :

<script type="text/javascript">
 $(document).ready(function() { $('#DinoLand').magicFocus({duration:500, action:'click'});});
 </script>

Notez que le script est configurable : dans mon cas, la transition entre 2 photos durera 500ms (duration:500) et se fera lors d’un clic de souris (action:’click’), mais vous pouvez changer ces valeurs pour configurer votre effet Lytro à votre guise !

Une fois terminée, voici à quoi doit ressembler votre code HTML :

<div id="DinoLand" style="height: 600px; position: relative; width: 800px;">
<img alt="570, 230, 800, 600" src="url_photo_1" title="titre_photo_1" />
<img alt="0, 0, 800, 200" src="url_photo_2" title="titre_photo_2" />
<img alt="0, 0, 800, 200" src="url_photo_3" title="titre_photo_3" />
<img alt="0, 200, 800, 330" src="url_photo_4" title="titre_photo_4" />
<img alt="0, 330, 800, 600" src="url_photo_5" title="titre_photo_5" />
<img alt="528, 127, 607, 255" src="url_photo_6" title="titre_photo_6" />
<img alt="332, 187, 516, 384" src="url_photo_7" title="titre_photo_7" />

<img alt="34, 256, 340, 535" src="url_photo_8" title="titre_photo_8" />
  <img alt="570, 230, 800, 600" src="url_photo_9" title="titre_photo_9" /> </div>
  <script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript">
  </script><script src="jquery.magicfocus" type="text/javascript">
  </script>
  <script type="text/javascript"> $(document).ready(function() { $('#DinoLand').magicFocus({duration:500, action:'click'}); });
  </script>

Il vous suffit de copier/coller ce code puis de modifier l’url des photos, leurs coordonnées et leurs titres, puis l’URL du script. Attention, WordPress gère mal les guillemets et les transforme. Il faut bien utiliser les guillements  » et non >>.

Pour aller plus loin

Je suis passé assez vite sur l’utilisation du script pour faire simple, mais on peut aller beaucoup plus loin. En effet, sur mon blog, je définis plusieurs zones pour chacune de mes images afin de coller au plus près avec la zone que je veux délimiter.

J’utilise même certaines zones qui se superposent. Dans ce cas-là, mon script considèrera que la zone déclarée en dernier est celle qui est au premier plan (et donc si je clic à un endroit où 2 zones se superposent, c’est la dernière zone définie qui sera choisie). J’utilise cette propriété pour construire mon image de la profondeur de champ la plus grande à la plus petite, en définissant des zones de plus en plus précises.

Par exemple, le fond est défini en 3 zones couvrants toute l’image :

Puis les zones correspondantes à chaque dinosaure sont ensuite ajoutées sur ce fond :

        
        

Conclusion

Au final, avec un peu de travail, on obtient facilement les même images interactives que celles proposées par une camera Lytro. Notez qu’il y a quand-même un certain nombre de différences fondamentales :

  • l’image doit être soigneusement pensée à l’avance, et nécessite un certain temps de réalisation : impossible de prendre une photo à main levée ou à l’improviste comme c’est le cas avec la camera Lytro ;
  • l’effet nécessitant plusieurs prises de vue, impossible également de prendre une photo d’une scène non fixe comme il est possible de le faire avec la camera Lytro ;
  • la camera Lytro étant ce qu’elle est, la résolution que l’on peut atteindre avec cette technique est bien meilleure. En pratique, on n’aura jamais besoin d’une résolution supérieure à celle d’un écran soit environ 2Mpx maximum ;
  • le nombre de plans focaux disponibles pour le visiteur dépend du nombre de photos qui ont été prises, contrairement à ce qui se passe avec la camera Lytro qui dispose d’une infinité de distances de mise au point.

En espérant que ce tutorial vous donne envie de réaliser vos propres images interactives 🙂

Vous pouvez retrouver Yann sur son blog mais aussi découvrir ses photos sur Flickr. Un très grand merci à lui pour sa participation !

Tamron_16300_Digit_728x90

Articles qui pourraient vous intéresser

  • Baptiste

    Joli tuto !! Qui plus est, très pratique (manquerais plus que ce soit le contraire pour un MP). Ça laisse rêver de pas mal de choses. Le problème c’est de pouvoir montrer ce genre de travaux. Imaginons deux secondes ce que pourrait donner une intégration du bazar sur un site comme flickr… Mais vu le retard accumulé ce n’est pas pour tout de suite.

  • Y a du boulot! Très bon MP!
    Maintenant, est-ce que l’intérêt de Lytro réside dans le fait de donner aux autres la choix de la mise au point ? N’est-ce pas plutôt de donner au photographe la possibilité de faire la mise au point en post-production comme avec la balance des blancs ? Ce qui permet de ne plus louper sa mise au point…

    Celà dit, je le répète, très bon MP. Y a énormément d’idée (en plus d’un boulot monstre) dans cet article !

    • Hello GeeXor,
      Je suis en partie d’accord avec toi, il y a bien d’autres interêts au Lytro (et pour ma part je pense en particulier à la production d’images 3d).
      Mais je considère aussi que la photo est un art vivant, et permettre au visiteur de jouer avec la photo présente à mon avis aussi de l’interêt.

      Au final, tout ca n’est qu’un outil (ou une technique), l’essentiel et de voir ce que l’on en fait 😉

    • (pardon pour l’enoooooorme faute dans ma réponse précédente)

    • Plop Yann.
      Moi, je suis tout à fait d’accord avec toi :). Je trouve que ce qui est présenté dans cet article est trop trop fort! Pour moi ça dépasse (c’est même carrément différent de) l’effet Lytro!

  • leroy

    j’ai presque tout compris
    mais boudiou quel boulot !

  • Génial! Bravo et merci pour les explications!

  • Encore bravo 😉

  • Shackdown

    Merci pour ce tuto, ca m’a donné pas mal d’idee 🙂

  • Il fallait y penser, mais le résultat est intéressant.
    Bravo !

  • Bravoooooooo et en plus ça coute pas bcp

  • jb

    très bonne idée!

  • Hello,

    super tuto, là ou je bloque c’est pour les coordonnée :

    800 et 600 et 800, 200 ? là que je pige pas de trop.

  • @Simon, tu récupère les coordonnées par photoshop (le X, Y entouré en rouge dans l’illustration).
    Ca te permet de récupérer les coordonnées de ta zone de netteté et ainsi la définir dans le script

    C’était ta question ? 🙂

  • Hello,

    merci de ta réponse. Mais malheureusement sous wordpress je dois avoir un soucis car cela ne fonctionne pas. 🙁

    • J’ai une page contact sur mon blog, si tu veux me contacter directement pour comprendre ce qui ne marche pas.

  • Notez que sur mon blog, j’ai utilisé bien plus de zones pour determiner les zones de netteté de chaque photo, ce qui permet de cliquer de manière plus fine sur chaque élément 😉
    Il y a également un autre essai que j’avais éffectué avant d’écrire ce tutoriel pour phototrend

  • Hello,

    voilà je rencontrais un soucis et yann m’a beaucoup aider. Tout d’abords dans le script qui est citer au dessus, il y a un petit oublie.

    Surtout pour les utilisateur WordPress faites bien attention car il transforme le code et du coup cela ne fonctionne pas du tout donc voilà pour wordpress :

    $(document).ready(function() {
    $(‘#lytro’).magicFocus({duration:500, action:’click’});
    });

    Comme je vous le présente et bien cela fonctionne sans soucis pour wordpress.

    Encore merci à YANN

  • Idée géniale et très bien réalisée!
    J’adore le principe et l’article est bien écrit.

    Il ne reste « plus qu’à » écrire une petite interface pour automatiser la génération du script et définir les zones cliquables et cette technique super intéressante pourra se démocratiser!

    Encore félicitations!

  • En fait il faudrait que les dev de firmware d’APN ajoutent le bracketing de mise au point. 🙂

    • Ca existe déjà 😉
      Je me souviens que c’était déjà disponible quand j’avais mon canon G9, je suppose que c’est aussi le cas sur tous les reflex

  • Pingback: Ironjojo | Pearltrees()

  • Guides d’achat 300×300