夜風のMixedReality

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

SpatialMesh用のオリジナルShaderを書く  二重リングのSpatialScanShaderを書く

本日はShader学習枠です。

〇SpatialScanShaderとは?

SpatialScanShaderは筆者オリジナルのHoloLens向けシェーダーです。(もちろんVRでも使えます。)

HoloLensシリーズではSpatialAwareness(空間認識)によって周囲の環境を認識し、メッシュを貼ることができます。このメッシュをSpatialMesyと呼びます。

MRTKでは2021年1月現在(MRTK v2.53)次のようなSpatialMesh用のShaderが提供されています。

〇Oclussion

透明なマテリアルを作成するShaderです。

SpatialMeshは場合によってユーザー体験の質を落とすことにもつながるので必要がない場面ではこのOclussionShaderを使用する場面が多いです。

〇Wireframe

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

SpatialMeshのポリゴンの輪郭を浮かび上がらせるShaderです。

〇PulshShader

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

SpatialMeshのポリゴン単位でパルスが流れる表現が行えるShaderです。

これらMRTKで提供されているShaderはSpatialMeshのポリゴンを基準として表現を行っています。

今回はポリゴン基準ではなく、滑らかにパルスが走る表現を目的としてオリジナルShaderを開発しました。

redhologerbera.hatenablog.com

redhologerbera.hatenablog.com

このSpatialScanShaderではMRTKのWireframeSahaderをベースにMRTKStandardShaderのTriplanarShaderを応用してTextureを扱えるようにしています。

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

今回はこのShaderをさらに改造します。

〇リング数を増やす。

今回はリングの数を増やして二重のリングを放つShaderを作成します。

まずはSpatialScanShaderのおさらいをします。

redhologerbera.hatenablog.com

このShaderではピクセルごとの色を処理するフラグメントシェーダーで重要な処理を行っています。

  float4 frag(v2f i ):COLOR{
            float radius;
            
            #if   _AUTO_WAVE_ON
            float speed = 1/_Speed;
                 radius =_WaveSize*(_Time/speed - floor(_Time/speed+1/2));
            #else
               radius = _Radius;
            #endif
          float dist = distance(_Center, i.worldPos);
            float Isize =_LineSize +_InnerSize;
            float intensity =1/_MasterIntensity ;
                float val = 1 - step(dist, radius - _LineSize) * _Inner;
                val = lerp(radius - Isize, dist,radius - 3) * step(dist, radius) * val/intensity;     
                return fixed4(val * _Color.r, val * _Color.g,val * _Color.b, 1.0);
        }
               float val = 1 - step(dist, radius - _LineSize) * _Inner;

上記の処理で円の内側を塗りつぶさないように処理をしています。

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

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

                val = lerp(radius - Isize, dist,radius - 3) * step(dist, radius) * val/intensity;     

上記の画像の状態でさらにリングの余計な部分を塗りつぶさないように処理をします。

この二つの処理で残された領域が描画の対象になります。

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

この領域が時間とともにノコギリ波で周期的に広がることでScanの表現(パルス)を行っています。

つまり二重のリングにするためには

               float val = 1 - step(dist, radius - _LineSize) * _Inner;

によって内側の領域がクリッピング(塗りつぶししない処理)される際にもう一つのリングを作成すればよいことになります。

次のように書いてみました

     //全体のリング内部 
                float ring1 =step(dist, radius - Isize) * _Inner;
               //第二リング
                float ring2= step(dist, radius*0.5 - Isize*0.5)*_Inner;
            float inring2 =lerp(radius*0.5-Isize*0.5,dist,radius*0.5 -3)*step(dist,radius*0.5)*(1-ring2)/intensity;
            float rings =ring1-inring2;

変更点は二つ目のリングとして一つ目の円から半分の大きさの円を作成します。

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

   //第一リング内部 
                float ring1 =step(dist, radius - Isize) * _Inner;
               //第二リング
                float ring2= step(dist, radius*0.5 - Isize*0.5)*_Inner;
          //  float inring2 =lerp(radius*0.5-Isize*0.5,dist,radius*0.5 -3)*step(dist,radius*0.5)*(1-ring2)/intensity;
            float rings =ring1-ring2;
           
            float val = 1-rings;
           //    val = lerp(radius - Isize, dist,radius - 3) * step(dist, radius) * val/intensity;     
                return fixed4(clamp(0,1,val*val) * albedo.r,clamp(0,1,val*val) * albedo.g,clamp(0,1,val*val)* albedo.b, 1.0);

先に内側のリングを作成します。

               //第一リング内部 
                float ring1 =step(dist, radius - Isize) * _Inner;
               //第二リング
                float ring2= step(dist, radius*0.5 - Isize*0.5)*_Inner;
            float inring2 =lerp(radius*0.5-Isize*0.5,dist,radius*0.5 -3)*step(dist,radius*0.5)*(1-ring2)/intensity;
            float rings =ring1-ring2;
           
            float val = 1-rings;
           //    val = lerp(radius - Isize, dist,radius - 3) * step(dist, radius) * val/intensity;     
                return fixed4(clamp(0,1,val*val) * albedo.r,clamp(0,1,val*val) * albedo.g,clamp(0,1,val*val)* albedo.b, 1.0);

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

次に第一リングの外側の領域を描画しないように処理します。

               //第一リング内部 
                float ring1 =step(dist, radius - Isize) * _Inner;
               //第二リング
                float ring2= step(dist, radius*0.5 - Isize*0.5)*_Inner;
            float inring2 =lerp(radius*0.5-Isize*0.5,dist,radius*0.5 -3)*step(dist,radius*0.5)*(1-ring2)/intensity;
            float rings =ring1-inring2;
           
            float val = 1-rings;
              val = lerp(radius - Isize, dist,radius - 3) * step(dist, radius) * val/intensity;     
                return fixed4(clamp(0,1,val*val) * albedo.r,clamp(0,1,val*val) * albedo.g,clamp(0,1,val*val)* albedo.b, 1.0);

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

