株式会社ヘキサドライブ | HEXADRIVE

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

 

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

 

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

 

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

 

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

 

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

 

あらかじめ、

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

 

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

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

 

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

 

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

 

□メタボールとは？

 

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

 

 

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

 

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

 

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

 

 

 

 

□レタッチ

 

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

 

 

 

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

 

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

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

 

 

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

 

それでは