S'il fallait fabriquer un objet avec des triangles comme ça, il aurait une allure plutôt plate. Pour lui donner une ombre, il faut ajouter dans le Noeud Shape (forme) un champ appearance (apparence) contenant un Noeud Appearance (Apparence), puis dans le Noeud Appearance un champ material (matière) contenant lui-même un Noeud Material (Matière).

En résumé les lignes de code suivantes ...

    appearance Appearance {
        material Material {
        }
    }

ajoutées au Noeud Shape apportent une ombre à notre triangle.

Notez aussi que plus on le tourne, plus il est sombre.

Il est possible de donner à ce triangle n'importe quelle couleur en ajoutant au Noeud Material un champ diffuseColor (couleur diffusée) portant la couleur voulue. Le champ diffuseColor est du type SFColor (Simple champ, Couleur). Un champ de type SFColor comporte trois composantes r, g, et b.

    r  pour red (rouge)
    g pour green (vert)
    b pour blue (bleu)

Les composantes peuvent prendre toute valeur décimale de 0 à 1.

0 pour rien du tout, 1 pour la totale.

de cette façon, ajuster notre champ diffuseColor à 1 0 0 donne un triangle rouge.

Pour cela on ajoute dans les accolades du Noeud Material :

    diffuseColor 1 0 0

on sauvegarde et on rafraîchit pour voir le triangle rouge    :)

Notre fichier devrait ressembler à mon fichier de travail "triangle.wrl" :

       ( voir le code triangle.wrl        voir l'exemple triangle.wrl )

On obtient un rouge sombre en diminuant la composante rouge, par exemple :

    .7 0 0 devient rouge plus sombre
    .4 0 0 est rouge plus sombre encore.

Si on continue à diminuer la composante rouge on arrive à 0 0 0 qui est noir, puisque toutes les valeurs sont nulles.

Pour avoir un rouge plus clair, on augmente les 2 autres composantes à égalité,

par exemple :

    1 .4 .4 qui donne un rose et
    1 .8 .8 qui devient d'un rose plus léger encore.

Si on poursuit l'augmentation des 2 autres composantes on arrive à 1 1 1 qui représente un blanc, puisque les 3 valeurs sont bloquées au maximum.

Ci-dessous quelques combinaisons de couleurs, mais vous pourrez essayer vous-même de trouver à votre goût vos propres combinaisons :

    0  1  0  #vert
    0  0  1  #bleu
    1  1  0  #jaune
    1  1 .7  #jaune clair
    .3 .3 0  #jaune foncé
    .5 0 .5  #pourpre
    0  1  1  #cyan
    .5 .5 .5 #gris

Nous pouvons être heureux de notre compétence, ce triangle est déjà assez sophistiqué pour qu'on puisse le porter fièrement comme un avatar de plein droit.

On ajoute un autre triangle à notre IndexedFaceSet pour en faire un losange

Pour ajouter un triangle nul besoin de définir 3 coords car une seule suffit. Ceci parce qu'on utilise les indices pour savoir quels sommets joindre ensemble. Les indices peuvent désigner, pour tracer un polygone, un sommet pris n'importe où dans la liste coord. C'est tout l'avantage de disposer de deux listes, une de coords (coordonnées) et une de index (indices) au lieu d'une seule qui préciserait les coordonnées successives. Avec deux listes, on peut s'arranger pour que des polygones partagent les mêmes sommets dans un Noeud IndexedFaceSet. Typiquement un point dans un IndexedFaceSet est utilisé dans deux triangles. Il en résulte que l'ordinateur aura moins de sommets (coordonnées) à prendre en compte.

Pour installer le sommet supplémentaire à l'opposé du sommet supérieur nous fixons une coordonnée y identique au signe près -1.

de sorte que nos coordonnées sont maintenant :

    -1  0  0  #point 0 = gauche
     1  0  0  #point 1 = droit
     0  1  0  #point 2 = haut
     0 -1  0  #point 3 = bas

Reste à joindre trois sommets indicés pour fabriquer un triangle tout neuf. Pour que Blaxxun contact sache où finit un triangle et où commence un autre, il est IMPERATIF d'ajouter -1 après le dernier indice du dernier polygone avant d'ajouter l'ensemble des indices du polygone suivant. (Les indices commencent avec 0, puis suivent les entiers positifs 1, 2, 3, ..., de sorte que la marque "-1" ne peut pas être interprétée comme un indice, c'est donc la "marque de fin"). Notre champ indexCoord ressemble alors à ceci :

    coordIndex [
        0 1 2 -1
        1 0 3
    ]

