« プログラマー的デザイン表現 | トップページ | やりがい »

2009年3月19日 (木)欠損?

おはようございます。本日の当番、プログラマのM.L.Kです(LはLoseのLです。Lose&Loose!)。

近所の駅前の自動販売機が、お金を入れると、おっさんの声で、
「おはようさん!すこしずつ…」
とか、勝手に話しかけてくるにもかかわらず、商品のボタンを押すと、
「ぴんぽ~ん!(←おっさんの声)」
とか言って、勝手に話をブッタ切られて、
「すこしずつ、何やねん!」
と、朝からブチ切れる昨今、皆様はいかがお過ごしでしょうか?

さて、昨日のブログでは、デザイン的な観点からの足し算が話題になりました。
ですので、今回は引き算の話をしたいと思います。
ゲーム制作のお母さん的立場であるプログラマは、引き算の1つもできないと、家計のやりくりが大変なんやから贅沢な事ばっかり言ったらだめ!ゼッタイ!
と、いうことなのですよ。
まあ、デザイン的な観点か、と言われちゃうと、びみょ~ですが。

では、早速サンプルどんっ!

2009_0318_01
図1.元画像

これを減色してみよう、という魂胆です。
ただ、これをそのまま使うというのでは、説明が困難になるので、ちょっと小細工。

というわけで、さらにどんっ!

2009_0318_02
図2.青チャンネル無し

赤チャンネルと緑チャンネルのみの画像にしました。説明の都合上、青チャンネルが加わると立体的な図示が必要となり、ややこしいので。

これを、64色に減色してみます。
(1600万色→256色が一般的なのですが、チャンネルが少ない分、差を判り易くするために、6万5千色→64色で減色してみます)

さて、図2の画像は各チャンネル256階調なので、これを各8階調にすれば、8×8=64となり、64色に減色できそうです。というわけで、やってみます。

2009_0318_03
図3.単純量子化

う~ん。私の濁った眼(まなこ)からみても、これはないわ~、てカンジです。
右下の部分とか、暗く塗りつぶされたみたいになってるし。
通常のCGツールや減色ツールなんかでは、もっとちゃんとした減色ができてると思うんだけど、どうなってんの?

というわけで、メディアンカット法という、別の方法で減色してみます。

2009_0318_04
図4.メディアンカット

今度の結果は、先程のものよりかなりマシです。少なくとも、私の目にはこれで十分(濁っているので)。
でも、さっきのと、今度のヤツとでは何が違うの?

2009_0318_05
図5.色分布図

上の図は、図2の画像でどういう色が使用されているのかを表しています。
注目して頂きたいのは左上の色の点が全くない部分。

ここは緑色が占める部分なのですが、まったく使用されていません。
図3の結果では、単純に階調を減らしているだけなので、この緑の部分を、64色の一部として、確保してしまっているのです(確保するだけなので、図3では使われてすらいない!)。

メディアンカット法では、こういった無駄を出さないよう、各チャンネル毎に使用されている階調を考慮し、分割する幅を変えていく方法なのです。

ハイクオリティなグラフィックが求められるようになってから、テクスチャの解像度も膨れ上がる一方です。
いかに沢山のテクスチャをメモリ上に載せるのかが、どの開発でも頭を悩ませることになります。

減色はそんな問題を解決する方法の1つ。
今回挙げたメディアンカット法もごく基本的な技術で、現在では、他にも様々な減色方法が考案されています。

どの方法がどういったケースで適切なのか、その判断もプログラマには求められます。
奥が深い分野でもあるので、「減色」をキーワードにググって見ると面白いかもしれません。

follow us in feedly
result = encodeURIComponent( "http://www.accessgames-blog.com/blog/2009/03/post-185e.html" );document.write( "result = " , result );&media=https%3A%2F%2Ffarm8.staticflickr.com%2F7027%2F6851755809_df5b2051c9_z.jpg&description=Next%20stop%3A%20Pinterest">

| | コメント (0) | トラックバック (0)

« プログラマー的デザイン表現 | トップページ | やりがい »

プログラマー」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック


この記事へのトラックバック一覧です: 欠損?:

« プログラマー的デザイン表現 | トップページ | やりがい »