title: Three.js custom Shader with Texture
body: <p>I want to write a custom shader which manipulates my image with three.js.
  For that I want to create a plane with the image as a texture. Afterwards I want to move vertices around to distort the image.</p>
  
  <p>(If that an absolute wrong way to do this, please tell me).</p>
  
  <p>First I have my shaders:</p>
  
  <pre><code>    &lt;script type="x-shader/x-vertex" id="vertexshader"&gt;
          attribute vec2 a_texCoord;
          varying vec2 v_texCoord;
  
          void main() {
              // Pass the texcoord to the fragment shader.
              v_texCoord = a_texCoord;
  
              gl_Position = projectionMatrix *
                            modelViewMatrix *
                            vec4(position,1.0);
          }
      &lt;/script&gt;
  
      &lt;script type="x-shader/x-fragment" id="fragmentshader"&gt;
          uniform sampler2D u_texture;
          varying vec2 v_texCoord;
  
          void main() {
              vec4 color = texture2D(u_texture, v_texCoord);
              gl_FragColor = color;
          }
  
      &lt;/script&gt;
  </code></pre>
  
  <p>Where I don't really understand what the texture2D is doing, but I found that in other code fragments.
  What I want with this sample: Just color the vertex (gl_FracColor) with the color from the «underlying» image (=texture).</p>
  
  <p>In my code I have setup a normal three scene with a plane:</p>
  
  <pre><code>    // set some camera attributes
      var VIEW_ANGLE = 45,
          ASPECT = window.innerWidth/window.innerHeight,
          NEAR = 0.1,
          FAR = 1000;
  
      var scene = new THREE.Scene();
  
  
      var camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
      camera.position.set(0, 0, 15);
  
      var vertShader = document.getElementById('vertexshader').innerHTML;
      var fragShader = document.getElementById('fragmentshader').innerHTML;
  
      var texloader = new THREE.TextureLoader();
      var texture = texloader.load("img/color.jpeg");
  
      var uniforms = {
          u_texture: {type: 't', value: 0, texture: texture},
  
      };
  
  
      var attributes = {
          a_texCoord: {type: 'v2', value: new THREE.Vector2()}
      };
  
      // create the final material
      var shaderMaterial = new THREE.ShaderMaterial({
          uniforms:       uniforms,
          vertexShader:   vertShader,
          fragmentShader: fragShader
      });
  
      var renderer = new THREE.WebGLRenderer();
      renderer.setSize( window.innerWidth, window.innerHeight );
      document.body.appendChild(renderer.domElement);
  
      var plane = {
          width: 5,
          height: 5,
          widthSegments: 10,
          heightSegments: 15
      }
  
      var geometry = new THREE.PlaneBufferGeometry(plane.width, plane.height, plane.widthSegments, plane.heightSegments)
  
      var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
      var plane = new THREE.Mesh( geometry, shaderMaterial );
      scene.add(plane);
  
      plane.rotation.y += 0.2;
  
      var render = function () {
          requestAnimationFrame(render);
  
          // plane.rotation.x += 0.1;
  
          renderer.render(scene, camera);
      };
  
      render();
  </code></pre>
  
  <p>Unfortunately, after running that code I just see a black window. Although I know that if I use the <code>material</code> as material when creating the mesh, I can see it clearly.
  So it must be the shaderMaterial or the shaders.</p>
  
  <p>Questions:</p>
  
  <ul>
  <li>do I have to define the uniform <code>u_texture</code> and the attribute
  <code>a_texCoord</code> in my shader Material uniforms and attributes? And do
  they have to have the exact same name?</li>
  <li>How many vertices are there anyway? Will I get a vertices for every pixel in the image? Or is it just 4 for each corner of the plane?</li>
  <li><p>What value does a_texCoord have? Nothing happens if I write:</p>
  
  <pre><code>var attributes = {
      a_texCoord: {type: 'v2', value: new THREE.Vector2(1,1)}
  };
  </code></pre></li>
  <li><p>Or do I have to use some mapping (built in map stuff from three)? But how would I then change vertex positions?</p></li>
  </ul>
  
  <p>Could someone shed some light on that matter?</p>