Dessiner un cube représente le Hello world du programmeur de démo ( et réaliser un jeu de Tetris le Hello world du programmeur de jeux).
Aussi à chaque occasion nous ne manquons pas de tester les afficheurs qui nous tombent sous la main avec ce genre d'animation.
Cas du javascript
Le javascript permet tous les calculs mathématiques dont nous avons besoin. La difficulté reste l'affichage, aucune facilité de dessin n'étant disponible.
Pour simuler des pixels, j'ai choisi d'utiliser des objets DIV positionnés en absolu. Chaque pixel d'une ligne dessinée est donc une DIV.
Certains navigateurs récents intègrent un objet approprié, le canvas qui peut servir d'afficheur, mais en 2001, date où j'ai écrit ce programme, il n'existait pas.
3D 'fil de fer'
La procédure de tracé de ligne est une réécriture de l'algorithme de Bresenham. Chaque "pixels" est représenté par une DIV minuscule, aussi chaque ligne peut se révéler très coûteuse à dessiner. Pour limiter le nombre de pixels, toutes les astuces sont bonnes, comme les lignes en pointillé pour les arrêtes cachées.
3D faces pleines
Une routine classique de rasterisation ( découpage d'un triangle en tranches horizontales) est utilisée pour remplir les triangles.
La principale optimisation consiste à utiliser une DIV de 1 pixel de hauteur pour chaque ligne horizontale d'une face triangle. Cette div est positionnée en absolu, ajustée en largeur, et colorée de la couleur de la face.
Une optimisation plus fine, mais qui a permit de réduire par deux le nombre de DIV, fut de regrouper les deux lignes horizontales juxtaposées d'une face carrée ( 2 triangles ) en un seul raster horizontal.
Enfin, pour améliorer le frame rate, des petits ajustements à la procédure de tracés de polygones permettent de dessiner des "gros" pixels ( DIVs de 2 pixels de haut ou plus ).
