gpujs / gpu.js

GPU Accelerated JavaScript
https://gpu.rocks
MIT License
15.11k stars 655 forks source link

Graphical option with ImageData doesn't work in WebWorker #812

Open T-Ndev opened 1 year ago

T-Ndev commented 1 year ago

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);