Implementing custom fragment shaders
summary
Demonstrates how to write and compile custom fragment shaders for Flutter using GLSL files placed in a shaders folder and loaded (example uses flutter_shaders), shows a one-line red solid shader then moves to real effects: custom blurs, ripple/ink-sparkle, dynamic backgrounds and a faithful port of the Android 12 stretch effect from Skia/SkSL into GLSL. Measures show GPU shaders run orders of magnitude faster than CPU pixel loops; the ported stretch shader works and is ready for a PR.
AI-written summary · about
chapters (9)
- 0:00Custom fragment shaders intro
- 5:47Why fragment shaders matter
- 10:22Fragment shaders in Flutter
- 17:22GPU shaders performance
- 23:53First custom shader setup
- 26:01Practical shader use cases
- 33:26Stretch effect with shaders
- 37:19Real-time image processing
- 38:23Shader learning resources
related talks
28mFragment Shaders In Flutter: A whole new World
46mDemystifying Pixel Shaders (AGSL)
34mUnlocking the Power of Shaders in Android with AGSL and Jetpack Compose
18mShaders are awesome
32mDemystifying Pixel Shaders (AGSL)
43mPixel with Superpowers: Modern Android UI with AGSL Shaders
26mCreative experiments with WebGL shaders in JavaScript
36mIt's Not Just Liquid Glass