RenderMate / UIPanel

uGUI の Image 向け、SDF ベースの多機能 UI シェーダーです。1 枚のマテリアルで以下をまとめて扱えます。

  • 角形状（直角 / 角丸 / 45 度カット八角形）の切替
  • 枠線（色・太さ）
  • 線状 / 同心円グラデーション（本体色への乗算）
  • MSDF モード（_BaseTex を MSDF として解釈し、拡大しても輪郭が破綻しない文字・アイコンを描画）
  • 2 色ブリンク（周期・波形シャープネス可変）
  • 線状 / 同心円ディゾルブ（エッジ色付き）
  • HDR カラー、CanvasGroup / Image.color との連動

VRChat ワールド（PC / Quest）でそのまま使えるよう、カスタム C# / UdonSharp / BaseMeshEffect を一切使わず、allowlist 収録済みの UnityEngine.UI.PositionAsUV1 のみで RectTransform 変更に追従します。

クイックスタート

  1. Canvas の設定 対象 Canvas を選択 → Inspector の Additional Shader Channels で TexCoord1 にチェック。 （World Space Canvas は既定で OFF なので特に忘れがち）

  2. Image に Position As UV 1 を追加 対象 Image GameObject で Add Component → UI → Effects → Position As UV 1。 必須です。 これを付けないと角丸や形状が崩れた見た目になります。

  3. マテリアルを割り当て Packages/tokyo.chigiri.pasocommate.rendermate/Materials/UIPanel.mat を 複製してから Image の Material に指定してください（テンプレートを直接編集しないこと）。

  4. Image Type を Simple に Sliced / Tiled / Filled は UV 分布が崩れるため非対応です。

  5. Pivot を (0.5, 0.5) に 中心基準 SDF を前提に実装されているため、これ以外の pivot では形状が破綻します。

これでマテリアル Inspector の各項目がそのまま反映されるようになります。

レシピ（よくある使い方）

角丸ボタン

  • Corner Shape = ROUND
  • Corner Size = 12〜24 px 程度
  • Border Width = 2 px、Border Color = お好み（0 で枠線 OFF）
  • Gradient = NONE

斜めカット（八角形）パネル

  • Corner Shape = OCTAGON
  • Corner Size = カット量（px）
  • 幅・高さより大きい値を入れるとシェーダー側で自動的に最大値にクランプされます

MSDF テキスト / アイコンを表示する

  • _BaseTex に msdfgen で生成した MSDF テクスチャを割り当て
  • Interpret Base as MSDF = ON、_Color で色を設定（MSDF モードではテクスチャ RGB は距離情報として扱われ、色は Color と頂点カラーのみで決まる）
  • MSDF Pixel Range = 生成時に指定した pxRange（既定は 4）と揃える
  • MSDF テクスチャの Filter Mode は Bilinear、sRGB (Color Texture) は OFF、Compression は None か Uncompressed 推奨
  • _BaseTex_ST の Tiling/Offset でサイズ・位置を調整

ブリンク（2 色点滅）

  • Blink を ON、_Color と _ColorBlink の 2 色を設定、Blink Period で周期（秒）を指定
  • Blink Sharpness で波形を調整: 0 = 純サイン、1 = 矩形波（ハード on/off）、中間で任意のソフト矩形波
  • アニメーションで Sharpness を動的に変えても滑らかに繋がる

ディゾルブ（徐々に消える演出）

  • Dissolve Mode = LINEAR（方向指定）か RADIAL（中心から）
  • Dissolve Threshold を 0 → 1 にアニメさせると消えていく
  • Dissolve Softness で境界のなだらかさ、Dissolve Edge Color / Width で燃えるようなエッジ表現

プロパティ一覧

基本色

プロパティ型・単位説明
_BaseTex2D本体テクスチャ。UV に沿って通常のテクスチャとしてサンプルされる（UI の Source Image による上書きは受けない）。未指定時は 1×1 white として扱われるので実質 no-op
_BaseTex_STVectorTiling (xy) / Offset (zw)
_ColorHDR Color本体色（ブリンク有効時は開始色）

形状

プロパティ型・単位説明
_CORNERKeywordEnumSQUARE / ROUND / OCTAGON
_CornerSizepx (0..128)角丸半径 または 八角形カット量

枠線

プロパティ型・単位説明
_BorderColorHDR Color枠色
_BorderWidthpx (0..32)枠太さ。0 で枠線 OFF（完全に消える）

グラデーション

プロパティ型・単位説明
_GRADIENTKeywordEnumNONE / LINEAR / RADIAL
_GradientColor1 / _GradientColor2HDR Color両端の色
_GradientAngle度線状のみ。0°=上→下、90°=左→右
_GradientCenterUV (0..1)同心円の中心（0.5, 0.5 で矩形中央）
_GradientRadiusVectorx: 内側半径（ここまでは Gradient Color 1 でフィル）。y: 外側半径（ここからは Gradient Color 2 でフィル、x → y がグラデ領域）。z, w: 楕円のアスペクト比 z:w（(1,1) で真円、(2,1) で横長 2:1 楕円）。半径は主軸（z/w のうち大きい方）に対して短辺基準の比率

※ グラデーションは本体色に乗算で合成し、α は変更しません。

MSDF モード

_BaseTex を MSDF テクスチャとして解釈し、SDF アンチエイリアスを適用する。テクスチャ RGB は距離情報として使われるので、表示色は _Color（と頂点カラー）で決まる。

