如何在 javascript 中将 png 图像的像素的 512x512 高度图数组放大到 2017x2017 像素，以用作虚幻引擎 4 中的高度图？

Question

我正在将具有编码高度值的 512 x 512 32 位 rgb png 转换为描绘高度图高度值的 16 位灰度 png。

这是转换代码

图像转换使用image-js

image = 32 bit rgb png image arraybuffer

image.getPixelsArray() returns an array of pixels with r, g, b channels

async function getHeightArrayStats(image) {
  let decodedHeightArray = []
  let stats = {}
  stats.minElevation = Number.MAX_VALUE;
  stats.maxElevation = Number.MIN_VALUE;
  stats.height = image.height;
  stats.width = image.width;
  let pixelsArray = image.getPixelsArray()
  for (const pixel of pixelsArray) {
    let r = pixel[0]
    let g = pixel[1]
    let b = pixel[2]
    //Conversion function from mapbox to convert pixel values to height values in meters
    // height = -10000 + ((R * 256 * 256 + G * 256 + B) * 0.1)
    let height = getHeightFromRgb(r, g, b)

    if (height > stats.maxElevation) {
      stats.maxElevation = height;
    }
    if (height < stats.minElevation) {
      stats.minElevation = height;
    }

    decodedHeightArray.push(height)
  }
  console.log(decodedHeightArray)
  return {decodedHeightArray, stats}
}

然后我使用与原始图像相同的宽度和高度将该图像转换为 16 位灰度 png

async function convertImage(width, height, decodedHeightArray) {
  let newImage = new Image(width, height, decodedHeightArray, {kind: 'GREY', 16})//kind = color and bit depth
  return newImage
} 

接下来我使用 image-js 和 BICUBIC 插值将 16 位 512 x 512 调整为 2017 x 2017

const newImage = rgbImage.resize({
    interpolationType: "BICUBIC", // or "BILINEAR" or "NEAREST", in order of decreasing quality
    width: 2017,
    preserveAspectRatio: true // Or height: number
  });

转换后，我使用新创建的高度图图像在虚幻引擎中创建了一个新的 2017 年地形尺寸。 虚幻引擎还提供了一个公式来转换地形比例/Z 比例，使地形看起来应该如此。

我在这个函数中计算 Z 尺度

getUnrealZScale(maxElevation) {
  let cm = (maxElevation * 100)
  let zscale = (cm * 0.001953125)
  return zscale
},

maxElevation 是根据上面的 getHeightArrayStats 函数使用原始 32 位 rgb 图像计算得出的

我遇到的问题是，在将调整大小的 2017 16 位图像导入虚幻引擎时，我得到了步进结果。

附上输入输出图像以及使用这些图像在虚幻中的风景图片

来自 mapbox 的 32 位 512 x 512 Rgb 高度值编码地形 png

这是根据 Unreal Landscape 尺寸规范从 512k 缩小到 505k 的转换后的 16 位。 放大以查看黑白高度。 我还添加了一个模糊滤镜来柔化边缘。 来自 image-js 的 img.blurFilter()

这是导入上述图像后的 Unreal Landscape 图像，由于图像仅略微缩小了尺寸，因此未应用 Z 缩放。 我认为这是正确的方法。 这看起来不错，符合我的预期。 接下来是我的问题所在的高档。

16 位高度图缩放至 2017x2017

https://imgur.com/uwcvAxM

结果在未应用 Z 比例的 Unreal 中，您可以看到步进。

我需要增加每英寸的像素吗？ 我认为这就是插值正在做的事情。 当我处理我的decodedHeightArray 时，我可以手动计算它吗？ 如果是这样怎么办？

也非常感谢@traktor 对转换代码的帮助。

如何使用浏览器端 javascript 将具有编码高度值的 32 位 RGB png 转换为 16 位 png？

Answer 1

将尺寸从 512 x 512 增加到 2017 x 2017 会导致几乎相同的像素深度扩展到 4 像素。 因此踏步。

通过先执行 32 到 16 位，您将失去扩展所需的精度。

1. 将 32 位图像的图像扩展到最终大小 32 bpp。

2. 模糊图像以提供渐变。

3. 将生成的图像下采样到 16 位。