title: Apply alpha to texture at certain clipspace coordinates
body: <p>This is not exactly the problem I have, but a simplified version of it. Say, I have a single image display at full screen size. I want to modify the alpha of this image, so that at the left-half (horizontally) of the screen, the alpha is 0.5 and at the right-half, alpha is 1. Just alpha 0.5 or 1, nothing else in between.</p>
  
  <p>Here are my (failed) codes so far</p>
  
  <p>This is my javascript codes to setup webgl</p>
  
  <pre><code>this.gl = canvas.getContext('webgl', {
      alpha: false,
  });
  this.gl.enable(this.gl.BLEND);
  this.gl.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE_MINUS_SRC_ALPHA);
  this.gl.clearColor(1, 0, 0, 0); // red to highlight alpha problem
  </code></pre>
  
  <p>this is my vertex shader code </p>
  
  <pre><code>mediump float;
  attribute vec2 coordinates;
  attribute vec2 a_texcoord;
  
  varying vec2 v_texcoord;
  varying float alpha;
  
  void main() {
      gl_Position = vec4(coordinates.x, coordinates.y, 1.0, 1.0);
      v_texcoord = a_texcoord;
      if (coordinates.x &lt;= 0) {
          alpha = 0.5;
      } else {
          alpha = 1.0;
      }
  }    
  </code></pre>
  
  <p>and my fragment shader is standard simple</p>
  
  <pre><code>precision mediump float;
  varying vec2 v_texcoord;
  varying float alpha;
  uniform sampler2D u_texture;
  void main() {
      vec4 color = texture2D(u_texture, v_texcoord).rgba;
      gl_FragColor = color;
  }
  </code></pre>
  
  <p>and at draw time</p>
  
  <pre><code>window.canvas.gl.clear(window.canvas.gl.COLOR_BUFFER_BIT);
  window.canvas.gl.useProgram(this.drawProgram);
  window.canvas.gl.bindBuffer(window.canvas.gl.ARRAY_BUFFER, this.vertexBuffer);
  window.canvas.gl.enableVertexAttribArray(this.positionLocation);
  window.canvas.gl.vertexAttribPointer(this.positionLocation, 2, window.canvas.gl.FLOAT, false, 0, 0);
  window.canvas.gl.bindBuffer(window.canvas.gl.ARRAY_BUFFER, null);
  window.canvas.gl.bindBuffer(window.canvas.gl.ARRAY_BUFFER, this.texcoordBuffer);
  window.canvas.gl.enableVertexAttribArray(this.texcoordLocation);
  window.canvas.gl.vertexAttribPointer(this.texcoordLocation, 2, window.canvas.gl.FLOAT, false, 0, 0);
  window.canvas.gl.bindBuffer(window.canvas.gl.ARRAY_BUFFER, null);
  
  window.canvas.gl.bindTexture(window.canvas.gl.TEXTURE_2D, this.texture);
  window.canvas.gl.uniform1i(this.textureLocation, 0);
  window.canvas.gl.drawArrays(window.canvas.gl.TRIANGLES, 0, 6);
  </code></pre>
  
  <p>With these codes, I couldn't achieve what I want. First, the transparency does not start at the middle of the screen (clipspace x = 0), but at a seemingly random location. Also, there is gradual decline from alpha 1.0 to alpha 0.5, not the just the 2 values 0.5 and 1.0 I hope for. And I have no idea where this gradual transition comes from.</p>
  
  <p>Obviously I am learning webgl so any pointer would be much appreciate. Any hint on how to solve the problem would be of great help to me. Thanks in advance!</p>