如何在JavaScript中适配5列短版3DLUT？

核心逻辑修正 #

原代码完全基于64阶（64x64x64）3DLUT设计，所有索引计算、区间划分都以64为基数。要适配5阶LUT，需把所有涉及阶数的硬编码值替换为5，同时调整归一化和插值的计算逻辑。

具体修改点 #

1. 定义LUT阶数常量 #

先把代码中固定的64阶相关值替换为可维护的常量，避免硬编码：

const LUT_SIZE = 5;
const LUT_SIZE_MINUS_1 = LUT_SIZE - 1; // 预计算4，减少重复计算

替换原代码中所有直接写64、63的地方。

2. RGB到LUT索引与权重的计算 #

原代码对RGB的归一化映射是针对64阶的，改成5阶的区间划分逻辑：

// 先将RGB通道值归一化到0~1范围
const rNorm = color.r / 255;
const gNorm = color.g / 255;
const bNorm = color.b / 255;

// 计算LUT中的整数索引（0-4）和插值权重（0-1）
const rIndex = Math.floor(rNorm * LUT_SIZE_MINUS_1);
const rWeight = rNorm * LUT_SIZE_MINUS_1 - rIndex;

const gIndex = Math.floor(gNorm * LUT_SIZE_MINUS_1);
const gWeight = gNorm * LUT_SIZE_MINUS_1 - gIndex;

const bIndex = Math.floor(bNorm * LUT_SIZE_MINUS_1);
const bWeight = bNorm * LUT_SIZE_MINUS_1 - bIndex;

这里的权重是三线性插值的核心，必须基于LUT_SIZE_MINUS_1计算，否则会出现索引越界问题。

3. LUT索引/纹理坐标计算 #

如果你的LUT是一维数组存储（顺序为R→G→B），原代码的索引公式要修改：

// 计算基准索引
const baseIndex = LUT_SIZE * LUT_SIZE * rIndex + LUT_SIZE * gIndex + bIndex;
// 三线性插值需要的8个相邻点索引
const lutIndices = [
  baseIndex,
  baseIndex + 1,
  baseIndex + LUT_SIZE,
  baseIndex + LUT_SIZE + 1,
  baseIndex + LUT_SIZE * LUT_SIZE,
  baseIndex + LUT_SIZE * LUT_SIZE + 1,
  baseIndex + LUT_SIZE * LUT_SIZE + LUT_SIZE,
  baseIndex + LUT_SIZE * LUT_SIZE + LUT_SIZE + 1
];

如果LUT是2D纹理格式（通常存储为5x25的纹理：5个R层，每层5x5的G-B网格），纹理坐标计算要改成：

// 计算纹理UV坐标（0~1范围）
const u = (gIndex + bWeight) / LUT_SIZE;
const v0 = rIndex / LUT_SIZE;
const v1 = (rIndex + 1) / LUT_SIZE;
// 后续用rWeight对v0、v1行的采样结果做插值

4. 边界溢出处理 #

添加索引边界限制，避免RGB值为255时索引超出5阶LUT的范围：

const rIndexClamped = Math.min(rIndex, LUT_SIZE_MINUS_1);
const gIndexClamped = Math.min(gIndex, LUT_SIZE_MINUS_1);
const bIndexClamped = Math.min(bIndex, LUT_SIZE_MINUS_1);

用修正后的索引值进行后续计算。

5. 插值逻辑适配 #

原代码的插值逻辑无需大改，只需确保使用上面计算的rWeight、gWeight、bWeight进行三线性插值即可，所有基于64阶的系数都已替换为5阶的常量。

排查要点 #

• 确认LUT的存储格式：一维数组/2D纹理的顺序是否和代码逻辑匹配，不匹配会导致颜色完全错乱。
• 检查所有硬编码的64、63是否都替换成了LUT_SIZE、LUT_SIZE_MINUS_1，不要遗漏任何一处。
• 权重计算必须基于LUT_SIZE_MINUS_1，直接乘以LUT_SIZE会导致索引越界。

内容的提问来源于stack exchange，提问作者Paul