How to use LUT with JavaScript?

Question

I\'m new to image processing.

I want to use JavaScript to apply effects to images using LUTs (LookUp Tables) or the corresponding lookup PNGs, something like this:

Answer 1

I'm trying to do something similar in c++. 3D LUTs have 3 columns of values usually between 0 and 1. The columns are r g b respectively and they represent a mapping of values. If you open up one of these files of size nxnxn, you would read each value into it's respective R array or G array or B array. Then to recreate the mapping internally, you would iterate and fill up rgb maps with double/float keys and values

for every b
    for every g
        for every r
            // r g and b are indices
            index = b * n^2 + g * n + r
            Rmap.push((r + 1)/n, Rarray[index])
            // Same for g and b
            Gmap.push((g + 1)/n, Garray[index]
            Bmap.push((b + 1)/n, Barray[index]

Once you have your mappings, you can apply the lookup to every pixel in an image. Say the image had Max color 255, so you take the (r,g,b)/255 of each pixel and apply the lookup then convert back by *255. As far as I know, the convention to calculate values you can't lookup, is to perform trilinear interpolation. I haven't had too much success yet, but this is my two cents.