La dernière fois, j’ai parlé de la course du faisceau, un type de graphisme utilisé lorsque la mémoire était rare. Il est maintenant temps d’avancer vers l’avenir avec plus de mémoire et de parler de ce que les jeux 2D modernes font encore aujourd’hui : la rastérisation.
Justin temps Mémoire
Poursuivant la tendance établie par la course du faisceau, les graphiques rastérisés sont également sur une grille, mais beaucoup plus petite. Bien qu’il ne soit pas unique au pixellisation, le « frame buffer » est la conclusion logique de la fidélité du mode bitmap : suffisamment de mémoire est allouée pour que chaque pixel puisse avoir sa propre couleur. Ce qui est différent avec un frame buffer, c’est que tout est dessiné avant d’être affiché et, surtout, cela ne doit pas nécessairement se produire dans le même ordre que celui dans lequel les pixels sont affichés. La rastérisation dessine des formes entières (triangles, lignes et rectangles) dans le tampon d’image et l’écran est généralement mis à jour en même temps.
Cercles bruts
Vous avez peut-être remarqué que je n’ai pas mentionné les cercles plus tôt. C’est parce que nous ne dessinons pas réellement de cercles, nous les rapprochons. C’est vraiment simple : préférez-vous dessiner 50 triangles ou effectuer 10 000 calculs de distance ? Eh bien, si vous avez dit triangles, les ordinateurs sont d’accord avec vous.
Ce diagramme montre une représentation exagérée de la façon dont un cercle peut être approximé à l’aide de triangles. L’emplacement des triangles est assez évident ici, mais plus vous ajoutez de triangles, plus vous vous rapprochez d’un cercle parfait. Des formes plus complexes, comme du texte, des polygones et des formes abstraites, peuvent également être créées avec des triangles.
La situation difficile du complot
Mais le rapprochement des cercles n’est pas le seul problème en matière de rastérisation, le rapprochement des triangles est également un problème ! Il existe un nombre limité de pixels, ce qui signifie que tous les rectangles, sauf un rectangle parfaitement aligné, doivent être approximés lors du processus de rastérisation proprement dit.
Il existe plusieurs façons de rastériser des triangles, de gauche à droite : n’importe quel pixel qui touche le contour du triangle, n’importe quel pixel dont le centre se trouve à l’intérieur du triangle ou n’importe quel pixel qui se trouve entièrement à l’intérieur du triangle. La seconde (ou centrale) est la plus courante, car elle évite à la fois les chevauchements inutiles et les espaces inutiles, artefacts notables respectivement des deux autres méthodes. Un chevauchement inutile fait que les formes semi-transparentes montrent une couture de pixels plus opaques, tandis que des espaces inutiles font que la plupart des formes montrent une couture de pixels non tracés, ce qui est tous deux indésirables.
C’est bien beau, mais comment un ordinateur implémente-t-il réellement une telle chose ? Ma bibliothèque d’infographie le fait avec l’algèbre linéaire. Tout d’abord, je divise le triangle en un ou deux trapèzes avec une ligne supérieure et inférieure horizontale. Ensuite, je le divise en lignes horizontales imaginaires au centre vertical de chaque rangée de pixels. Enfin, je trace les pixels de gauche à droite à l’intérieur de ces lignes horizontales.
Les rectangles et les lignes sont plus simples : les rectangles ont toujours deux bords horizontaux et deux bords verticaux, ils peuvent donc être dessinés avec deux boucles for et les lignes sont généralement dessinées par simple interpolation linéaire entre les deux extrémités. Toutes les autres formes peuvent être dessinées en utilisant ces trois primitives comme je l’ai dit plus tôt.
Mathématiques colorées
Depuis le passage aux framebuffers, nous pouvons spécifier la couleur par pixel sans avoir à utiliser de palette, comme lors d’une course avec le faisceau. Cela ouvre la possibilité de formes semi-transparentes, de façons de dessiner du texte, des images et même des shaders.
Les shaders sont des programmes qui s’exécutent sur le GPU, mais ce que la plupart des gens pensent lorsqu’ils entendent des shaders sont en réalité des fragment shaders. Également connus sous le nom de pixel shaders, ils sont utilisés pour calculer la couleur d’un seul pixel de la forme.
La plupart des shaders de fragments utilisent les coordonnées de texture, également appelées coordonnées UV ou UV, comme variable principale. Que ce soit pour appliquer littéralement une texture (c’est-à-dire une image), ou pour changer la couleur (à droite). Les UV vont de 0 à 1 et sont principalement utilisés pour les images. Le carré au centre montre ses UV en rendant U (de gauche à droite) rouge et V (de haut en bas) vert. Les deux autres carrés montrent des effets possibles grâce aux UV, ce qui bien sûr change les couleurs.
Conclusion
La rastérisation est une technique de rendu qui tire parti des grandes quantités de mémoire dont disposent les ordinateurs. De par sa nature, il tire bien meilleur parti des processeurs parallèles sous forme de GPU et est beaucoup plus flexible que la course en faisceau. À l’aide de graphiques rastérisés, vous pouvez dessiner presque n’importe quoi, d’un simple cercle à une page Web complexe. Les graphiques rastérisés sont flexibles et utilisés partout aujourd’hui.
Restez à l’écoute pour la prochaine fois, quand je pimenterai les choses avec des mathématiques matricielles, plus d’images/sprites et plusieurs calques !
