TP de "Documents Multimédia", 2014
Exercices du 02.12.2014

3D, la reprise. Le cube.

SVP, terminez l'exercice de la semaine dernière, le cube 3D ; de l'extérieur, et de l'intérieur. [Je recopie le sujet complet...]


Construisez en CSS (éventuellement avec un minimum de JavaScript si vous voulez) un cube 3D [ci-dessous à droite] composé de 6 images qui forment ensemble une vue totale, comme dans le tableau en bas à gauche. Quand la géométrie statique du cube sera codée correctement, vous pourrez animer l'objet.

Les détails du codage sont disponibles sur l'Internet, sauf que le code CSS est adapté souvent seulement à l'engin -webkit-. Il vous faudra ajouter partout les clauses -moz- si vous utilisez Firefox. Mais de plus en plus des variantes comme ça deviennent standardisées, et les constructions marchent sans préfixation. Je vous donne une adresse (une page de Jerôme Debray sur developpez.com) où vous trouverez la solution.

sky_lake_top (74K)
sky_lake_back (74K) sky_lake_left (74K)sky_lake_front (74K)sky_lake_right (74K)
sky_lake_bottom (74K)

Les images du lac sont plus grandes que ci-dessus. Chaque carreau est un lien vers l'original dans le dossier Images, les photos sky_lake_front.jpg, etc. Les images doivent être positionnées sur le cube de manière "naturelle", de manière à ce que les facettes voisines soient adjacentes, et leur orientation est correcte. Attention, il est très facile de se tromper d'une ou plusieurs orientations ; quelques rotations s'imposent alors. Le seul vrai problème était de comprendre les translations et les rotations engagées. On peut cloner la solution de l'Internet (ou de mes matériaux), mais il est préférable de se tromper et trouver l'erreur. Vous avez temps infini à votre disposition ; on pourra discuter les détails lors de la séance suivante.

Une autre page, de Paul Hayes montre une autre solution, contrairement à Jerôme Debray, la démo marche sur Firefox. Pourquoi je vous donne la solution faite par quelqu'un d'autre?

Vérifiez cette page du cours, si sur votre plate-forme VRML [par ex. le plugin de Cortona...] est opérationnel [dans quelques semeines/mois, je convertirai, peut-être... cet exemple en X3DOM].




2. Un peu de manipulation des couleurs

