渋谷ほととぎす通信

完全趣味でやってる技術メモ。※所属団体とは一切関係がありません。

【WIP】Unityを使ってクリスマス的な何かを制作して季節を体感していきたい


僕は普段1日の大半を室内で過ごしています。外に出ている時間なんて計算すると4%位です。
気づけばそろそろクリスマス。娘がサンタさんに手紙を書いている姿を見かけました。

ということで、本ブログも季節感を取り入れていこうと思い、クリスマスをテーマになにか作るという行為を始めました。

企画も何もないので、コードを書きながら、ネットサーフィンをしながらネタを探すわけですが、とりあえず、テクスチャに動的に円をポンポン表示させて、少しずつ消えていくと雪っぽく見えないかな?という案を形にする所から始めてみたいと思います。


作ったのがコチラ。
f:id:esakun:20181219193849g:plain
最初のステップとしてはまずまずなクリスマス?。まあ、雪には見えませんわな。
個人的には結構好きな表現になりました。サークルの大きさや生成間隔、同時生成個数などいろいろと調整しています。

技術的なお話としては以下2点

  1. サークル描画処理
  2. サークルがフェードアウトしていく処理

1.サークル描画処理

void Draw(int cx, int cy, float radius)
{
    for (int x = 0; x < _texSize.x; x++)
    {
        for (int y = 0; y < _texSize.y; y++)
        {
            var xx = x - radius;
            var yy = y - radius;
            float distance = Mathf.Sqrt(xx * xx + yy * yy);
            if (distance >= radius)
                continue;
            _canvas.SetPixel(x + cx, y + cy, _addColor);
        }
    }
}

円でクランプするのがポイントかなと。


2.サークルがフェードアウトしていく処理

void FadeOut()
{
    for (int x = 0; x < _texSize.x; x++)
    {
        for (int y = 0; y < _texSize.y; y++)
        {
            var color = _canvas.GetPixel(x, y);
            var result = Color.Lerp(color, _baseColor, color.b * 0.1f);
            _canvas.SetPixel(x, y, result);
        }
    }
}

全ピクセルを舐めて、少しずつ元の色に保管するだけの(重いけど)シンプルな処理です。
※処理の重さについては後述


ただ、このままだとなんかクリスマスっぽくなかったので、キューブに貼ってみました。

f:id:esakun:20181219194946g:plain


一旦ゆっくり回してみて雰囲気をみてみます。
f:id:esakun:20181219195004g:plain


最終スカイボックスのセット、スポットライトを当てて、この記事時点での完成としたのが以下の動画です。

クリスマスなのか?と言われれば「?」ではありますが、何となくきれいなものに仕上がった気がします。

スカイボックスはコチラを使わせていただきました。

動画を撮影するに際し、Unity Recorderを使用しました。簡単にMP4が作れます。神。


今回のサンプルの最終的なソースはコチラ

シェーダは?

そうです。今回シェーダはありません。
描画をCPUでやっちゃっています。そのせいでテクスチャのサイズを大きくすると負荷が半端なくなります。

次回はGPUをちゃんと使った処理にしようと思います。

参考