Moteur graphique

Dessiner des volumes

Vitesse : Instantanément Cube par cube

Figure :

Comment ça marche ?

Tout d'abord, il faut savoir que j'ai créé ce moteur en le rendant le plus paramétrable possible. Ainsi la vitesse de dessin, la vitesse de la "buse" (cube noir dans le dessin cube par cube), la taille des cubes, la couleur de chaque cube, etc... sont tous paramétrables. C'est aussi pour cela que j'ai mis en place le système d'équation qui permet de dessiner n'importe quelle forme.

Pour chaque forme on définit tout d'abord des coordonnées minimales et maximales où on va tester s'il faut placer un cube. Ainsi pour dessiner une sphère de centre (10;10;10) et de rayon 5 cubes, les coordonnées minimales seront (5;5;5) et les maximales seront (15;15;15). Tous les cubes dont les coordonnées (entières) sont dans cet "intervalle" ne feront pas tous parties de la sphère mais cela permet d'avoir un intervalle simple (un parallélépipède) à tester.
On définit ensuite l'équation cartésienne de cette forme. Ainsi pour cette sphère, l'équation sera :
(x-10)² + (x-10)² + (x-10)² ≤ 5²
Pour chaque cube dont les coordonnées (entières) sont dans l'intervalle, on vérifie si l'équation cartésienne est vérifiée (en fonction de x, y, z entiers). Si l'équation est vérifié, alors le cube à ces coordonnées font partie de la forme (ici une sphère). Avec l'exemple précédent (on commence donc avec (5;5;5):
- (5;5;5), pas vérifiées : (-5)² + (-5) ² + (-5)² > 25
- (6;5;5), pas vérifiées : (-6)² + (-5)² + (-5)² > 25
- ...
- (10;10;10), vérifiées : 0² + 0² + 0² ≤ 25
- (13;8;11), vérifiées : 3² + (-2)² + 1² ≤ 25
- ...
- (14;14;14), pas vérifiées : 4² + 4² + 4² > 25
On va devoir ensuite dessier les "cubes" trouvés
- Dans le cas où on veut dessiner instantanément on va déjà réaliser une optimisation. Si un cube donné à un autre cube devant lui et au dessus de lui et à droite, alors en perspective cavalière ce cube ne sera pas visible. Inutile de le dessiner, on le supprime de la liste à dessiner.
- Dans le cas du cube par cube, chaque cube sera dessiner
On range ensuite les cubes par un ordre de dessin. Tout d'abord les cubes les plus proches du bas (y le plus petit), puis ceux les plus au fond (z le plus grand) puis ceux les plus proches de la gauche (x le plus petit).
On dessine chaque cube qu'il nous reste dans la liste triée par ordre. Imaginons la liste non triée suivante : [(0;0;0); (0;0;1); (0;1;1); (1;0;1)]. La liste triée sera [(0;0;1); (1;0;1); (0;0;0); (0;1;1)]. En dessinant instantanément, le cube (0;0;1) ne sera pas dessiné car il est en réalité caché par les autres cubes.
Pour dessiner chaque cube, on calcule d'abord les coordonnées en 2D des sommets visibles du cube, selon la formule vue à l'accueil. On trace ensuite les trois faces visibles grâce à ces coordonnées. Si on dessine cube par cube, il faut aussi faire bouger le cube qui représente la buse de l'imprimante 3D. C'est l'une des parties les plus complexes car il faut bouger la buse toutes les 16ms pour avoir une animation fluide (60 FPS : 60 Frames per second).

Tout le code Javascript (et non commenté) de mon moteur graphique se trouve ici : Code source