Month: 3月 2019

メタボールパズルゲームを作る -メタボール編-

 unity1weekお疲れさまでした.今回は私は以下のようなゲームを作成したので遊んだことのない人は是非プレイしてみてください.

unityroomへ移動

 ちなみにツイートのいいね数が150を超えていて地味にうれしいです.

 本記事ではゲームで使用した主要な技術について軽く解説していきます.なお,サンプルプロジェクトも用意しておいたので気になる方は以下のリンクをどうぞ.

サンプルプロジェクトへ移動

2次元のメタボールを描画する

 さて,このゲームで最も特徴的なのはメタボールだと思います.メタボールとは,2次元のグラフィクスにおいては滑らかな曲線を描画するための技術です.ゲームキャラクター(メタボ~ル)はこの技術によってスライムのような滑らかな表現を表すことができるようになっています.

 以降はメタボールの数式的な理解,及びシェーダ上での実装を順に見ていきます.

メタボールを数式で表す

 まずは,数式を交えながらメタボールの表現方法を述べていきます.
メタボールは一言でいうと,あるピクセル上の点\((x,y)\)において,密度関数\(f_i(x,y)(i=0,…,N)\)の重ね合わせが閾値\(t\)を超えた際に色を塗り,そうでない場合は地の色を塗ると言った処理を全ピクセルに渡って行う操作によって有機的な形状を描画するグラフィクス技法のことです..

 具体例を見てみましょう.\(N=2\)とし,密度関数が次のように表されるとします.

$$
\begin{eqnarray}
f_0(x,y) &=& \exp(-(x^2+y^2)),
f_1(x,y) &=& \exp(-((x+2)^2+y^2))
\end{eqnarray}
$$

 \(f_0\)をグラフにすると次のようになります.なお,\(f_1\)に関しては単に\(f_0\)の中心位置を負の方向に2だけ移動したものになります.

 分かりやすいように等高線で表すと以下のようになります.

 例えば最も濃い部分から3つ目のオレンジ色の部分を閾値\(t\)とすれば,この\(f_0\)によって円形の画像が描画されることが分かります.

 そして,これらの密度関数を重ねあわせると次のようになります.

 等高線では以下のように表されます.

 もうメタボールが見えましたね.この場合,オレンジ色の部分は次の式を満たしていると言えます.

$$
f_0(x,y) + f_1(x,y) > t
$$

 『つながるメタボ~ル』ではキャラクターの位置を中心とした\(f_0\)のような関数を定義してやることで滑らかな表現を実現しているのです.

シェーダで実装する

 それでは具体的な実装を行っていきます.今回の実装では次の2ステップに分解ができます.

  1. スプライトの描画
  2. 全体にイメージエフェクトを適応する

 1.のスプライトの描画は前節で言う,密度関数の定義に当たります.スプライトの描画は4点の頂点で正方形を表しその内部に色を載せていきます.すなわち,頂点シェーダで中心位置を移動(実際にはtransformで調整しています)し,フラグメントシェーダで密度関数の本体を書くことになります.
 そして,2.の操作は閾値を超えているかどうか判定をする操作に当たります.

 それでは実際のプログラムを見ていきましょう.

 長々と書いてありますが,注目すべきは2点のみです.
 まずは23行目です.ここでは透明なオブジェクトをどのようにブレンドしていくかを決定します.今回はメタボールの密度値(密度関数からの出力)をα値に格納するため,適切にブレンド方法を決める必要があります.今回の描画では,地の値をそのまま保存しながら描画しなければならないため,One Oneで指定します.

 そしてもう一つの注目点はフラグメントシェーダです.58行目でスプライトの中心位置からの距離を計算し,59行目で計算した密度関数の出力結果をα値に書き込んでいます.なお,使用する密度関数の形式には特に規定がないため,前節のものとは異なる数式を使用しています(2の累乗数は,プロセッサによっては特殊関数が用意されているためですが,アセンブリが最適化されているかは確認していません).最後に60行目では色をうまくブレンドする際に利用に密度値を参照するために残しておきます.α値に直接密度値を書き込んでいるので必要ないように感じますが,α値は後で上書きしてしまうため,色もうまくブレンドするにはこのようにする必要があるのです.

 続いて,イメージエフェクト用のシェーダです.

 こちらはフラグメントシェーダにのみ注目してください.46行目が核となる部分です._Cutが閾値を表しこの値を超えないピクセルについては黒く塗りつぶします.

