Utilizing JavaScript to merge 3D LUTs for innovative effects

Question

Utilizing JavaScript to merge 3D LUTs for innovative effects

Currently, I am exploring the realm of 3D color LUTs (color lookup tables) in JavaScript and have been pondering if there exists a method to merge multiple 3D LUTs together for export in a unified file. Allow me to elaborate:

Upon obtaining a .cube file (3D color lookup), I parse it, extract the color values, store them in an array, and apply them to an image. Subsequently, I superimpose a new 3D LUT onto the modified image, followed by another application of a different LUT. Consequently, the original image now showcases the cumulative effect of three distinct 3D LUTs applied successively.

While I can readily export each individual 3D LUT into separate files for download, I am faced with the challenge of amalgamating them into one cohesive .cube file. It appears that devising an algorithm for the "combination" of diverse LUTs is imperative.

To illustrate, here is a comparison with how this process is executed in Photoshop:

LUT1:

0.024536 0.000183 0.000244
0.049103 0.000336 0.000458

LUT2:

0.041260 0.021149 0.009125
0.067230 0.023804 0.009125

COMBINED LUT (result):

0.035034 0.020660 0.009308
0.054810 0.022766 0.009430

Your insights or suggestions on achieving this desired merging of LUTs would be greatly appreciated!

javascript image-processing photoshop lookup-tables

Answer 1

Answer №1

After conducting thorough research, I have successfully identified a solution to my issue. In essence, the key was to direct the output of the initial LUT into the input of the subsequent LUT. This necessitates having an interpolation function within the program rather than just relying on a 3D LUT shader.

The process can be outlined as follows:

Generate a new identity LUT of a specified size (which is essentially a default LUT with no modifications)
Go through each point in the 3D LUT and channel the identity color of each point through the ColorFromColor function of the first LUT, followed by the ColorFromColor function of the second LUT. Save the resulting value in the new LUT.

The function's structure resembles this:

function mapColorsQuick(out, image, clut, clutMix){
    let od = out.data,
        id = image.data,
        w = out.width,
        h = out.height,
        cd = clut.data,
        cl = Math.floor(Math.pow(clut.width, 1/3)+0.001),
        cs = cl*cl,
        cs1 = cs-1;

    var x0 = 1 - clutMix, x1 = clutMix;
    for(var y = 0; y < h; y++) {
        for(var x = 0; x < w; x++) {
            let i = (y*w+x)*4,
                r = id[i]/255*cs1,
                g = id[i+1]/255*cs1,
                b = id[i+2]/255*cs1,
                a = id[i+3]/255,
                ci = (dither(b)*cs*cs+dither(g)*cs+dither(r))*4;

            od[i] = id[i]*x0 + x1*cd[ci];
            od[i+1] = id[i+1]*x0 + x1*cd[ci+1];
            od[i+2] = id[i+2]*x0 + x1*cd[ci+2];
            od[i+3] = a*255;
        }
    }
}

This function takes several parameters: out - buffer where the result will be stored image - buffer containing the image in imageData format clut - color look-up table applied to the image clutMix - factor affecting the intensity of the effect (ranging from 0 to 1)

In this scenario, it was necessary to create an identity LUT, save it as an image, pass it as the image argument to the function, apply the new LUT to it, loop the result back through the same function with another LUT application, and repeat this process for any additional LUTs we wish to combine.

I came across this function in the Javascript Film Emulation project on this link.

If you're engaged in canvas 2D image processing, there are numerous interesting resources available, including a functional demonstration found here: this link

I trust that this information will be beneficial to others facing similar challenges in the future!

Answer 2

After conducting thorough research, I have successfully identified a solution to my issue. In essence, the key was to direct the output of the initial LUT into the input of the subsequent LUT. This necessitates having an interpolation function within the program rather than just relying on a 3D LUT shader.

The process can be outlined as follows:

Generate a new identity LUT of a specified size (which is essentially a default LUT with no modifications)
Go through each point in the 3D LUT and channel the identity color of each point through the ColorFromColor function of the first LUT, followed by the ColorFromColor function of the second LUT. Save the resulting value in the new LUT.

The function's structure resembles this:

function mapColorsQuick(out, image, clut, clutMix){
    let od = out.data,
        id = image.data,
        w = out.width,
        h = out.height,
        cd = clut.data,
        cl = Math.floor(Math.pow(clut.width, 1/3)+0.001),
        cs = cl*cl,
        cs1 = cs-1;

    var x0 = 1 - clutMix, x1 = clutMix;
    for(var y = 0; y < h; y++) {
        for(var x = 0; x < w; x++) {
            let i = (y*w+x)*4,
                r = id[i]/255*cs1,
                g = id[i+1]/255*cs1,
                b = id[i+2]/255*cs1,
                a = id[i+3]/255,
                ci = (dither(b)*cs*cs+dither(g)*cs+dither(r))*4;

            od[i] = id[i]*x0 + x1*cd[ci];
            od[i+1] = id[i+1]*x0 + x1*cd[ci+1];
            od[i+2] = id[i+2]*x0 + x1*cd[ci+2];
            od[i+3] = a*255;
        }
    }
}

This function takes several parameters: out - buffer where the result will be stored image - buffer containing the image in imageData format clut - color look-up table applied to the image clutMix - factor affecting the intensity of the effect (ranging from 0 to 1)

In this scenario, it was necessary to create an identity LUT, save it as an image, pass it as the image argument to the function, apply the new LUT to it, loop the result back through the same function with another LUT application, and repeat this process for any additional LUTs we wish to combine.

I came across this function in the Javascript Film Emulation project on this link.

If you're engaged in canvas 2D image processing, there are numerous interesting resources available, including a functional demonstration found here: this link

I trust that this information will be beneficial to others facing similar challenges in the future!

Utilizing JavaScript to merge 3D LUTs for innovative effects

Answer №1

Similar questions

What is the best way to prevent duplicates in a Material-UI dropzone area?

Enhance the language with react-intl and MobX State Tree integration

AngularJS efficiently preloading json file

"I am currently in the process of converting my https.get() function to return a promise, but it is currently showing as Promise {

When attempting to view the PDF file, it appears completely void

Using AngularJs, you can access the document.body.onfocus event within the controller of

Switching the default browser for npm live-server

What could be causing the issue of req.body being undefined within the destination function of Multer's diskStorage?

Guide on sending a JavaScript function to a Pug file using Node.js and Express

A fresh javascript HTML element does not adhere to the css guidelines

Combine Angular variable in JavaScript function

Display or conceal a div element depending on its CSS class

What could be causing me to lose my login information on my React application?

What is the best method for storing numerical data for a Next.js/React website? Should you use a CSV file, make a backend API call, or download

Tips for adjusting image hues in Internet Explorer?

Trouble with MailChimp AJAX API not initializing the API call

What are the steps to generate two unique instances from a single class?

Insert the ng-if directive into an element using a directive

Currently, I am utilizing a Google script to import my emails into a spreadsheet. I am seeking help in identifying and fixing a duplication issue that

Ways to identify the location of the mouse pointer within a specific div