Canalblog
Editer l'article Suivre ce blog Administration + Créer mon blog
Publicité
Ma vie est formidable,
31 juillet 2007

478. Anti-aliasing primaire

Avant de vous parler de la dernière chose qui m'a interpelé, je vais d'abord vous faire deviner le sujet au moyen d'un petit concours.

Observez les deux fines lignes obliques ci-dessous. Chacune est accompagnée d'un morceau grossi artificiellement, afin de voir le détail des pixels, sans devoir vous-même bidouiller (mais vous pouvez le faire si vous ne me croyez pas).

differenceLignesCouleurs

Normalement, la ligne de gauche devrait vous paraître plus lisse que celle de droite (cela peut dépendre en fait de votre type d'écran et de votre résolution d'affichage). Si ce n'est pas le cas, faites comme si, ou alors taisez-vous et laissez jouer les autres, nom de nom.
Pourtant, chaque ligne est la même que l'autre, après rotation de 180°. Comment bon Dieu est-il possible que leurs affichages diffèrent ainsi ? J'attends vos réponses (sauf si vous savez déjà parce que sinon c'est moins drôle et ça fout en l'air tout le suspense).


Eh bien voilà, des pistes correctes ont été données, il est donc temps de vous livrer les explications. Vous aurez déjà remarqué qu'il est inutile de tourner la tête ou l'écran, c'est toujours la même droite qui paraît plus lisse. Il ne s'agit donc pas d'un effet d'optique lié à notre perception des couleurs, mais bien à une spécificité de nos écrans.

Il s'agit en effet de l'utilisation d'une particularité des pixels de l'écran, composé en réalité de trois parties -- rouge, verte, bleue --, qui permettent de recomposer les couleurs en mélangeant plus ou moins de lumière de ces trois couleurs (système RGB).

Pour représenter une droite noire sur fond blanc avec des pixels, la première façon -- la plus simple -- est d'utiliser des pixels soit noirs soit blancs, disposés approximativement le long de la droite. Cela donne des décrochements, d'autant plus visibles que les pixels seront gros. Cette pixellisation, ou effet d'escalier, ou encore crénelage* (formation d'une crénelure, à savoir une dentelure en créneaux, comme dans les châteaux ou les nuages en rapport avec ceux-ci et appelés castellanus) peut être diminuée grâce à l'anti-crénelage, plus connu sous son nom anglais d'anti-aliasing.
(* Wikipedia et Wiktionary utilisent un accent grave, la majorité sur internet un accent aigu, le site mis en lien indique que l'accent grave serait officiel mais sans citer de source, mon dictionnaire indique un accent aigu, la sonorité un accent grave, la différentiation voulue avec le mot crénelage existant donnerait un accent grave, mais mon bon sens dirait qu'il vaut mieux utiliser cette graphie déjà existante, avec un accent aigu.)

Comment ça marche, cet anti-crénelage ? Les pixels qui sont à cheval sur le bord de la droite (et qui du coup ne sont ni complètement noirs, ni complètement blancs) sont affichés dans un ton de gris, plus ou moins fort selon la partie de droite qui lui passe au travers.
Évidemment, cela fonctionne bien pour des caractères décrit en terme de droites et de courbes (représentation vectorielle), mais plus pour une image décrite par ses points (bitmap), car on ne sait plus ce qui doit être crénelé et ce qui doit être lissé (à moins de tenter de repérer les lignes et les courbes dans l'image, chose faisable mais peu aisée, ou d'avoir une version plus grande de l'image à afficher et d'appliquer alors une interpolation ; on peut en revanche utiliser une diffusion, diffraction ou dithering). Il y a quelques exemples de plus sur la page anglophone de l'anti-aliasing.

antialiasingGris
La droite et deux lissages maison. Le dernier, plus
lisse, mais qui est aussi plus épais que la droite initiale.

*

En regardant de plus près un pixel couleur, on constate qu'il est composé en fait de trois sous-pixels de couleurs, alignés en colonnes. Il paraît donc logique de vouloir utiliser cette résolution supplémentaire pour décaler les pixels petit-à-petit, et non par bloc entier noir/blanc. Seulement, en décalant un pixel au niveau du sous-pixel, on n'aura plus la même intensité lumineuse dans les rouge, vert et bleu, et donc nos pixels ne seront plus noir, blanc ou gris !
Ce n'est pas grave, car l'oeil humain est moins sensible aux variations de couleur qu'aux variations d'intensité.

Voici donc nos exemples de droites, avec, cette fois en plus, le détail au niveau des sous-pixels. Bien entendu, cela marche tant qu'on a des sous-pixels verticaux et dans l'ordre RVB. Si vous possédez un autre type d'écran ou la possibilité de tourner l'affichage d'un quart de tour, vous aurez des surprises.

antialiasingDetail

Sur la deuxième ligne, la prise en compte des sous-pixels. D'abord, avec des sous-pixels complètement allumés ou éteints (correspond à la case juste en dessus, avec des pixels noirs ou blancs), et à droite, avec des sous-pixels plus ou moins allumés, donc en ajoutant l'effet anti-aliasing décrit plus haut.

Sur la troisième ligne, les couleurs sont inversées, comme si l'image était tournée de 180°. Cela fonctionnerait donc pour les écrans qui affichent des pixels BVR et non RVB.

D'autres images montrant les sous-pixels peuvent être vues dans l'article consacré à ClearType, qui est justement l'utilisation de cette technique par Microsoft, ou sur la page en anglais du Subpixel rendering.

EDIT : Vous pouvez désormais aller jouer un peu avec ces différents anti-aliasing, sur une page que j'ai faite en javascript (un peu longue à charger, puisqu'il faut créer 2000 cases de tableau ; attention avec les ordinateurs peu puissants).

Publicité
Commentaires
L
Merci pour cette lumineuse explication anceps !
T
Ah ben pour le coup, avec l'indice, c'est facile :)
L
J'attendais que quelqu'un se lance pour venir y ajouter ma petite graine, et pour vous faciliter la tâche mais pas trop quand même, tout est là :<br /> <br /> http://fr.wikipedia.org/wiki/Écran_à_cristaux_liquides
L
Serait-ce lié à la position relative des 3 pixels monocouleur (rouge-vert-bleu) qui, réunis, forment un seul pixel d'écrans ?
Archives
Publicité
Publicité