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

Open Beginner friendly
#21 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
72/100
Issue type
Refactor
Clarity
Clearly specified
Activity status
Quiet
Tech stack
javascript
Domain
frontend, performance

Research direction

Start by reading the gray-to-RGBA loops in src/ARFset.js:131-137 and js/arfset.api.js:101-107, then compare their buffer layout with the replacement pattern in the issue. Refactor both loops to write through a Uint32Array view, and verify that grayscale rendering remains unchanged while the conversion uses one 32-bit write per pixel.

Written by the indexing model from the issue text.

Description

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.

Dominant language
JavaScript
Stars
8
Forks
2
No merged PRs in 30d

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from webarkit/FeatureSET-Display

All issues in webarkit/FeatureSET-Display

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.