Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Graphical option with ImageData doesn't work in WebWorker

オープン
  • 何か問題がありますか？
#812 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
4/5
見積もり時間
3〜5日
初心者へのやさしさ
35/100
issue の種類
バグ
明瞭さ
おおむね明確
活発さ
停滞
技術スタック
javascript
領域
computer-graphics

調査の方向性

リポジトリのファイルやテストは指定されていません。まず、Chrome または Firefox の WebWorker で ImageData を使って、提供されている createKernel の例を再現し、その後、グラフィカルシェーダーのコンパイルと入力処理を追跡してください。グラフィカルモードが、報告されているシェーダーエラーやバイナリ式エラーなしで WebWorker 内の ImageData 入力を受け入れ、CPU モードも引き続き動作すれば完了です。

索引モデルが issue の本文から書いたものです。

説明

Issue

Graphical option with ImageData doesn't work in WebWorker but when I use {mode: 'cpu'} it works.

Env

Google Chrome
FireFox

Windows 11 22H2
i7 8565U
UHD Graphics 620

Windows 11 22H2
i7 1255U
Intel Iris Xe Graphics

Code

// doesn't work
const gpu = new GPU();
const graphicalTest = gpu.createKernel(function(data) {
	const [r, g, b, a] = data[this.thread.y][this.thread.x];
	this.color(r, g, b, a);
}, {
	output: [width, height],
	graphical: true,
});
graphicalTest(imageData/* ImageData Object */);
const newImageData = new ImageData(Uint8ClampedArray.from(graphicalTest.getPixels()), this.#width, this.#height);
// > gpu-browser.min.js:28 Uncaught (in promise) Error: Error compiling fragment shader: ERROR: 0:465: 'color' : no matching overloaded function found


// works
const gpu = new GPU({mode: 'cpu'});
const graphicalTest = gpu.createKernel(function(data) {
	const [r, g, b, a] = data[this.thread.y][this.thread.x];
	this.color(r, g, b, a);
}, {
	output: [width, height],
	graphical: true,
});
graphicalTest(imageData/* ImageData Object */);
const newImageData = new ImageData(Uint8ClampedArray.from(graphicalTest.getPixels()), this.#width, this.#height);



// doesn't work
const gpu = new GPU();
const graphicalTest = gpu.createKernel(function(data) {
	const [r, g, b, a] = data[this.thread.y][this.thread.x];
	const sum = r + g + b + a;
	this.color(r, g, b, a);
}, {
	output: [width, height],
	graphical: true,
});
graphicalTest(imageData/* ImageData Object */);
const newImageData = new ImageData(Uint8ClampedArray.from(graphicalTest.getPixels()), this.#width, this.#height);
// > Uncaught (in promise) Error: Unhandled binary expression between Number & Array(4) on line 2, position 3:]


// works
const gpu = new GPU({mode: 'cpu'});
const graphicalTest = gpu.createKernel(function(data) {
	const [r, g, b, a] = data[this.thread.y][this.thread.x];
	const sum = r + g + b + a;
	this.color(r, g, b, a);
}, {
	output: [width, height],
	graphical: true,
});
graphicalTest(imageData/* ImageData Object */);
const newImageData = new ImageData(Uint8ClampedArray.from(graphicalTest.getPixels()), this.#width, this.#height);
主要言語
JavaScript
スター
15.5k
フォーク
663
30日以内にマージされた PR はありません

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

gpujs/gpu.js のほかの issue

gpujs/gpu.js の issue をすべて見る

似ている issue

JavaScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。