UI+ VRChat Shader
- Digital900 JPY
# UIPlus UI Shader for VRChat Worlds ## Features - Anti-Aliased rounded edges - Border Color and Width - Box Shadow Spread and Offset - Refractive Glass (2 Modes - Static Texture or Grabpass) - Multi-channel SDF Textures - Super Sampling ## Usage - Create a new Material and assign the `"UI/UIPlus"` Shader - Assign it to a Material on the Image component on a Canvas - Add Component `PositionAsUV1` to the Image (Important) For additional help reference the included sample scene ### Refractive Glass - Regular Mode (Recommended): Set a canvas background texture and adjust the canvas size (the image will cover the portion of the background where its positioned on the canvas) - Grabpass Mode: Uses a Grabpass instead for the background (requires manually managing render queues, no blur option) ### MSDF - Supports MSDF textures generated with [msdfgen](https://github.com/Chlumsky/msdfgen) - Disable sRGB on MSDF textures and enable high quality (use the included texture importer preset) - This allows sharper images with lower resolution (similar to TextMeshPro fonts but for an image) ## Contents - UI Shader `"UI/UIPlus"` - UI Shader with Grabpass `"UI/UIPlus Grabpass"` - Example Scene (all of the images were taken in Unity) ## Limitations This shader was created with certain VRChat limitations: - Every Image requires a `PositionAsUV1` component (Add Component -> UI -> Effects -> Position As UV1). This component sets additional vertex attributes that are required for certain shader features to work properly - Additional shader channels `TexCoord1`, `Normal`, and `Tangent` are required on the Canvas component (On by default on VRChat UI) - Shader is only meant for the UI (mesh renderers are not supported) - Only Image Type `Simple` is supported - Sprite Atlas is supported - Changing the Rect Transform Pivot is not supported with all features (changing the pivot of a parent Rect Transform works however) - The Shadow feature can not work with non uniform transform scaling - Wide shadow distance effects might have issues with culling and sorting (the mesh gets extruded) - Managing the Render Queue can be hard with the Refractive Glass Grabpass shader. Using a static background texture is better and can also be blured - The vertex color alpha has multiply all the individual layers in order for canvas group alpha to function. To keep borders, shadow and other layers visible use a transparent sprite instead - An attempt was made to make the shader compatible with UI as much as possible, but I can not guarantee it works with every Unity feature - The shader itself does not have any dependencies on VRChat itself and can be used in a standalone Unity application with the Built-In Render Pipeline as well (excluding the example scene) ## Changelog ### [1.0.0] - 2025-11-11 - Initial Release ## Example Example VRChat World - https://vrchat.com/home/world/wrld_d86c4cca-1d13-49f6-af79-5ce997179a7c/info ## Contact https://discord.gg/bw46tKgRFT ## Terms of use You are permitted to use and modify the shader for public or private VRChat worlds, or any other Unity application, without including the shader source code.
日本語
# UIPlus VRChatワールド用UIシェーダー ## 機能 - アンチエイリアス処理された丸みを帯びたエッジ - 境界線の色と幅 - ボックスシャドウの拡散とオフセット - 屈折ガラス（2つのモード - 静的テクスチャまたはグラブパス） - マルチチャンネルSDFテクスチャ - スーパーサンプリング ## 使用方法 - 新しいマテリアルを作成し、「UI/UIPlus」シェーダーを割り当てます。 - キャンバス上の画像コンポーネントのマテリアルに割り当てます。 - 画像に「PositionAsUV1」コンポーネントを追加します（重要）。 詳細については、付属のサンプルシーンを参照してください。 ### 屈折ガラス - 通常モード（推奨）：キャンバスの背景テクスチャを設定し、キャンバスサイズを調整します（画像はキャンバス上の配置された背景部分を覆います）。 - グラブパスモード：背景にグラブパスを使用します（レンダリングキューを手動で管理する必要があります。ぼかしオプションはありません）。 ### MSDF - サポート[msdfgen](https://github.com/Chlumsky/msdfgen) で生成されたMSDFテクスチャ - MSDFテクスチャのsRGBを無効にし、高品質を有効にします（付属のテクスチャインポータープリセットを使用）。 - これにより、低解像度でも鮮明な画像を作成できます（画像用のTextMeshProフォントに似ています）。 ## 内容 - UIシェーダー `"UI/UIPlus"` - Grabpass付きUIシェーダー `"UI/UIPlus Grabpass"` - サンプルシーン（すべての画像はUnityで撮影されています） ## 制限事項 このシェーダーは、VRChatの特定の制限事項を考慮して作成されています。 - すべての画像には `PositionAsUV1` コンポーネントが必要です（「コンポーネントを追加」→「UI」→「エフェクト」→「Position As UV1」）。このコンポーネントは、特定のシェーダー機能が正しく動作するために必要な追加の頂点属性を設定します。 - Canvas コンポーネントには、追加のシェーダーチャンネル「TexCoord1」、「Normal」、「Tangent」が必要です（VRChat UI ではデフォルトでオン）。 - シェーダーは UI 専用です（メッシュレンダラーはサポートされていません）。 - 画像タイプは「Simple」のみサポートされています。 - スプライトアトラスはサポートされています。 - Rect Transform のピボットの変更は、すべての機能でサポートされているわけではありません（ただし、親 Rect Transform のピボットの変更は可能です）。 - シャドウ機能は、非均一なトランスフォームスケーリングでは動作しません。 - シャドウ距離が広いエフェクトは、カリングとソートに問題が発生する可能性があります（メッシュが押し出されます）。 - Refractive Glass Grabpass シェーダーでは、レンダーキューの管理が困難になる場合があります。静的な背景テクスチャを使用する方が適切であり、ぼかすこともできます。 - Canvas グループアルファを機能させるには、頂点カラーアルファをすべてのレイヤーで乗算する必要があります。境界線、影、その他のレイヤーを表示するには、代わりに透明なスプライトを使用してください。 - シェーダーは可能な限りUIとの互換性を持たせるよう努めましたが、すべてのUnity機能で動作することを保証することはできません。 - シェーダー自体はVRChat自体に依存しておらず、組み込みのレンダーパイプラインを使用したスタンドアロンのUnityアプリケーションでも使用できます（サンプルシーンを除く）。 ## 変更履歴 ### [1.0.0] - 2025年11月11日 - 初回リリース ## 例 VRChatワールドの例 - https://vrchat.com/home/world/wrld_d86c4cca-1d13-49f6-af79-5ce997179a7c/info ## お問い合わせ https://discord.gg/bw46tKgRFT ## 利用規約 このシェーダーは、パブリックまたはプライベートのVRChatで使用および改変できます。シェーダー ソース コードを含めずに、ワールドやその他の Unity アプリケーションを作成できます。