Layering images

[Brian Kotos]

Hello,

Using gl-react and gl-react-native, is it possible to layer images on top of one another? I have three images (with some transparent areas) that I am trying to layer on top of one-another to create one final image that can be saved. If this is possible, how would I do this?

Any advice would be much appreciated.

Thank you!

[@greweb]

like this: https://github.com/ProjectSeptemberInc/gl-react-native/blob/master/example/src/Tests/Layer.js ?

[Brian Kotos]

Hi @gre,

Yeah, that's sort of what I'm looking to do, except with three images. I ended up modifying Layer.js slightly to support three images. It looks like my changes work for my specific use-case (the last two images I will be layering are almost entirely transparent with black outlines). However, I'm pretty sure I'm doing it wrong. In the GLSL fragment for the third texture, I ended up adding the rgb and alpha values for c3 to those values for c2 that were already being passed to the vec4() and mix() calls:

gl_FragColor = vec4(mix(c1.rgb, c2.rgb + c3.rgb, c2.a + c3.a), c1.a + c2.a + c3.a);

This is my code:
https://gist.github.com/bkotos/126b2bbf4eb9973d10cff450df90b8a9

I'm going to keep playing around with the GLSL fragment until I find a less hacky solution. It looks like I may need to write my own mix() function that will do the linear interpolation for three values instead of just two.

[@greweb]

maybe you can mix 2 and then mix that result with the third one?

vec4 c2over1 = vec4(mix(c1.rgb, c2.rgb, c2.a), c1.a + c2.a);
vec4 c3over2over1 = vec4(mix(c2over1.rgb, c3.rgb, c3.a), c2over1.a + c3.a);
gl_FragColor = c1over2over3;

[Brian Kotos]

Gave that a shot, and it works perfectly. Thanks a lot!

[Kristoffer]

@bkotos then this can be closed? 😉

[Brian Kotos]

Sounds good to me