How to overlay texture over another, without clipping the base texture?
<p>I have written this simple shader to overlay texture over another (base) texture - </p>

<pre><code> varying highp vec2 textureCoordinate;
 varying highp vec2 textureCoordinate2;

 uniform sampler2D inputImageTexture;
 uniform sampler2D inputImageTexture2;

 void main()
 {
     mediump vec4 base = texture2D(inputImageTexture, textureCoordinate);
     mediump vec4 overlay = texture2D(inputImageTexture2, textureCoordinate2);

     mediump float ra = (overlay.a) * overlay.r + (1.0 - overlay.a) * base.r;
     mediump float ga = (overlay.a) * overlay.g + (1.0 - overlay.a) * base.g;
     mediump float ba = (overlay.a) * overlay.b + (1.0 - overlay.a) * base.b;

     gl_FragColor = vec4(ra, ga, ba, 1.0);
 }
</code></pre>

<p><strong>Issue</strong> - This works except for one issue. If the overlay image is smaller than the base image, the outside region of overlay image gives alpha value of 1.0, i.e <code>overlay.a == 1.0</code>. Due to this the base image is clipped by overlay image. The region outside overlay appears as black.</p>

<p>I am new to opengl, and was expecting that outside its bounds, the texture's alpha should appear as 0.0? How can I fix my shader code to achieve desired behaviour? Or do I need to modify my graphics pipeline?</p>

<p><strong>EDIT</strong> Vertex shader below-</p>

<pre><code>attribute vec4 inputTextureCoordinate2;

varying vec2 textureCoordinate;
varying vec2 textureCoordinate2;

void main()
{
    gl_Position = pos;
    textureCoordinate = uv;
    textureCoordinate2 = inputTextureCoordinate2.xy;
}
</code></pre>