title: How to blend textures with different size in webgl
body: <p>I have 2 pictures with different sizes. Say the <code>bgImage</code> is 300*200 and the <code>modelImage</code> is 50*20. It can be described below, where the <code>x</code> and <code>y</code> can be (100, 50)
  <a href="https://i.stack.imgur.com/dUz1V.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dUz1V.png" alt=""></a></p>
  
  <p>There is my glsl code:</p>
  
  <p>vs:</p>
  
  <pre><code>attribute vec4 a_position;
  attribute vec2 a_texCoord;
  
  uniform float u_flipY;
  
  varying vec2 v_texCoord;
  
  void main() {
     gl_Position = a_position * vec4(1.0, u_flipY, 0.0, 1.0);
     v_texCoord = a_texCoord;
  }
  </code></pre>
  
  <p>fs:</p>
  
  <pre><code>  precision mediump float;
  
  
  
    uniform sampler2D u_bgImage;
    uniform sampler2D u_modelImage;
  
    varying vec2 v_texCoord;
  
    vec3 compose(vec4 bgRGBA, vec4 modelRGBA) {
       vec3 bgRGB = bgRGBA.rgb;
       float alpha = modelRGBA.a;
       vec3 modelRGB = modelRGBA.rgb;
  
       return modelRGB + bgRGB * (1.0 - alpha);
    }
  
    void main() {
       vec4 bgRGBA = texture2D(u_bgImage, v_texCoord);
       vec4 modelRGBA = texture2D(u_coverImage, v_texCoord);
       gl_FragColor = vec4(compose(bgRGBA, modelRGBA), 1.0);
    }
  </code></pre>
  
  <p>It seems like that when the webgl render, <code>bgImage</code> and <code>modelImage</code> will always have same size. So how to blend textures with different size?</p>