セルテクスチャに挑戦！ | 株式会社ヘキサドライブ | HEXADRIVE | ゲーム制作を中心としたコンテンツクリエイト会社

皆さん、こんにちは！

千里の道も一歩から！のビッシーです

今年の目標はプロシージャル技術の研究ということで、
前回に引き続きプロシージャルテクニックを実践していきます！

今回は代表的なプロシージャルテクスチャ技法の一つ
「セルテクスチャ」をベースにプロシージャルテクスチャを作成していきます。

そもそもプロシージャルテクスチャとは何ぞや？と
言葉で説明することはなかなか難しいので、
今回は、目的であるセルテクスチャに至るまでの過程から
プロシージャルの考え方を感じ取ってもらえればと思います。

１．プロシージャルテクスチャとは？

プロシージャルテクスチャリングを一言で表現すると、
「一連の手続き(プロシージャ)を使って画像(テクスチャ)を表現する」ことです。

画像処理ができるプログラミング環境があれば、
どんな環境でも実装していくことができると思います。

今回のサンプルでは、 JavaScriptを利用してプロシージャルテクスチャを実装しました。
画像の表示、保存にはHTML5 Canvas機能を使っています。

サンプルは記事の最後に掲載していますので、ぜひ触ってみてください

２．点を描く

これからテクスチャ(画像)を描いていきますので、まずはキャンパスが必要になります。

さすがに真っ黒なキャンパスは寂しいので、
セルテクスチャに取り組むウォーミングアップとして、点(ドット)の描画を行います。

ペイントソフトでは鉛筆でドットを描いていくことができますが、
プロシージャルの世界では、手続き(プロシージャ)を使って点を表現します。

プロシージャルで画像を表現するにあたって、
画像をピクセルデータの集まりと考えると複雑化するため、
2次元画像は「xとyという引数を受け取ってcolorを返す関数」として考えます。

すると「点を描画する」=「点が存在するピクセルでは点の色を返す関数」と定義できます.

例えば、点列plistがあるとして、その点を描画する関数は下のように定義できます.

// 点を打つ関数(dstは背景色)
function(x,y,dst) {
    for(i=0; i&lt;plist.length; ++i) {
        // 点が存在しているピクセルの場合
        if( x==plist[i].x &amp;&amp; y==plist[i].y ) {
            return color;
        }
    }
    return dst;
}

plist自体はデータとして予め準備してもよいですがランダム列であればよいので、
サンプルではシード値からプログラムで自動生成させるようにしました。

これで、星空のような画像が出来ました

３．水玉を描く

さすがにドットでは迫力にかけるので、次はドットに面積を持たせてみます。

円は関数で表すと、円の内外判定関数になります。

「ある点が円の内部である」というのは、
「『ある点』と『円の中心点』の距離が『円の半径』未満である」
と言い換えることが出来ます。

この円の描画関数を先ほどの点描画関数に加筆すると、下のようになります。

function(x,y,dst) {
    for(i=0; i&lt;plist.length; ++i) {
        // 円内部のピクセルの場合
        var d = pointlen(x, y, plist[i][0], plist[i][1]);
        if( d &lt; r ) {
            // 色を線形補間して表示
            return alerp(color2, color1, d/r);
        }
    }
    return dst;
};

修正はわずかですが、見た目の効果は大きく変わりましたね

４．セルを描く

ウォーミングアップが終わったので、本題のセルテクスチャに取り組みます

セルテクスチャは、細胞のように小さな領域で充足されたテクスチャです。
主に爬虫類の表皮等の有機的な表現に向いている手法です。

シンプルなセルテクスチャは、
2次元空間のランダム点中で最近になる点との距離によって
色を補間することで表現できます。

function(x,y,dst) {
    // 最近点までの距離を計算
    var dmin = 100000.0;
    for(i=0; i&lt;plist.length; ++i) {
        var d = pointlen(x, y, plist[i][0], plist[i][1]);
        if( d &lt; dmin ) {
            dmin = d;
        }
    }
    // 距離に応じてカラーを線形補間
    return alerp(color2, color1, dmin/k);
}