2 / 4 UVによる表示範囲と色
Phaseで表示する位置を動かし、メッシュの形と模様の位置を区別します。
Graphと公開値
ProjectのMaterialsフォルダーでCreate > Shader Graph > URP > Unlit Shader Graphを選び、SlashGraphと名付けます。Graphを開き、Graph InspectorのGraph SettingsでSurface TypeをTransparent、Blending ModeをAlpha、Render FaceをBothにします。
BlackboardにFloatを追加し、名前をPhase、Defaultを0.5にします。選択したPropertyのGraph InspectorでReferenceを_Phase、Exposedを有効にします。画面上の名前と、スクリプトが使うReferenceは別の項目です。Referenceを省略せず確認してください。
表示範囲の計算
まず白黒の範囲を作ります。白の1は表示、黒の0は透明となる値を、マスクとして使います。
mask = Saturate(1 - Abs(U - Phase) / 0.25)UとPhaseが同じ場所ではAbsの結果が0なので、maskは1です。そこから離れるほど小さくなり、距離0.25以上では0になります。Saturateは0〜1へ収める処理です。Phaseを増やすと、表示の中心がUの大きい方へ進みます。
UVノードを追加し、ChannelをUV0にします。出力をSplitへ接続します。RがU、GがVです。- BlackboardからPhaseをGraphへドラッグします。
SubtractのAへSplitのR、BへPhaseを接続します。- Subtractの出力を
Absoluteへ、その出力をDivideのAへ接続し、DivideのBへ0.25を入力します。 - Divideを
One Minusへ、その出力をSaturateへ接続します。これがmaskです。 - FragmentのBase Colorを白、Alphaへmaskを接続し、Graphを保存します。
- ProjectでSlashGraphを右クリックし、
Create > MaterialでSlashMaterialを作ります。SlashのMesh Rendererへ割り当て、MeshPreviewから切り替えます。
MaterialのPhaseを0.25 → 0.75 → 0.5へ変更します。Transformが動いていなくても表示範囲が弧に沿って移動すれば成功です。表示されない場合はGraphの保存、Material、Surface Type、Alphaへの接続を確認します。
Gradientによる色
GraphへGradientとSample Gradientを追加します。Gradientは0の色を青、1の色を白、Alphaは両端1にします。Gradientの出力をSample GradientのGradient入力へ、maskをTime入力へ接続します。Sample GradientのRGBA出力をBase Colorへ接続すると、RGB成分が使われます。Alphaのmask接続は残します。
保存すると、表示範囲の中心が白、周囲が青になります。色の変更後はGraphを保存し、MaterialのPhaseを0.5へ戻します。Gradientは色、maskは表示範囲を担当しています。
- Phaseだけを変えて表示位置を移動し、
0.5へ戻せる。 - maskが1となる位置と、透明になる範囲を説明できる。