スタッフBLOG

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

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

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

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

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

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

　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] = テクスチャ

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

＜↓クリックすると拡大出来ます＞




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

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

＜↓クリックすると拡大出来ます＞




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

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

＜↓クリックすると拡大出来ます＞




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

＜↓クリックすると拡大出来ます＞




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

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

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

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