Issue with Loading Images in Flutter FragmentShader and GLSL Code

21 views Asked by At

I encountered a roadblock while editing GLSL code for an image filtering app I'm developing. The code runs without any errors, but there seems to be an issue with the image rendering process. Instead of displaying the image, only a solid color screen is being output.

Here's my painter code:

class ImageShaderPainter extends CustomPainter {
  final ui.Image? image;
  final ui.FragmentProgram? fragmentProgram;

  final double brightness;
  final double temperature;
  final double saturation;

  ImageShaderPainter({
    this.image,
    this.fragmentProgram,
    required this.brightness,
    required this.temperature,
    required this.saturation,
  });

  @override
  void paint(Canvas canvas, Size size) {
    if (image != null && fragmentProgram != null) {
      final ui.FragmentShader shader = fragmentProgram!.fragmentShader();

      shader.setFloat(0, brightness);
      shader.setFloat(1, temperature);
      shader.setFloat(2, saturation);
      shader.setImageSampler(0, image!);

      // Pass the image size to the shader
      shader.setFloat(3, image!.width.toDouble());
      shader.setFloat(4, image!.height.toDouble());

      final paint = Paint()..shader = shader;

      canvas.drawRect(Rect.fromLTWH(0, 0, size.width, size.height), paint);
    }
  }
  // The rest of my code...
}

And here's my code from the .frag file:

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

// Uniforms
uniform float uBrightness;
uniform float uTemperature;
uniform float uSaturation;
uniform sampler2D uTexture;
uniform vec2 uCanvasSize;

// Output
out vec4 fragColor;

void main() {
    vec2 uv = FlutterFragCoord().xy / uCanvasSize;
    vec4 color = texture(uTexture, uv);
    
    // Adjust brightness
    color.rgb += vec3(uBrightness);
    
    // Adjust temperature
    vec3 temperatureAdjust = vec3(0.0);
    temperatureAdjust.r = uTemperature > 0.0 ? uTemperature : 0.0;
    temperatureAdjust.b = uTemperature < 0.0 ? abs(uTemperature) : 0.0;
    color.rgb += temperatureAdjust;
    
    // Adjust saturation
    vec3 grey = vec3(dot(color.rgb, vec3(0.299, 0.587, 0.114)));
    color.rgb = mix(grey, color.rgb, uSaturation + 1.0);
    
    fragColor = color;
}

If anyone is well-versed in GLSL and Flutter fragment shaders, I would greatly appreciate your assistance.

0

There are 0 answers