以上で二重リングのSpatialScanShaderが完成しました。

実機で動かすと次のようになります。

youtu.be

〇コード全文

///Made by HoloMoto
Shader "HoloMoto/SpatialScenerDoubleRings"
{
    Properties {
        _MainTex("Texutre",2D)="white"{}
        _Color ("Color", Color) = (1, 1, 1, 1)
        _Center ("CenterX", vector) = (0, 0, 0)
         [Toggle] _Auto_Wave("AutoWave", Float) = 0
        _WaveSize("MaxWaveSize",Float)=10
        _Speed("WaveSpeed",float)=1
        _Radius ("Radius", float) = 5
        _LineSize("LineSize",Range(0,1))=0.075
        _Inner("InnerIntensity",Range(0,1))=0.806
        _InnerSize("InnerSize",Range(0,200))=0.14
        _MasterIntensity("MasterIntensity",Range(0,10))=0.2
    }
    SubShader
    {
      Tags{"RenderType"="Opaque"}
      Blend SrcAlpha OneMinusSrcAlpha
      BlendOp Add
      ZTest LEqual
      ZWrite On
      Cull Back
        Pass{
        CGPROGRAM
        #pragma  vertex vert
        #pragma  fragment frag
        
        #pragma shader_feature _AUTO_WAVE_ON
        #include  "UnityCG.cginc"
            float4 _Color;
            float3 _Center;
            float _Radius;
            float _LineSize;
            float _Inner;
            float _InnerSize;
            float _MasterIntensity;
            sampler2D _MainTex;
            fixed4 _MainTex_ST;

        struct  appdata_t
        {
            float4 vertex :POSITION;
            float2 uv :TEXCOORD0;
            fixed3 normal :NORMAL;
        };
        struct v2f
        {
            float2 uv :TEXCOORD0;   
            float4 pos : SV_POSITION;
            float4 worldPos : TEXCOORD1;
            //Triplanaer Mapping
            fixed3 worldNormal:COLOR3;
            fixed3 triplanaerNormal : COLOR4;
            fixed4 triplanaerPosition : TEXCOORD6;
            UNITY_VERTEX_OUTPUT_STEREO
        };

        v2f vert(appdata_t   v)
        {
            v2f o;
            UNITY_SETUP_INSTANCE_ID(v);
            UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(0);            
            o.pos = UnityObjectToClipPos(v.vertex);
            o.worldPos = mul(unity_ObjectToWorld, v.vertex).xyzw;
            fixed3 localNormal = v.normal;
            fixed3 worldNormal = UnityObjectToWorldNormal(localNormal);
            o.triplanaerPosition = o.worldPos;
            o.uv =TRANSFORM_TEX(v.uv,_MainTex);
            o.worldNormal = worldNormal;
            o.triplanaerNormal = worldNormal;
            o.triplanaerPosition = o.worldPos;
            return o;
        }
        float _Speed;
        float _Test;
        float _WaveSize;
        float4 frag(v2f i ,fixed faceing :VFACE):COLOR{
            float radius;
            
            #if   _AUTO_WAVE_ON
            float speed = 1/_Speed;
                 radius =_WaveSize*(_Time/speed - floor(_Time/speed+1/2));
            #else
               radius = _Radius;
            #endif

            
            //TriplanaerSettings
            fixed3 triplanarBlend = pow(abs(i.triplanaerNormal),1);
            triplanarBlend/=dot(triplanarBlend,fixed3(1,1,1));
            float2 uvX = i.triplanaerPosition.zy * _MainTex_ST.xy+_MainTex_ST.zw;
            float2 uvY = i.triplanaerPosition.xz * _MainTex_ST.xy+_MainTex_ST.zw;
            float2 uvZ = i.triplanaerPosition.xy *_MainTex_ST.xy+_MainTex_ST.zw;
         
            float3 axisSign = i.triplanaerNormal <0? -1 : 1;
            uvX*=axisSign.x;
            uvY*=axisSign.y;
            uvZ*=axisSign.z;
        
            
            fixed4 albedo = tex2D(_MainTex,uvX)*triplanarBlend.x + tex2D(_MainTex,uvY)* triplanarBlend.y+tex2D(_MainTex,uvZ)*triplanarBlend.z;
            //TriplanaerSettingsEnd.

            albedo *= _Color;            

            float dist = distance(_Center, i.worldPos);
            float Isize =_LineSize +_InnerSize;
            float intensity =1/_MasterIntensity ;
               //第一リング内部 
                float ring1 =step(dist, radius - Isize) * _Inner;
               //第二リング
                float ring2= step(dist, radius*0.5 - Isize*0.5)*_Inner;
            float inring2 =lerp(radius*0.5-Isize*0.5,dist,radius*0.5 -3)*step(dist,radius*0.5)*(1-ring2)/intensity;
            float rings =ring1-inring2;
            
            float val = 1-rings;
               val = lerp(radius - Isize, dist,radius - 3) * step(dist, radius) * val/intensity;     
                return fixed4(clamp(0,1,val*val) * albedo.r,clamp(0,1,val*val) * albedo.g,clamp(0,1,val*val)* albedo.b, 1.0);
        }
        ENDCG    
            }        
    }
    FallBack "Diffuse"
    FallBack "Mixed Reality Toolkit/Standard"
}