Aller directement à la table des matières

1. Présentation

pre3d est une bibliothèque de visualisation d’objets en trois dimensions.
Bravo et merci à Dean McNamee !

Voici deux exemples de visualisations, à manipuler à la souris :

• glisser-déposer pour tourner la figure autour des axes $x$ et $y$ (axes de l’écran si la caméra n’a pas tourné)
• en appuyant en même temps sur CTRL, on se déplace en $x$ et $y$
• en appuyant en même temps sur SHIFT, on se déplace en $z$
• en appuyant en même temps sur CTRL et SHIFT, on ajuste la distance focale

function step() {
  var dx = (-1.111 * x - y * y - z * z + 1.111 * 4.494) * 0.136;
  var dy = (-y + x * y - 1.479 * x * z + 0.44) * 0.136;
  var dz = (-z + 1.479 * x * y + x * z) * 0.136;
  x += dx;
  y += dy;
  z += dz;
  return {x: x, y: y, z: z};
}

D’autres exemples sont fournis sur la page officielle.

Je propose ici un tutoriel progressif, qui peut aussi servir de memento. Une certaine connaissance de la programmation Javascript (JS) est souhaitable, et une bonne maîtrise est nécessaire pour certains exemples évolués (on peut trouver quelques pistes ici).

2. Table des matières

3. Pas à pas

Encore une fois, une bonne maîtrise de Javascript (JS) est nécessaire. Voir cette activité.

3.1. Segments

Le code HTML

<script src="static/pre3d/apps/repere.js"></script>
<script type="text/javascript">create_repere('pre3d-repere', 0, 0, 0);</script>
<canvas id="pre3d-repere" width="200" height="150">
  Désolé, cette visualisation requiert HTML5.
</canvas>

1. La première balise script charge le fichier Javascript qui définit la visualisation (voir plus bas pour une description de ce type de fichiers).
2. La deuxième balise script commande la création de la visualisation. Les arguments servent à initialiser la position de la caméra.
3. La balise canvas accueille la visualisation et ses attributs en définissent la taille. Son id doit correspondre au premier argument de create_repere ou du document.getElementById de votre visualisation (voir plus bas).
   Attention : la taille de la visualisation est proportionnelle à cette taille. On ne peut pas imposer la taille des segments depuis le code JS.
4. Si le navigateur ne peut afficher la visualisation, l’utilisateur est prévenu (le message est le contenu de la balise canvas).

Rien d’exceptionnel ou de très difficile. Dans la suite de ce document, on ne reviendra sur cette partie que s’il y a vraiment du nouveau.

Le code JS

 1 function create_repere(id, rx, ry, rz){
 2     window.addEventListener('load', function() {
 3         var screen_canvas = document.getElementById(id);
 4         var renderer = new Pre3d.Renderer(screen_canvas);
 5 
 6         renderer.ctx.lineWidth = 1;
 7 
 8         var orig = {x: 0, y: 0, z: 0};
 9 
10         function draw() {
11             renderer.ctx.setFillColor(1, 1, 1, 1);
12             renderer.drawBackground();
13 
14             var line = Pre3d.PathUtils.makeLine(orig, {x: 1, y: 0, z: 0});
15             renderer.ctx.setStrokeColor(1, 0, 0, 1);
16             renderer.drawPath(line);
17             var line = Pre3d.PathUtils.makeLine(orig, {x: 0, y: 1, z: 0});
18             renderer.ctx.setStrokeColor(0, 1, 0, 1);
19             renderer.drawPath(line);
20             var line = Pre3d.PathUtils.makeLine(orig, {x: 0, y: 0, z: 1});
21             renderer.ctx.setStrokeColor(0, 0, 1, 1);
22             renderer.drawPath(line);
23         }
24 
25         renderer.camera.focal_length = 5;
26         DemoUtils.autoCamera(renderer, 0, 0, -7, rx, ry, rz, draw);
27         draw();
28     }, false);
29 }

