Moving my alpha mask?

beginners
#1

I am using .setAlphaMask() and .setAnchorPoint(0,0) to dynamically move a series of masks around. I cannot get the masks to budge unless I redraw the fbo in each frame, which I rather not do for performance reasons.

First in set up I am making my various masks using a shader called “gradientMaker” and storing all of textures in a vector called “theMasks”.

    // this bit is just how I am making mask, which isn't impt to the question.
    int interval = width/(allDayImage.size()*2);
    int imgWidth = allDayImage.at(0).getWidth();
    int imgHeight = allDayImage.at(0).getHeight();
    for (int i=0; i < allDayImage.size(); i++){
        ofFbo mask;
        mask.allocate(imgWidth, imgHeight);
        mask.begin();
            ofClear(0, 0, 0, 0);
            gradientMaker.begin();
                gradientMaker.setUniform1i("startFade",posMsk + interval*i);
                gradientMaker.setUniform1i("center", posMsk + width/2);
                gradientMaker.setUniform1i("endFade",posMsk +  width - interval*i );
                ofDrawRectangle(0, 0,imgWidth,imgHeight);
            gradientMaker.end();
        mask.end();

        //this is where I add the mask to the vector, which might be important. 
        ofTexture temp = mask.getTexture();
        temp.setAnchorPoint(mskPos, 0);
        theMasks.push_back(temp);

    }

Then in update I assign the masks to their respective images and attempt to move their position forward.

mskPos++;
for (int i=0; i < allDayImages.size(); i++){
        theMasks.at(i).setAnchorPoint(mskPos, 0);
        allDayImages.at(i).getTexture().setAlphaMask(theMasks.at(i));
        allDayImages.at(i).update();
 }

When I draw the images the masks are applied, but not moving like I intended:

for (int i = 3; i < allDayImage.size(); i++){
        allDayImages.at(i).draw(0,0);
}

BUT when I actually draw one of the masks it is moving after all! But that is somehow not being reflected when it is applied as an alpha mask to the image.

theMasks.at(0).draw(0,0);

Any suggestions? I am confused because I know I am successfully getting the mask and moving its position because I see that when I draw just the mask. And I know that I can use image.setAlphaMask(texture) and image.update() to change the texture in update because I’ve done that when I’ve used a video as an alpha mask. So what factor am I not considering?

#2

I’ve been working on this and I still haven’t been able to use the built in .setAlphaMask() , .setAchorPoint(), or .setTextureWrap() to move and wrap the image independently of each other.

I did get it working by writing the moving and the wrapping into a shader.

Here is the fragment shader:

uniform sampler2DRect image;
uniform sampler2DRect imageMask;
uniform int imgWidth;
uniform int mskXPos;
uniform int imgXPos;

in vec2 texCoordVarying;

out vec4 outputColor;

void main()
{
    // move and wrap the msk
    vec2 texCoordMsk = texCoordVarying;
    texCoordMsk.x += mskXPos;
    
    if (texCoordMsk.x <0){
        texCoordMsk.x +=imgWidth * (abs( int (texCoordMsk.x / imgWidth))+1);
    }
    else if(texCoordMsk.x > imgWidth){
        texCoordMsk.x -= imgWidth * abs( int (texCoordMsk.x / imgWidth));
    }
    
    // move and wrap the img
    vec2 texCoordImg = texCoordVarying;
    texCoordImg.x += imgXPos;
    
    if (texCoordImg.x <0){
        texCoordImg.x +=imgWidth * (abs( int (texCoordImg.x / imgWidth))+1);
    }
    else if(texCoordImg.x > imgWidth){
        texCoordImg.x -= imgWidth * abs( int (texCoordImg.x / imgWidth));
    }
    
    
    vec4 texel0 = texture(image, texCoordImg);
    vec4 texel1 = texture(imageMask, texCoordMsk);
    // blend together
    outputColor = vec4(texel0.rgb, texel0.a * texel1.a);
}

In setup:

shader.begin();
  shader.setUniformTexture("imageMask", imageMask.getTexture(), 1);
  shader.setUniform1i("imgWidth", 800);
shader.end();

in draw:

   shader.begin();
        shader.setUniform1i("mskXPos", movMsk);
        shader.setUniform1i("imgXPos", movImg);
        image.draw(0, 0);
    shader.end();

Here is the effect:

my FPS is still at 60 so I figure that this is reasonably efficient. Is there a better way of doing this? Is there something I am missing about using .setTextureWrap() etc?

Fastest way of blending hundreds of images together?