Question

我正在使用javascript中的3D颜色LUT（颜色查找表），我想知道有没有办法将两个或更多3D LUT组合在一个文件中导出它们。让我解释一下：

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

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

这是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（结果）：

0.035034 0.020660 0.009308
0.054810 0.022766 0.009430

谢谢！

Answer 1

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

流程是这样的： 1.创建所选大小的新标识LUT（默认LUT没有更改） 2.迭代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格式图像的缓冲区克隆 - 我们正在应用于图像的颜色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 2d图像处理，那么有很多有趣的资料可以找到，还有一个工作示例包括： https://29a.ch/film-emulator/ 希望它能帮助将来的某个人！

在javascript中将3D LUT相互组合

1 个答案: