SwiftUI と Shader を活用した楽しいオンボーディング起動画面の作成 by Megabits

今年初めに、私はカメラアプリ 「SLIT_STUDIO」 を開発し、リリースしました。このアプリは、スリット・スキャンという旧来の VFX 技術を再現したものです。スリット・スキャンを簡単に解釈するとスリット（線）で風景を撮影し、それによって得られた画像を重ね合わせて二次元の画像を生成する VFX 技術です。

アプリを初めてインストールするユーザーにスリット・スキャンの原理を理解してもらうために、オンボーディング画面を用意しました。その最初に、インタラクティブな起動画面を設置しました。この起動画面では、ユーザーが直感的にスリット・スキャンの原理を体験できるようにしています。

オンボーディング全体はこちらの動画をご覧ください：https://drive.google.com/file/d/1i8GSxg5EYyz07-iMH-tz7KtSd0tPpZZv/view?usp=sharing

最初の起動画面では、画面を長押しすると、スキャンラインが下から上に移動して、指を離すと元に戻ります。スキャンラインの下には、この起動画面をスリット・スキャンに通した結果を表示します。SwiftUI と Metal Shader を使用して作成しました。

SwiftUI には、Color Effect, Distortion Effect, Layer Effect の3つの Shader API があります。 この画面で3つすべてを使用しました。
このトークでは、画面のデザインからAPIの選択、実装に至るまで、この起動画面を制作した流れを詳しく話します。アプリでの Shader の応用に関する参考になる情報を提供できれば幸いです。

重要ポイント：

• 3つの Shader API の使いわけ
• SwiftUI だけでできないこと
• 性能を良くするために頑張ったこと