Need help with glsl-lut?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

mattdesl
138 Stars 12 Forks MIT License 21 Commits 1 Opened issues

Description

lookup table color transforms for glslify

Services available

!
?

Need anything else?

Contributors list

# 12,919
JavaScr...
uber
Electro...
Three.j...
19 commits
# 61,746
Swift
Objecti...
midi-de...
microph...
1 commit

glsl-lut unstable

ABTest

Demo here

Use a texture as a lookup table to apply color transforms in a shader. Original implementation from GPUImage, see here. For more details on the concept, see here.

This is geared towards OpenGL ES, so no 3D textures are used, and the lookup table is 512x512 (using every 4th color).

Usage

NPM

First, grab the original (un-altered) lookup table from the image folder, or with the CLI.

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 (

uLookup
below) and pass the original
vec4
color 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 set

TEXTURE_MIN_FILTER
and
TEXTURE_MAG_FILTER
to
NEAREST
on the lookup table texture.

Flipped Y Lookup

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)

Defines

Requiring

glsl-lut/flipY
is the same as making a define for
LUT_FLIP_Y
. You can also define
LUT_NO_CLAMP
before 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.

CLI

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

Then:

glsl-lut > images/lut.png

See this file for further details on generating a lookup table programmatically.

License

MIT, see LICENSE.md for details.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.