🐼はじめに
ARの平面認識のプレーンがデフォルトだとこんな感じなのですが、
アプリのテイストなどに合わせて柄や色を変えたかったりしますよね！
今回は以下のように、好きな色でドットの柄にする方法、テクスチャの柄にする方法、テクスチャを貼りつつ周りは透明にする方法の３つを紹介したいとおもいます！
サンプルプロジェクトはこちら↓↓↓
github.com
そもそものAR Foundationでの平面認識の方法はこちら↓↓↓
www.wwwmaplesyrup-cs6.work
🐼カスタマイズの方法
プレーンをカスタマイズするにはAR Default Planeプレファブにアタッチされているマテリアルのシェーダーを自分でかいたものに変更することでできます🐼
わざわざシェーダーをかかなくても、この最初からついてるマテリアルにドット絵模様や柄の画像を貼ったらいいんじゃないの？とおもうかもしれませんが、それをすると平面が大きくなっていくとテクスチャが引き延ばされてしまい、思ったような描画になりません。
シェーダーを使用して描画することで平面の大きさに関係なく一定の間隔で柄を出すことができます。
AR Default PlaneはAssets下のどこかに自分でPrefab化しているのですが、見つからない場合はヒエラルキーにあるAR Session Originのインスペクタから、AR Plane ManagerにアタッチしてあるAR Default Planeをクリックすることでプロジェクトウィンドウがその場所を開いてくれます。
AR Default PlaneのプレファブのインスペクターのMesh Rendererのところに現在のマテリアルがセットされています。ここのマテリアル を、自分で書いたシェーダーを適応したマテリアル に変えていきます。
🐼ドット柄のシェーダー
【シェーダーを書く】
まずはドット柄からやっていきましょう🐼
プロジェクトウィンドウからCreate＞Shader＞Unlit ShaderでShaderをつくります。
ここではAR Planeという名前で保存しました。
シェーダーファイルを開き、以下のプログラムを入力します。
Shader "Custom/ARPlane" { Properties { _Color("_Color", Color) = (1, 1, 1, 1) _DotColor("_DotColor", Color) = (1, 1, 1, 1) _Ratio("Ratio", float) = 1 _Size("Size", float) = 0.3 } SubShader { Blend SrcAlpha OneMinusSrcAlpha Pass{ Tags {"Queue" = "Transparent" "RenderType"="Transparent" } LOD 200 CGPROGRAM #pragma vertex vert #pragma fragment frag #include "UnityCG.cginc" struct appdata { float4 vertex : POSITION; float2 uv : TEXCOORD0; }; struct v2f { float4 position : SV_POSITION; float2 uv : TEXCOORD0; }; v2f vert(appdata input) { v2f output; output.position = UnityObjectToClipPos(input.vertex); output.uv = input.uv; return output; } float _Ratio; float _Size; fixed4 _Color; fixed4 _DotColor; fixed4 frag (v2f input) : SV_Target { float2 uv = input.uv * _Ratio; float2 st = frac(uv); fixed d = distance(st, fixed2(0.5, 0.5)); fixed4 col = d < _Size ? _DotColor : _Color; return col; } ENDCG } } }
シェーダーが書けたら、シェーダーファイルの上で右クリック＞ Create ＞ Material をすると、そのシェーダーがすでにセットされたマテリアル が作成されます。
いまのままだとまだマテリアル は真っ白です。
インスペクタから値を設定していきます。
_Colorはドットじゃないところの色、
_DotColorはドットの色、
Ratioはタイリングの値、
_Sizeはドットのサイズ
です。
Ratioの値は20くらいからそれ以上がちょうど良さそうです、
_Colorも_DotColorもアルファ値が使用できるので、少し透過して床をみせるのも良さそうです。
_ColorのAlpha値を０にしてこういうのもよさそう。
こんな感じで色やサイズをカスタマイズできます。
マテリアルができたら先ほど説明したようにAR Default PlaneのMaterialを入れ替えればいいです。ドットのサイズ感などは実際にビルドしながら確かめながら変更していくとよいです。
【シェーダーの解説】
fixed4 frag (v2f input) : SV_Target
{
float2 uv = input.uv * _Ratio;
float2 st = frac(uv);
fixed d = distance(st, fixed2(0.5, 0.5));
fixed4 col = d < _Size ? _DotColor : _Color;
return col;
}
このfrag関数の中をみていきます。
まずこの部分↓
float2 uv = input.uv * _Ratio; float2 st = frac(uv);
まずUVを_Ratioに与えた値で掛けることでUVの値が０〜１から０〜_Ratioになります。
それをfrac(uv)とすることで、frac関数は小数点以下の部分の値を返してくれるので、０から１を繰り返してくれるため、_Ratioの数だけタイリングをしてくれます。
そして次に、ドットを描いています。
fixed d = distance(st, fixed2(0.5, 0.5)); d = step(_Size, d);
distance関数はdistance(x, y)でxとyの距離をfloatで返してくれる関数です。
シェーダーは(0, 0)が左下なので、(0.5, 0.5)がエリアの真ん中になります。
なのでdistance(st, fixed2(0.5, 0.5)); とすることでそれぞれのエリアの中心からの距離が描画されます。
それを最後に_Sizeに渡した値で区切って内側と外側の色をつけることで、円と円の外にそれぞれ色をつけています。
fixed4 col = d < _Size ? _DotColor : _Color;
そしてこの円の描画はfrac関数によってタイリングされているため、全てのエリアに同じものが描画されるので、ドット柄になってくれるということです。
🐼テクスチャをタイリングするシェーダー
【シェーダーをかく】
つづいてテクスチャをタイリングするシェーダーです。
プロジェクトウィンドウからCreate＞Shader＞Unlit Shaderからシェーダーをつくり、ARPlaneTextureという名前にし、以下のシェーダーを書きます。
Shader "Custom/ARPlaneTexture" { Properties { _MainTex("MainTex", 2D) = "white"{} _Color("_Color", Color) = (1, 1, 1, 1) _Ratio("Ratio", float) = 1 } SubShader { Blend SrcAlpha OneMinusSrcAlpha Pass{ Tags {"Queue" = "Transparent" "RenderType"="Transparent" } LOD 200 CGPROGRAM #pragma vertex vert #pragma fragment frag #include "UnityCG.cginc" struct appdata { float4 vertex : POSITION; float2 uv : TEXCOORD0; }; struct v2f { float4 position : SV_POSITION; float2 uv : TEXCOORD0; }; v2f vert(appdata input) { v2f output; output.position = UnityObjectToClipPos(input.vertex); output.uv = input.uv; return output; } sampler2D _MainTex; float4 _MainTex_ST; fixed4 _Color; float _Ratio; fixed4 frag (v2f input) : SV_Target { float2 uv = input.uv * _Ratio; float2 st = frac(uv); fixed4 col = tex2D(_MainTex, st); col *= _Color; return col; } ENDCG } } }
シェーダーが書けたら先ほどと同じようにシェーダーファイルの上で右クリック＞ Create ＞ Materialをしてマテリアル を作成します。
インスペクタからテクスチャをセットし、Ratioの値を変更します。
するとテクスチャがタイリングされてテクスチャ柄のマテリアル になります。
先ほどと同じ原理でテクスチャを反映させただけなので説明は割愛します。
🐼透過付きの画像をタイリングする
続いてこちらの透過付き画像のタイリングです。
こちらは先ほどのテクスチャをタイリングするシェーダーを当てはめたマテリアル に透過付き画像をセットするだけでいけます。
一応説明しておくと、
Blend SrcAlpha OneMinusSrcAlpha
が、透過情報を反映してくれるので、Alpha付きの画像をセットするだけで大丈夫です。
🐼アウトラインの色を変更する
以上ですが、もう一つだけおまけ、AR Default PlaneのLine Rendererのから外側の線の太さや色もカスタマイズできます。プレーンの色や柄に合わせて変えると良いでしょう！
