在javascript中將3D LUT與彼此組合在一起使用

我正在使用javascript中的3D顏色LUT（顏色查找表），我想知道是否有方法將兩個或多個3D LUT組合成一個文件導出它們。讓我解釋一下：在javascript中將3D LUT與彼此組合在一起使用

我得到.cube（3D顏色查找文件）。我解析它並將解析的顏色值存儲到數組中並將其應用於現有圖像。之後，我將新的3D LUT應用於現有的（已更改的）圖像，並再次應用新的LUT。所以現在我有三個不同的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

聯合LUT（結果）：

0.035034 0.020660 0.009308 
0.054810 0.022766 0.009430

謝謝！

來源

2017-09-23 Josip Lukacevic

經過一番研究，我發現了一個解決方案。基本上，我需要將第一個LUT的輸出傳送到第二個LUT的輸入中。這需要在程序中具有插值函數（而不僅僅是3D LUT着色器）。

過程是這樣的： 1.通過3D LUT和管的每個點通過創建一個選定大小的新身份LUT（在不改變默認LUT） 2.迭代的每個點的身份顏色第一個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; 
     } 
    } 
}

函數接受幾個參數：了 - 緩衝到其中的結果寫入圖像 - 包含imageData中格式查色圖像緩衝區 - 顏色LUT我們（0-1）

在這種情況下，我們需要創建標識LUT，將其保存爲圖像並將其作爲圖像參數傳遞給該函數，以及然後應用新的LUT它。然後我們再次將結果輸入到相同的函數中，並將新的LUT應用到它上面。我們爲每個我們想要與其他LUT混合的LUT做到這一點。

我在https://github.com/jwagner/analog-film-emulator/blob/master/src/image-processing.js - Javascript電影仿真項目中發現此功能。

有很多有趣的材料發現，如果你用帆布2D圖像處理工作，並且也有一個工作示例包括： https://29a.ch/film-emulator/ 希望這將有助於有人在未來！

來源

2017-10-17 23:07:06

在javascript中將3D LUT與彼此組合在一起使用

回答

相關問題