Can the Offscreen API Enhance engine.readPixels Performance?

Questions
1

I’m currently using the engine.readPixels function to calculate the average color of the current frame every second.

However, this method is proving to be slow and affecting performance. I’m exploring the possibility of using the Offscreen API to call this function more efficiently.

Does anyone have experience or suggestions on implementing/using engine.readPixels with the Offscreen API to optimize performance?

2

You rarely need to sample every single pixel in the image to get good results with average color detection.
Try to use Color Thief with different quality settings.

1 Like
3

I have canvas instead of image, is there any way to use the canvas with Color Thief?

4

I discovered a way to generate an image from canvas but found that the library performed significantly slower than my previous solution.

I have a worker js that runs this;

function getAverageColor(pixels, width, height) {
    let r = 0, g = 0, b = 0;
    const numPixels = width * height;
    const brightness = 1.75;
    for (let i = 0; i < numPixels; i++) {
        r += pixels[i * 4];
        g += pixels[i * 4 + 1];
        b += pixels[i * 4 + 2];
    }
    r = Math.min(Math.round(r / numPixels) * brightness, 255);
    g = Math.min(Math.round(g / numPixels) * brightness, 255);
    b = Math.min(Math.round(b / numPixels) * brightness, 255);

    return  [r, g, b];
}

onmessage = (e) => {
    postMessage(getAverageColor(e.data[0], e.data[1], e.data[2]));
};

And main thread runs this;

const canvas = engine.getRenderingCanvas();
var pixels = engine.readPixels(0, 0, canvas.width, canvas.height);
pixels.then((pixels) => {
  myWorker.postMessage([pixels, canvas.width, canvas.height]);
});
1 Like
5

You can try this option, I haven’t tried it.
One of the ways readPixels reduces time consumption is by reducing the number of pixels you get, but that doesn’t seem to work for you.
Or you can try reducing the canvas resolution.

2 Likes