夜風のMixedReality

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

MixedRealityToolKit v2 Examplesを触ってみる OutlineExamples その①

 MixedRealityToolKit(以下MRTK)にはExamplesというデモサンプル集が含まれています。

 Examplesを理解すればMRTKの機能の使い方を学習することやノンコーディングでのアプリ開発が可能になります。

 今回は StanderdshaderのOutlineExamples 見ていきます。


OutLineExample

〇シーン概要

 MRTK / StandardShaderがMeshOutline、MeshOutlineHierarchy、MeshSmootherコンポーネントと連携して、さまざまな手法を使用してMeshRendererをアウトライン化する方法を示しています。

 アウトラインは、メッシュを2回レンダリングして、より大きなサイズに押し出すことによって実行されます。

  二つのMaterialを処理するので軽くはありませんが、このやり方はoutline post process effectsよりもモバイルデバイスにおいてより効果的です。

  一部のメッシュの対称性により、押し出しが正しく展開されないことがあります。

  これを解決するには、MeshSmootherコンポーネントを使用して、メッシュの法線を滑らかにします。

 MeshSmootherは、MeshOutlineまたはMeshOutlineHierarchyコンポーネントを使用すると自動的に発生し、アウトラインマテリアルは滑らかな法線の使用を指定します。

〇シーン解説

   sceneにはCube,Sphere,宇宙船、ドーナツのオブジェクトがあります。    それぞれ一つずつ見ていきます。

・Cubeオブジェクト

 f:id:Holomoto-Sumire:20191118141407j:plain     オレンジ色のoutlineが付いていること以外何も変哲のないキューブです。

 ・MeshRenderer

 ・BoxCollider

 ・Meshoutline

 ・Manipulation Handler

がアタッチされています。

 ここでMeshRendererに設定されているMaterialは実行前は1つですが、実行中Outline用のMaterialが加わり2つになっている点がキーです。  

 キューブ自体のMaterialに加え、アウトライン用のMaterialが追加されています。    また、以前outlineを勉強した際も学びましたが、MRTK StandardShaderのoutline表現はVertexExtrusionを用いて、outline用のMaterialでメッシュを法線方向に展開することで行っています。 redhologerbera.hatenablog.com

 このoutlineのMaterialの追加とVertexExtrusionをMeshoutline.csが行っています。

 MeshOutline.csの使い方はOutlineMaterialにOutline用のMaterial、Outline WidthにOutlineの太さを指定します。

f:id:Holomoto-Sumire:20191118163957j:plain f:id:Holomoto-Sumire:20191118182655j:plain  Meshoutline.csのOutline Widthに設定した値をApployOutlineWidth()でOutlineMaterialに指定したマテリアルのVertexExtrusionValueに反映させメッシュを展開しています。

 protected override void ApplyOutlineWidth()
        {
            if (meshRenderer != null && propertyBlock != null)
            {
                meshRenderer.GetPropertyBlock(propertyBlock);
                propertyBlock.SetFloat(vertexExtrusionValueName, outlineWidth);
                meshRenderer.SetPropertyBlock(propertyBlock);
            }
        }

 これによって元のキューブ、マテリアルにVertexExtrusionによって展開された少し大きいoutlineのMaterialが合わさることでoutlineが表現されています。

 また、VertexExtrusionは法線方向に展開するため、キューブのようなオブジェクトではそのままではoutlineに破断が生じてしまいます。

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

 破断を補完する方法としてMeshSmoother.csを使用します。    MeshSmoother.csはメッシュ状に滑らかにされた法線を自動的に生成するために使用するコンポーネントです。

 空間内の同じ場所にあるメッシュ内の頂点をグループ化し、それらの法線を平均することで平滑化されたメッシュをコピーしているため、Vertex Extrusionによってアウトラインの不均一性が発生している場合のみ使用することが推奨されています。

Spheresオブジェクト

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

 SpheresオブジェクトはSpheresという親オブジェクトに、4つのSphereが子オブジェクトとして並んでいます。  

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

 キューブとの違いはShere一つ一つにMeshOutline.csがアタッチされておらず、親オブジェクトであるSpheresで行っている点です。親オブジェクトのSpheresにはMeshOutlineではなく、MeshOutlineHierarchy.csがアタッチされています。

 MeshOutlineでは同じオブジェクト内のMeshRendererを参照しているため複数のメッシュを扱うことはできません。    MeshOutlineHierarchy.csはすべての子オブジェクトのMeshRendererを参照して、すべての子オブジェクトに対してoutlineを行うことができます。    使い方はMeshOutline.csと同じです。

 今回はOutlineExamplesの前半を見ていきました。

 次回は残りの2つのオブジェクトを見て、理解を深めていきます。