Comme mentionné en cours, le filtrage est un dispositif permettant de créer des entités visuelles, par ex.des effets 3D avec la simulation de l'éclairage, ou des distorsions géométriques. Mais parfois il s'agit simplement de corriger les photos... (Pour cela on n'a pas besoin de SVG, mais le côté DOM des objets SVG facilite leur gestion. Les filtres SVG vous apportent une collection d'outils permettant un traitement d'image très compliqué). Ci-dessous vous voyez la transformation d'une photo couleur en niveau du gris, à l'aide d'une matrice qui ajoute les trois plans de couleur: $I = (R+G+B)/3$. Voici le résultat, l'original, et le code :

<svg xmlns="http://www.w3.org/2000/svg" 
     width="900" height="300"
     xmlns:xlink="http://www.w3.org/1999/xlink" 
    >
<defs>
<filter id="Matrix" filterUnits="objectBoundingBox" 
            x="0%" y="0%" width="100%" height="100%">
 <feColorMatrix type="matrix" in="SourceGraphic"
   values=".33 .33 .33 0 0 
           .33 .33 .33 0 0 
           .33 .33 .33 0 0 
            0   0   0  1 0";/>
</filter>
</defs>

<image xlink:href="Images/aj.jpg" x="1" y="1" 
  width="400" height="300"
  filter="url(#Matrix)"/>
<image xlink:href="Images/aj.jpg" x="500" y="1" 
  width="400" height="300"/>
</svg>

La matrice est globalement 5 × 5, mais la dernière ligne n'est pas écrite, elle vaut toujours [0 0 0 0 1]. Les trois premières composantes correspondent aux couleurs, la quatrième est l'alpha (l'opacité). La cinquième colonne sert à ajouter des constantes aux couleurs transformées, c'est le même principe de coordonnées homogènes, qui permet de représenter de manière matricielle les rotations ET les translations.

$\left(\begin{array}{l} R' \\ G' \\ B' \\ A' \\ 1\end{array}\right) = \left(\begin{array}{l} a_{00} & a_{01} & a_{02} & a_{03} & a_{04}\\ a_{10} & a_{11} & a_{12} & a_{13} & a_{14}\\ a_{20} & a_{21} & a_{22} & a_{23} & a_{24}\\ a_{30} & a_{31} & a_{32} & a_{33} & a_{34}\\ 0 & 0 & 0 & 0 & 1\\\end{array}\right) \cdot \left(\begin{array}{l} R \\ G \\ B \\ A \\ 1\end{array}\right)\,.$

Cependant, cette manipulation est visuellement un peu fausse. Nous avons ajouté les trois plans couleur avec la même pondération. Or, vous avez appris que la couleur verte apporte beaucoup plus à la luminance de l'objet que le rouge, et le rouge : au moins deux fois plus que le bleu.

Commentaire. Je vous ai dit que les dispositifs de filtrage offrent une véritable machinerie du traitement d'images, intégrée aux documents visuels. Mais il ne faut pas porter trop d'illusions. On transforme les images par des programmes, qui permettent de prendre des décisions, qui contiennent des conditionnelles, boucles, etc. Ceci demande un peu de scriptage, et de travail off-line. On n'a pas le temps de travailler dessus, mais je vous montre un exemple, pour votre culture générale.

Et voici le résultat d'un tel travail. Seulement l'image à gauche est vraie, les autres sont des artefacts.

(Ainsi, j'ai pu choisir mon modèle, ce qui était facilité par le fait que le vendeur avait seulement la verte en stock, et je ne pouvais pas attendre...) Observez que la manipulation n'est pas idéale, que les artefacts faux restent un peu visibles, mais mon but était : faire cela vite et sans trop d'effort.

Globalement ceci est facile en SVG.

Voici comment faire une Madame Hulk avec le filtrage qui modifie la teinte ; pour votre apprentissage, j'ai ajouté une seconde couche qui montre la composition des filtres, un flou pratiquement invisible.

Dans <defs> vous trouverez :


<filter id="Hrot" x="0" y="0">  
  <feColorMatrix in="SourceGraphic" type="hueRotate" 
     values="90" result="A";/>
  <feGaussianBlur in="A" stdDeviation="0.2"/>
</filter>

Ainsi, jouant avec result, in, in2, on peut composer les effects. Ceci ne suffit pas pour colorier ma voiture, car on aurait modifié le reste de l'image. Il faudrait en sélectionner une partie.

Mais vous pourrez grâce aux filtres changer la saturation et le contraste. Si vous voulez savoir plus sur les filtres et les SVG en général, voici quelques références.




3. Simulation de l'éclairage et effets 3D

Regardez cette image. Essayez de l'obtenir avec le filtrage SVG, avec les filtres d'éclairage, etc.

Un tel effet, nommé bosselage ou repoussage, a été obtenu avec Gimp. L'image de AJ en niveau de gris a été rendu légèrement flou, afin d'atténuer les irrégularités locales (parasites), et ensuite utilisée comme la carte de repoussage d'une zone blanche ou grise. (Voir cette référence).

L'algorithmique est essentiellement le gradient, la différence entre l'image et sa version décalée, ce qui augmente (ou diminue) la valeur des pixels dans une zone où la luminance varie, selon la direction du décalage. Une plage (directionnelle) devient zéro. Il faut donc ajouter une valeur afin que tout soit positif.

Avec une matrice de convolution 3×3 on n'a pas vraiment beaucoup de possibilités directionnelles, 0, 45, 90°, etc. Pour des matrices plus larges le choix est plus riche.

Utilisez une matrice (kernelMatrix dans feConvolveMatrix) 5×5 ; vous n'êtes nullement demandés d'obtenir exactement l'image à gauche, seulement vous convaincre que l'effet est facile à obtenir par une simple matrice. N'oubliez pas le bias, par ex. 0.5.

Lisez comment augmenter le contraste du résultat. Un jour vous aurez besoin de feComponentTransfer.


Je répète la philosophie de cet exercice : il n'est nullement question de faire de vous des spécialistes en filtres SVG, mais de vous persuader, que la création des documents composites, visuels, combinant plusieurs sources, parfois nécessite l'usage des dispositifs du traitement d'images. Nous pouvons incorporer ces fonctionnalités dans le document même. Ceci facilite la composition, sans besoin de modifier les sources, ce qui parfois est difficile, voire impossible, pour des raisons techniques ou juridiques.



Retour