夜風のMixedReality

xRと出会って変わった人生と出会った技術を書き残すためのGeekなHoloRangerの居場所

HoloLensでATフィールドを展開する

本日はアニメや映画などのファンタジー世界をHoloLensの力を使って再現していきます。

今回1990年代(筆者のうまれる前ですが)からのヒット作で今年映画最新作で一通りの幕を閉じたエヴァンゲリオンシリーズの世界からATフィールドをHoloLensで再現します。

〇ATフィールドとは?

 エヴァンゲリオンシリーズの世界観は、設定のすべてが公開されてるわけではなく、視聴者による考察やゲーム等を含む外伝作品での設定補間によってはじめて理解できるものが多く、ここでの説明も一般的に呼ばれているものになります。

 ATフィールドとは、作品に登場する巨人エヴァンゲリオンおよび敵の使徒が使用する防御シールドです。

 作品中では『心の壁』とも呼ばれ物語にかかわる根幹な設定です。 様々な描写がされていますが、多くは銃弾やレーザーなどの攻撃を防ぐシールドとして描画されています。

 今回はHoloLensでこのATフィールドを作ります。

f:id:Holomoto-Sumire:20210424205620j:plain

〇環境

・Unity2019.4.18f1(LTS版)

・MixedRealityToolkit v2.53

・UniversalRenderPipeline(URP)

・ShaderGraph 7.5.3

今回は[ShaderGraph]を使用するためUniversalRenderPipelineのプロジェクトを使用します。

〇ATフィールドShaderの作成

①プロジェクトウィンドウで右クリックし[Create]→[Shader]→[PBRGraph]を選択して新規の[ShaderGraph]を作成します。

f:id:Holomoto-Sumire:20210424205703j:plain

②作成したShaderGraphをダブルクリックで開きます。

f:id:Holomoto-Sumire:20210424210827j:plain

ここから作業に入ります。

③今回は下画像のようにノードをつなぎATフィールドShaderを作成しました。

f:id:Holomoto-Sumire:20210424211144j:plain

と言っても画像では小さすぎてわかりずらいのでパーツごとに紹介します。

〇UV

今回はUV座標を動かして多角形の描画とそれが広がるアニメーションを行います。

f:id:Holomoto-Sumire:20210424211456j:plain

ここで重要なノードが[CustomFunction]です。 

f:id:Holomoto-Sumire:20210424211530j:plain

これはShaderGraphで提供されるノードに対応していない表現やコードによる処理を行いたい際に使用します。ここでは多角形の処理に使用しました。

今回次のコードを書いています。

float a = atan2(UV.x, UV.y) + PI;
float r = 2 * PI / n;
output = cos(floor(0.5 + a / r) * r - a) * length(UV) - size; 

接続している[N]はN角形に対応しています。例えば[N]=10とすれば正10角形の描画になります。

ここではエヴァンゲリオンのアニメの表現に従い8を指定して8角形にしています。

また[size]はその名の通りサイズですが、今回Timeで動的に動かしているのであまり機能していません。

ちなみにShaderGraphで[polygon]という多角形表現のノードが提供されていることはのちに知りました。

f:id:Holomoto-Sumire:20210424212152j:plain

作成した8角形に[Add]ノードで[Time]を足しています。 この時間は[Speed]変数と積算されているため、実際は[Speed]が速さの値になります。

〇テクスチャとフェード

UVから次にテクスチャの処理を行います。

f:id:Holomoto-Sumire:20210424212553j:plain

ここでの[CustomFunction]は次の処理を行っています。

if(col.r <= .0){
col *= SubColor;
output = col;
}

ここでは[_SubColor]を積算します。色味を付けることができます。

[SampleTexture2D]で使用しているテクスチャは次の画像です。

f:id:Holomoto-Sumire:20210424212923p:plain

ここで設定する画像次第で様々な表現が行えます。今回は上記のテクスチャを使用することで多角形の片側はグラデーションで透明度がかかるようにしています。

f:id:Holomoto-Sumire:20210424213139j:plain

テクスチャを処理した後別のテクスチャの処理と[Multiply]ノードで処理しています。

f:id:Holomoto-Sumire:20210424213330j:plain

これはエッジ部を描画しない処理を加えるためです。 これによってATフィールドが広がりある程度の距離で円状にフェードされる表現が行われます。

f:id:Holomoto-Sumire:20210424213721j:plain 

これは上図のようにノードをみればわかると思います。

〇グラデーション

これでテクスチャと多角形表現、円状にフェードの処理ができました。今回さらに細かい処理を行いました。

ATフィールドはアニメ劇中で光をゆがめるシーンなど光に干渉する様子が描かれています。

今回単調にならないようにグラデーションを行うことにしました。

f:id:Holomoto-Sumire:20210424214202j:plain

[Lerp]ノードにはTextureのアウトプットをつないでいます。

見ての通り虹色のグラデーションがかかります。

〇出力

最終的な結果として[_MainColor]と掛け合わせてマスターノードにつなぎます。

f:id:Holomoto-Sumire:20210424214333j:plain

以上でATフィールドShaderが完成しました。

UnityのPlaneにアタッチします。

f:id:Holomoto-Sumire:20210424205620j:plain

上のようにATフィールドが完成しました。

今回Shaderを作成したので明日HoloLensで実機で見ていきます。