Flutter Fragment Shaders GLSL: 120fps GPU-Grafik

Paradigmenwechsel in der mobilen Grafikberechnung: Vom CPU Canvas zum GPU Shader

Um in früheren Flutter-Anwendungen spektakuläre visuelle Effekte wie Neon-Wellen-Animationen, Ripple-Effekte, organische Metaball-Ströme oder Pixel-Mask-Dissolves zu implementieren, mussten Sie mathematische Berechnungen innerhalb von CustomPainter durchführen und den Canvas wiederholt neu zeichnen.

Der CustomPainter-Ansatz führt jedoch alle Pixelberechnungen auf den CPU-Kernen aus. Je komplexer die Animation wird, desto höher steigt die CPU-Auslastung auf 40%–60%, was zu erheblichen Frame-Drops (Jank) führt.

Zudem gab es in der Ära der früheren Skia-Rendering-Engine das kritische Problem, dass Shader-Code zur Laufzeit kompiliert wurde (Shader Compilation Jank), was beim ersten Ausführen einer Animation zu sichtbaren Rucklern führte.

[Vergleich der Flutter-Grafikberechnungsmethoden]
1. Klassischer CustomPainter (CPU-Berechnung): Pixelberechnung via CPU -> CPU-Last 45% -> 60fps schlägt fehl
2. Skia-Laufzeit-Shader (Jank-Erzeugung): Laufzeit-Shader-Kompilierung -> Rote Spike-Frame-Drops beim Erststart
3. Impeller AOT + GLSL (GPU-Berechnung): Build-Zeit SPIR-V/Metal-Kompilierung -> CPU 1.8% -> Flüssige 120fps

Die Impeller-Engine, die sich ab 2025/2026 als Standard-Renderer für iOS (3.19+) und Android (3.22+ GA) etabliert hat, verändert diese Dynamik grundlegend.

Impeller präkompiliert beim Erstellen der Flutter-App den geschriebenen GLSL-Fragment-Shader-Code (.frag) im Ahead-of-Time (AOT)-Verfahren vorab in SPIR-V- (Android Vulkan) und Metal Shading Language-Binärdateien (iOS).

Infolgedessen sinkt die Laufzeit-Shader-Kompilierungsverzögerung (Jank) vollständig auf 0ms. Indem Millionen von Pixelberechnungen zu 100% an die parallelen GPU-Kerne delegiert werden, erreicht man eine CPU-Auslastung von 1.8% und eine beeindruckende Rendering-Geschwindigkeit von unter 8.33ms selbst auf 120Hz ProMotion-Displays.

In diesem Leitfaden behandeln wir im Detail die Funktionsweise der Impeller GPU-Shader-Pipeline, GLSL 300 es-Schreibregeln, Dart-Bindings für ui.FragmentProgram & FragmentShader, die Implementierung von 3 praktischen Shader-Effekten (Neon-Welle, Liquid Ripple, Pixel-Dissolve) sowie Impeller-GPU-Performance-Benchmarks.

Impeller AOT Shader-Pipeline-Architektur

Der Prozess, bei dem der in Dart erstellte Fragment-Shader an die GPU-Pipeline des Mobilgeräts übergeben wird, sieht wie folgt aus:

+-----------------------------------------------------------------------------------+
| Flutter Impeller GLSL AOT Shader-Berechnungspipeline                             |
+-----------------------------------------------------------------------------------+

[GLSL 300 es Shader-Code: shaders/neon_wave.frag]
                       |
                       v  (AOT-Kompilierung zur 'flutter build release'-Zeit)
    +------------------+------------------+
    |                                     |
[Android Vulkan]                     [iOS Metal]
  - Generiert SPIR-V-Binding-Code      - Generiert Metal Shading Language (.metal)
    |                                     |
    +------------------+------------------+
                       |
                       v
     [Flutter Dart App-Laufzeit: FragmentProgram.fromAsset()]
                       |
                       v
     [Ausführung auf GPU-Parallelkernen (Berechnung pro Pixel)]
                       |
                       v
     [Ultraschnelles Rendering in unter 8.33ms auf 120Hz ProMotion]

1. Build-Zeit AOT-Kompilierung: Die in pubspec.yaml deklarierten GLSL-Shader werden beim Erstellen der App vorab in für die Plattform-GPU optimierte Binärdateien kompiliert.
2. Dynamisches Uniform-Binding: Im Dart-Code werden über FragmentShader.setFloat(index, value) nur die zeitabhängigen Änderungen (uTime), Touch-Koordinaten (uTouch) und die Canvas-Auflösung (uSize) an die GPU übertragen.

