この記事はTech KAYAC Advent Calendar 2020の19日目の記事です。
こんにちは。CL技術部の藤澤覚司です。 普段はUnityを使ったAR開発などを行っています。前回の記事では、可愛いキツネさんがsoft particleの中を走り回っていましたね。コンコン。
最近サイバーパンク2077が発売されましたね。職場の人間はみんなサイバーでパンクな物が大好きなので、僕もすぐ買いに行きました。
サイバーパンク2077をプレイしていて感じましたが、やっぱりギラギラしているサイバーな街並みを見ていると、テンションが上がってきますね。僕の代わり映えしない日常もギラギラと発光していたらいいのに。だから僕はhololiveを見るための板になっていたiPadをおもむろに取り出しました。
作りたかったもの
ARKit3.5から新しく追加された機能、LIDARを使って、外環境をメッシュとして取得し、ギラギラさせる。それを目標としました。
開発環境
Unity 2020.2.0b2 ARFoundation 4.0.2 URP 8.2.0 iPad Pro 2020 (ipad os 14.2)
※ LIDARが使えるのは、現状ボトムズみたいなカメラが付いた端末だけなので、ご注意ください。
実装
環境構築
まずビルドを成功させるために、以下の設定を行います。
・ Unityプロジェクトを作成したら、ARFoundationとURPをPackageManagerからダウンロード。 ・ BuildSettingsからPlatformをIOSに切り替え。 ・ PlayerSettings->OtherSettingsのTarget minimum IOS Targetを12.0に、CameraUsageDescriptionを適当に記入。 ・ ProjectSettingsのXR Plug-in ManagementのPlug-in ProvidersのARKitをチェック。
このぐらい設定したら、おそらくビルドはできるようになるかと思います。
次にARFoundationでURPを使うための設定を行います。設定方法はjyuko様の記事を参考にさせて頂きました。
これで、URPを使ったPostProcessingやShaderGraphが有効になります。
外環境をメッシュで取得できるようにする
Unityフォーラムを参考にさせて頂きました。
ARFoundation4世代から追加された、ARMeshManagerを使うことで、簡単にLIDARからメッシュを取得できるようになります。MeshPrefabには、MeshRendererとMeshFiltterがアタッチされているPrefabを用意してアタッチすれば、そのPrefabが外環境の形状にメッシュを更新してくれます。
メッシュをギラギラさせる
Shaderを用意する
外環境の形状に変形しているメッシュに、Shaderを適応してギラギラさせます。r-ngtm様が最高にサイバーでパンクな六角Shaderを公開してくださっているので、そちらを参考にさせて頂きました。
※ ShaderGraphのどこかのアップデートのタイミングで、C#で定義されたカスタムノードが使えなくなってしまっていたので、その対応に、pio様の記事を参考にさせて頂きました。
その結果、こんな感じのShaderが用意できました。 次はいよいよ、外環境のメッシュにこのShaderを流していきます。
メッシュにShaderを流す
やることは簡単で、外環境に変形するメッシュのPrefabのMaterialに先ほど作成したShaderを割り当てるだけです。
ただし、一つ罠があります。現状ARMeshManagerからUVや頂点カラーが取得できないため、ShaderでUVノードを使用しても、期待した動作をしてくれません。
この厄介な問題の対策を、Hidesato_Nakamura様が記事にしてくださっていたので、参考にさせて頂きました。
Hidesato_Nakamura様の記事によると
メッシュのUVではなく、オブジェクト座標を用いてテクスチャを貼る。 という方法で実現をしました。
とのことなので、こんな感じにUVを入力する部分にこんなノードを繋げてみると・・・
おお・・・ギラギラしてきました。
もうちょっとギラギラさせる
今回はURPからPostProcessingが使えるので、Bloomを有効にしてギラギラさせます。
最終的にこんな感じになりました。
街を歩いてみた
ギラギラ
ギラギラ
ギラギラ !!!
ふぅ。満足しました。
まとめ
LIDARを使って外環境をメッシュを生成し、ShaderGraphで作成したShaderを適応してギラギラさせてみました。ほぼコードを書かずに、ARコンテンツが作れるなんて、すごい時代になりましたよね。(もちろん先人の方々の力を借りまくりですが)。もっと手の込んだShaderが書ければ、表現の幅がもっと広がると思うので、色々試してみたいなと感じました。
あしたの担当は、僕と同じヘッドフォンを使っている@chanchihiroさんです。
