feat: enhance shader builders with childBuilder method and update noise overlay shader for improved film grain effect

Author: orestesgaolin

lib/crt_shader_builder.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_shaders/flutter_shaders.dart';
+import 'package:shaders/tv_test_screen.dart';
 import 'dart:ui';
 import 'shader_builder.dart';
 
@@ -32,4 +33,9 @@ class CrtShaderBuilder extends CustomShaderBuilder {
       );
     }, child: child ?? const SizedBox());
   }
+
+  @override
+  Widget? childBuilder(BuildContext context) {
+    return const Center(child: TvTestScreen());
+  }
 }

lib/main.dart

@@ -49,7 +49,7 @@ class ShaderInfo {
 
 final shaders = [
   ShaderInfo(
-    name: 'NTSC',
+    name: 'NTSC filter',
     assetKey: 'shaders/ntsc_shader.frag',
     description: 'An effect that emulates an old NTSC television signal.',
     sourceUrl: 'https://www.shadertoy.com/view/3tVBWR',
@@ -59,7 +59,7 @@ final shaders = [
     path: 'ntsc-shader',
   ),
   ShaderInfo(
-    name: 'CRT',
+    name: 'Interlaced Glitch CRT',
     assetKey: 'shaders/crt_shader.frag',
     description: 'A glitching screen effect',
     sourceUrl: 'https://www.shadertoy.com/view/lt3yz7',
@@ -69,7 +69,7 @@ final shaders = [
     path: 'crt-shader',
   ),
   ShaderInfo(
-    name: 'Noise',
+    name: 'Lava Lamp Gradient',
     assetKey: 'shaders/noise_shader.frag',
     description: 'Animated gradient noise with film grain effect',
     sourceUrl: 'https://www.shadertoy.com/view/DdcfzH',
@@ -198,7 +198,6 @@ class HomeScreen extends StatelessWidget {
       body: Column(
         children: [
           const TopMenu(),
-
           Expanded(child: ContentGrid()),
         ],
       ),
@@ -279,14 +278,6 @@ class TopMenu extends StatelessWidget {
             ),
           ),
           const Spacer(),
-          // Search placeholder
-          SizedBox(
-            width: 300,
-            child: ShadInput(
-              placeholder: const Text('Search shaders...'),
-              enabled: false,
-            ),
-          ),
         ],
       ),
     );

lib/noise_overlay_shader_builder.dart

@@ -8,7 +8,7 @@ class NoiseOverlayShaderBuilder extends CustomShaderBuilder {
   final double noiseOpacity;
 
   const NoiseOverlayShaderBuilder({
-    this.filmGrainIntensity = 0.1,
+    this.filmGrainIntensity = 0.2,
     this.noiseOpacity = 0.3,
   });
 
@@ -23,9 +23,7 @@ class NoiseOverlayShaderBuilder extends CustomShaderBuilder {
     shader
       ..setFloat(0, size.width)
       ..setFloat(1, size.height)
-      ..setFloat(2, time)
-      ..setFloat(3, filmGrainIntensity)
-      ..setFloat(4, noiseOpacity);
+      ..setFloat(2, filmGrainIntensity);
   }
 
   @override
@@ -36,12 +34,40 @@ class NoiseOverlayShaderBuilder extends CustomShaderBuilder {
     double time,
     Widget? child,
   ) {
-    return AnimatedSampler((image, size, canvas) {
-      shader.setImageSampler(0, image);
-      canvas.drawRect(
-        Rect.fromLTWH(0, 0, size.width, size.height),
-        Paint()..shader = shader,
-      );
-    }, child: child ?? const SizedBox());
+    return Stack(
+      children: [
+        AnimatedSampler(
+          (image, size, canvas) {
+            shader.setImageSampler(0, image);
+            canvas.drawRect(Rect.fromLTWH(0, 0, size.width, size.height), Paint()..shader = shader);
+          },
+
+          child: child ?? const SizedBox(),
+        ),
+        Center(
+          child: Text(
+            'Noise',
+            style: TextStyle(color: Colors.white, fontSize: 32, fontWeight: FontWeight.bold),
+          ),
+        ),
+      ],
+    );
+  }
+
+  @override
+  Widget? childBuilder(BuildContext context) {
+    return Center(
+      child: Padding(
+        padding: const EdgeInsets.all(24.0),
+        child: Container(
+          color: Colors.blue,
+
+          child: SizedBox(
+            width: 300,
+            height: 200,
+          ),
+        ),
+      ),
+    );
   }
 }

lib/noise_shader_builder.dart

@@ -35,6 +35,11 @@ class NoiseShaderBuilder extends CustomShaderBuilder {
       painter: _NoiseShaderPainter(shader),
     );
   }
+
+  @override
+  Widget? childBuilder(BuildContext context) {
+    return null;
+  }
 }
 
 class _NoiseShaderPainter extends CustomPainter {

lib/ntsc_shader_builder.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_shaders/flutter_shaders.dart';
+import 'package:shaders/tv_test_screen.dart';
 import 'dart:ui';
 import 'shader_builder.dart';
 
@@ -32,4 +33,9 @@ class NtscShaderBuilder extends CustomShaderBuilder {
       );
     }, child: child ?? const SizedBox());
   }
