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，它适用于地板但不适用于圆形。

这个最近的邻居插值着色器怎么了？

1 个答案: