Lerp layers?

[shushustorm]

Hey everyone!

 

Does anyone know if there is a way in Affinity Photo to lerp from one layer (or layer group) to another using a third (grayscale) layer (or layer group)?

 

As far as I can see, masking will not work, because even at 100% opacity, a mask will only show the white areas.

 

It should work like this:

Layer 3: 0% -> Layer 1: 100%, Layer 2: 0%

Layer 3: 50% -> Layer 1: 50%, Layer 2: 50%

Layer 3: 100% -> Layer 1: 0%, Layer 2: 100%

 

The grayscale information on Layer 3 should be used for the "speed" it shows Layer 2.

Bright areas should show Layer 2 first, darker areas should show Layer 2 when approaching 100% of Layer 3.

 

Best wishes,

Shu

[James Ritson]

Hey Shu, apologies for the late reply. I've been experimenting to find an equivalent approach in Photo, and I might need to suggest an approach and see if you could reply with more information. Apologies if this isn't the correct solution - if it isn't, a contextual example would really help to get a feel for what you're working with. Your usage of the term speed might suggest you're working with 3D render material?

 

My best suggestion would be to experiment with blend ranges. Arrange your layers so that your greyscale layer is masked to the second layer (click-drag and offer it to the second layer until you get the vertical blue bar). At first, this will do nothing. Select the clipped greyscale layer, then click the cog icon next to the blend mode dropdown to access blend ranges.

 

From here you have fine control over the tonal range blending, which means you should be able to achieve the bright/dark area blending using the greyscale layer as your speed mask. You can do this in a linear fashion to achieve the linear interpolation you're after, or use logarithmic spline curves.

 

I've attached a screenshot to try and show what I'm referring to. Hope that helps, let me know if it's what you're after!

[shushustorm]

Hey James!

Thank you for your detailed reply!

I am indeed working with 3D material (video game development).

While I can do this using a shader, I am not sure about how to approach this using image editing software like Affinity Photo (I could also use Affinity Designer).

 

When doing this on the shader side, I add a variable value from -1 to 1 to the grayscale image, then I use the output of that to lerp between Image A and Image B.

This lets me display image A fully when adding -1, up to Image B fully when adding 1.

 

However, I need spritesheets of this animation instead of calculating this in real time.

Of course, I can just write a script that exports the texture from the game engine, but it would be better to export those textures from Photo directly, because I am already editing the textures in Photo anyway.

 

I created some reference material that shows what I am trying to do:

 

Here are the original textures:

 

Texture A

 

Texture B

 

Lerp texture

 

 

This is what I get when lerping (the values next to the images show the values I add to the Lerp texture):

 

 

Unfortunately, I was not able to achieve that using the approach you suggested. I am not sure if it works like this, though; maybe I am doing something wrong.

The closest I was able to get similar results was to "Rasterize To Mask" the grayscale image, grouping the mask with Image B (mask above) and altering the opacity of this group. When doing this, though, I only get steps -1 to 0 of the full animation.

[lepr]

.

 

[shushustorm]

Thanks for your reply! It works!

The only problem I am facing: Positioning the nodes isn't accurate.

After researching online, I don't think there is an option to do this by numerical values.

However, I found a feature request for that functionality:

https://forum.affinity.serif.com/index.php?/topic/28794-numerical-input-for-curves-control-points/#comment-139605

[lepr]

.