今回は7月のお題企画でs.TAHARA賞を受賞した美坂さんの「Potsu-Jin」で実装されている時間経過ギミックを美坂さんが前後編に分けて解説します！
前編では、背景、空などの表現について解説。後編ではライティングについて解説します。
ワールドに時間の流れが取り入れられると一気に実在感が高まるので、興味のある方はぜひ試してみてください！
皆様こんにちは、美坂と申します。
こちらのワールド「Potsu-Jin」は時間経過でシームレスに昼夜が切り替わるという仕様なのですが、clusterでライティング切り替えるのは地味に面倒くさいのです。
結構斜め上な手法で無理やり実装しています。
この記事では背景、空などの表現について解説していきます。
空の表現
空は時間経過でシームレスに夜→朝焼け→昼→夕方→夜と切り替わっていきます。
あと地味に雲も動いてたり。更に太陽と月、夜には星も見えます。
まずシーンの空の構造はこのような感じ。
空、星、太陽と月、遠景の山と複数の要素を重ね合わせた構成になっています。
1. 空の天球
一番外側には空と雲を描いた天球があります。
これはSphereの内側にSkyboxを擬似表示する自作シェーダーを使用しています。
Sphereは半径800mとあまり大きくないサイズですが、シェーダーで無限遠に見えるよう描画しているので違和感はありません。
このシェーダーは更に時間経過表現のために2つのテクスチャを混ぜ合わせて表示できるようにしています。昼と夕方を混ぜたりとか。
構成はこんな感じ。詳細は拡大して確認してください。
ViewDirからテクスチャのUV座標を求めたあと2つのテクスチャを混ぜています。
あと天球の水平回転とテクスチャの混ぜ具合をプロパティで制御。
画像はAmplify Shader Editorの画面ですが、Shader Graphでもノード名が一部変わるかもですが真似すれば再現できるはず。
「昼と夕方(朝焼けも兼用)」と「夜と夕方」、2つの天球を同じ座標に用意し、AnimationでOn/Offおよびテクスチャの混ぜ具合を制御して時間経過を表現しています。
昼用の天球で 朝焼け(夕方と同じ画像)→昼→夕方 とアニメーション、
夜用の天球で 夕方→夜→朝焼け(夕方と同じ画像) とアニメーションさせる感じです。
あと空をゆっくりと水平回転させることで雲の動きを表現しています。
現実的にはおかしな挙動ですが結構それっぽく見えます。
2. 星のParticle
空の内側には星のParticleを配置、夜だけOnにしています。
ShapeをSphereにして球状の表面に発生させる感じ。
星が細かすぎてスクショに映らないやつ！
星は空テクスチャに書き込んでも良いんですが、それだと粒の大きい星になりがちです。細かい星を描画するには解像度を上げる必要があり、容量が大きくなってしまいます。今回は容量削減のために分けてParticleでの表現としました。
Shaderで書き込むって手もありますが実装が面倒くさかった！
なお星を配置している球は半径750m、星の表現としては大分近いですが、星はあまり目立たない表現なので違和感を感じる事は少ないはず……。
3. 太陽と月
空、星の内側に太陽と月のSphereがあります。このSphereは星と同じ距離、ワールド中心から750mしか離れてません。大分近い。
ちなみにこんなに近いのはclusterでカメラのFar Clipが1000m固定なため。
プレイヤー視点から1000m離れると表示されなくなってしまうのです。
その近さゆえにDirectional Lightによって生じる反射と太陽の向きがプレイヤー位置によって結構ズレます。
こちらは太陽と反射がめっちゃズレている様子。
太陽と月はShaderで空に直書きするのがいいのかもしれない。
4. 遠景の山
一番内側に遠景の山とかのビルボードを配置しています。
円柱状メッシュの内側に透過テクスチャ貼っただけです。
これで太陽とかが隠れるので日の出日の入り表現が可能となっています。
なお天球のオブジェクト(太陽・月・星、更にリアルタイムDirectional Lightも)はすべて1つのオブジェクトの子に配置しています。
一番上の親オブジェクト(axis)を地軸の分傾けて配置、あとはその子オブジェクト(space)を水平回転するだけでそれっぽい天球の動きが再現されてくれます。
まとめ
全部合わせて動かしてみた様子です。
無駄に複雑な作りとなっていますが、頑張れば全部Shader1つでやれるかもしれません。Shaderに自身のある方は挑戦してみるのも面白いかもしれません。
以上、背景の空関連の仕組みについて解説しました。
