Naan and Paneer Makhani

    glsl-lut

    1.1.1 • Public • Published

    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.

    Install

    npm i glsl-lut

    DownloadsWeekly Downloads

    14

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    9.11 kB

    Total Files

    7

    Last publish

    Collaborators

    • mattdesl