Schritt 1: GLSL 300 es Shader-Schreibregeln für Flutter

Die Shader-Pipeline von Flutter folgt der Spezifikation GLSL 300 es und muss zwingend den Header #include <flutter/runtime_effect.glsl> enthalten.

shaders/neon_wave.frag (60/120fps Neon-Wellen-Shader)

#version 300 es
precision highp float;

#include <flutter/runtime_effect.glsl>

// Von Dart übergebene Uniform-Parameter (strikte Reihenfolge)
uniform vec2 uSize;       // Index 0, 1: Canvas-Breite/Höhe
uniform float uTime;      // Index 2: Verstrichene Zeit (Sekunden)
uniform vec3 uColor;      // Index 3, 4, 5: Basis-Neon RGB-Farbe

out vec4 fragColor;       // Finale GPU-Pixel-Ausgabefarbe

void main() {
    // Normalisierte Koordinaten des aktuellen Pixels (0.0 ~ 1.0)
    vec2 st = FlutterFragCoord().xy / uSize.xy;
    
    // Bildschirmmitte nach (0.0, 0.0) verschieben
    vec2 pos = st - vec2(0.5);
    
    // Mathematische Berechnung der Welle basierend auf Trigonometrie (sin, cos) (GPU-Parallelberechnung)
    float wave = sin(pos.x * 12.0 + uTime * 3.0) * 0.15;
    float dist = abs(pos.y - wave);
    
    // Berechnung der Neon-Glow-Lichtquellendichte
    float glow = 0.02 / (dist + 0.005);
    glow = clamp(glow, 0.0, 2.5);
    
    // Finale RGB-Farbsynthese und Alphaschicht-Einstellung
    vec3 finalColor = uColor * glow;
    fragColor = vec4(finalColor, 1.0);
}

Performance-Tipp: Vermeiden Sie im GPU-Shader nach Möglichkeit if/else-Verzweigungen (Branching) und nutzen Sie stattdessen mathematische eingebaute Funktionen wie mix(), smoothstep(), clamp() und abs(), um die parallele Verarbeitungsgeschwindigkeit zu maximieren.

Schritt 2: Deklaration der Shader-Assets in pubspec.yaml

Registrieren Sie die erstellten .frag-Dateien im Block flutter: shaders: Ihrer pubspec.yaml.

# pubspec.yaml
name: enterprise_gpu_app
description: "Ultra-high performance GPU shader animation app"
version: 1.0.0+1

environment:
  sdk: ">=3.27.0 <4.0.0"
  flutter: ">=3.27.0"

dependencies:
  flutter:
    sdk: flutter

flutter:
  uses-material-design: true

  # -------------------------------------------------------------------
  # Impeller AOT Shader-Deklaration
  # -------------------------------------------------------------------
  shaders:
    - shaders/neon_wave.frag
    - shaders/liquid_ripple.frag
    - shaders/pixel_melt.frag

Schritt 3: Dart ui.FragmentProgram & FragmentShader-Binding

Laden Sie das präkompilierte Shader-Programm zur Dart-Laufzeit und injizieren Sie Uniform-Parameter in Echtzeit.

lib/widgets/neon_wave_painter.dart

// lib/widgets/neon_wave_painter.dart
import 'dart:ui' as ui;
import 'package:flutter/material.dart';

class NeonWaveWidget extends StatefulWidget {
  const NeonWaveWidget({super.super});

  @override
  State<NeonWaveWidget> createState() => _NeonWaveWidgetState();
}

class _NeonWaveWidgetState extends State<NeonWaveWidget> with SingleTickerProviderStateMixin {
  ui.FragmentProgram? _program;
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _loadShader();
    
    // 60/120Hz unendliche Animationsschleife
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 10),
    )..repeat();
  }

  Future<void> _loadShader() async {
    // Impeller AOT Shader-Asset laden (0ms Verzögerung)
    final program = await ui.FragmentProgram.fromAsset('shaders/neon_wave.frag');
    setState(() {
      _program = program;
    });
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    if (_program == null) {
      return const SizedBox(); // Shader lädt
    }

    return AnimatedBuilder(
      animation: _controller,
      builder: (context, child) {
        return CustomPaint(
          painter: NeonWavePainter(
            shader: _program!.fragmentShader(),
            time: _controller.value * 10.0,
          ),
          size: Size.infinite,
        );
      },
    );
  }
}

class NeonWavePainter extends CustomPainter {
  final ui.FragmentShader shader;
  final double time;

  NeonWavePainter({
    required this.shader,
    required this.time,
  });

  @override
  void paint(Canvas canvas, Size size) {
    // Uniform-Werte injizieren (Reihenfolge der Indizes beachten!)
    // Index 0: uSize.x
    shader.setFloat(0, size.width);
    // Index 1: uSize.y
    shader.setFloat(1, size.height);
    // Index 2: uTime
    shader.setFloat(2, time);
    // Index 3, 4, 5: uColor (RGB: Indigo/Purple/Fuchsia Glow - 0.4, 0.2, 1.0)
    shader.setFloat(3, 0.4);
    shader.setFloat(4, 0.2);
    shader.setFloat(5, 1.0);

    final paint = Paint()..shader = shader;
    
    // GPU-Befehl zum Rendern des Shaders über das gesamte Canvas senden
    canvas.drawRect(Offset.zero & size, paint);
  }

  @override
  bool shouldRepaint(covariant NeonWavePainter oldDelegate) {
    return oldDelegate.time != time;
  }
}

Schritt 4: Anbindung des User-Touch Liquid Ripple-Shaders

Dies ist eine interaktive Shader-Technik, bei der Wellen von den Koordinaten der Fingerberührung des Benutzers auf dem Bildschirm ausgehen.

shaders/liquid_ripple.frag

#version 300 es
precision highp float;

#include <flutter/runtime_effect.glsl>

uniform vec2 uSize;       // Index 0, 1
uniform vec2 uTouch;      // Index 2, 3: User-Touch-Koordinaten
uniform float uTime;      // Index 4: Verstrichene Zeit nach Berührung

out vec4 fragColor;

void main() {
    vec2 uv = FlutterFragCoord().xy / uSize.xy;
    vec2 touchUv = uTouch / uSize.xy;

    // Distanzberechnung vom Berührungspunkt
    float dist = distance(uv, touchUv);

    // Parameter für konzentrische Wellen, die sich mit der Zeit nach außen ausbreiten
    float wave = sin(dist * 40.0 - uTime * 10.0);
    float attenuation = exp(-dist * 8.0) * exp(-uTime * 2.0);
    
    float ripple = wave * attenuation;

    vec3 baseColor = vec3(0.05, 0.05, 0.12);
    vec3 rippleColor = vec3(0.0, 0.8, 1.0) * ripple;

    fragColor = vec4(baseColor + rippleColor, 1.0);
}

Praxis-Benchmark: CPU Canvas-Rendering vs. Impeller GPU Shader

Hier sind die Performance-Vergleichsdaten bei der Ausführung spektakulärer Hintergrundgrafik-Animationen auf einem 120Hz ProMotion-Display (iPhone 16 Pro / Galaxy S26 Ultra).

GPU- & Frame-Performance-Vergleichstabelle

Fazit: Die Grenzen der Flutter UI-Grafik im Jahr 2026 überwinden

Überlasten Sie Ihre CPU-Kerne nicht länger für komplexe Animationen oder visuelle Effekte und geben Sie sich nicht mit Frame-Drops zufrieden.

Die Kombination aus Flutters Impeller AOT-Pipeline und Custom Fragment Shaders (GLSL) bietet folgende überlegene Vorteile:

1. 100% makellose Frames ohne Jank: Durch die AOT-Präkompilierung zur Build-Zeit gehören SkSL-Verzögerungen und Erststart-Ruckler der Vergangenheit an.
2. Phänomenale Effizienz mit 1.8% CPU-Last: Millionen von Pixelberechnungen werden an parallele GPU-Kerne delegiert, um Akkuerwärmung zu verhindern.
3. Volle 120Hz ProMotion-Unterstützung: Verkürzt die Frame-Zeit auf 2.1ms und sorgt selbst auf High-Refresh-Rate-Smartphones für butterweiche Flüssigkeit.
4. Grenzenlose visuelle Ausdruckskraft: Gestalten Sie mit GLSL-Mathematik mühelos Polarlichter, Ripple- und Pixel-Dissolve-Effekte, die mit herkövlichen UI-Widgets unmöglich waren.

Wenden Sie GLSL Custom Fragment Shader noch heute auf anspruchsvolle Animationen und Hintergrundeffekte in Ihrem Flutter-Projekt an und erleben Sie die wahre Leistungsfähigkeit des 120fps GPU-Grafik-Renderings.

Ähnlicher Artikel: In Flutter Impeller Rendering Engine Deep Dive: Vulkan/Metal-Pipeline-Performance-Optimierung erfahren Sie mehr über die internen Funktionsprinzipien der Impeller-Rendering-Engine.