- 白黒のピクセル配列で複数段階の明暗を視覚的に再現する原理を説明
- ディザリング(dithering) は、実際より多くの色や明暗の段階を錯視で表現する技術
- Ordered dithering 方式では、しきい値マップ(threshold map) を使って各ピクセルの明るさを基準に白黒を決定
- この過程でピクセル密度の変化がグレースケールの印象を生み出し、元画像の形状を維持
- この記事はディザリングの基本概念を扱う3部作の第1回で、今後はしきい値マップ生成アルゴリズムと誤差拡散(error diffusion) を扱う予定
ディザリングの概念と原理
- ディザリングは限られた色でより多くの色調を表現するための視覚的技法
- 白黒ピクセルを特定のパターンで配置し、複数段階のグレースケール錯視を生成
- 実際の色数を増やさずに視覚的な多様性を確保
- 記事ではグレースケール画像を例として使用
- 白黒しか表示できない画面で、各ピクセルを最も近い色(黒または白) に変換
- 単純変換では明暗の境界が粗くなり、細かな影の情報が失われる
- ディザリングは一部のピクセルを意図的に反対の色へ置き換えることで、滑らかな明暗の変化を実現
- 暗い領域では黒いピクセル密度を高め、明るい領域では白いピクセル密度を高める
- 結果としてピクセル密度の差がグレースケールの錯視を形成
Ordered Ditheringとしきい値マップ
- Ordered ditheringはしきい値マップ(threshold map) を使うシンプルなディザリング手法
- しきい値マップは 0(最も暗い) から 1(最も明るい) までの明るさ値グリッドで構成
- 各入力ピクセルの明るさを、対応する位置のしきい値と比較
- 明るさがしきい値より大きければ白、小さければ黒に設定
- この処理をすべてのピクセルに繰り返して白黒パターン画像を生成
- しきい値マップは入力画像の明るさ分布に応じて、適切な白黒密度パターンを出力するよう設計される
- 明るい領域は白の比率が高く、暗い領域は黒の比率が高い
- こうした密度差が離れて見るとグレースケールに見える効果を生み出す
大きな画像の処理と視覚効果
- 大きな画像をディザリングする際は、しきい値マップを拡張して画像全体のサイズに合わせる
- 各ピクセルの明るさをしきい値と比較して白黒に変換する同じ原理を適用
- 結果として画像は2色しか使わないにもかかわらず、元画像の明暗構造を維持
- 色数は減っても、ピクセル密度の変化によって視覚的な細部表現を維持
ディザリングの意味とシリーズ構成
- ディザリングは色を追加するのではなく、削減しながら視覚的な多様性を生み出す技術
- 筆者はこれを「持っているもので最大限を作り出す過程」と表現
- 今回の記事は3部作の第1回で、基礎原理と視覚的理解に焦点を当てる
- 次回はしきい値マップ生成アルゴリズムを、最終回は誤差拡散(error diffusion) を扱う予定
- このシリーズでは、ディザリングにおけるさまざまなアルゴリズム的アプローチと視覚的結果の違いを探っていく予定
筆者とプロジェクト紹介
- visualrambling.space は Damar が運営する個人プロジェクト
- さまざまなテーマを視覚的に探究し説明するインタラクティブコンテンツを制作
- 扱うテーマには Three.js, WebGL, ディザリング, 可視化, インタラクティブ学習 などが含まれる
- Damar は X/Twitter アカウント(@damarberlari)を通じて、新しいビジュアル記事を継続的に共有する予定
2件のコメント
Hacker Newsのコメント
これは halftone 手法だね。つまり、実際のパレットよりも多くの色があるように見せる方式で、私の見る限り dithering ではない
dithering は、パレットが十分に大きくないことで生じる banding をなくす技術だと考えている
ここで示されている halftone は 2 色パレットを 20 色程度に拡張しているが、それでも banding ははっきり残っている
こうした banding は、もっと多くの色を使うか（例: 256 段階グレースケール、RGB なら 256³）、あるいは dithering で除去できる
たぶん最後に予告されていた error diffusion 手法が、私の言っている部分だと思う
dithering の核心は ノイズ にあるが、このデモにはノイズがまったくない。すべてが決定的（deterministic）だ
それでもプレゼンテーション自体は本当に素晴らしかった
一般にノイズは量子化（quantization）の過程で生じ、dithering はそのノイズを 整形 する技術なんだ
ここで使われている Bayer-matrix ordered dithering は、ノイズを高周波領域に集中させて目立ちにくくするが、低周波領域には依然として banding が残る
Dave Long が言うように、Bresenham の線描画アルゴリズム も一種の dithering と見なせる。信号が輝度ではなくペンの位置だというだけだ
関連する議論は数日前にもあった — このスレッド 参照
Wikipediaの記事
昔の NeXT カラーマシンは 12 ビット（チャネルごとに 4 ビット）ディスプレイだったが、dithering をうまく使うと 24 ビット true color のように見えた
Daniel Shiffman の Coding Train 動画を 2 本おすすめする
Turning Images into Dots: The Magic of Dithering
Coding Challenge 181: Weighted Voronoi Stippling
興味深いテーマだった。アニメーションも良く、努力の跡が感じられた
ただ、こういう インタラクティブなプレゼンテーション は従来のブログ記事より読みづらい
文章の構造がひと目で入ってこないし、文ごとに読まないといけないので、素早くざっと見るのが難しかった
ユーザーが速度を調整できる インタラクティブ動画 という感じだ
私も普段はテキストを好むけど、こういう形式は悪くない変化だと思う
私はいくつものデザインプロジェクトで ordered と error diffusion dithering をビジュアル言語として使ってきた
特に テック/コンピューター/ブロックチェーン 関連の仕事で、静止画やアニメーションの形で活用していた
こうした古い技術には独特の 温かみとノスタルジー があって、新しいアイデアと組み合わせるのに向いている
私の作例は Instagram にある:
D.Y.O.R. / Printed / Titles / Dithering実験
私のサイト olsz.me を参照
以前、2 種類の dithering を切り替えるものを作ったことがある
GitHubプロジェクト
これを本当に気に入りたかったんだけど、動くパターンの上のテキスト を読むのがあまりにもつらかった
可視化の仕方は素晴らしかったが、threshold map の部分が理解できなかった
マップをどう作り、しきい値をどう決めるのかの説明が足りなかった
著者にとってはあまりに自明で省略されたのかもしれない
核心は「threshold」の概念を覚えておくこと。灰色のピクセルはしきい値を基準に白黒へ変わる
例えば
dithered_color = (raw_color > threshold_color) ? white : blackthreshold をランダムに使ってもよい。平均値が 0.5 になれば元のグレーをうまく近似できる
重要なのは、白いピクセルが徐々に増えるときに互いにくっつかないようにすることだ
50% グレーなら チェッカーボードパターン、25% なら 2x2 のうち 1 ピクセルだけ白、といった設計ができる
こういう実験は ShaderToy で直接やってみると面白い
最初は「二値画像」を入力に使うのかと思ったが、後になるとグレー領域を入力にしていた
dithering は、10 ビットカラーをサポートしないモニターでも十分に 10 ビットらしく見せられる
banding が消え、ノイズが色深度不足を隠してくれる
つまり、現代でも有用な技術だ。単なる レトロアート 用ではない
みんなはいまだに パレット dithering だけを思い浮かべる
8 ビット/チャネルでは十分ではない。ガンマ補正のせいで、実際には約 220 段階程度しかない
私はこうした問題を解決するために、Rust crate の dithereens をメンテしている
README 冒頭のグラデーションを見れば、なぜ重要かすぐわかる
高ビット画像を 10 ビットや 8 ビットに落とすとき、ランダム dithering で十分効果がある
Photoshop は 16 ビット→8 ビット変換時にデフォルトで dithering を適用する
他のソフトウェアはそうではないので、大きなポスターを印刷するときに banding が出るとすぐ気づくことになる
6 ビット TN パネルを 8 ビットのように見せていたし、今では HDR-10 にも使われている
これはピクセルを高速に点滅させて色を混ぜる単純なアルゴリズムだ
Frame rate control のWikipedia記事
プレゼンテーション形式が素晴らしく、次のパートも楽しみだ
以前 ZX Spectrum Raytracer で ordered dithering を使ってみたことがあるが、実装が簡単で結果も良かった
プロジェクトリンク
80 年代には性能上の問題であまり使われなかったように思う。90 年代の Windows 3.1 や Monkey Island VGA の背景では見た記憶がある
素晴らしいデモだったが、dithering を「より多くの色調の 幻想(illusion) 」と呼ぶのは正確ではない気がする
dither された画像を ローパスフィルタ に通すと、実際にその中間色調は存在する
ちょうど クラスDアンプ がパルス信号を出力しても、フィルタ後には実際のアナログ音になるのと同じだ
結局、私たちの視覚や距離そのものがそのフィルタの役割を果たしている
注意深く見れば、実際にはその色が存在しないとわかる
白黒ピクセルだけでグレーを認識するが、同時にそれが錯視だとも認識できる
だから “illusion” という表現は合っていると思う
テキストは抜きで、映像だけで講堂で講義するというインタラクティブビデオへのアプローチで、壇上を引き裂いてしまうほど圧倒的に格好いいアイテムです。画像のグレースケールを3Dでレイヤー化して見せる場面は、とても親切な説明だと思います。