javascript - 为什么这个基本的像素艺术着色器会导致孤立像素？（JS中GPU加速最近邻插值）

Question

我有一个非常基本的着色器，它采用典型的颜色通道缓冲区，例如：

[r, g, b, a, r, g, b, a, ...]

它使用GPU.js库对当前索引执行矩阵运算this.thread.x并this.thread.y表示当前索引，如下所示：

并拍摄这样的图像：

并返回如下结果：

这基本上只是最近邻插值与放大。但正如您在这些结果的底部看到的那样，一些像素被分散到图像周围的非预期位置，在这种情况下都在底部。

export default function(inputBuffer, width, height, scale) {
  var bufferWidth = width * 4;
  var subX = Math.floor(this.thread.x / scale);
  var subY = height - Math.floor(this.thread.y / scale);
  var subIndex = subX * 4 + subY * width * 4;
  var rIndex = subIndex;
  var gIndex = subIndex + 1;
  var bIndex = subIndex + 2;
  var rRaw = inputBuffer[rIndex];
  var gRaw = inputBuffer[gIndex];
  var bRaw = inputBuffer[bIndex];
  this.color(rRaw / 255, gRaw / 255, bRaw / 255);
}

源缓冲区不包含这些工件。我的代码有什么问题导致这种情况？

标签： javascriptalgorithmrendering