javascript - 如何在 JavaScript 矩阵运算中实现最近邻插值？

Question

以下代码使用GPU.js ，一个 WebGL 的包装器，可以通过简单地编写 JS 函数轻松地使用 WebGL 运行矩阵运算，我在 Canvas 上渲染图像，但我想调整它的大小。我有 read about nearest neighbor interpolation但我对如何实现它感到困惑。我已经设置了调整大小内核，剩下要做的就是插值逻辑。

注意事项:

• 当前索引在内核函数中可用，如 this.thread.x、this.thread.y 和 this.thread。 z，取决于您的内核正在计算的矩阵的维度。

• 您会注意到 Canvas 的大小很奇怪。这是 GPU.js 的一个与 WebGL 纹理处理相关的“特性”(我认为他们计划稍后解决这个问题)。

• 编辑:取得了进步但还不够完善:http://jsfiddle.net/0dusaytk/59/

const canvas1 = document.createElement("canvas");
const context1 = canvas1.getContext("webgl2");
document.body.appendChild(canvas1);
const canvas2 = document.createElement("canvas");
const context2 = canvas2.getContext("2d");
const gpu = new GPU({
  canvas: canvas1,
  webGl: context1
});

const image = new Image();
image.crossOrigin = "Anonymous";
image.src = "https://i.imgur.com/sl2J6jm.jpg";
image.onload = function() {
    const length = 4 * image.height * image.width;
  const gpuTexturize = gpu
    .createKernel(function(sprite) {
      return sprite[this.thread.x];
    })
    .setOutput([length])
    .setOutputToTexture(true);
  const gpuResize = gpu
    .createKernel(function(sprite, w, h) {
      return sprite[this.thread.x];
    })
    .setOutput([length])
    .setOutputToTexture(true);
  const gpuRender = gpu
    .createKernel(function(sprite, w, h) {
        var index = this.thread.x * 4 + (h - this.thread.y) * w * 4;
      var r = sprite[index];
      var g = sprite[index + 1];
      var b = sprite[index + 2];
      this.color(r / 255, g / 255, b / 255);
    })
    .setOutput([image.width, image.height])
    .setGraphical(true);
  canvas2.width = image.width;
  canvas2.height = image.height;
  context2.drawImage(image, 0, 0);
  const imgData = context2.getImageData(
    0,
    0,
    canvas2.width,
    canvas2.height
  );
  
  const texture = gpuTexturize(imgData.data);
  const resized = gpuResize(texture, 100, 100);
  gpuRender(resized, image.width, image.height);
};

body {
  background-color: #3a4659;
}

canvas {
  background-color: #bcc8db;
}

<script src="https://cdn.jsdelivr.net/npm/gpu.js@latest/dist/gpu-browser.min.js"></script>

Answer 1

我添加了第二个带有像素化渲染的 Canvas ，以便将此实现与浏览器 css 默认方法进行比较。

演示:https://codepen.io/rafaelcastrocouto/pen/pOaaEd

const scale = 4;

// canvas1 will be handled by the gpu
const canvas1 = document.createElement("canvas");
canvas1.className = 'c1';
const context1 = canvas1.getContext("webgl2");
const gpu = new GPU({
  canvas: canvas1,
  webGl: context1
});
document.body.appendChild(canvas1);

// canvas2 will render the image
const canvas2 = document.createElement("canvas");
canvas2.className = 'c2';
const context2 = canvas2.getContext("2d");
document.body.appendChild(canvas2);
canvas2.style.transform = 'scale('+scale+')';

// load the image
const image = new Image();
image.crossOrigin = "Anonymous";
image.src = "https://placeholdit.imgix.net/~text?txtsize=20&txtpad=1&bg=000&txtclr=fff&txt=64x32&w=64&h=32";

image.onload = function() {
  // render image to canvas2
  canvas2.width = image.width;
  canvas2.height = image.height;
  context2.drawImage(image, 0, 0);
  // scale imageData
  const imgData = context2.getImageData(0,0,image.width,image.height);
  const gpuRender = gpu
    .createKernel(function(sprite) {
      var x = floor(this.thread.x/this.constants.s) * 4;
      var y = floor(this.constants.h - this.thread.y/this.constants.s) * 4 * this.constants.w;
      var index = x + y;
      var r = sprite[ index ]/255;
      var g = sprite[index+1]/255;
      var b = sprite[index+2]/255;
      var a = sprite[index+3]/255;
      this.color(r, g, b, a);
    },{
      constants: {
        w: image.width,
        h: image.height,
        s: scale
      }
    })
    .setOutput([image.width*scale, image.height*scale])
    .setGraphical(true);
  gpuRender(imgData.data);
};

body {
  background-color: #3a4659;
}

canvas {
  background-color: #bcc8db;
  display: block;
  margin: 4em;
}
.c2 {
  image-rendering: pixelated;
  transform-origin: 0;
}

<script src="https://cdn.jsdelivr.net/npm/gpu.js@latest/dist/gpu-browser.min.js"></script>