gpujs / gpujs/gpu.js

Graphical output canvas is affected by a separate kernel

Open
#802 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
15.5k
Forks
663
PR merge metrics
No merged PRs in 30d

Description

![A GIF or MEME to give some spice of the internet](https://media.tenor.com/eiGGeyAuMc0AAAAd/that-was-weird-johnny.gif)

## *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?
```javascript
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](https://user-images.githubusercontent.com/12530203/205129879-3c0e3d17-aacf-4566-8ba3-603067deb427.png)
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.

Contributor guide

Open the contributing guide

Research direction

Start by running the provided GPU.js browser reproduction in Chrome with WebGL2 enabled, focusing on createKernel, setGraphical, setOutput, and the renderKernel.canvas interaction. Compare the canvas dimensions after imgKernel runs with the expected 32x32 graphical output. Done means the separate image kernel no longer affects the rendered canvas size, which should be 32x32 with the red output filling it.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
computer-graphics
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.