Shaders: beyond the gimmick
summary
Custom fragment shaders run on the GPU in Flutter and accept numeric uniforms and texture samplers; code uses GLSL (called JS L in slides) plus the flutter_shaders package, CustomPainter or Flame drawVertices. Built examples: an easing-gradient that applies cubic Bezier interpolation, a 5x5 mesh gradient (with optional tessellation/dellation) driven by movable vertices, an equirectangular-to-sphere reprojector for maps, and a CRT-style pixel shader — the CRT is shipping in the Light Runners game and works live.
AI-written summary · about
chapters (14)
- 0:00Introduction and speaker background
- 1:52What are fragment shaders
- 8:18Loading and applying shaders in Flutter
- 12:33Interpolation in UI development
- 16:25Easing gradients with shaders
- 21:46Mesh gradients explained
- 28:55Animating mesh gradients with scroll
- 32:07Passing textures to shaders
- 33:32Map projections and distortions
- 38:11Eckert rectangular projection shader
- 40:38Using UI as shader input
- 42:04Nostalgia engineering in pixel art
- 45:49CRT shader for pixel art
- 48:13Summary and resources
related talks
43mShaders: How to Create Mind-Blowing Effects on Your Website
34mUnlocking the Power of Shaders in Android with AGSL and Jetpack Compose
32mDemystifying Pixel Shaders (AGSL)
28mFragment Shaders In Flutter: A whole new World
16mTransform Alchemy
20mThe future of the web is paved with shaders
50mReal Time Filters: The Art of Aesthetics
36mFlutter, Flame, and Fragment Shaders