バーチャル3Dクリエイターの神部まゆみです(*^_^*)
自作のVRChatワールド「Mayumi’s Room」に、クリスマスっぽいイルミネーションを置いてみました。柱にぐるぐる巻いた暖色の電球と、支柱の間にたるませた青白い電球です。
今回はCodexにUnityの生成ツールを作ってもらったんですが、できあがったものを置くだけだと「そもそも何が光ってるんだろう？」となったので、その仕組みを自分でも分かるように整理してみます。
作業環境はUnity 2022.3.22f1、Built-in Render Pipeline、VRChat Worlds SDK 3.10.5です。
まず、Unityで「光る」ってどういうこと？
たとえば暗い部屋に電球を置いたとき、「電球そのものが明るく見える」「周りの壁や床が照らされる」「画面で光がふわっとにじむ」は、それぞれ別の表現です。全部まとめてライトの効果だと思っていたら、ここがちょっとややこしいですね(;^_^A
- Point Light は、ある地点から周りの物を照らすライトです。電球の形そのものは別に用意します。
- 自発光（Emission） は、電球そのものを明るく描くこと。今回のシェーダーでは、壁や床に光を当てる処理はしていません。
- Bloom は、画面の明るい部分をにじませる後処理です。今回の「ハロー」は、電球の周りに淡い色を描いて、Bloomがなくてもにじんで見えるようにしたものです。
イルミネーションには小さい電球がたくさんあります。そこで今回は、電球の数だけPoint Lightを置かず、明るい電球の絵と、周りのにじみで光っている感じを出しています。
電球と電線はどうやって並べている？
最初にUnityのエディター用スクリプトで、電球を置く位置を計算します。螺旋なら、柱の中心から同じ半径を保ちながら、ぐるっと回るたびに少しずつ高くします。ガーランドなら、始点と終点を結ぶ線から真ん中を下にずらします。両端の高さはそのままで、元の直線からの下がり幅が中央で最大になる放物線です。
カーブの長さに沿ってほぼ等間隔に電球を置き、同じ経路に細い電線を通します。ガーランドのたるみは物理演算でぶら下げているわけではないので、揺れたりはしません。たるみ量を変えると、形を作り直す方式です。
作った形はメッシュとして保存します。メッシュは、点と面で作った形のデータです。今回は電球を一つずつHierarchyに並べず、電飾1組を1つのメッシュにまとめました。その中を電球、電線、ハローの最大3つの描画グループに分けています。設定画面や形を作る処理はUnityエディター側にあり、生成物の表示にはUdonは使っていません。
ひし形だった電球を、丸く光らせるまで
最初の版では電球が小さなひし形に見えました。青く光ってはいるんだけど、電球というより青い粒が並んでいる感じでしたね。そこでバージョン1.1では、電球をカメラの方を向く小さな板に変えました。板の中央からの距離を計算して、円の外側を描かないようにすると、正面から丸く見えます。
シェーダーは、Unityが物を画面に描くときに使うプログラムです。今回はこのシェーダーで中心を白く、縁を電球色にしています。さらに大きめの板に、中心から外に向かって薄くなる色を足すと、柔らかいハローになります。ハローは手前の壁などに遮られ、ハロー同士が重なると明るさが足されます。
色は暖色・白・青白などから選べます。電球ごとにサイズや明るさを少しばらつかせられるので、全部が同じ粒に見える感じも減らせます。ハローを大きくすると華やかですが、透明な部分を描く面積も増えます。たくさん並べるなら、小さめから試した方が調整しやすそうです。
点滅しているのに、電球一個ずつのスクリプトがいらない理由
常時点灯、全体点滅、ランダム点滅、ゆっくり明滅の4種類を用意しました。全体点滅では、同じ時計を見て、全員が同じタイミングで点いたり消えたりします。ランダム点滅では、その時計を読むタイミングや点灯時間を電球ごとにずらします。
その目印はUVに入れています。UVは通常、画像をメッシュのどこに貼るかを表す座標ですが、シェーダーに小さな数値を渡す入れ物としても使えます。今回は電球を作るときに一つずつ違う数値を入れて、シェーダーが「今の時刻」と「この電球の数値」から明るさを計算します。電球ごとにC#のUpdateを動かしたり、Udonでオン・オフを送ったりする必要がないわけですね。なお、プレイヤー間で点滅の位相を同期する仕組みは入れていません。
Unityで設定を触るときの手順
- ツールを入れたプロジェクトで Tools → Illumination MVP → Open Generator を開きます。
- 柱に巻くなら Create Spiral Layout、2点間に吊るすなら Create Garland Layout を選びます。
- Inspectorで形を調整します。螺旋は高さ・半径・巻き数、ガーランドは始点・終点・たるみ量です。最初は電球の間隔とサイズを調整すると違いが分かりやすいです。
- まず常時点灯で色や輪郭を確認してから、ハローの大きさと強さ、電線の太さと色を調整します。最後に点滅パターンを選び、下のプレビューで確認します。
- 生成ボタンでシーンに配置し、必要ならPrefab（再利用できるひな形）として保存します。後から経路を変えるときは、元のLayoutを編集して再生成します。
私のVRChatワールドに配置してアップロードしてみた
とりあえずどんな感じになるかのテストなので適当に配置しましたが(^_^;)
動かしてみた動画はこんな感じです。これクリスマスっぽくなるから来月ワールドの装飾に使うか…。
おわりに
codexパイセンに任せたら手軽にできて良かった。
ライトをたくさん増やさなくても、白い中心と色のついたにじみを作ると電球っぽく見えるところが凄いなと思いました。
しかしこんなのcodexパイセンの力を使わないとできないしAI時代すげぇな…と思います(^_^;)
自分で試すなら、まずは短いガーランドを常時点灯で置いて、ハローをゼロにしたときと比べてみると分かりやすいと思います。電球の色は同じでも、周りにうっすら光があるだけで結構印象が変わりますよ(*^_^*)
また何かあれば追記します(*^_^*)