WebGL - 2d Lookup table - 64x64x64 3d LUT presented in a 8x8 grid

natural-base.b64

data:image/png;base64,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

shaders.ts

export const lutVert = () => {
  return `#version 300 es
  precision highp float;
  
  in vec4 a_position;
  in vec2 a_texCoord;
  
  out vec2 v_texCoord;
  
  void main() {
    // vec4 positionVec4 = a_position;
    vec4 positionVec4 = vec4(a_position.xyz, 1.0);
    positionVec4.xy = positionVec4.xy * 2.0 - 1.0;
    positionVec4.y *= -1.0; // Flip it vertically
    gl_Position = positionVec4;
    
    v_texCoord = a_texCoord;

  }`;
};

export const lutFrag = () => {
  return `#version 300 es
  precision highp float;
  
  in vec2 v_texCoord;
  
  uniform sampler2D u_image;
  uniform sampler2D u_lookupTable;
  
  out vec4 outColor;
  
  void main() {
      vec4 color = texture(u_image, v_texCoord);
  
      // Calculate the slice index for the blue channel
      float gridSize = 8.0;
      float lutSize = 64.0;
      float sliceIndex = floor(color.b * (lutSize - 1.0));
  
      // Calculate the grid coordinates for the blue channel
      vec2 sliceCoords = vec2(
          mod(sliceIndex, gridSize),
          floor(sliceIndex / gridSize)
      );
  
      // Calculate the texture coordinates within the current slice
      vec2 lutCoords = vec2(
          (color.r * (lutSize - 1.0) + sliceCoords.x * lutSize) / (lutSize * gridSize),
          (color.g * (lutSize - 1.0) + sliceCoords.y * lutSize) / (lutSize * gridSize)
      );
  
      // Sample the LUT with the calculated texture coordinates
      vec3 lookupValue = texture(u_lookupTable, lutCoords).rgb;
  
      // Output the modified color
      outColor = vec4(lookupValue, color.a);
  }`;
};