Liquid Glass を Metal Shader で描きたいだけの人生だった…

WWDC25 Recap - Japan-\(region).swift での発表資料です
https://japan-region-swift.connpass.com/event/353002/

Transcript

1. 2025年7 月 6 日 WWDC 2 5 Recap - Japan-\(region).swift Liquid Glass を Metal Shader で 描きたいだけの 人 生 だった…
2. Tomoki Kobayashi @temoki iPhone 3 G 日 本上陸（2008年）とほぼ同時に iPhone アプリ開発を始めた Apple 信者 in 岐 阜 https://bento.me/temoki • モバイルアプリ受託（iOS / Android） • HR系スタートアップ（iOS / Android） • 電 力 系スタートアップ（Flutter） • 自 動 車 メーカー（Flutter / iOS） 経歴 業務上は Flutterに浮気中
3. 👀 WWDC 2 5 個 人 的な注 目 点 Liquid Glass の表現はおもしろい！（Developer Betaで楽しんでいます）
4. 😍 WWDC 2 5 Keynote ワクワクポイント 出典： https://developer.apple.com/jp/videos/play/wwdc 2 0 2 5 / 1 0 1 やってみたい！
6. 出典： https://www.e-narumi.com/shop/g/gGW 1 0 0 0 - 1 4 0 0 1 / 🤔もしや…？
7. 💧Liquid Glass をアプリのUIに適 用 する 恒例通りXcode 2 6 でビルドしなおすだけ • Info.plistで 一 時的にオプトアウト可 (UIDesignRequiresCompatibility=YES)
8. Now, with the powerful advances in our hardware, silicon, and graphics technologies, we have the opportunity to lay the foundation for the next chapter of out software. VP of Human Interface: Alan Dyne 出典： https://developer.apple.com/jp/videos/play/wwdc 2 0 2 5 / 1 0 1 ࠓ·ͨɺࢲͨͪͷϋʔυ΢ΣΞɺγϦίϯɺάϥϑΟοΫεٕज़ͷύϫϑϧͳਐԽ͕
   ιϑτ΢ΣΞͷ৽࣌୅ͷج൫Λங͘ػձΛ΋ͨΒ͠·ͨ͠ 🤔 それって Metal … ？
9. Metal Shader で Liquid Glass を再現してみたい 再現を試みることでより Liquid Glass の理解が深まるはずだ
10. SwiftUIのViewにMetal Shaderを適 用 する iOS 1 7 以降で使える layerEffect モディファイアを使う 🔖 とても役 立 つ参考 文 献 • Metal Shader E ff ect の細かい話 (@ta_ka_tsu さん) https://www.docswell.com/s/ta_ka_tsu/ KMXGD 9 - 2 0 2 5 - 0 1 - 2 5 -DetailOfMetalShaderE ff ect • 知っているとちょっと嬉しいMetalの話 (@miharun_dev さん） https://zenn.dev/yumemi_inc/articles/dc 4 2 9 fb 9 fc 5 6 a 3
11. Metal Shader を実装する まずはシンプルなモデルで再現してみる • 平 面 に半球ガラスおいたモデル • ガラスによる光の屈折を簡易的に 表現したディストーションエフェクト
12. Metal Shader を実装する まずはシンプルなモデルで再現してみる • 平 面 に半球ガラスおいたモデル • ガラスによる光の屈折を簡易的に 表現したディストーションエフェクト
13. Metal Shader を実装する 実装すべき要素は 色 々ある • ガラスによる光の屈折 • ガラスによる光の反射 （ハイライト） • ガラス形状の種類 • 液体 （リキッド） のような近接形状の融合 • 背景のブラー表現 😥 大 変だ…💧
14. Metal Shader を実装する 頼れるものは最 大 限に頼る！ • Gemini CLI • 6/25 に発表された Google の CLI 型 AI Agent • Claude Code 一 択の現状に 風穴 をあけられるのか！ • liquid_glass_render • Flutter で Liquid Glass を再現したパッケージ • GLSL Shader 使 用 （Metalへの移植もしやすい） • https://pub.dev/packages/liquid_glass_renderer 🤫 Xcode Coding Assistant じゃないのは内緒
15. 結果 １度の指 示 でMetalへの移植ほぼ完了、SwiftUIでのデモの実装もバッチリ👌 • Metal の Geometry Functions に Liquid Glass 向けっぽい関数が‼ 冷静になって考えたら物理ベースのレンダリングで必須ですね😅 • 移植の際に Gemini にそのアーキテクチャもドキュメント化してもらい、 Liquid Glass 表現の実装 方 法について理解が深まった 👍
16. DEMO github.com/temoki/lq
17. Japan-\(region).swift WWDC25 Recap 2025೥7݄6೔ ໊ݹ԰ίϛϡχςΟձ৔