Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Graphical output canvas is affected by a separate kernel #802

Open
lukeellison opened this issue Dec 1, 2022 · 2 comments
Open

Graphical output canvas is affected by a separate kernel #802

lukeellison opened this issue Dec 1, 2022 · 2 comments

Comments

@lukeellison
Copy link

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
Copy link

impawstarlight commented Jan 20, 2023

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
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants