Suggest optimizion for retrive image buffer.

[MaxGraey]

Current method: https://github.com/torch2424/wasmBoy/blob/bcc26f197b9516f136d385b7ffad1d7734b7d4da/lib/graphics/worker/imageData.js#L4

could be optimize to:

import { GAMEBOY_CAMERA_WIDTH, GAMEBOY_CAMERA_HEIGHT } from '../constants';
// move out creation of buffers, which is not cheap
const imageDataArray = new Uint8ClampedArray(GAMEBOY_CAMERA_HEIGHT * GAMEBOY_CAMERA_WIDTH * 4);

// use non-closure version for method
export function getImageDataFromGraphicsFrameBuffer(wasmByteMemory) {
   for (let y = 0; y < GAMEBOY_CAMERA_HEIGHT; ++y) {
    let stride1 = y * (GAMEBOY_CAMERA_WIDTH * 3);
    let stride2 = y * (GAMEBOY_CAMERA_WIDTH * 4);
    for (let x = 0; x < GAMEBOY_CAMERA_WIDTH; ++x) {
      const pixelStart = stride1 + x * 3;
      const imageDataIndex = stride2 + (x << 2);
      imageDataArray[imageDataIndex + 0] = wasmByteMemory[pixelStart + 0];
      imageDataArray[imageDataIndex + 1] = wasmByteMemory[pixelStart + 1];
      imageDataArray[imageDataIndex + 2] = wasmByteMemory[pixelStart + 2];
      // Alpha, no transparency
      imageDataArray[imageDataIndex + 3] = 255;
    }
  }
  return imageDataArray;
}

[torch2424]

Ohhh! Thank you for this! 😄

[torch2424]

If I could ask, could you explain how this works?

[MaxGraey]

Sure. At first I just cache some vars which relate to y index and could move out from internal loop: stride1 and stride2. Secondary, I remove unnecessary rgbColor array and loop and direct write from wasmByteMemory to imageDataArray instead doing this through rgbColor. Also I move out Uint8ClampedArray creation which don't require create every time when getImageDataFromGraphicsFrameBuffer call.

[torch2424]

Rad perfect, makes sense. Was asking, so I can optimize some other things. Thanks! 😄

[MaxGraey]

Need to look. I just opened the random file and decide make this suggestion)

[MaxGraey]

btw did you see this?
#221

[torch2424]

@MaxGraey Yes! I have seen that, just haven't gotten around to it 😂

[MaxGraey]

Also are you try just do:

this.canvasImageData.data.set(this.imageDataArray);

instead:

for (let i = 0; i < this.imageDataArray.length; i++) {
   this.canvasImageData.data[i] = this.imageDataArray[i];
}

in this line?

[torch2424]

Yeah, I could definitely do that instead, been slowly replacing my for loops with set 😄

[MaxGraey]

Also you could add @inline decorators for all functions in this and this files

[torch2424]

@MaxGraey Thanks! Yeah, I really need to learn/use the inline decorator. My plan was to use closure compiler over my JS output, but preserve function names in the output. And simply inline all of the functions that closure is inlining 😄 But I'll definitely go through and do those as well 😄

Thank you SOOOO much this is all really appreciated!