title: How to use 3d lookup table and map its pixel value to an image?
body: <p>I'm trying to apply a png color table to an image, but can't match the pixel from the png to the target image.</p>
  
  <p>The color table is a png of 64^3</p>
  
  <p><a href="https://i.imgur.com/ajjewB3.jpg" rel="nofollow noreferrer"><img src="https://i.imgur.com/ajjewB3.jpg" alt=""></a></p>
  
  <p><a href="https://i.imgur.com/IP38EHr.png" rel="nofollow noreferrer"><img src="https://i.imgur.com/IP38EHr.png" alt=""></a></p>
  
  <p>From what I understand each pixel in the larget image, need to use a similar value in the color table. This seem to limit the colors to 262144 = 64 x 64 x 64. But I'm not sure that this was the effect that I was getting, the results are a completely black image which mean no value, or very strange look colors.</p>
  
  <p>This is my code</p>
  
  <pre><code>
  // The table is 64 x 64 x 64
  float size = 64.0;
  
  // This is the original image
  // This function returns a pixel value inside a 3d space
  //  and the `rgb` method will return a vector with the rgb values
  vec3 source_image = sample(src_i, samplerCoord(src_i)).rgb;
  // Here I take the pixel value of the image for the red channel
  //  and multiply it by 64.0, then divide by 255.0 for the 8-bit image
  float x = floor(floor(source_image.r * size)/255.0);
  // The same thing for the green value on the y axis
  float y = floor(floor(source_image.g * size)/255.0);
  
  // Match a value from the image in the color table
  vec3 color = sample(src_l, vec2(x, y)).rgb;
  
  src_i.r = color.r;
  src_i.g = color.g;
  // The blue should be on the z axis, or the nth tile, so I think for this
  //   case it will be easier to convert the color table to one long row
  src_i.b = floor(floor(source_image.b * size)/255.0);
  
  // The image is black
  
  </code></pre>
  
  <p>Original image</p>
  
  <p><a href="https://i.imgur.com/ajjewB3.jpg" rel="nofollow noreferrer"><img src="https://i.imgur.com/ajjewB3.jpg" alt=""></a></p>
  
  <p>Expected result</p>
  
  <p><a href="https://i.imgur.com/1JbfJp3.jpg" rel="nofollow noreferrer"><img src="https://i.imgur.com/1JbfJp3.jpg" alt=""></a></p>
  
  <p>If I multiply by 255 instead (which seems right), then I get this result </p>
  
  <pre><code>float x = floor(source_image.r * 255.0);
  float y = floor(source_image.g * 255.0);
  </code></pre>
  
  <p><a href="https://i.imgur.com/Gjh9sTz.png" rel="nofollow noreferrer"><img src="https://i.imgur.com/Gjh9sTz.png" alt=""></a></p>
  
  <p>I would really appreciate if you can point out what is wrong with the math</p>