title: How to pass and use a lookup table in a shader with three.js
body: <p>I have written a simple three.js of using a height map.  This is the relevant code that creates the shader material:</p>
  
  <pre><code>function loadHeightMap() {
      // fake a lookup table
      var lut = [];
      for ( var n=0; n&lt;256; n++ ) {
         lut.push(new THREE.Vector3(0.5, 0.4, 0.3));
      }
  
      var loader = new THREE.TextureLoader();
      var zScale = 10;
  
      var mapLoc = "https://s22.postimg.org/8n93ehmep/Terrain128.png";
      loader.load(mapLoc, function ( texture ) {
      // use "this." to create global object
      this.customUniforms = {
          zTexture:   { type: "t", value: texture },
          zScale:     { type: "f", value: zScale },
          zLut:       { type: "v3v", value: lut }
      };
  
      var customMaterial = new THREE.ShaderMaterial({
          uniforms: customUniforms,
          vertexShader:   document.getElementById( 'vertexShader'   ).textContent,
          fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
          side: THREE.DoubleSide
      });
  
      var planeGeo = new THREE.PlaneGeometry( 20, 20, 129, 129 );
      var plane = new THREE.Mesh( planeGeo, customMaterial );
      plane.rotation.x = -Math.PI / 2;
      plane.position.y = 0;
  
      scene.add(plane);
  });
  }
  </code></pre>
  
  <p>And here are the shaders:</p>
  
  <pre><code>&lt;script id="vertexShader" type="x-shader/x-vertex"&gt;
      uniform sampler2D   zTexture;
      uniform float       zScale;
      uniform vec3        zLut[ 256 ];
  
      varying float vAmount;
  
      void main() {
        vec4 heightData = texture2D( zTexture, uv );
  
        vAmount = heightData.r; 
  
        // move the position along the normal
        vec3 newPosition = position + normal * zScale * vAmount;
  
         gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition, 1.0 );
     }
  &lt;/script&gt;
  
  &lt;script id="fragmentShader" type="x-shader/x-vertex"&gt;
      uniform vec3        zLut[ 256 ];
  
   varying float vAmount;
  
   void main() {
       int index = int(vAmount) * 255;
         vec3 vColor = vec3(vAmount, vAmount, vAmount);
         //gl_FragColor = vec4(zLut[index], 1.0);
         gl_FragColor = vec4(vColor, 1.0);
    }
  </code></pre>
  
  <p></p>
  
  <p>The shaders and the height map part works fine.  But I want to pass the lookup table (zLut).  The above code works fine if I don't try to use the lookup table. A working example is <a href="http://www.geofx.com/graphics/nehe-three-js/lessons33-40/lesson34/lesson34webgl.html" rel="nofollow noreferrer">here</a>.  I created a fiddle as well <a href="http://jsfiddle.net/richardylewright/7nwpob4y/19/" rel="nofollow noreferrer">here</a> but it fails because of CORS issues.</p>
  
  <p>Any suggestions are welcome.</p>