1. La première ligne (l.1) nous permet d’inclure la visualisation plusieurs fois dans la même page, avec des orientations de caméra différents. Elle n’est pas nécessaire pour des visualisations simples.
2. La seconde ligne (l.2) programme une fonction anonyme pour le moment où la page sera chargée. Le contenu de cette fonction (entre function() { et }, false);) définira notre visualisation. C’est un peu technique mais, rassurez-vous, ce n’est pas la peine de comprendre les listeners pour se servir de pre3d.
3. l.3 : on définit l’élément qui va accueillir la visualisation. C’est un canvas, (voir ci-dessus pour la partie HTML).
4. l.4 : une initialisation, rien à dire.
5. l.6 : paramétrage de l’épaisseur des traits.
6. l.8 : plutôt que d’écrire plusieurs fois les coordonnées de l’origine, on les stocke dans une variable.
7. l.10 : la fonction draw sera appelée lors des changements de position de la caméra.
8. l.11 et l.12 : paramétrage de la couleur du fond (quatre nombres entre 0 et 1 pour rouge, vert, bleu, alpha) et remplissage du fond.
9. l.14 à l.16 (puis idem jusqu’à 22) :
   1. définition d’un segment, stockage dans la variable line
   2. paramétrage de la couleur du trait
   3. dessin du segment, on voit ici que c’est un chemin (path en anglais).
10. l.25 : paramétrage de la distance focale (plus la valeur est élevée, plus on se rapproche).
11. l.26 : paramétrage de la position de la caméra :
    • les trois premières valeurs après renderer sont des valeurs de position (il est rarement utile de les modifier, on pourra laisser 0, 0, -7).
    • les trois suivantes sont des valeurs de rotation (voir les figures suivantes),
    • le dernièr argument est la fonction responsable du dessin (définie plus haut), ici draw.
12. l.27 : premier appel de draw pour qu’il y ait quelque chose à l’écran dès le départ.

Notons que pour ce premier exemple et pour les suivants, un code couleur simple (si on connaît le format RVB) a été choisi :

• l’axe des $x$ est Rouge part vers la droite de l’écran,
• celui des $y$ est Vert et part vers le haut,
• et celui des $z$ est Bleu et sort perpendiculairement de l’écran vers l’utilisateur. Cet axe apparaît quand on manipule la visualisation à la souris (du coup le vous remets la visualisation ci-après).

3.2. Rotation de la caméra

3.2.1. Unité des angles

pre3d utilise les radians.

On rappelle qu’un tour complet vaut $2 \pi$ radians, soit environ $6,28$. Par proportionnalité, on a le tableau suivant :

3.2.2. Rotation suivant x

Elle se fait « autour de l’axe des $x$ », en amenant l’axe des $y$ vers l’axe des $z$.
Avec create_repere('pre3d-repere3', 0.785, 0, 0);, on obtient :

On remarque que lorsque l’on glisse la figure à la souris vers la droite ou la gauche, la rotation se fait suivant l’axe des $y$ en vert et non par rapport à ce qui nous semble être la verticale.

Tentative d’explication : la souris agit sur la caméra et non sur la figure.

Explication qui est invalidée en observant que si on glisse la souris vers le haut ou le bas, la rotation ne se fait pas suivant l’axe des $x$ en rouge, mais ce qui nous semble être l’horizontale (plus probant dans l’exemple suivant).

3.2.3. Rotation suivant y

Elle se fait « autour de l’axe des $y$ », en amenant l’axe des $z$ vers l’axe des $x$.
Avec 0, 0.785, 0, on obtient :

3.2.4. Rotation suivant z

Elle se fait « autour de l’axe des $z$ », en amenant l’axe des $x$ vers l’axe des $y$.
Avec 0, 0, 0.785, on obtient :

On note qu’il faudra élucider cette histoire de glissé de figure vers la droite ou la gauche puisque dans cet exemple, on ne tourne pas autour de l’axe des $y$ (en vert).

À suivre…