プロシージャル雲に挑戦！　第一回目 | 株式会社ヘキサドライブ | HEXADRIVE | ゲーム制作を中心としたコンテンツクリエイト会社

HEXA BLOG

ヘキサブログ

プログラム

HEXA BLOGプログラム2014.8.28

プロシージャル雲に挑戦！　第一回目

皆さん、こんにちは！
ビッシーです

今回も、引き続きプロシージャルテクスチャの例を紹介したいと思います。

今回はノイズテクスチャを利用した雲テクスチャの作成です。

今回は積雲のような雲を描画することを目指して、
ノイズテクスチャとメタボールの組み合わせでプロシージャルを作成してみます！

□ノイズテクスチャとは？

雲の乱流のような不規則な表現をするために、よく使われる手法がノイズテクスチャです。

あらかじめ、

各ピクセルにランダムな値を入れた画像を用意して、
その画像を合成に利用することで不規則な表現を追加します。

今回は、前回の記事で利用した乱数関数を利用し、

プログラムでテクスチャを計算しました。

ただし単純なノイズテクスチャを生成してしまうと、
ドットノイズが強く出てしまいます

乱流を表現するノイズテクスチャの場合、
一見不規則でも近傍とは連続性がほしいため、
細かいノイズと荒いノイズをスムージングしながら合成することで、
雲模様のような画像を生成しています。

□メタボールとは？

メタボールとは、n次元の関数の総和が閾値以下かどうかで表現されるボリュームです。
積雲のような綿のような形を表現するために、メタボールを利用します。

今回は2次元画像なので、メタボールは円の中心からの総和で求めています。

function(x,y,dst) {
    // 円の中心からの距離を総和
    var density = 0.0;
    for(var i=0; i&lt;plist.length; ++i) {
        density += Math.max( (radius - pointlen(x,y,plist[i][0],plist[i][1])) / radius, 0 );
    }
    if(density &gt; 1) {
        return color1;
    }
    return color2;
}

この図形に先ほどのノイズテクスチャを合成することで、
雲の領域を計算して、空と雲のカラーをブレンドさせます。

□レタッチ

最後に雲のように見せるために空のグラデーション処理を加えて、
見た目を調節しています。

【今回のサンプルプログラム】
サンプルプログラム

若干のレタッチを加えてみましたが、雲の質感がまだまだ足りません・・・

現実世界の雲は、厚みのある気体ですので遮蔽や透過といった効果が入らないと、
雲の存在感がイマイチになってしまうようです

次回は、雲向けのライティングを実装して、
厚みのある雲のレンダリングに挑戦してみたいと思います

それでは