title: Edge pixels repeated in texture mapped with fragment shader
body: <p>Im trying to replicate brush stroke with fragment shader. <a href="http://cssing.org.ua/examples/brush/" rel="nofollow noreferrer">here is my demo</a>. See the stretched edges at the start of animation. </p>
  
  <p>I have this setup with three.js:</p>
  
  <pre><code>material = new THREE.ShaderMaterial( {
      side: THREE.DoubleSide,
      uniforms: {
          time: { type: 'f', value: 0 },
          uvRate: {
              value: new THREE.Vector2(1,3.7) // aspect ratio of image
          },
          texture: {
              value: THREE.ImageUtils.loadTexture('img/stroke.png')
          },
      },
      vertexShader: vertex,
      fragmentShader: fragment
  });
  
  plane = new THREE.Mesh(new THREE.PlaneGeometry( 1,1, 1, 1 ),material);
  </code></pre>
  
  <p>Vertex shader to calculate aspect ratio: </p>
  
  <pre><code>uniform vec2 uvRate1;
  void main() {
      vUv1 = uv - 0.5;
      vUv1 *= uvRate.xy;
      vUv1 += 0.5;
      gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
  }`
  </code></pre>
  
  <p>And fragment shader with a little math to scale UVs for "brushing"</p>
  
  <pre><code>// math behind this https://www.desmos.com/calculator/8qdmw3a91w
  float scale1(float coord,float progress){
      coord = coord/progress;
      if(coord&lt;0.88) {
          final = coord*progress;
      } else{
          final = pow( (3.*coord - 2.4),3.) + 0.75 + coord/8.;
          final *= progress;
      }
      return final;
  }
  
  
  void main() {
      float p = clamp(fract(time/20.) + 0.3, 0.,1.);  // 0.3 -&gt; 1.0
      vec2 newuv = vUv1;
      newuv.x = scale1(vUv1.x,p);
  
      gl_FragColor = texture2D(texture,newuv);
  }
  </code></pre>
  
  <p>But i get this kind of edge:</p>
  
  <p><img src="https://i.stack.imgur.com/75ajb.png" alt="">.</p>
  
  <p>Does somebody know what's the reason behind this? And how to solve it?</p>