+
+  @override
+  Widget? childBuilder(BuildContext context) {
+    return const Center(child: TvTestScreen());
+  }
 }

lib/shader_builder.dart

@@ -29,6 +29,8 @@ abstract class CustomShaderBuilder {
     Widget? child,
   );
 
+  Widget? childBuilder(BuildContext context);
+
   /// Whether this shader requires an image sampler
   bool get requiresImageSampler => true;
 

lib/widgets/shader_animation_view.dart

@@ -97,7 +97,7 @@ class _ShaderAnimationViewState extends State<ShaderAnimationView>
                   shader,
                   size.biggest,
                   timeValue,
-                  const Center(child: TvTestScreen()),
+                  widget.shaderInfo.builder.childBuilder(context),
                 );
               },
             );

shaders/noise_overlay_shader.frag

@@ -7,40 +7,20 @@ precision mediump float;
 #include <flutter/runtime_effect.glsl>
 
 uniform vec2 iResolution;
-uniform float iTime;
 uniform float filmGrainIntensity;
-uniform float noiseOpacity;
 uniform sampler2D iChannel0;
 
 out vec4 fragColor;
 
 // Inspired by https://www.shadertoy.com/view/wdyczG
 // Licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License:
 // https://creativecommons.org/licenses/by-nc-sa/3.0/deed.en
-mat2 Rot(float a) {
-    float s = sin(a);
-    float c = cos(a);
-    return mat2(c, -s, s, c);
-}
 
 vec2 hash(vec2 p) {
     p = vec2(dot(p, vec2(2127.1, 81.17)), dot(p, vec2(1269.5, 283.37)));
     return fract(sin(p)*43758.5453);
 }
 
-float noise(in vec2 p) {
-    vec2 i = floor(p);
-    vec2 f = fract(p);
-
-    vec2 u = f*f*(3.0-2.0*f);
-
-    float n = mix(mix(dot(-1.0+2.0*hash(i + vec2(0.0, 0.0)), f - vec2(0.0, 0.0)),
-    dot(-1.0+2.0*hash(i + vec2(1.0, 0.0)), f - vec2(1.0, 0.0)), u.x),
-    mix(dot(-1.0+2.0*hash(i + vec2(0.0, 1.0)), f - vec2(0.0, 1.0)),
-    dot(-1.0+2.0*hash(i + vec2(1.0, 1.0)), f - vec2(1.0, 1.0)), u.x), u.y);
-    return 0.5 + 0.5*n;
-}
-
 float filmGrainNoise(in vec2 uv) {
     return length(hash(vec2(uv.x, uv.y)));
 }
@@ -49,73 +29,15 @@ void main()
 {
     vec2 fragCoord = FlutterFragCoord().xy;
     vec2 uv = fragCoord / iResolution.xy;
-    float aspectRatio = iResolution.x / iResolution.y;
 
     // Get the original image/widget content
     vec3 originalColor = texture(iChannel0, uv).rgb;
 
-    // Transformed uv for noise generation
-    vec2 tuv = uv - .5;
-
-    // Rotate with noise
-    float degree = noise(vec2(iTime*.05, tuv.x*tuv.y));
-
-    tuv.y *= 1./aspectRatio;
-    tuv *= Rot(radians((degree-.5)*720.+180.));
-    tuv.y *= aspectRatio;
-
-    // Wave warp with sine
-    float frequency = 5.;
-    float amplitude = 30.;
-    float speed = iTime * 2.;
-    tuv.x += sin(tuv.y*frequency+speed)/amplitude;
-    tuv.y += sin(tuv.x*frequency*1.5+speed)/(amplitude*.5);
-    
-    // Light gradient colors
-    vec3 amberYellow = vec3(299, 186, 137) / vec3(255);
-    vec3 deepBlue = vec3(49, 98, 238) / vec3(255);
-    vec3 pink = vec3(246, 146, 146) / vec3(255);
-    vec3 blue = vec3(89, 181, 243) / vec3(255);
-    
-    // Dark gradient colors
-    vec3 purpleHaze = vec3(105, 49, 245) / vec3(255);
-    vec3 swampyBlack = vec3(32, 42, 50) / vec3(255);
-    vec3 persimmonOrange = vec3(233, 51, 52) / vec3(255);
-    vec3 darkAmber = vec3(233, 160, 75) / vec3(255);
-    
-    // Interpolate between light and dark gradient
-    float cycle = sin(iTime * 0.5);
-    float t = (sign(cycle) * pow(abs(cycle), 0.6) + 1.) / 2.;
-    vec3 color1 = mix(amberYellow, purpleHaze, t);
-    vec3 color2 = mix(deepBlue, swampyBlack, t);
-    vec3 color3 = mix(pink, persimmonOrange, t);
-    vec3 color4 = mix(blue, darkAmber, t);
-
-    // Blend the gradient colors and apply transformations
-    vec3 layer1 = mix(color3, color2, smoothstep(-.3, .2, (tuv*Rot(radians(-5.))).x));
-    vec3 layer2 = mix(color4, color1, smoothstep(-.3, .2, (tuv*Rot(radians(-5.))).x));
-    
-    vec3 noiseColor = mix(layer1, layer2, smoothstep(.5, -.3, tuv.y));
-
-    // Apply film grain to noise
-    noiseColor = noiseColor - filmGrainNoise(uv) * filmGrainIntensity;
-    
-    // Blend the noise effect with the original image
-    // Use various blend modes for different effects
-    vec3 finalColor = mix(originalColor, noiseColor, noiseOpacity);
-    
-    // Alternative blend modes (uncomment to try different effects):
-    // Overlay blend mode:
-    // vec3 finalColor = mix(originalColor, 
-    //     originalColor < 0.5 ? 2.0 * originalColor * noiseColor 
-    //                         : 1.0 - 2.0 * (1.0 - originalColor) * (1.0 - noiseColor), 
-    //     noiseOpacity);
-    
-    // Screen blend mode:
-    // vec3 finalColor = mix(originalColor, 1.0 - (1.0 - originalColor) * (1.0 - noiseColor), noiseOpacity);
-    
-    // Multiply blend mode:
-    // vec3 finalColor = mix(originalColor, originalColor * noiseColor, noiseOpacity);
+    // Apply film grain
+    float grain = filmGrainNoise(uv) * filmGrainIntensity;
+    // Mix the grain with the original color instead of subtracting
+    // This creates a more natural film grain effect
+    vec3 finalColor = originalColor * (1.0 - grain * 0.5) + grain * 0.1;
 
     fragColor = vec4(finalColor, texture(iChannel0, uv).a);
 }