title: Vertex Displacement Shader has radial distortion. How do I fix?
body: <p>I'm writing a vertex displacement shader. I successfully mapped the vertices of a plane to the brightness values of a video with a GLSL Shader and Three.js, but the GLSL Shader is mapping the values in a radial fashion which might be appropriate for texturing a sphere, but not this plane. There is radial distortion coming from the center outward. How do I fix this radial distortion?</p>
  
  <pre><code>RuttEtraShader = {
  
      uniforms: {
  
          "tDiffuse": { type: "t", value: null },
          "opacity":  { type: "f", value: 1.0 }
      },
  
  
  
      vertexShader: [
  
      'uniform sampler2D tDiffuse;',
      'varying vec3 vColor;',
      "varying vec2 vUv;",
  
      'void main() {',
          'vec4 newVertexPos;',
          'vec4 dv;',
          'float df;',
          "vUv = uv;",
          'dv = texture2D( tDiffuse, vUv.xy );',
          'df = 1.33*dv.x + 1.33*dv.y + 16.33*dv.z;',
          'newVertexPos = vec4( normalize(position) * df * 10.3, 0.0 ) + vec4( position, 1.0 );', 
          'vColor = vec3( dv.x, dv.y, dv.z );',
  
          'gl_Position = projectionMatrix * modelViewMatrix * newVertexPos;',
      '}'
  
      ].join("\n"),
  
      fragmentShader: [
  
        'varying vec3 vColor;',
  
        'void main() {',
            'gl_FragColor = vec4( vColor.rgb, 1.0 );',
        '}'
  
  
  
      ].join("\n")
  
  };
  
  
  
  texture = new THREE.Texture( video );
  texture.minFilter = THREE.LinearFilter;
  texture.magFilter = THREE.LinearFilter;
  texture.format = THREE.RGBFormat;
  texture.generateMipmaps = true;
  
  
  videoMaterial = new THREE.ShaderMaterial( {
      uniforms: {
  
          "tDiffuse": { type: "t", value: texture },
      },
  
      vertexShader: RuttEtraShader.vertexShader,
      fragmentShader: RuttEtraShader.fragmentShader,
      depthWrite: false,
      depthTest: true,
      transparent: true,
      overdraw: false
  
  } );
  videoMaterial.renderToScreen = true;
  
  
  
  geometry = new THREE.PlaneGeometry(720, 480, 720, 480);
  geometry.overdraw = false;
  geometry.dynamic = true;
  mesh = new THREE.Mesh( geometry, videoMaterial );
  
  mesh.position.x = 0;
  mesh.position.y = 0;
  mesh.position.z = 0;
  
  mesh.visible = true;
  
  scene.add( mesh );
  </code></pre>