Blending Path Color Results in Different output if Background has Dark Color

[Kaushikdugar]

I am applying SKIA Path on top of an SkImage and changing the Path color using BlendMode multiply. It works great if the background color is white and also retains shadows and texture with the correct color applied but when there is a dark background color then the output is not correct. Is there anything else we need to apply with the Blend Mode to get better results for darker color backgrounds.

[heitorrubira]

Hey @Kaushikdugar, That's a good question mate.

The thing is, when you are using the multiple effect, I will say in my own words: The color in the background in your first case white(r: 255, g: 255, b: 255) it's been multiplied by the color in the front, let imagine a red(r: 215, g: 0, b: 0), and it works perfect as you mentioned, but when you have the blackish (r: 15, g: 15, b: 15) and the same red you are going to have a problem because the this value it's to low and it will "remove light".

I don't full understand what you are trying to achieve here, can you explain or share some images as example?

But one idea is, you can try to first normalize the background, maybe applying grey and then some light, and use a multiplied based in the maximum and minimum light (blacks and whites), from the background.

[wcandillon]

We're investigating #1301 which may be a small bug on our side. About your use case @Kaushikdugar, we have a similar demo in our test suite:

react-native-skia/package/src/renderer/__tests__/examples/BlendModes.spec.tsx

Line 14 in 5436eb6

describe("Test blend modes", () => {

[Kaushikdugar]

Thanks @wcandillon , can you please confirm if Shader can be applied on a Skia Path as well to fill color as I am using Path fill attribute to apply color as below currently

<Canvas
onSize={size}
style={{
height: SCREEN_WIDTH,
width: SCREEN_WIDTH,
}}>
<Group blendMode={'multiply'}>
{canvasImage && (
<Image
image={canvasImage}
width={SCREEN_WIDTH}
height={SCREEN_WIDTH}
x={0}
y={0}
fit={'contain'}
/>
)}
{allPathColors.length > 0 &&
selectedRoomData.paths.map((path, index) => {
let currentPath = Skia.Path.MakeFromSVGString(path);
return (
<FitBox
key={'fitbox' + index}
src={rect(
0,
0,
selectedRoomData.dimensions[0],
selectedRoomData.dimensions[1],
)}
dst={rect(0, 0, SCREEN_WIDTH, SCREEN_WIDTH)}>
<Path
key={'paths' + index}
path={currentPath}
color={
allPathColors[index].color.includes('url')
? 'none'
: allPathColors[index].color
}
/>

);
})}

[heitorrubira]

Hey @Kaushikdugar & @wcandillon, What do you guys think about this? I'm using shader and I'm getting this result:

You can actually create points around the parts you want to change the color and apply the color dynamically using uniforms, basic code:

import React from 'react';
import { Skia, Canvas, Path, useImage, Image, Shader, ImageShader } from '@shopify/react-native-skia';
 
const source = Skia.RuntimeEffect.Make(`
uniform shader image;
 
vec3 greyscale(vec3 color, float str) {
  float g = dot(color, vec3(0.299, 0.587, 0.114));
  return mix(color, vec3(g), str) * vec3(1.2, 0, 0);
}

half4 main(float2 xy) {   
  vec4 p = image.eval(xy).rgba;
  vec3 grey = greyscale(vec3(p.r, p.g, p.b), 1.0);
  return vec4(grey, 1);
}`)!;


export default function TestView() {
  const image = useImage('https://user-images.githubusercontent.com/11558203/214567436-8f08f220-170c-42a7-a775-7e90206edb08.jpg');
  console.log({
    w: image?.width(),
    h: image?.height(),
  })
  if (!source) {
    throw new Error("Couldn't compile the shader")
  }

  
  return (
    <Canvas style={{ width: 1048, height: 583 }}>
      {image && (
        <>
          <Image
            image={image}
            fit="cover"
            rect={{
              x: 0,
              y: 0,
              width: 1048,
              height: 583,
            }}
          />
           <Path path="M 246 94 L 836 95 L 836 230 L 246 230 Z">
            <Shader source={source}>
              <ImageShader
                image={image}
                fit="cover"
                rect={{
                  x: 0,
                  y: 0,
                  width: 1048,
                  height: 583,
                }}
              />
            </Shader>
          </Path>
        </>
        )
      }
    </Canvas>
  )
}

[Kaushikdugar]

Thanks @heitorrubira for an example, I was able to achieve the colour changes using shaders. I have one question , how have you derived the value vec3(0.299, 0.587, 0.114) for the dot ? Is this also dynamically derived

[swami-laxman]

those are the luminance values for r, g & b. These are standard values and based on the sensitivity of the human eye to different colours.