Skip to content

Graphical output canvas is affected by a separate kernel #802

@lukeellison

Description

@lukeellison

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions