Created
May 29, 2024 10:22
-
-
Save spoeken/063bbaa319ed2935d083757d7d17c8ee to your computer and use it in GitHub Desktop.
WebGL - 2d Lookup table - 64x64x64 3d LUT presented in a 8x8 grid
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
data:image/png;base64,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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | |
}`; | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment