Metal #22 [付録] SwiftUI シェーダー

• Lingheng Tao
• 2024年11月15日
• 読了時間 6 分

Graphics & API Content List

#TechnicalArt#ComputerGraphics#GraphicsAPI#GameEngine

このノートは SwiftUI で Metal Shading Language を使ってビューにマテリアルを提供する方法についてです。

SwiftUI の Shader

iOS 17 以降、SwiftUI は View に3種類の視覚効果を適用できる：colorEffect、layerEffect、distortEffect。これら3つの Effect は、2D 平面ベースの Metal シェーダーを現在の view に適用する。

公式ドキュメント [1] でも、SwiftUI で使用可能な Shader の説明は少なく、一部の制限も明確に示されていない。本ノートは重要な詳細を列挙し、SwiftUI の Metal シェーダー開発の助けとする。

また、本稿で言及するすべての Shader とコードライブラリはオープンソース：https://github.com/Lockbrains/SwiftUI-2D-Shader-Assets

使用方法

SwiftUI 側での呼び出し

SwiftUI では、view に直接 .colorEffect、.layerEffect、.distortEffect の修飾子を1つまたは複数適用できる。

3種類の Shader Effect の使い分け：

1. .colorEffect：Shader が現在ピクセルの色情報のみ必要とする場合に使用。片元シェーダーとみなせる。
2. .layerEffect：Shader が現在ピクセルの色に加えて、修飾された view の layer 全体が必要な場合。コンテキスト依存の効果（ガウシアンブラーなど）を実装可能。
3. .distortEffect：Shader が頂点位置を変更する場合に使用。頂点シェーダーとみなせる。

MSL の構文

各 Effect は要件に合った MSL 関数で Shader の内容を提供する必要がある。異なる Effect は異なる関数シグネチャに従う必要がある。

Color Effect

Color Effect に必要なシグネチャ：

• 第0パラメータの float2 position：ユーザー空間のピクセル座標。SwiftUI の shader 開発前にユーザー空間座標の意味を理解すること。
• 第1パラメータの half4 color：view のその論理位置の現在の色。

position と color は MSL の Shader シグネチャで提供するだけでよく、SwiftUI の ShaderLibrary.shaderName では提供不要。これらは自動で渡される。他のシグネチャは一対一で順序通りに対応する。

Layer Effect

Layer Effect に必要なシグネチャでは、layer.sample(position) で view の position 位置の色を取得できる。layer 全体のグローバル情報があるため、layer.sample(f(position)) で現在位置に関連する他の位置の情報も取得可能。これによりブラーなどの操作が可能。

簡易ガウシアンブラーでは、position 付近の合計9つの論理点をサンプリングしてガウシアンブラーを実現する。

SwiftUI でのデータ渡しは Color Effect と同じ。maxSampleOffset を追加で提供する必要がある。