夜風のMixedReality

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

XRミーティングで発表してきました。 PulseShaderを読み解いてみた。

本日はイベント登壇記録です。

先日、2020年5月20日にオンライン上(Zoom)で行われたXRミーティングでこの頃取り組んでいるMRTKのPulseShaderに関しての知見を共有しました。

〇XRミーティングとは?

月に一度第三水曜日に日本各地のxRコミュニティグループ同士でオンライン上で集まりxRに関するニュースや取り組んだこと等の情報を交換するイベントです。

osaka-driven-dev.connpass.com

関西を中心に活動しているコミュニティ『大阪駆動開発』の主催するイベントです。

osaka-driven-dev.connpass.com

今回はHoloLens2の話題やnrealの一般向けリリースに関する話題、HoloLens 2用のUIをHoloLens 1stで使えるようにした発表、xRを売り込む話、学会と絡めた話、イベントの告知、などが2時間の間にシェアされました。

〇PulseShaderを読み解いてみた。

PulseShaderは本ブログで勉強を少しづつ取り組んでいるタイムリーなMRTKの機能の一つです。

先月のGW前に『HoloLens ミートアップ @ cluster vol.1』でHoloLensでの表現周りを発表したのですが、オンラインの関係で音声が途切れ途切れになっていることに配信を見て気が付いたことと、登壇中にPulseShaderに関して興味を持ってくれた方がいたので今回キチンと魅力を伝えたいと発表しました。

hololens.connpass.com

●登壇スライド

www.slideshare.net

●MRTK PulseShaderとは?

MRTKのバージョン2.2(昨年12月リリース)からリリースされている『実験的』な要素の一つで主に二種類あります。

・SR_TrianglesShader

HoloLensでは周りの現実空間を認識してメッシュを貼ることができます。  アプリケーション内では基本的に透明なマテリアルですが、要所要所でワイヤーフレームなどのマテリアルで現実空間を認識して生成した仮想の部屋を可視化することでユーザーはHoloLensの空間認識機能をより分かりやすく体感することができます。

 SR_TrianglesShaderを使ったマテリアルを空間マッピングのマテリアルとして指定することで透明な中周期的にpulseが走る表現ができます。

f:id:Holomoto-Sumire:20191213093038g:plain

・HandTrianglesShader

HandTrianglesShaderはHoloLens2で可能となるハンドトラッキング(手を認識する)の際にユーザーにトラッキングできていることを示すためにユーザーの手に合わせてオブジェクトの手を重ねます。

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

HandTrianglesShaderを用いることでこのハンドオブジェクトの見た目に変化をつけることができます。

・サンプル

 2020年5月現在最新版のリリースであるMRTK v.2.3でPulseShaderはいかに格納されています。

・マテリアル:Assets/MixedRealityToolkit.SDK/Experimental/PulseShader内

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

・Shader:Assets/MixedRealityToolkit.SDK/StanderdAssets/Shader内

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

・サンプルシーン:Assets/MixedRealityToolkit.Examples/Experimental/PulseShader内

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

サンプルの格納場所がv2.2ではすべてExperimental内にありましたが、v2.3からはShaderはStandaerdAssets内Shaderフォルダに格納されるようになりました。

●SR_TrianglesShaderを実機でつかう

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

[MixedReaity(Script)]の[SpatialAwareness]ないの[Windows MixedReality Spatial Mesh Observer]ないの[Visible Material]のマテリアルにSR_TrianglesShaderを適応したマテリアルを差し替えます。

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

 これだけで実機でSR_TrianglesShaderを見ることができます。

●応用してみた。

www.youtube.com

この動画内でSR_TrianglesShaderを用いています。

これは過去の記事で解説しています。

redhologerbera.hatenablog.com

ここではSR_TrianglesShaderを用いて曲の進行に合わせてSR_TrianglesShaderを用いたマテリアルを差し替えています。

 このスクリプトはMRTKの公式ドキュメントを参考に次のようなスクリプトを実装しました。

microsoft.github.io

using UnityEngine;
using Microsoft.MixedReality.Toolkit.SpatialAwareness;
using Microsoft.MixedReality.Toolkit;

 public class ChangeSpatialMaterial : MonoBehaviour{

   // new material;
   public Material spatialmaterial;
    /// <summary>
    ///  Change MRTKSpatialAwareness VisibleMaterial.
    /// </summary>
    public void OnSpatialShaerCange1st()
    {
        // Cast the Spatial Awareness system to IMixedRealityDataProviderAccess to get an Observer
        var access = CoreServices.SpatialAwarenessSystem as IMixedRealityDataProviderAccess;
        // Get the first Mesh Observer available, generally we have only one registered
        var observer = access.GetDataProvider<IMixedRealitySpatialAwarenessMeshObserver>(); 
        // Change the VisivleMaterial to new material.
            observer.VisibleMaterial = spatialmaterial;
    }
}

SR_TrianglesShader、HandTrianglesShaderはどちらも自動でpulseが走りますがマテリアルから[AutoPulse]のチェックを外しオフにすることで手動でPulseを走らせることができます。

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

スクリプト、Unityのアニメーションどちらでも作成することができます。

f:id:Holomoto-Sumire:20200105204918g:plainf:id:Holomoto-Sumire:20200105220335j:plainf:id:Holomoto-Sumire:20200105221019j:plain

これを用いてHandTrianglesShaderを用いたマテリアルをキャラクターのオブジェクトにアタッチしスクリプトでPulseを発生させエフェクトを作成しました。

●Shaderの構成

redhologerbera.hatenablog.com

まだ完全ではありませんが、時間をかけてHandTrianglesShaderを読み解いています。

①メッシュの頂点を取得して処理をするvertex_mainという名の頂点シェーダーでメッシュの頂点をUnityで扱える座標に変換しています。

②頂点シェーダーから3つの頂点を受け取りgeometry_mainという名のジオメトリシェーダーでポリゴンとしてメッシュの重心や回転の軸を処理

③フラグメントシェーダーでカラーを指定、処理しています。

まだ勉強中なのでざっくりとですがHandTrianglesShaderの中身を解説しました。

またマジックナンバーでわからないところなど不明点もシェアしました。(Zoomでわいわい集まって知見だけではなく不明点や躓きポイントもシェアできるイベントはいいですね!)

以上が先日発表した内容になります。

発表でも話をしたのですが中身のコード見なければ触るだけならMRTK PulseShaderはとても簡単に、そしてスクリプトと組み合わせいろいろな表現ができるので是非触ってみてください。

XRミーティングは来月も開催されるのでまた何か発表したいです。