lookup table color transforms for glslify
This is geared towards OpenGL ES, so no 3D textures are used, and the lookup table is 512x512 (using every 4th color).
Then you can apply any filters with Photoshop or at runtime to the lookup table image. These can be things like curves, levels, grayscale, etc. Each transform must be independent of surrounding pixels (no blurs, median, etc).
In your shader, sample the lookup texture (
uLookupbelow) and pass the original
vec4color to the transform method.
uniform sampler2D uLookup;
#pragma glslify: transform = require('glsl-lut')
... vec4 original = texture2D(uTexture, vUv); gl_FragColor = transform(original, uLookup);
❗Important: Make sure to setTEXTURE_MIN_FILTERandTEXTURE_MAG_FILTERtoNEARESTon the lookup table texture.
Depending on your environment, the Y texture coordinate may need to be inverted during the lookup to get the correct color output. If your colours look messed up, this is most likely the case. Require the inverted function like so:
#pragma glslify: transform = require(glsl-lut/flipY)
glsl-lut/flipYis the same as making a define for
LUT_FLIP_Y. You can also define
LUT_NO_CLAMPbefore requiring the function and the incoming texture color will not have a
clamp(c, 0.0, 1.0)operation applied. This may be useful if you plan to take advantage of hardware texture wrapping.
You can also use this tool as a command-line application to create a new (default) lookup table PNG image.
npm install -g glsl-lut
glsl-lut > images/lut.png
See this file for further details on generating a lookup table programmatically.
MIT, see LICENSE.md for details.