+-----------------------------------------------------------------------------------------+
|                  Skia Runtime JIT vs Impeller Ahead-of-Time (AOT) Pipeline              |
+-----------------------------------------------------------------------------------------+

LEGACY SKIA RUNTIME JIT (Severe Frame Drops):
[User opens screen] ---> [Encountered new Gradient Blur]
                                    |
                                    v (CRITICAL STALL: Compiles Shader on GPU at Runtime!)
[Shader Compilation: 45ms delay] ---> [Dropped 3 Frames! UI Freezes noticeably!]

2026 IMPELLER AOT ARCHITECTURE (Rock-Solid 120 FPS):
[Flutter Build Time (CI/CD)] ---> [Impeller Compiler pre-compiles ALL shaders into Metal/SPIR-V!]
                                    |
                                    v
[User opens screen] ---> [Instant Execution of Pre-Built Pipeline State Object in 1.2ms!]
                         (Zero Dropped Frames! 100% Smooth 120 FPS Rendering!)

+-----------------------------------------------------------------------------------------+
|                  120Hz Mobile Frame Budget Timeline (8.33ms Total)                      |
+-----------------------------------------------------------------------------------------+

[0.0ms] ─── (Dart UI Thread: Layout, State & Widget Build: ~2.5ms) ───> [2.5ms]
                                                                            │
[2.5ms] ─── (Impeller Engine: Encode GPU Command Buffers: ~1.8ms) ─────> [4.3ms]
                                                                            │
[4.3ms] ─── (Vulkan / Metal GPU Execution & Rasterization: ~3.2ms) ────> [7.5ms]
                                                                            │
[7.5ms] ─── (V-SYNC Buffer Swap to Physical OLED Display) ─────────────> [8.33ms - FRAME COMPLETE!]

#version 460 core
#include <flutter/runtime_effect.glsl>

// Output color to pixel
out vec4 fragColor;

// Uniform inputs passed from Flutter Dart code
uniform vec2 uResolution; // Screen dimensions (width, height)
uniform float uTime;      // Elapsed animation time in seconds
uniform vec2 uTouch;      // User touch coordinates (x, y)

void main() {
    vec2 uv = (FlutterFragCoord().xy - 0.5 * uResolution.xy) / min(uResolution.x, uResolution.y);
    vec2 touchNorm = (uTouch - 0.5 * uResolution.xy) / min(uResolution.x, uResolution.y);

    // Dynamic wave distortion based on touch proximity and time
    float dist = length(uv - touchNorm);
    float wave = sin(dist * 12.0 - uTime * 4.0) * 0.05;
    uv += (uv - touchNorm) * wave;

    // Rich obsidian black and glowing crimson red aesthetic
    float r = abs(sin(uv.x * 3.0 + uTime * 0.5)) * 0.9;
    float g = 0.05;
    float b = 0.1;
    
    // Glowing laser light ring
    float ring = smoothstep(0.02, 0.0, abs(dist - 0.25 + sin(uTime * 2.0) * 0.05));
    vec3 color = mix(vec3(r, g, b), vec3(1.0, 0.2, 0.3), ring);

    fragColor = vec4(color, 1.0);
}

flutter:
  shaders:
    - shaders/chromatic_mesh.frag

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

class ChromaticMeshWidget extends StatefulWidget {
  const ChromaticMeshWidget({super.key});

  @override
  State<ChromaticMeshWidget> createState() => _ChromaticMeshWidgetState();
}

class _ChromaticMeshWidgetState extends State<ChromaticMeshWidget>
    with SingleTickerProviderStateMixin {
  ui.FragmentShader? _shader;
  late final Ticker _ticker;
  double _time = 0.0;
  Offset _touchPosition = const Offset(200, 300);

  @override
  void initState() {
    super.initState();
    _loadShader();
    // 120 FPS Ticker loop aligned to hardware V-SYNC
    _ticker = createTicker((elapsed) {
      setState(() {
        _time = elapsed.inMicroseconds / 1000000.0;
      });
    });
  }

  Future<void> _loadShader() async {
    final program = await ui.FragmentProgram.fromAsset('shaders/chromatic_mesh.frag');
    setState(() {
      _shader = program.fragmentShader();
      _ticker.start();
    });
  }

  @override
  void dispose() {
    _ticker.dispose();
    _shader?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    if (_shader == null) {
      return const Center(child: CircularProgressIndicator());
    }

    return GestureDetector(
      onPanUpdate: (details) {
        setState(() {
          _touchPosition = details.localPosition;
        });
      },
      child: CustomPaint(
        painter: ShaderPainter(
          shader: _shader!,
          time: _time,
          touch: _touchPosition,
        ),
        size: Size.infinite,
      ),
    );
  }
}

class ShaderPainter extends CustomPainter {
  final ui.FragmentShader shader;
  final double time;
  final Offset touch;

  ShaderPainter({required this.shader, required this.time, required this.touch});

  @override
  void paint(Canvas canvas, Size size) {
    // Pass uniform values to compiled GPU shader
    shader.setFloat(0, size.width);
    shader.setFloat(1, size.height);
    shader.setFloat(2, time);
    shader.setFloat(3, touch.dx);
    shader.setFloat(4, touch.dy);

    final paint = Paint()..shader = shader;
    canvas.drawRect(Offset.zero & size, paint);
  }

  @override
  bool shouldRepaint(covariant ShaderPainter oldDelegate) => true;
}

+-----------------------------------------------------------------------------------------+
|                  GLSL Shader Optimization Rules for 120Hz Mobile GPUs                   |
+-----------------------------------------------------------------------------------------+

1. AVOID DYNAMIC BRANCHING (if/else):
   - Mobile GPU warps execute both branches if divergence occurs.
   - Use mathematical step functions: 'mix()', 'step()', 'smoothstep()', 'clamp()'.

2. MINIMIZE UNIFORM UPDATES:
   - Batch uniform properties into 'vec4' structs rather than passing 10 individual floats.

3. FAVOR MEDIUMP PRECISION:
   - Use 'precision mediump float;' for color math to double GPU execution throughput!

       +-------------------------------------------------------------+
       |             Worst-Case Frame Render Time on Screen Load (ms)|
       +-------------------------------------------------------------+
 Legacy Skia Engine (JIT Shader Compilation)| ==================================== [48.5 ms] (3 Frames Dropped)
 Impeller Engine (AOT Pre-Compiled Shaders) | == [4.2 ms] (Zero Jank! Maintained 120 FPS!)
                                            +-------------------------------------+
                                            0ms     12ms    24ms    36ms    48ms