Unityで実装する上での注意

 以上でメタボールを描画することができるのですが,一つ注意が必要です.それはUnityは基本的に各色を8bitで表し,0~1を256段階に区切った色しか出力できないという点です.もしも1を超えてしまう場合は,1にクリップされて出力されます.今回算出する密度値は重なりが大きいと1を超えかねないため,何も対策をしないと以下のように一部分が白くなり,光ったような表現になってしまうのです.

Image from Gyazo

 これを防ぐためにはおそらくレンダーテクスチャに描画するしかありません(CameraのAllow HDRtrueにするだけで良さそうですがうまいこといきませんでした).レンダーテクスチャでは色のフォーマットを8bitだけではなく,16bitまたは32bitにすることができます.これによって,値がクリップされることをできるだけ防止することができます.したがって,実際に試してみたい方は次のようにレンダーテクスチャを作成し,カメラの描画先をレンダーテクスチャに設定してください.

Image from Gyazo

 レンダーテクスチャを表示するためにはuGUIのRawImageを使用します.

Image from Gyazo

 すると,次のようにきれいなメタボールを描画できるというわけです.

Image from Gyazo

最後に

 以上でUnity上でのメタボールの実装は完了です.『つながるメタボ~ル』の実装には他にも様々な要素がありますが,今回は疲れたのでここで終了にします.
最後まで読んでいただき,ありがとうございました.また,実装についてアドバイスをして頂いたchokopan先輩,ありがとうございました.
 気が向いたらphotonについての記事も書いていこうと思いますのでその時はまたよろしくお願いします.

画面情報でモデルを照らす:kcstuber開発日記

どうも,チョコです.

KCSTuberをn年ぶりに更新しました.古いChokoEngine(研究でforkして作業している)を使っているせいで,最適化が反映されていない.つらいさん.

さて,前々からやりたかった課題として,以下のようなものがある.

KCSちゃんは画面を見ているから,画面情報によって照明が変わるはず.と.

 

....

いや,ちょっと面倒すぎないか.

 

....

仕方ないので,実装を考えましょう.linuxはさておき,画面をキャプチャーするwinapi関数にない(と思う)し,どうやればいいか困りますね.

そこで,まず考えたのはこれ.

OBSで画面をキャプチャーしてストリーミングし,ffmpegで取得する.

おう.天才.(と思うじゃん?)

OBSで出力するのは簡単なので詳細は省いて,要はlocalhost:1234に映像データを吐くようにすればいい.

そして,悪夢のffmpeg.このようなクラスを作ろう.

実装はffmpegの仕様を見て自分で考えましょう.(ないんですよ最新の仕様がぁ.)

まあ,ストリームを取得するところはこんな感じですね.

はい,映像の配列を取得したとしましょう.あとはOpenGLに渡せば好きにし放題だね.

っと,その前に..

 

いやあ,さすがにこれはひどい.このやり方の問題点を考えてみよう.

1.OBSを立ち上げる必要がある

2.映像の質がわるい

3.OBSを立ち上げる必要がある

4.ユーザがいちいち設定する必要がある

5.OBSを立ち上げる必要があるため,配信するときはOBSが2つになっちゃう

 

だめじゃん.

 

そこで,もう一つの神のFOSS,VLCを思いついた.

そう,libVLCを使えばいいじゃん.と.

 

はい,解散解散.

 

libVLCを画面をキャプチャーするのは簡単.一応公式のサンプルもあるし,gistも落ちている.が,両方とも少しずれているので,我のものも見せよう.

ここで,transcode{vcodec=RV24}を指定すると,画素データがBGRの8ビットづつになるので,変換する必要性がない(!).神.

 

そして,この得たデータをOpenGLに渡せばいいね.

これを描画すると,こんな感じになりますね.

Screenshot (535)

いぇーい.ノイズもないし,すごいぬるぬる.

 

では,最後にこれを使ってKCSちゃんを照らそう.結局KCSちゃんはアニメ風なので,ちゃんとHDRIとして使うと不自然になっちゃう.そのため,適当に照らそう.

要するに,ぼかした背景をオーバーレイするだけ.

OpenGLコードは説明する必要ないでしょう.(勉強したい方はCG班に入ってね☆)

,,と言ったものの,色の組み合わせは一応こんな感じですね.

これの効果を一行一行見ていくと:

1:ぼかす

Screenshot (542)

2:KCSちゃんの元の色を下げる

Screenshot (543)

3:ぼかしたテクスチャを描く

Screenshot (544)

はい終了.割と簡単ですね.これを動画にするとエフェクトがはっきり分かりますね.

KCSちゃんかわいい.では.