如何用JavaScript将512x512高度图上采样为2017x2017适配UE4并解决阶梯问题

你当前的处理流程存在精度损失顺序错误，是阶梯效应的核心诱因：

• 先将高精度浮点高程值（decodedHeightArray中存储的米级高程为浮点型）压缩为16位整数灰度值，再执行上采样插值，相当于先把连续的高程值量化成了65536个离散档位，再对离散值做插值，自然会出现明显的阶梯边界
• 像素每英寸（DPI）参数不影响UE4高度图读取逻辑，UE4仅通过像素灰度值映射高程，和DPI无关
• 你之前在16位灰度图上做模糊的操作，只能柔化已经生成的阶梯边缘，无法消除前期量化带来的精度损失，因此没有效果

方案1：调整处理顺序，先上采样高程数组再生成16位灰度图（优先推荐） #

把上采样步骤移到解码高程数组之后、生成16位灰度图之前，直接对浮点型的decodedHeightArray做插值上采样，再把上采样后的浮点高程值映射到16位灰度范围，能最大化保留插值精度。

手动实现上采样的代码示例： #

首先将一维的decodedHeightArray转成512x512的二维数组，方便双三次插值计算：

// 第一步：将一维高程数组转为二维数组
function to2DArray(arr, width) {
  const result = [];
  for (let i = 0; i < arr.length; i += width) {
    result.push(arr.slice(i, i + width));
  }
  return result;
}

// 第二步：双三次插值核心函数
function bicubicInterpolation(p, x) {
  return p[1] + 0.5 * x*(p[2] - p[0] + x*(2.0*p[0] - 5.0*p[1] + 4.0*p[2] - p[3] + x*(3.0*(p[1] - p[2]) + p[3] - p[0])));
}

// 第三步：将512x512二维高程数组上采样到2017x2017
function upsampleHeightArray(heightArray2D, srcW, srcH, targetW, targetH) {
  const result = new Array(targetH).fill(0).map(() => new Array(targetW).fill(0));
  const xScale = srcW / targetW;
  const yScale = srcH / targetH;

  for (let y = 0; y < targetH; y++) {
    for (let x = 0; x < targetW; x++) {
      const srcX = x * xScale;
      const srcY = y * yScale;
      const xInt = Math.floor(srcX);
      const yInt = Math.floor(srcY);
      const xFrac = srcX - xInt;
      const yFrac = srcY - yInt;

      // 取周边16个采样点做插值
      const arr = [];
      for (let j = -1; j <= 2; j++) {
        const row = [];
        for (let i = -1; i <= 2; i++) {
          const clampedX = Math.max(0, Math.min(srcW - 1, xInt + i));
          const clampedY = Math.max(0, Math.min(srcH - 1, yInt + j));
          row.push(heightArray2D[clampedY][clampedX]);
        }
        arr.push(bicubicInterpolation(row, xFrac));
      }
      result[y][x] = bicubicInterpolation(arr, yFrac);
    }
  }
  // 二维转一维返回
  return result.flat();
}

调整后的完整流程： #

1. 解码原始RGB图得到decodedHeightArray和高程极值，和原流程一致
2. 把decodedHeightArray转成二维数组，调用上述upsampleHeightArray得到2017x2017尺寸的上采样浮点高程数组
3. 将上采样后的浮点高程值映射到0-65535的16位灰度范围：

// 映射浮点高程到16位整数
function mapHeightTo16Bit(height, minElevation, maxElevation) {
  const normalized = (height - minElevation) / (maxElevation - minElevation);
  return Math.round(normalized * 65535);
}

const upsampledHeightArray = upsampleHeightArray(to2DArray(decodedHeightArray, 512), 512, 512, 2017, 2017);
const sixteenBitArray = upsampledHeightArray.map(h => mapHeightTo16Bit(h, stats.minElevation, stats.maxElevation));

4. 直接用sixteenBitArray生成2017x2017的16位灰度图即可，不需要再执行resize操作

方案2：修复现有resize逻辑（快速验证用） #

如果不想手动实现上采样，先确认你当前resize操作的对象是否正确：你示例代码中resize的变量是rgbImage，即原始32位RGB图，插值是在RGB通道上做的，后续再转灰度会丢失精度。你应该先把RGB图解码转成浮点灰度高程图后再执行resize，再转16位整数。

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