[2b] Replace per-pixel ImageData fill loop with Uint32Array view (3-5x speedup)

[kalwalt]

Summary

Replace slow per-pixel ImageData fill loop with Uint32Array view for 3–5× speedup

Environment

• Product/Service: FeatureSET-Display — JavaScript API
• Files: src/ARFset.js:131-137, js/arfset.api.js:101-107

Problem Description

Both files contain a for (i, j) { id.data[j+0..2] = v; id.data[j+3] = 255 } loop that fills grayscale pixels into an RGBA ImageData buffer one channel at a time. Writing to Uint8ClampedArray four bytes per pixel is significantly slower than writing a Uint32Array view of the same buffer one 32-bit word per pixel.

Expected Behavior

Gray → RGBA conversion uses a Uint32Array view of id.data and writes each pixel as a single 32-bit word: (0xff000000 | v<<16 | v<<8 | v), giving a 3–5× throughput improvement.

Actual Behavior

Each pixel writes four separate bytes to a Uint8ClampedArray, leaving significant CPU performance on the table.

Tasks

• Refactor the gray → RGBA conversion loop in src/ARFset.js:131-137 using a Uint32Array view
• Apply the same refactor to js/arfset.api.js:101-107

Impact

Low / Performance — No functional change; improves rendering throughput, particularly noticeable at high resolutions or frame rates.

Additional Context

Replacement pattern:

const pixels = new Uint32Array(id.data.buffer);
for (let i = 0; i < pixels.length; i++) {
  const v = grayData[i];
  pixels[i] = (0xff000000 | v << 16 | v << 8 | v);
}

Small, self-contained change. Good candidate to land alongside 2a and 2c.