在 javascript 中相互组合 3D LUT

Question

我正在 javascript 中使用 3D 颜色 LUT（颜色查找表），我想知道是否有一种方法可以组合两个或多个 3D LUT 以将它们导出到一个文件中。让我解释一下：

我得到 .cube（3D 颜色查找文件）。我解析它并将解析的颜色值存储到一个数组中并将其应用于现有图像。之后，我将新的 3D LUT 应用到现有（已更改）图像上，然后再次应用新的 LUT。所以现在我有了原始图像，其中 3 个不同的 3D LUT 相互应用。

现在，我可以成功地将每个 3D LUT 导出到单独的文件中并下载，但我不知道如何将它们合并到一个 .cube 文件中。我想我需要一些算法将 "combining" 个不同的 LUT 合并到一个文件中？

这是 photoshop 如何处理的示例：

查找表 1:

0.024536 0.000183 0.000244
0.049103 0.000336 0.000458

查找表 2：

0.041260 0.021149 0.009125
0.067230 0.023804 0.009125

组合 LUT（结果）：

0.035034 0.020660 0.009308
0.054810 0.022766 0.009430

谢谢！

Answer 1

经过一番研究，我找到了解决办法。本质上，我需要将第一个 LUT 的输出通过管道传输到第二个 LUT 的输入。这需要在程序中具有插值功能（不仅仅是 3D LUT 着色器）。

过程是这样的：

创建选定大小的新标识 LUT（默认 LUT，没有更改）
遍历该 3D LUT 的每个点，并通过第一个 LUT 的 ColorFromColor 和第二个 LUT 的 ColorFromColor 传递每个点的身份颜色。将最终值存储在新的 LUT 中。

函数看起来像这样：

function mapColorsFast(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;
        }
    }
}

函数接受几个参数： out - 写入结果的缓冲区 image - 包含 imageData 格式图像的缓冲区 clut - 我们应用于图像的颜色 LUT clutMix - 影响效果强度 (0-1)

在这种情况下，我们需要创建标识 LUT，将其保存为图像并将其作为图像参数传递给函数，然后将新的 LUT 应用到它上面。然后我们将结果再次通过管道传输到相同的函数中，并将新的 LUT 应用到它上面。我们为每个要与其他 LUT 混合的 LUT 执行此操作。

我在 https://github.com/jwagner/analog-film-emulator/blob/master/src/image-processing.js - Javascript Film Emulation 项目上找到了这个功能。

如果您正在使用 canvas 二维图像处理，可以找到很多有趣的 material，并且还包括一个工作示例：https://29a.ch/film-emulator/

希望对以后的人有所帮助！

在 javascript 中相互组合 3D LUT

Combining 3D LUTs with each other in javascript

javascript

photoshop

image-processing

lookup-tables