FlutterKaigi 2023
採択
レギュラーセッション

(補欠) Custom Fragment Shaders

blendthink おかやまん blendthink
3

概要

Flutter で高度なグラフィックスを実現するために、これまでは RenderObject や CustomPainter を利用していました。
しかし、これらは CPU 上で多くの処理を実行することになってしまうため、柔軟性や表現力にどうしても限界がありました。

Flutter 2.8 で Fragment Shader を利用可能になり、GPU 上で処理を実行できるようになったため、より柔軟で高度なグラフィックスを実現できるようになりました。

本セッションでは Fragment Shader の基礎から Flutter での具体的な実装例についてお話しします。

トピック

  • Fragment Shader とは
  • Flutter で Fragment Shader が実行されるまでの仕組み
  • Flutter における Fragment Shader の実装方法
  • Fragment Shader の実装例と解説
    • Pixelate
    • Ink Sparkle
    • Hologram Effect
    • Transition Animation

想定視聴者

  • Flutter で Fragment Shader を取り扱う方法や具体的な実装例に興味のある方
  • Flutter でより柔軟で高度なグラフィックスを実現したい方