Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

Graphical output canvas is affected by a separate kernel

Offen
#802 2 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Anfängerfreundlichkeit
42/100
Issue-Typ
Bug
Klarheit
Größtenteils klar
Aktivitätsstatus
Veraltet
Tech-Stack
javascript

Rechercherichtung

Beginne damit, die bereitgestellte GPU.js-Browser-Reproduktion in Chrome mit aktiviertem WebGL2 auszuführen, wobei der Fokus auf createKernel, setGraphical, setOutput und der Interaktion mit renderKernel.canvas liegt. Vergleiche die Canvas-Abmessungen, nachdem imgKernel ausgeführt wurde, mit der erwarteten grafischen Ausgabe von 32x32. Die Aufgabe ist abgeschlossen, wenn der separate Bild-Kernel die Größe des gerenderten Canvas nicht mehr beeinflusst, der 32x32 groß sein sollte und vollständig von der roten Ausgabe ausgefüllt wird.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

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.

Vorherrschende Sprache
JavaScript
Sterne
15.5k
Forks
666
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus gpujs/gpu.js

Alle Issues in gpujs/gpu.js

Ähnliche Issues

Weitere Issues zu JavaScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.