javascript - 这个gpu操作的算法？

Question

我正在使用一个允许在 GPU 上计算大型矩阵运算的库，gpu.js .我想做的事情并不难，我不认为但我似乎无法开始找出它的算法。基本上我有一个存储为 r、g、b、a 的数组缓冲区，每个像素重复，所以 4x4 图像将是一个包含 64 个值的数组。

我想输出一个比输入大 X 倍的图像，但使用“最近邻”计算，所以每个像素都变成 2x2 正方形，或 3x3 等。

所以操作是这样设置的(注意 gpu.js 需要数组作为输入)并记住它在全尺寸输出上迭代，所以我必须找到较小的 中存在的正确坐标sourceBuffer 基于 outputBuffer 中的当前索引(索引由 lib 公开为 this.thread.x)。

var pixelateMatrix = gpu.createKernel(function(inputBuffer, width, height, scale) {
  var y = Math.floor(this.thread.x / (width[0] / scale[0]) * 4);
  var x = this.thread.x % ((width[0] / scale[0]) * 4);
  var remainder = this.thread.x % 4;
  return inputBuffer[x * (width[0] * 4) + y * 4 + remainder];
}).setOutput([width * height * 4]);

这是我尝试过的方法，但奇怪的是现在它只输出屏幕的当前宽度作为每个条目的值。

正确的算法是什么？通常我习惯于在源上循环迭代来做这种事情，但在这种情况下，我必须在一维数组中单独处理每个像素 rgba 值，我对如何执行此操作感到困惑。

同样显然我需要用尽可能少的操作来完成它。

Answer 1

如果您存储项目行或列主要取决于一点。假设你主修行。

每一行看起来都是 r1 g2 b1 a1 r2 g2 b2 a2 .... 然后是下一行，依此类推。你需要知道图像有多大(至少每一行有多大)，我称之为 N。所以你需要从行 x 列 y 中获取组件 c value_pos = x * (N * 4) + y * 4 + c。这里的一切都是 0 索引。您可以将该值用于读取和写入，只需更新两者之间的 N，因为它们应该具有不同的大小。