Issue with LUT sampling in shader / ImageShader

[kkx64]

I'm trying to apply a 1024x1024 LUT (16x16 tiles, each tile 64x64) to an image with Skia, I converted the previous GLSL to work with Skia but I am only getting a whole cyan fill image at the end, and I'm completely lost as to what to do. The textures are loaded properly, since I can fade between the texture of the LUT and the image, and they are obviously loaded.

Shader:

  uniform shader lut;      // LUT texture
  uniform shader t;        // Input texture
  uniform float intensity; // Mix intensity

  vec4 applyLUT(vec4 src_color) {
    const vec2 tiles = vec2(16.0);
    const float tileSize = 64.0;
    
    float b = clamp(src_color.b * 255.0, 0.0, 255.0);
    float b_i = floor(b);
    
    vec2 tileIndex;
    tileIndex.y = floor(b_i / 16.0);
    tileIndex.x = mod(b_i, 16.0);
    
    vec2 pixelPos = src_color.rg * (tileSize - 1.0) + 0.5;
    vec2 uv1 = (tileIndex * tileSize + pixelPos) / 1024.0;

    return lut.eval(uv1);
  }

  vec4 main(vec2 pos) {
    vec4 color = t.eval(pos);
    vec4 lutColor = applyLUT(color);
    return mix(color, lutColor, intensity);
  }

How I load it:

<Shader
                    source={Skia.RuntimeEffect.Make(lutShader)!}
                    uniforms={{
                      intensity: filterIntensity,
                    }}
                  >
                    <ImageShader
                      fit="none"
                      image={lutTexture}
                      x={0}
                      y={0}
                      width={1024}
                      height={1024}
                    />
                    <ImageShader
                      fit="contain"
                      image={mainImage}
                      rect={{
                        x: 0,
                        y: 0,
                        width: imageDimensions.width,
                        height: imageDimensions.height,
                      }}
                    />
                  </Shader>

Example LUT:

[Danieleventura]

Did you have any success? I've been trying to use LUTs but without success.

[Danieleventura]

I have made some progress. Here’s the example I’m using:

import { View } from "react-native";
import { useEditor } from "../context/EditorContext";
import { Canvas, Shader, Fill, useImage, ImageShader, Skia } from "@shopify/react-native-skia";

const lutShaderEffect = Skia.RuntimeEffect.Make(`
uniform shader image;
uniform shader lutImage;
uniform float imageWidth;
uniform float imageHeight;
uniform float lutWidth;   
uniform float lutHeight;  
uniform float strength;

vec4 main(vec2 pos) {
    float lutSize = 64.0;  // Number of color slices
    float gridDim = 8.0;   // 8x8 grid of LUT tiles

    // Normalize the position coordinates
    vec2 normalizedPos = pos / vec2(imageWidth, imageHeight);

    vec4 originalColor = image.eval(pos);
    vec3 c = clamp(originalColor.rgb, 0.0, 1.0);
    
    // Scale color components to LUT size
    vec3 scaled = c * (lutSize - 1.0);

    // Blue channel determines the slice index
    float sliceIndex = floor(scaled.b);
    float sliceFrac = fract(scaled.b);

    // Tile position in the 8x8 grid
    float tileX = mod(sliceIndex, gridDim);
    float tileY = floor(sliceIndex / gridDim);

    // Tile size in UV space considering actual LUT dimensions
    vec2 tileSize = vec2(1.0 / gridDim, 1.0 / gridDim);

    // UV within the tile
    vec2 uvWithinTile = (vec2(scaled.r, scaled.g) + 0.5) / lutSize;

    // Final UV for the current slice
    vec2 uv1 = (vec2(tileX, tileY) + uvWithinTile) * tileSize;

    // UV for the next slice
    float nextSliceIndex = min(sliceIndex + 1.0, lutSize - 1.0);
    float tileX2 = mod(nextSliceIndex, gridDim);
    float tileY2 = floor(nextSliceIndex / gridDim);
    vec2 uv2 = (vec2(tileX2, tileY2) + uvWithinTile) * tileSize;

    // Sample LUT colors
    vec4 lutColor1 = lutImage.eval(uv1 * vec2(lutWidth, lutHeight));
    vec4 lutColor2 = lutImage.eval(uv2 * vec2(lutWidth, lutHeight));

    vec4 finalLUTColor = mix(lutColor1, lutColor2, sliceFrac);

    // Blend between original color and LUT-applied color based on strength
    vec3 blendedColor = mix(originalColor.rgb, finalLUTColor.rgb, strength);

    return vec4(blendedColor, originalColor.a);

}
`);

export const FilterScreen = () => {
  const { image } = useEditor();
  const photo = useImage(image);
  const luts = useImage(require("../assets/luts/lut9.jpg"));

  if (!photo || !luts || !lutShaderEffect) return null;
  return (
    <View style={{ flex: 1 }}>

      <Canvas style={{ width: 400, height: 400 }}>
        <Fill>
          <Shader source={lutShaderEffect} uniforms={{
            strength: 1,
            imageWidth: photo.width(),
            imageHeight: photo.height(),
            lutWidth: luts.width(),
            lutHeight: luts.height(),
          }}>
            <ImageShader
              image={photo}
              fit="contain"
              rect={{ x: 0, y: 0, width: 400, height: 400 }}
            />
            <ImageShader
              image={luts}
              fit="contain"
              rect={{ x: 0, y: 0, width: 512, height: 512 }}
            />
          </Shader>
        </Fill>
      </Canvas>
    </View>
  );
};

[ralph1233]

#1436