【Resonite】十人十装出展作品『サクライト』を公開しました（作り方のヒント付き）
先日、イベント「十人十装」に出展した作品回転する桜をフルカラーで映し出すライト『サクライト』 を、Unipocketにて公開しました！
今回は「フルカラーかつアニメーション付き」というところにこだわって制作。
とてもきれいに仕上がったので、個人的にもかなり満足してます。
実装の裏話と注意点
ただし、実装にはちょっとしたトリックがあります。
『サクライト』ではリアルタイムでフルカラーのライト投影を実現するために、
ライトを3つ、カメラを6つという構成で、かなり力技な作りになっています。
そのため、描画負荷はそこそこ高め。
大量に配置したり、広い範囲に使ったりするにはあまり向いていません。
とはいえ、小規模な演出や一時的なデコレーションには十分活用できます。
なにより「実用性よりアイデア重視で楽しむ」のが十人十装の醍醐味。
今回はその精神で、自分が楽しいと思えるライトを目指して作りました。
気になる方は、ぜひUnipocketからダウンロードして使ってみてください。
ここからは技術的な話です（ざっくり解説）
以下は『サクライト』の仕組みについての概要です。
具体的なチュートリアルではなく、使ったコンポーネントやアイデアのヒントを中心に紹介します。
実際仕組みとしては少々ややこしいのでこの説明だけでわかるものではないと思ってます。
知らないコンポーネントを知る機会くらいに思っていただけるといいと思います。
あとこれが最適解というわけではなくあくまでS.Haruyaなりの実装だと思ってください。
仕組みの概要：どうやってライトをフルカラーにしてるの？
Resoniteの標準ライトは基本的に単色でしか投影できません。
しかし、ライトには「自由な形でマスク（Cookie）ができる」という特性があります。
そこで今回は、
- カメラで撮影した映像をRGBに分解
- 赤・緑・青それぞれに対応したライトにマスクとして適用
という方法で、擬似的にフルカラーのライト投影を実現しています。
ちなみに撮影に使用している桜はカメラの中に収納してあります。
Cameraコンポーネントは撮影する対象を指定できるので、桜とフィルタだけを一定方向から撮影しています。
使用コンポーネント一覧と役割
Camera
公式URL：https://wiki.resonite.com/Component:Camera
用途：桜を撮影して、ライトのCookie用画像を生成するために使用。
計6台のカメラを使用しており、役割は以下の通り：
- RGBの白黒画像を作成するカメラ ×3
- 白黒画像をアルファに変換するためのカメラ ×3
それぞれSelectiveRenderを設定して、必要なスロットのみ描画。
全カメラは同じ位置に配置されている。
RenderTextureProvider
公式URL：https://wiki.resonite.com/Component:RenderTextureProvider
用途：カメラで撮影した映像をテクスチャとして扱うために必要。
GrayscaleMaterial
公式URL：https://wiki.resonite.com/Component:GrayscaleMaterial
用途：RGBに分離するために使用。
3台のカメラと、それぞれにの前にグレースケールマテリアルを適用したQuadを設置し、
- Rのみ映すカメラ
- Gのみ映すカメラ
- Bのみ映すカメラ
という風に構成。
UnlitMaterial
公式URL：https://wiki.resonite.com/Component:UnlitMaterial
用途：RGB白黒画像をアルファに変換するために使用。
- 最初のカメラで撮った映像を
MaskTextureに設定 - そのマテリアルを適用したQuadを、2つ目のカメラで撮影
- これによりアルファ付きのマスク画像を取得可能
Spinner
公式URL：https://wiki.resonite.com/Component:Spinner
用途：桜を回転させるために使用。
処理の流れ（1色分）
-
1台目のカメラで、
GrayscaleMaterialを適用したQuad越しに桜を撮影
→RenderTextureProviderでテクスチャとして出力 -
2台目のカメラで、1のテクスチャを
MaskTextureに設定したUnlitMaterialのQuadを撮影 - 2のテクスチャをライトのCookieとして使用
これをRGBそれぞれで3セット用意することで、フルカラーの投影が可能になります。
以上、『サクライト』の紹介と、ざっくりとした制作ヒントでした！
Discussion