Bien sûr, au lieu de tracer deux triangles pour faire un polygone en losange nous pourrions tracer un polygone à quatre sommets en changeant les valeurs des indices en 0 3 1 2 et notre coordIndex, si nous le faisions, deviendrait :

    coordIndex [
        0 3 1 2
    ]

Mais je veux continuer à diviser moi-même mon polygone en triangles, parce que sans cela nous serions bloqués quand nous voudrions changer (par exemple) les composantes z si elles ne doivent pas rester toutes identiques. De plus on ne gagne rien en temps d'éxécution d'un polygone à quatre côtés, puisque l'ordinateur va de toute façon découper tout polygone de plus de trois arêtes en triangles avant de le représenter.

Pour montrer un carré au lieu d'un losange on écrit :

On peut très bien laisser les coordIndex comme ils sont en listant les coords ainsi :

    -1 -1  0  #angle inférieur gauche
     1  1  0  #angle supérieur droit
    -1  1  0  #angle supérieur gauche
     1 -1  0  #angle inférieur droit

Essayez de modifier les composantes x, y et z des coordonnées pour obtenir des formes différentes. Jouer avec les triangles est l'exercice le plus utile et de loin pour qui veut se sentir à l'aise, comme chez soi, avec eux.

Si nous fixons nos coords comme ça :

    -1  0  0  #point 0 = gauche
     1  0  0  #point 1 = droite
     0  1 -1  #point 2 = haut
     0 -1 -1  #point 3 = bas

alors les sommets du haut et du bas de notre losange, du fait des valeurs de z maintenant différentes de celles des sommets moyens droit et gauche, lui donnent un aspect plié. Notez que cette pliure (crease) apparaît aiguë entre les deux triangles lorsque nous les faisons tourner en mode "examine".

Bien souvent, quand on construit un objet, on préfère lui donner un aspect lisse. On pourrait le faire en dessinant plein de petits triangles ce qui serait catastrophique en temps d'exécution 3d.
Un moyen bien plus efficace d'y parvenir consiste à utiliser le moins possible de triangles et à leur donner un aspect lisse en les ombrant de façon de façon à ce qu'ils semblent arrondis et non pas plats comme ils le sont en réalité. En Vrml cela se fait facilement en fixant la valeur du champ creaseAngle du Noeud IndexedFaceSet à un niveau supérieur à celui de l'angle que nous voulons lisser.
On y parvient en écrivant cette ligne de code dans les accolades de l'IndexedFaceSet :

    creaseAngle 3.14

l'angle de notre pli est maintenant fixé à 1 PI radians (180 degrés)

Couleur Par Sommets
Jusqu'à maintenant, on a appris à donner à n'importe quelle forme la couleur que nous voulions. Mais que faire pour donner à un objet différentes couleurs selon les endroits? On l'obtient facilement avec la procédure color per vertex (couleur par sommets) du Vrml.
Toutefois, si on utilise Blaxxun contact 4.4 et antérieurs avec Direct X on risque de ne voir tristement aucune ombre avec cette couleur par sommets. Il suffit pour s'en persuader de regarder la capture d'écran ci-dessous :

En revanche Blaxxun contact 5 et plus donne un résultat bien plus satisfaisant :

Ceci dit, pour que tous les sommets soient judicieusement colorés la procédure consiste à ajouter au Noeud IndexedFaceSet un nouveau membre, le champ color contenant le Noeud Color.

Pour celà, on insère dans les accolades du Noeud IndexedFaceSet la ligne de code ci-dessous :

   color Color {
   }

Pas d'inquiétude... dans ce Noeud Color il faut à nouveau introduire un champ color car les données doivent toujours être dans un champ, jamais directement dans un Noeud. Cela fait trois colors de suite, eh bien c'est comme ça! Ici on a donc champ, Noeud, champ.
Ce champ color a un type, déjà aperçu tout au début de ce didacticiel, un type MFColor, c'est à dire Multiple et couleur. Ces champs MFColor contiennent une liste de valeurs SFColor (r g b). Puisqu'il y a quatre sommets dans notre objet il va falloir ajouter 4 valeurs r g b.
Encore que l'on puisse avoir une liste de couleurs indicées dans un index séparé pour les coordonnées qui utiliserait un colorIndex à la place du coordIndex, nous préférons ici partager le même index des coordonnées. Pourquoi? Utiliser le coordIndex à la fois pour les coordonnées et pour la liste des couleurs veut dire que le sommet 0 prendra la couleur 0, le sommet 1 la couleur 1, le sommet 2 la couleur 2 et ainsi de suite.

