Construction d'un cube 3D avec PureBasic

Huit sommets pourraient suffire pour créer un cube. Vous trouverez un exemple de cube construit avec 8 sommets dans votre répertoire PureBasic, puis Examples\Sources\MeshManual.pb.

Dans ce tutoriel notre cube sera composé de 4 sommets par face, soit 24 sommets.

Ainsi chaque face du cube est indépendante, en effet aucune n'a de sommet en commun avec une autre. Il est alors possible d'affecter une couleur par face ou de calculer très simplement les coordonnées uv pour chaque sommet.

La position des sommets est déterminée de façon à centrer le cube sur ses axes de rotation et de façon à ce que les côtés du cube aient une taille de 1.
Prenons par exemple la face du haut, elle est définie par les sommets numérotés de 0 à 3 :

;Face du dessus avec les sommets 0 à 3
;Sommet 0
Data.f -0.5,0.5,-0.5 ; x,y et z
;Sommet 1
Data.f 0.5,0.5,-0.5 ; x,y et z
;Sommet 2
Data.f 0.5,0.5,0.5 ; x,y et z
;Sommet 3
Data.f -0.5,0.5,0.5 ; x,y et z

Ce qui nous permettra par la suite de mieux maîtriser les dimensions de nos entités. Pour obtenir une entité de forme rectangulaire de 100 de largeur, 30 de hauteur et 10 de profondeur il suffira d'écrire :

ScaleEntity(#Entity, 100, 30, 10)

Pour que les effets de la lumière soient visibles, il faut ajouter le vecteur normal à chaque sommet constituant le mesh.
on peut l'obtenir simplement par le produit vectoriel de deux vecteurs directeurs du plan.

Le produit vectoriel peut se calculer ainsi :

Structure s_Vecteur
  x.f
  y.f
  z.f
EndStructure

Procedure ProduitVectoriel(*n.s_Vecteur, *v1.s_Vecteur, *v2.s_Vecteur)
  *n\x = (*v1\y * *v2\z) - (*v1\z * *v2\y)
  *n\y = (*v1\z * *v2\x) - (*v1\x * *v2\z)
  *n\z = (*v1\x * *v2\y) - (*v1\y * *v2\x)
  ProcedureReturn *n
EndProcedure

Voici la liste des procédures qui permettent de changer la couleur de chaque face du dé:

• UpColorCube(*Mesh.s_Mesh, Couleur) : Change la couleur de la face en haut.
• DownColorCube(*Mesh.s_Mesh, Couleur) : Change la couleur de la face en dessous.
• FrontColorCube(*Mesh.s_Mesh, Couleur): Change la couleur de la face avant.
• BackColorCube(*Mesh.s_Mesh, Couleur) : Change la couleur de la face arrière.
• LeftColorCube(*Mesh.s_Mesh, Couleur) : Change la couleur de la face gauche.
• RightColorCube(*Mesh.s_Mesh, Couleur): Change la couleur de la face droite.
• UpDateCube(*Mesh.s_Mesh) : Le changement de couleur est effectif lorsque cette commande est appelée.

Nous allons décrire ici le fonctionnement de la procédure DownColorCube(), le principe est identique pour les autres procédures.

Procedure DownColorCube(*Mesh.s_Mesh, Couleur)
  *Mem.s_Sommet = *Mesh\VBuffer + 4 * SizeOf(s_Sommet)
  For i = 0 To 3
    *Mem\co=Couleur
    *Mem + SizeOf(s_Sommet)
  Next i
EndProcedure

Cette procédure permet de modifier la couleur des sommets composant une face du cube, pour ce faire nous avons besoin de connaître l'adresse de ces sommets.

*Mem.s_Sommet = *Mesh\VBuffer + 4 * SizeOf(s_Sommet)

On ajoute 4 * SizeOf(s_Sommet) à l'adresse initiale *Mesh\VBuffer, car c'est la deuxième face dans les datas.

Ensuite il ne reste plus qu'à modifier la couleur des 4 sommets de la face :

  For i = 0 To 3
    *Mem\co=Couleur
    *Mem + SizeOf(s_Sommet) ; Pointe sur le sommet suivant
  Next i

Pour rendre la modification effective, nous devons à nouveau construire le mesh en appelant la fonction SetMeshData(), c'est le rôle de la procédure UpdateCube().

Procedure UpDateCube(*Mesh.s_Mesh)
   Flag = #PB_Mesh_Vertex | #PB_Mesh_Normal | #PB_Mesh_UVCoordinate | #PB_Mesh_Color
   SetMeshData(*Mesh\No, Flag  , *Mesh\VBuffer, 24)
EndProcedure

Rappel : Une face d'un dé est composée de 4 sommets, à ces sommets il est possible d'associer des coordonnées u et v d'une texture.

Prenons l'exemple de la face du dessous du dé, j'ai décidé arbitrairement d'afficher le '2'.
Voici un extrait des datas correspondant à la face du dessous, je n'ai gardé que les coordonnées uv des sommets qui composent cette face :

#Tiers = 1.0/3.0

;Dessous 4 à 7
;Sommet en haut à gauche
Data.f #Tiers, #Tiers ; u = 1/3 & v = 1/3

;Sommet en haut à droite
Data.f #Tiers*2,#Tiers ; u = 2/3 & v = 1/3

;Sommet en bas à droite
Data.f #Tiers*2,#Tiers*2 ; u = 2/3 & v = 2/3

Sommet en bas à gauche
Data.f #Tiers,#Tiers*2 ; u = 1/3 & v = 2/3

on retrouve bien les coordonnées qui encadrent notre '2' dans l'image ci dessus.

Pour afficher la texture entière sur la face du dessous changez les coordonnées ainsi :

;Dessous 4 à 7
;Sommet en haut à gauche
Data.f 0, 0  ; u = 0 & v = 0

;Sommet en haut à droite
Data.f 1,0   ; u = 1 & v = 0

;Sommet en bas à droite
Data.f 1,1   ; u = 1 & v = 1

Sommet en bas à gauche
Data.f 0,1   ; u = 0 & v = 1

Pour créer une mosaïque avec la texture sur la face du dessous changez les coordonnées ainsi :

;Dessous 4 à 7
;Sommet en haut à gauche
Data.f 0, 0  ; u = 0 & v = 0

;Sommet en haut à droite
Data.f 2,0   ; u = 2 & v = 0

;Sommet en bas à droite
Data.f 2,2   ; u = 2 & v = 2

Sommet en bas à gauche
Data.f 0,2   ; u = 0 & v = 2

Avec le code ci dessus , la texture sera répétée 4 fois sur la face du dé. 2 fois en largeur et 2 fois en hauteur.

Il est possible de faire tourner la texture de la face en changeant les coordonnées :

#Tiers = 1.0/3.0

;Dessous 4 à 7
;Sommet en haut à gauche
Data.f #Tiers,#Tiers*2 ; u = 1/3 & v = 2/3

;Sommet en haut à droite
Data.f #Tiers, #Tiers ; u = 1/3 & v = 1/3

;Sommet en bas à droite
Data.f #Tiers*2,#Tiers ; u = 2/3 & v = 1/3

Sommet en bas à gauche
Data.f #Tiers*2,#Tiers*2 ; u = 2/3 & v = 2/3