夜風のMixedReality

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

MRTK StanderdShaderを読み解く その1 MRTKStandardShaderとは?

本日はMRTKのShader学習枠です。

〇MixedRealityStandardShaderとは?

microsoft.github.io

 MixedRealityToolkitに同梱されているShaderで、Unity のStandardシェーダと同じような見た目を実現し、Fluent Design システムの原則を実装し、複合現実デバイスでパフォーマンスを維持できる、単一のフレキシブル シェーダを利用しています。

Fluent Design System は、順応性が高く、親近感があり、美しいユーザー インターフェイスを作成するためのシステムでMicrosoftのドキュメントによると以下のようにあります。

順応性:各デバイスで自然な Fluent 体験を得られる

親近感:Fluent 体験は直感的で、強力である

美しさ:Fluent 体験は魅力的で、臨場感がある

docs.microsoft.com

これは2017年のFall Creaters Updateから導入された概念です。その時のBuild2017の映像がありました。

channel9.msdn.com

UXUIにかかわる以下の5つの原則に基づき考えられたデザインのことを指します。

Light:選択、ナビゲーションにおいてユーザーガイダンスに必要な空間を作成

Depth:2Dディスプレイに立体的な次元を追加し、レイヤー、要素の重なりでフラットデザインを「改訂」して分かりやすさを上げる

Motion:ウィンドウとスクリーンのシームレスな切替、要素間のスムーズで自然な遷移によって、1つ1つのユーザーアクションがひと続きの感覚になる

Material:要素に高級感とタッチ感覚を持たせ、ユーザーのインタラクションを促す

Scale:2Dから3Dまで、あらゆる種類のデバイスに通用するデザインの一貫性と互換性に焦点を当てる

この考えはMixedRealityにかかわらずWindowsOSにおいても用いられています。

MRTKStandardShaderのサンプルシーンや使い方は以前の記事を参考にしてください。(長いので本記事最後に掲載します。)

〇MRTKStandardShaderの中身

●Shaderlab
// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT License.

Shader "Mixed Reality Toolkit/Standard"
{
  Properties
{
}
  SubShader
    {
        Pass{}

        // Extracts information for lightmapping, GI (emission, albedo, ...)
        // This pass it not used during regular rendering.
        Pass{}
   }
    
    Fallback "Hidden/InternalErrorShader"
    CustomEditor "Microsoft.MixedReality.Toolkit.Editor.MixedRealityStandardShaderGUI"
}

SubShader内にPassが2つ存在していますが、一つはThis pass it not used during regular rendering.(このパスは通常のレンダリングで使用しないよ)と記述されています。

また

CustomEditor"Microsoft.MixedReality.Toolkit.Editor.MixedRealityStandardShaderGUI"

でマテリアルに表示されるShaderのプロパティをここに記述したスクリプトで弄ることができます。

docs.unity3d.com

Shaderlabの作りとしてはCustomEditorでエディタ拡張がされていることを除き特に特徴的なことありません。

●MRTKStandardShaerの最小構成

まずはMRTKStandardShaderの最小構成を見ていきます。

//ここではMRTKStandardShaderをコピーしてresearchと名付けています。 
Shader "Custom/MRTKStandardShaderResearch"
{
Properties
{
  _Color("Color", Color) = (1.0, 1.0, 1.0, 1.0)
}

SubShader
        {
   Pass
            {
                Name "Main"
                Tags{ "RenderType" = "Opaque" "LightMode" = "ForwardBase" }
                LOD 100

                CGPROGRAM
                #pragma vertex vert
                #pragma fragment frag

                #include "UnityCG.cginc"
                #include "UnityStandardConfig.cginc"
                #include "UnityStandardUtils.cginc"
                #include "MixedRealityShaderUtils.cginc"


            struct appdata_t
            {
                float4 vertex : POSITION;


                UNITY_VERTEX_INPUT_INSTANCE_ID
            };

            struct v2f
            {
                float4 position : SV_POSITION;

                UNITY_VERTEX_OUTPUT_STEREO

            };
             fixed4 _Color;

         

            v2f vert(appdata_t v)
            {
                v2f o;
                UNITY_SETUP_INSTANCE_ID(v);
                UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(o);
                float4 vertexPosition = v.vertex;


                o.position = UnityObjectToClipPos(vertexPosition);

                return o;
            }

            fixed4 frag(v2f i, fixed facing : VFACE) : SV_Target
            {
                fixed4 albedo = fixed4(1.0, 1.0, 1.0, 1.0);
                albedo *= _Color;
                fixed4 output = albedo;

                return output;

                return output;
            }

            ENDCG
        }
        }
            Fallback "Hidden/InternalErrorShader"
}

もっと最低限の構成まで削れるかもしれませんが、エラーを吐かないところまで削りました。頂点シェーダー、フラグメントシェーダーで構成されています。(ジオメトリシェーダーがないのは意外です。)

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

〇StandardShaer/MaterialGalleryまとめ

redhologerbera.hatenablog.com

redhologerbera.hatenablog.com

redhologerbera.hatenablog.com

redhologerbera.hatenablog.com

redhologerbera.hatenablog.com

redhologerbera.hatenablog.com

redhologerbera.hatenablog.com