Pour que le sommet gauche de notre objet soit rouge, que le sommet droit soit jaune, le sommet haut bleu et le sommet inférieur vert, on inscrit dans les crochets du champ color le code suivant, en faisant attention de ne pas confondre les champs, c'est bien le champ color du Noeud Color (et non pas le premier) qui doit être utilisé :

    color [
        1 0 0 #color 0 r g b valeurs = rouge
        1 1 0 #color 1 r g b valeurs = jaune
        0 0 1 #color 2 r g b valeurs = bleu
        0 1 0 #color 3 r g b valeurs = vert
    ]

On sauvegarde et on rafraîchit, de sorte qu'on aperçoit maintenant nos adorables triangles bien colorés :)

Inutile de conserver le champ diffuseColor ni ses valeurs car il a été de toute façon annulé par le Noeud Color et nous pouvons aussi bien effacer la ligne qui lui correspond. Notre fichier devrait déjà ressembler à mon fichier de travail :

       ( voir le code colorPerVertex.wrl        voir l'exemple colorPerVertex.wrl )

Naturellement, on pourrait obtenir des objets plus complexes en ajoutant triangle sur triangle, toutefois, plutôt que d'écrire le code à la main pour les générer, définissant sommet après sommet, un à la fois, ajoutant des indexCoords l'un après l'autre avec un simple éditeur de texte, ce qui pourrait sembler à la longue une tâche bien fastidieuse, mieux vaut faire appel à une interface graphique. Seamless3D représente justement une telle solution qui peut produire autant de triangles en color per vertex que l'on veut, et avec facilité.

Translation d'un Triangle 2 mètres à droite
Pour déplacer un objet ou pour le faire tourner, il faut l'installer dans un Noeud Transform (Transformation).
La translation déplace un objet là où il le faut simplement en fixant des coordonnées.
Comm on est en 3d, nous avons besoin de trois nombres x, y et z pour les représenter.
x = quelle distance en mètres à droite ou à gauche;
y = quelle distance en mètres en haut ou en bas;
z = quelle distance en mètres vers l'écran.

donc, pour déplacer notre triangle de 2 mètres à droite nos coordonnées   x y et z seront   2 0 0
et le code pour le dire s'écrira

translation 2 0 0

Le champ translation appartient à un Noeud Transform on ajoutera donc d'abord la ligne

   Transform {

et puisque notre objet (le Noeud Shape) (c'est le triangle) est un descendant de notre Noeud Transform nous ajoutons le champ children devant le Noeud Shape.
De plus, nous avons ajouté une accolade avec le Noeud Transform, il faut donc la refermer à la fin.

       ( voir le code translate2MetersToTheRight.wrl
       voir l'exemple translate2MetersToTheRight.wrl )

ou encore, ci-dessous un résumé en français :

Transform {
	translation	2 0 0
	children Shape {
		appearance Appearance {
			material Material {
				diffuseColor 1 0 0	
			}
		}
		geometry IndexedFaceSet {
			solid FALSE
			coord Coordinate {
				point [
					-1  0  0  #point 0  
					 1  0  0  #point 1 
					 0  1  0  #point 2  
				]
			}
			coordIndex [
				0 1 2	#joindre les 3 points en sens anti-horaire
			]
		}
	}
}

Rotation de 1/8 de tour selon l'axe y
Nous allons utiliser notre Noeud Transform pour des expériences de rotation.

En Vrml un champ rotation contient 4 valeurs.

   x, y, z et angle

Les x, y et z sont les axes pris en compte et l'angle mesure la rotation autour de l'axe spécifié.

Bien que les valeurs de x, y et z puissent prendre toute valeur utile (de 0 à 1) la plupart du temps on se contente d'un seul axe pour faire tourner un objet, ce qui donne :

1 0 0 = une rotation autour de l'axe x
0 1 0 = une rotation autour de l'axe y
0 0 1 = une rotation autour de l'axe z

On fixe l'angle à la valeur voulue, compte tenu de ce qu'il est mesuré en radians. Un tour complet mesure 2 Pi radians, soit 6.283185307 donc, pour une rotation de 1/8 de tour, nous allons fixer notre angle à la valeur de 6.283185307 / 8 = 0.785398163

rotateOnTheYAxisOne8th.wrl est le même que translate2MetersToTheRight.wrl sauf que la ligne

rotation 0 0 1   0.785398163

remplace dans le Noeud Transform la ligne translation.

       ( voir le code rotateOnTheYAxisOne8th.wrl
       voir l'exemple rotateOnTheYAxisOne8th.wrl )

En français nous avons donc ce code :

Animation Translation
Pour animer des objets, il faut maintenant apprendre quatre nouvelles procédures à la fois.
L'instructions DEF (définir), le Noeud TimeSensor (détecteur de temps) le Noeud Interpolator (interpolation) et les ROUTE (routages).
L'instruction DEF permet de donner un nom à un noeud de façon à pouvoir le réutiliser sans le re-écrire, simplement en le nommant.
Les ROUTEs spécifient d'où viennent les données et où elles vont.
Les Noeuds TimeSensor jouent un rôle essentiel dans la mesure du temps mis en oeuvre dans une animation.
Les Noeuds Interpolator calculent toutes les positions intermédiaires nécessaire à la fluidité d'un mouvement, entre les deux positions, initiale et finale, définies par le programmeur.
Les commentaires après dièse sont utiles pour la formation du débutant, mais le visionneur Blaxxun n'en tient pas compte du tout, on peut aussi bien les supprimer.

       ( voir le code tranAnimation.wrl
       voir l'exemple tranAnimation.wrl )

Le code traduit en français devient le suivant :

DEF myTimer TimeSensor{ 
    cycleInterval 4     # un cycle = 4 secondes 
    loop TRUE           # le cycle est répété en boucle 
} 
DEF myPosInt PositionInterpolator { 
	key [0 .25 .5 .75 1]  # le cycle comporte 4 phases de durée égale 
	keyValue [ 
        -3 0 0      # la phase 0 commence 3 mètres à gauche 
         0 0 0      # la phase 1 commence là où la phase 0 finit
                    #            c'est à dire au centre 
         3 0 0      # la phase 2 commence là où la phase 1 finit
                    #            soit 3 mètres à droite 
         0 0 0      # la phase 3 commence là où la phase 2 finit
                    #            de nouveau au centre
        -3 0 0      # la phase 3 finit au point de départ
                    #            le cycle peut recommencer 
    ] 
} 

DEF myNode Transform {
    children Shape {
        appearance Appearance {
            material Material {         # colore le triangle en rouge
            
                diffuseColor 1 0 0      # valeurs r v b = rouge au max
                                        #                 vert et bleu nuls
           }
         }
        geometry IndexedFaceSet {
             solid FALSE
             coord Coordinate {
                point [       # les 3 positions pour les trois sommets
                    -1  0  0  # point 0 x,y,z base à gauche
                     1  0  0  # point 1 x,y,z base à droite
                     0  1  0  # point 2 x,y,z en haut
				]
			}
            coordIndex [      # joindre les 3 points en sens anti-horaire
				0 1 2    
			]
		}
	}
}
# Envoyer les quatre fractions du cycle d'horloge interne à l'interpolateur 
# qui préparera les positions intermédiaires 
ROUTE myTimer.fraction_changed TO myPosInt.set_fraction 

# envoyer ces positions au Noeud Transform qui dessine l'objet
# dans ses positions successives
ROUTE myPosInt.value_changed TO myNode.translation 

DEF myTimer TimeSensor{ 
	cycleInterval 4    # un cycle = 4 secondes 
	loop TRUE          # le cycle est en boucle 
} 
DEF myRotInt OrientationInterpolator { 
	key [0 .25 .5 .75 1]    # le cycle est découpé en 4 phases de durée égale 
	keyValue [ 
        0 1 0 0             # phase 0 commence à 0 revolution autour de y 
        0 1 0 1.570796327   # phase 1 commence où phase 0 finit, quart de tour 
        0 1 0 3.141592654   # phase 2 commence où phase 1 finit, demi tour 
        0 1 0 4.71238898    # phase 3 commence où phase 2 finit, 3 quarts de tour 
        0 1 0 6.283185307   # phase 3 finit après un tour complet, on recommence
	] 
} 

DEF myNode Transform {
	children 
	Shape {
		appearance Appearance {
			material Material { #Colorer le triangle en rouge
				diffuseColor 1 0 0  # r v b = plein rouge, vert et bleu nuls
			}
		}
		geometry IndexedFaceSet {
			solid FALSE
			coord Coordinate {
				point [         # les 3 positions des 3 sommets
					-1  0  0  # point 0 x,y,z = base gauche
					 1  0  0  # point 1 x,y,z = base droite
					 0  1  0  # point 2 x,y,z = haut
				]
			}
			coordIndex [        # joindre lese 3 points en sens anti-horaire
				0 1 2	
			]
		}
	}
}
# Envoyer les quatre fractions du cycle d'horloge interne à l'interpolateur  
ROUTE myTimer.fraction_changed TO myRotInt.set_fraction 

# envoyer ces positions au Noeud Transform qui dessine l'objet
# dans ses positions successives
ROUTE myRotInt.value_changed TO myNode.rotation

DEF myTimer TimeSensor{ 
    cycleInterval 4    # une cycle = 4 secondes 
    loop TRUE          # le cycle est en boucle 
} 
DEF myRotInt OrientationInterpolator { 
    key [0 .25 .5 .75 1]    # break the cycle down to 4 phases of time all of equal length 
    keyValue [ 
        0 1 0 0             # phase 0 commence à 0 revolution autour de y 
        0 1 0 1.570796327   # phase 1 commence où phase 0 finit, quart de tour 
        0 1 0 3.141592654   # phase 2 commence où phase 1 finit, demi tour 
        0 1 0 4.71238898    # phase 3 commence où phase 2 finit, 3 quarts de tour 
        0 1 0 6.283185307   # phase 3 finit après un tour complet, on recommence
	] 
} 

DEF myNode Transform {
	children 
	Shape {
		appearance Appearance {
			material Material {     # Colore le triangle en rouge
				
				diffuseColor 1 0 0	# r v b = plein rouge, vert et bleu nuls
			}
		}
		geometry IndexedFaceSet {
			solid FALSE
			coord Coordinate {
				point [
				point [       # les 3 positions des 3 sommets
					-1  0  0  # point 0 x,y,z = base gauche
					 1  0  0  # point 1 x,y,z = base droite
					 0  1  0  # point 2 x,y,z = haut
				]
			}
			coordIndex [
				0 1 2	# joindre lese 3 points en sens anti-horaire
			]
		}
	}
}
# Envoyer les quatre fractions du cycle d'horloge interne à l'interpolateur 
ROUTE myTimer.fraction_changed TO myRotInt.set_fraction 

# envoyer ces positions au Noeud Transform qui dessine l'objet
# dans ses positions successives 
ROUTE myRotInt.value_changed TO myNode.rotation

Ceci complète notre survol des procédures d'animation d'un triangle.

Note du traducteur : A partir d'ici, Thyme cesse de prodiguer des explications aussi détaillées, point à point. C'est que dès maintenant vous avez compris "comment ça marche". Par la suite, de nombreux exemples doivent suffire pour progresser, à supposer, c'est bien entendu, que vous les examiniez dans le détail. On ne survole pas, on suit le code, "le crayon à la main". Bon travail. Fin de note.

Deux Triangles avec leur Normale
Ce sont encore une fois les mêmes triangles que dans l'exemple twoTriangles.wrl en ce qu'ils ont les mêmes coordonnées et le même angle entre les deux. De même, ils sont toujours aussi plats, mais ils semblent courbes. Cette courbure est une illusion d'optique...

Note du traducteur (hilare) : Mais ... TOUT ce qu'on fait en 3d est une illusion d'optique! Un jour, un jour où nous serions au coin du feu, grignotant des noix et jetant les coquilles dans le feu, oh les jolies flammes, je vous dirai (en confidence) que le monde, le real life, le vrai monde qui nous entoure, est aussi une illusion d'optique, c'est un jeu video généré par les couches optiques de notre cerveau, mais il faudrait se lancer dans une tartine neurobiologique et nous n'avons pas le temps. Cependant, c'est bien en fournissant à ces mêmes couches optiques, grâce au Vrml, les informations qu'elles attendent que nous pouvons créer des "mondes" qui nous semblent justement si réalistes. Je bavarde je bavarde ... il faut rendre la parole à Thyme. Fin de note.

Quand vous aurez essayé quelques exemples en ajoutant de plus en plus de fonctions tug, une à la fois, de façon à ne pas prendre trop de risques sur l'endroit où se trouve celui sur lequel vous travaillez. Si vous ne savez plus où une des fonctions tug se trouve en train de tracter, faites-la temporairement tirer à une grande hauteur pour la repérer visuellement avec facilité. Revenez ensuite à la normale.

Animation de Triangles
       ( voir le code : AnimatedRotatingTriangles.wrl
       voir l'exemple : AnimatedRotatingTriangles.wrl )

Cet exemple est le même que twoTexturedTrianglesWithNormals.wrl sauf qu'on a ajouté un code d'animation pour que les triangles tournent autour de l'axe des x.

Morphing (déformation) de 2 Triangles

       ( voir le code : morphingTwoTexturedTrianglesWithNormals.wrl
       voir l'exemple : morphingTwoTexturedTrianglesWithNormals.wrl )

       ( voir le code : morphingBTwoTexturedTrianglesWithNormals.wrl
       voir l'exemple : morphingBTwoTexturedTrianglesWithNormals.wrl )