Median cut の仕組みをわかりやすく理解できる Visualize color reduction がめちゃくちゃおもしろい
とにかくわかりやすくて素晴らしい
今回ご紹介するのは、Yuki Teraoka（t4y3）さんが公開されている Visualize color reduction という技術デモ作品です。
WebGL を扱っていると、フラグメントシェーダなどを通じて、自然と画素単位で色を扱うという視点が徐々に身についてくると思うのですが、今回の事例もそういった画像処理系のアルゴリズムをテーマにした作品ですね。
メインテーマは color reduction、つまりあえて直訳すると色の量子化ということになるでしょうか。もっとわかりやすく日本語で表すなら「使われている色の種類を減らす減色処理」という感じですね。
今回のサイトでは、この減色処理を 3D 的に可視化することで、Median cut という減色のアルゴリズムがどのように機能しているのかを直感的に理解することができます。
リンク：
教材にもなりそうな高い完成度
今回のサイトで動いている実装は、Yuki Teraoka さんの GitHub アカウント上でソースコードも紹介されていて、実装は TypeScript で書かれているみたいです。
動いているものは WebGL による 3D 描画になっていて、ベースになる画像を与えてやるとそれを Median cut のアルゴリズムで減色処理します。
結果が表示されるまでの過程はすべてアニメーションで表示されるので、このサイトで示されている CG がどういうことを意味しているのかをある程度わかった状態で見てみると、すごくわかりやすいんじゃないかなと思います。
まずページがロードされた直後は上のスクリーンショットのような状態です。
ここには英語で「減色アルゴリズムはすごく難しいものなので、この可視化事例を通じて理解が進むことを願っています」といったような意味のことが書かれています。めちゃくちゃ素晴らしいコンセプトですよね…… もうこの時点で感動モノなのですが、動かしてみるとさらにいろいろな驚きがあります。
こちらのトップページ上にローカルにある画像をドラッグ・アンド・ドロップするか、もしくは下に並べられているデモ用画像を使うことで、動作を確認することができます。
画像が選択されると自動的に 3D シーンになるのですが、画面の下の部分にはタイムラインが表示されており、任意のタイミングで一時停止したりもできますし、カメラを自由に動かしてアングルを変えながら見ることができます。
まず、対象となった画像に使われているすべての色が、パーティクルのように抜き出されて左から右へと浮き上がってプロットされていきます。
プロットされたパーティクルはさらに、Median cut のアルゴリズムによって空間ごとに分割されていき……
その空間の中間色が割り出されます。
最終的には同じ空間に所属しているすべての色を、空間に割り当てられた中間色で置き換える感じですね。
こうすることでフルカラーだった画像が減色（リダクション）されて、最終的な結果が右側に表示されます。
リダクションされた画像は、当然といえば当然なのですが、どこかファミコンなどの古いコンピューターを連想させるような質感に仕上がります。
グラフィックスプログラミングにあまり親しみがないと、色ってあくまでも感覚的なもののように脳内で処理されてしまいがちですが……
コンピューターグラフィックス的には当然ながら色は数値で表されるものであり、今回のケースのようにロジカルにアルゴリズムを割り当てていくことで、いろいろな画像処理や変換処理、エフェクト処理などが成り立っています。
この事例は減色処理をメインのテーマとして可視化したものですが、3D のインタラクティブデモになることで本当に直感的でわかりやすく、興味を掻き立てられるようなコンテンツになっていると思います。
本当に、すごいです。
ぜひチェックしてみてください。