プロパティ型・単位説明
_UseMSDFToggle_BaseTex を MSDF として解釈する ON/OFF
_MSDFPixelRangeFloatmsdfgen 生成時の pxRange と合わせる

ブリンク

プロパティ型・単位説明
_BlinkOnToggleブリンクの ON/OFF
_ColorBlinkHDR Color点滅時の 2 色目（ON で _Color ↔ _ColorBlink を行き来）
_BlinkPeriod秒 (0.05..10)1 周期の長さ
_BlinkSharpness0..1波形。0 = 純サイン、1 = 矩形波（ハード on/off）、中間はソフト矩形波。内部的には `pow(

ディゾルブ

プロパティ型・単位説明
_DISSOLVEKeywordEnumOFF / LINEAR / RADIAL
_DissolveThreshold0..1これ未満の領域が消える
_DissolveSoftnessFloat境界のぼかし幅（大きいほどなだらか）
_DissolveAngle度線状の方向（グラデと独立）
_DissolveCenterUV (0..1)同心円の中心
_DissolveRadius比率矩形の短辺基準での終端半径（アスペクト比に依存せず常に真円）
_DissolveEdgeColorHDR Color境界上に乗る色
_DissolveEdgeWidthFloat境界色が乗る幅

UI 互換（通常は触らない）

_StencilComp / _Stencil / _StencilOp / _StencilWriteMask / _StencilReadMask / _ColorMask / _UseUIAlphaClip いずれも Unity 標準 UI/Default と同等。Mask コンポーネントとの併用時に UI 側が自動設定します。

制約事項（設計上の前提）

制約理由
Image Type = Simple のみSliced / Tiled / Filled は内部的に UV が書き換わり、SDF 計算の前提が崩れる
Pivot = (0.5, 0.5) 必須PositionAsUV1 で伝わる座標を中心基準で扱うため
非一様スケール非推奨SDF の等方性が崩れ、角丸半径や枠太さが縦横で変わる
ドロップシャドウ非対応頂点の外側押し出しができないため、今回スコープ外
背景ぼかし非対応GrabPass が Quest で使えない

トラブルシューティング

  • 角丸にならず、長方形が歪む → Position As UV 1 が付いていない、または Canvas の TexCoord1 が OFF
  • 大きくすると MSDF がにじむ → _MSDFPixelRange がテクスチャ生成時の pxRange と一致していない、または sRGB (Color Texture) が ON・圧縮が有効になっている
  • 枠線が _BorderWidth = 0 でも薄く残る → ありません。0 で厳密に消える設計（borderCoverage が 0 に潰れるため）
  • CanvasGroup でフェードが効かない → マテリアルを複数 Image で共有していても vertex color 経由で個別に効きます。効かない場合は Canvas の Additional Shader Channels 設定を確認
  • Quest で見た目が崩れる → HDR 強度を過大にしていないか、OpenGL ES のレンダーターゲット精度で飽和していないかを確認

内部仕様（触る人向け）

  • 頂点座標は PositionAsUV1 により TEXCOORD1 へピクセル単位で書き込まれ、そこから中心基準 SDF を計算
  • v2f の割り当て: TEXCOORD0 = UV、TEXCOORD1 = pixelPos、TEXCOORD2 = halfSize（4 頂点で abs(uv1) が同値になる性質を利用）、TEXCOORD3 = cachedT（点滅 t・線形グラデ t・線形ディゾルブ t をまとめて頂点で評価し補間）、TEXCOORD4 = worldPosition（UNITY_UI_CLIP_RECT 有効時のみ）
  • _CORNER_ROUND / _CORNER_OCTAGON では clip(shapeAlpha) で形状外ピクセルを早期破棄し、Quest などの TBDR GPU でタイル書き込みを省略
  • キーワード方針: モード系は shader_feature_local（マテリアル毎に固定）、UNITY_UI_CLIP_RECT だけは Mask が実行時に切り替えるため multi_compile
  • SDF の数式は Inigo Quilez “2D distance functions”（MIT）をベースに自前実装（出典はシェーダー上部コメントに明記）
  • MSDF の AA は Chlumsky 標準の screenPxRange 方式
  • 点滅波形は 0.5 + 0.5 · sign(sin) · pow(|sin|, exp2(-8·sharpness)) の単一式で sin と矩形波を連続につなぐ

シェーダー本体は Shaders/UIPanel.shader。

Package Name

tokyo.chigiri.pasocommate.rendermate

Documentation

Undefined

Repositories

Version

1.0.0

Unity version

2022.3 or later

Dependencies

No dependencies

VPM Dependencies

Legacy Packages

No legacy packages

License

MIT

Author

Chigiri Tsutsumi

Package JSON from Repository

{
  "name": "tokyo.chigiri.pasocommate.rendermate",
  "displayName": "RenderMate",
  "version": "1.0.0",
  "unity": "2022.3",
  "description": "Core shader and material toolkit required by PasocomMate packages for VRChat worlds.",
  "gitDependencies": {},
  "vpmDependencies": {
    "com.llealloo.audiolink": ">=3.1.2"
  },
  "author": {
    "name": "Chigiri Tsutsumi"
  },
  "license": "MIT",
  "zipSHA256": "82b8c7d0cca47b38198f1b56642305446028544b0e160c109f0172e9166dfcfe",
  "url": "https://github.com/pasocommate/RenderMate/releases/download/1.0.0/tokyo.chigiri.pasocommate.rendermate-1.0.0.zip"
}