« 美味しい年始 | トップページ | すべての色ふたたび績まるるを待つ »

2010年1月 6日 (水)プログラマー的デザイン表現(5)

新年明けましておめでとうございます。本日の当番、プログラマーの大川です。

年末年始を家でゴロゴロ過ごしたせいか、なかなかエンジンが掛かりにくい感じですが、本年も頑張って参りましょう!

年明け早々ブログ当番、焦りに焦った「プログラマー的デザイン表現」5回目。
今回は「頂点カラー」について考えます。といっても、頂点に色塗って終了!ではなく、頂点カラーを「別の情報」として活用してみます。

さて、頂点カラーとは読んで字の如く「頂点に色をつける」事にあります。
具体的な使い方としては、陰影情報として焼き付けたり、色自体をデザインとして表現します。

ですが、今回は頂点カラーを「テクスチャの分布図」として活用します。
RGBAの各要素を各テクスチャの濃度として定義し、これらをブレンドすることで様々なパターンを作り出そう、という試みです。

今回はピクセルシェーダを使います。
具体的な疑似コードは、以下のようになります。

 C.rgb = V.r * T[0].rgb + V.g * T[1].rgb + V.b * T[2].rgb + V.a * T[3].rgb;

  C = 出力カラー / V = 頂点カラー / T[0~3] = テクスチャ


まずは下の画像をご覧下さい。

<↓クリックすると拡大出来ます>

2010_0105_01_3


上記シェーダを使い、32x32のグリッド状のポリゴンに「草(V.r)」のテクスチャを適用した状態です。見れば判ると思いますが、テクスチャのリピート状態が露呈しており、リアリティも今ひとつです。

さて、ここからが本番。各ポリゴンの頂点カラーに「岩(V.g)」の要素を追加します。
イメージとしては、不規則にスプレーを吹き付ける感じです。すると、以下のようになります。

<↓クリックすると拡大出来ます>

2010_0105_02


草と岩のテクスチャが上手く混じり合い、なかなか良い感じになりました。
先程見られたテクスチャリピートによる不自然さも解消しています。

この状態の各テクスチャの混じり具合を頂点カラーで表現すると、以下のようになります。
現段階では、頂点カラーは2色(テクスチャ2枚)しか使用していません。

<↓クリックすると拡大出来ます>

2010_0105_03


最後に、要素「道路(V.b)」「雪(V.a)」として適用した結果が、以下になります。
蛇足ですが、地形の雰囲気を出すため、ポリゴンに起伏情報を付加しました。

<↓クリックすると拡大出来ます>

2010_0105_04_2


今回、全て即席で作ったものですが、結構良い感じになったのではないでしょうか。

「こんなことせんでも、一枚のテクスチャで覆ったらいいやん!」という意見もあるかと思いますが、テクスチャのメモリ消費量、自然なテクスチャを書く労力を考えると、この手法が断然お得です。ペイント感覚で作業出来るというお手軽さもポイントでしょう。

以上、ちょっと変わった頂点カラーの使い方でした。

とはいうものの、こういった活用法は取り立てて特別な技術でもなく、既に採用されているゲームタイトルは無数にあります。「ん?これは?」と思ったゲームタイトルを見かけた際は、色々と観察してみては如何でしょうか。

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

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

« 美味しい年始 | トップページ | すべての色ふたたび績まるるを待つ »

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

コメント

コメントを書く



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


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



トラックバック


この記事へのトラックバック一覧です: プログラマー的デザイン表現(5):

« 美味しい年始 | トップページ | すべての色ふたたび績まるるを待つ »