- Explication du principe qui permet de reproduire visuellement plusieurs niveaux de luminosité avec une matrice de pixels noir et blanc
- Le dithering est une technique qui représente par illusion d’optique davantage de couleurs ou de niveaux de luminosité qu’il n’y en a réellement
- Dans la méthode du ordered dithering, on utilise une carte de seuils (threshold map) pour décider si chaque pixel doit être noir ou blanc selon sa luminosité
- Au cours de ce processus, la variation de densité des pixels crée une impression de niveaux de gris tout en conservant la forme de l’image d’origine
- Cet article est le premier d’une trilogie consacrée aux bases du dithering, les suivants traiteront de l’algorithme de génération des cartes de seuils et de la diffusion d’erreur (error diffusion)
Concept et principe du dithering
- Le dithering est une technique visuelle permettant d’exprimer davantage de nuances avec une palette limitée
- En disposant des pixels noirs et blancs selon des motifs spécifiques, on crée l’illusion de plusieurs niveaux de gris
- Cela permet d’obtenir une diversité visuelle sans augmenter le nombre réel de couleurs
- L’article utilise une image en niveaux de gris comme exemple
- Sur un écran qui ne peut afficher que du noir et blanc, chaque pixel est converti vers la couleur la plus proche (noir ou blanc)
- Avec une conversion simple, les frontières de luminosité deviennent grossières et les détails des ombres se perdent
- Le dithering permet d’obtenir des transitions de luminosité plus douces en remplaçant volontairement certains pixels par la couleur opposée
- Dans les zones sombres, la densité de pixels noirs augmente, et dans les zones claires, celle des pixels blancs augmente
- Au final, la différence de densité des pixels forme l’illusion des niveaux de gris
Ordered dithering et carte de seuils
- Le ordered dithering est une méthode simple de dithering qui utilise une carte de seuils (threshold map)
- Une carte de seuils se compose d’une grille de valeurs de luminosité allant de 0 (le plus sombre) à 1 (le plus clair)
- La luminosité de chaque pixel en entrée est comparée au seuil correspondant à sa position
- Si la luminosité est supérieure au seuil, le pixel devient blanc ; si elle est inférieure, il devient noir
- En répétant ce processus sur tous les pixels, on génère une image en motif noir et blanc
- La carte de seuils est conçue pour produire des motifs de densité noir et blanc adaptés à la distribution de luminosité de l’image d’entrée
- Les zones claires ont une proportion plus élevée de blanc, et les zones sombres une proportion plus élevée de noir
- Cette différence de densité crée un effet qui ressemble à des niveaux de gris lorsqu’on regarde l’image de loin
Traitement des grandes images et effet visuel
- Lors du dithering d’images de grande taille, on étend la carte de seuils pour l’adapter à la taille complète de l’image
- On applique ensuite le même principe consistant à comparer la luminosité de chaque pixel au seuil pour le convertir en noir ou blanc
- Au final, l’image n’utilise que deux couleurs, tout en conservant la structure de luminosité de l’original
- Le nombre de couleurs est réduit, mais les détails visuels sont préservés grâce aux variations de densité des pixels
Sens du dithering et structure de la série
- Le dithering est une technique qui crée de la diversité visuelle non pas en ajoutant des couleurs, mais en les supprimant
- L’auteur le décrit comme « le fait de tirer le maximum de ce que l’on a »
- Cet article est le premier d’une trilogie et se concentre sur les principes de base et la compréhension visuelle
- Le prochain article traitera de l’algorithme de génération des cartes de seuils, et le dernier de la diffusion d’erreur (error diffusion)
- La série prévoit d’explorer les différentes approches algorithmiques du dithering et les écarts dans les résultats visuels
Présentation de l’auteur et du projet
- visualrambling.space est un projet personnel géré par Damar
- Il produit des contenus interactifs qui explorent et expliquent visuellement divers sujets
- Parmi les thèmes abordés figurent Three.js, WebGL, le dithering, la visualisation et l’apprentissage interactif
- Damar prévoit de continuer à partager de nouveaux articles visuels via son compte X/Twitter (@damarberlari)
2 commentaires
Avis Hacker News
C’est une technique de halftone. Autrement dit, une manière de donner l’impression qu’il y a plus de couleurs que dans la palette réelle, mais à mes yeux ce n’est pas du dithering
pour moi, le dithering est une technique qui sert à supprimer le banding causé par une palette trop limitée
le halftone montré ici étend une palette de 2 couleurs à environ 20 couleurs, mais le banding reste très visible
ce banding peut être éliminé soit en utilisant bien plus de couleurs (par ex. 256 niveaux de gris, ou 256³ pour le RGB), soit avec du dithering
la technique d’error diffusion annoncée à la fin est probablement ce dont je parle
l’élément clé du dithering, c’est le bruit, et cette démo n’en contient aucun. Tout y est déterministe
cela dit, la présentation en elle-même était vraiment superbe
en général, le bruit apparaît dans le processus de quantization, et le dithering est la technique qui façonne ce bruit
le Bayer-matrix ordered dithering utilisé ici concentre le bruit dans les hautes fréquences pour qu’il soit moins visible, mais du banding subsiste encore dans les basses fréquences
Comme l’a dit Dave Long, l’algorithme de tracé de ligne de Bresenham peut aussi être vu comme une forme de dithering. Le signal n’est simplement pas la luminosité, mais la position du stylo
il y a eu une discussion connexe il y a quelques jours — voir ce fil
Article Wikipédia
autrefois, les machines couleur NeXT avaient des écrans 12 bits (4 bits par canal), mais avec un bon dithering elles donnaient l’impression d’un true color 24 bits
Je recommande deux vidéos de Daniel Shiffman sur Coding Train
Turning Images into Dots: The Magic of Dithering
Coding Challenge 181: Weighted Voronoi Stippling
Sujet intéressant. L’animation était réussie et on sentait le travail derrière
mais ce genre de présentation interactive est plus difficile à lire qu’un billet de blog traditionnel
on ne perçoit pas immédiatement la structure du texte, et comme il faut lire phrase par phrase, c’est difficile à parcourir rapidement
c’est un peu comme une vidéo interactive dont l’utilisateur peut contrôler le rythme
en général je préfère le texte moi aussi, mais je trouve que c’est une variation intéressante
J’ai utilisé l’ordered dithering et l’error diffusion dithering comme langage visuel dans plusieurs projets de design
surtout dans des travaux liés à la tech / l’informatique / la blockchain, en version statique ou animée
il y a dans cette vieille technique une sorte de chaleur et de nostalgie qui se marie bien avec des idées nouvelles
On peut voir des exemples de mon travail sur Instagram :
D.Y.O.R. / Printed / Titles / Expériences de dithering
voir mon site olsz.me
J’avais déjà créé une transition entre deux types de dithering
Projet GitHub
J’avais très envie d’aimer ça, mais c’était vraiment trop difficile de lire du texte sur des motifs en mouvement
La visualisation était superbe, mais je n’ai pas compris la partie sur la threshold map
il manquait des explications sur la manière de construire la carte et de fixer les seuils
je ne sais pas si c’était tellement évident pour l’auteur qu’il a jugé inutile de l’expliquer
l’essentiel est de garder en tête le concept de « threshold ». Un pixel gris devient noir ou blanc selon ce seuil
par exemple
dithered_color = (raw_color > threshold_color) ? white : blackon peut aussi utiliser un threshold aléatoire. Tant que sa moyenne vaut 0.5, il approxime bien le gris d’origine
l’important est d’éviter que les pixels blancs se collent les uns aux autres au fur et à mesure qu’ils deviennent plus nombreux
un gris à 50 % peut être conçu comme un motif en damier, 25 % comme un seul pixel blanc dans un bloc 2x2, etc.
c’est amusant à expérimenter directement sur ShaderToy
au début, je pensais qu’on utilisait une « image binaire » en entrée, puis plus tard il s’est mis à utiliser des zones grises en entrée
Le dithering peut faire paraître une image comme du 10 bits même sur un moniteur qui ne prend pas réellement en charge la couleur 10 bits
le banding disparaît et le bruit masque le manque de profondeur de couleur
autrement dit, c’est encore une technique utile aujourd’hui, pas seulement pour le retro art
les gens pensent encore surtout au palette dithering
8 bits par canal, ce n’est pas suffisant. Avec la correction gamma, on n’a en pratique qu’environ 220 niveaux
je maintiens la crate Rust dithereens pour résoudre ce genre de problème
il suffit de regarder le dégradé en haut du README pour comprendre pourquoi c’est important
quand on réduit des images à haute profondeur de bits vers 10 bits ou 8 bits, un random dithering est souvent largement suffisant
Photoshop applique du dithering par défaut lors de la conversion de 16 bits vers 8 bits
d’autres logiciels ne le font pas, et on s’en rend vite compte quand un grand poster imprimé présente du banding
cela permettait à des dalles TN 6 bits de sembler 8 bits, et c’est encore utilisé aujourd’hui pour le HDR-10
c’est un algorithme simple qui mélange les couleurs en faisant clignoter rapidement les pixels
Article Wikipédia sur le Frame rate control
Le format de présentation était excellent et j’attends la suite avec impatience
j’avais déjà utilisé l’ordered dithering dans un ZX Spectrum Raytracer ; l’implémentation était simple et le résultat très bon
Lien vers le projet
dans les années 80, cela semblait peu utilisé à cause des contraintes de performance. En revanche, je me souviens en avoir vu dans les arrière-plans de Windows 3.1 ou de Monkey Island VGA dans les années 90
Démo très sympa, mais qualifier le dithering d’« illusion de plus nombreuses nuances » ne me paraît pas très exact
si on applique un filtre passe-bas à une image dithered, ces nuances intermédiaires existent réellement
c’est un peu comme un amplificateur de classe D qui produit un signal impulsionnel, mais qui devient après filtrage un véritable son analogique
au fond, notre vision et la distance jouent elles-mêmes le rôle de ce filtre
si on regarde attentivement, on voit bien que cette couleur n’existe pas réellement
on perçoit du gris avec seulement des pixels noirs et blancs, tout en sachant en même temps qu’il s’agit d’une illusion d’optique
donc je trouve que le mot « illusion » convient bien
En laissant de côté le texte pour ne proposer qu’une présentation en amphithéâtre sous forme de vidéo interactive, c’est un objet d’une classe folle, au point de faire exploser la scène. La séquence qui montre une image en niveaux de gris transformée en couches 3D me semble être une explication particulièrement claire.