gpujs / gpu.js

GPU Accelerated JavaScript
https://gpu.rocks
MIT License
15.11k stars 655 forks source link

Graphical output canvas is affected by a separate kernel #802

Open lukeellison opened 1 year ago

lukeellison commented 1 year ago

A GIF or MEME to give some spice of the internet

What is wrong?

It seems as if one kernel's output size can affect the size of a canvas created by another. This means that the canvas created by a kernel is larger than should be expected.

Where does it happen?

GPU.js running in browser in Chrome on a Mac (WebGL2 enabled)

How do we replicate the issue?

const gpu = new GPU();

const img_width = 64;
const img_height = 64;
const imgKernel = gpu
  .createKernel(function (_image) {
    const pixel = _image[this.thread.y][this.thread.x];
    return pixel[0];
  })
  .setOutput([img_width, img_height]);

const renderKernel = gpu
  .createKernel(function () {
    this.color(1, 0, 0, 1);
  })
  .setGraphical(true)
  .setOutput([32, 32]);

const image = document.createElement("img");
image.src = "./test.png";
image.onload = () => {
  console.log("image width x height", image.naturalWidth, image.naturalHeight);
  const imgOut = imgKernel(image); // This is not used just run
  document.body.appendChild(renderKernel.canvas);
  renderKernel();
};

The output looks like this: Screenshot 2022-12-01 at 18 17 55 You can see that the canvas is 64x64 pixels, the size of the imgKernel but the red section is 32x32 inside that which is the output of renderKernel despite the two having no relationship other than both of them are called.

How important is this (1-5)?

5 This is a pretty limiting bug if you want to use multiple kernels.

Expected behavior (i.e. solution)

Should show a 32x32 red canvas as far as I can tell.

Other Comments

Thank you for your time looking at this.

impawstarlight commented 1 year ago

It seems that kernels created from the same GPU instance shares the same canvas. If you want different canvases then you'll need to create another GPU instance for the other kernel.

const gpu2 = new GPU()
const renderKernel = gpu2.createKernel(...)
regretronics commented 1 year ago

i've been through the same problem. and i don't want a second canvas, i really need different-sized textures. my workaround is to set canvas.height and canvas.width explicitly to the correct values after calling the other kernels for the first time.