Rotating, moving and scaling a mask in a shader

Question

I want to rotate, move or scale a mask in a shader. But I have no clue to how perform these actions.

My code:

@Override
public void create() {        
batch = new SpriteBatch();

background = new Texture(Gdx.files.internal("images/background.png"));
spritebackgournd = new Sprite(background,Gdx.graphics.getWidth(),Gdx.graphics.getHeight());

foreground = new Texture(Gdx.files.internal("images/foreground.png"));
mask = new Texture(Gdx.files.internal("images/mask.png"));

 spriteforegournd = new Sprite(foreground,Gdx.graphics.getWidth(),Gdx.graphics.getHeight());        

shader = new ShaderProgram(Gdx.files.internal("shaders/shader1.vert"), Gdx.files.internal("shaders/shader1.frag"));
}

@Override
public void render() {        


batch.begin();
spritebackgournd.draw(batch);
 batch.setShader(shader);
    Gdx.graphics.getGL20().glActiveTexture(GL20.GL_TEXTURE0);
    spriteforegournd.getTexture().bind(0);
    //texture.bind(0);
    shader.setUniformi("u_texture", 0);
    Gdx.graphics.getGL20().glActiveTexture(GL20.GL_TEXTURE1);
    //spritemask.getTexture().bind(1);
    mask.bind(1);
    shader.setUniformi("u_mask", 1);
    Gdx.graphics.getGL20().glActiveTexture(GL20.GL_TEXTURE0);
    spriteforegournd.draw(batch);
    batch.end();
    batch.setShader(null);
   }

The vertex shader:

attribute vec4 a_position;
attribute vec4 a_color;
attribute vec2 a_texCoord0;

uniform mat4 u_projTrans;

varying vec2 v_texCoords;

void main() {
v_texCoords = a_texCoord0;
gl_Position = u_projTrans * a_position;
}

The fragment shader:

varying vec2 v_texCoords;
uniform sampler2D u_texture;
uniform sampler2D u_mask;
uniform mat4 u_projTrans;

void main() {
vec4 texColor = texture2D(u_texture, v_texCoords);
vec4 maskColor = texture2D(u_mask, v_texCoords);

gl_FragColor = texColor * maskColor.a;
}

What I would like to be able to is to scale, rotate and move the mask in the shader. How can I do this?

Answer 1

When I was running into this, this tutorial saved me. Google saves lives. Multiple Texture Units

Most of this comes from there. You have a foreground, a background, and a mask.

So trying getting the alpha layer of the mask and use 'mix'

//get the mask; we will only use the alpha channel
float mask = texture2D(u_mask, vTexCoord).a;

//interpolate the colours based on the mask
gl_FragColor = vColor * mix(texColor0, texColor1, mask);

So your code would look like this:

//"in" attributes from our vertex shader
varying vec4 vColor;
varying vec2 vTexCoord;


//our different texture units
uniform sampler2D u_texture; //default GL_TEXTURE0, expected by SpriteBatch
uniform sampler2D u_texture1; 
uniform sampler2D u_mask;

void main(void) {
    //sample the colour from the first texture
    vec4 texColor0 = texture2D(u_texture, vTexCoord);

    //sample the colour from the second texture
    vec4 texColor1 = texture2D(u_texture1, vTexCoord);

    //get the mask; we will only use the alpha channel
    float mask = texture2D(u_mask, vTexCoord).a;

    //interpolate the colours based on the mask
    gl_FragColor = vColor * mix(texColor0, texColor1, mask);
}

For scaling, you can scale through the texture coordinates. They are in range from 0-1 so here is what I found if you want to scale from the center of the texture:

    texCoords = (texCoords - 0.5) * scale + (0.5 * scale);