algorithm - 这个最近邻插值着色器有什么问题？

Question

GPU.js 将 JS 函数转换为着色器。以下函数将 this.thread.x 识别为正在操作的当前索引，但它最终用作 WebGL 着色器。

export default function(sprite, w, h, scale) {
  var bufferWidth = w * 4;
  var channel = this.thread.x % 4;
  var thread = this.thread.x - channel;
  var y = Math.round(this.thread.x / bufferWidth);
  var x = (thread % bufferWidth) / 4;
  var upscale = scale * 10;
  var upscaleY = y * 10;
  var upscaleX = x * 10;
  var scaledY = Math.round(upscaleY / upscale);
  var scaledX = Math.round(upscaleX / upscale);
  var newIndex = scaledY * bufferWidth + scaledX * 4;
  if (x <= w * scale && y <= h * scale) {
    return sprite[newIndex + channel];
  } else {
    return 0;
  }
}

这几乎可以工作，但是行会被完全跳过，实际上使结果比它应该的要短，并且随着时间的推移，这些缺失的行在图像上上下左右移动。

你可以在这里看到这个效果:https://enviziion.github.io/lost-worlds/

我的算法有什么问题？我试过调整舍入和各种东西，但没有成功。

Answer 1

计算 y 时使用 Math.floor:

var y = Math.floor(thread / bufferWidth);

如果您使用 Math.round，那么它会在缓冲区中途开始向上舍入到下一行，这会产生奇怪的不连续性。

从数学上讲，您应该能够从 y * bufferWidth + x * 4 取回 thread.x，它适用于 floor 但不适用于 round。