waveterm/xterm.js
0
0
Fork 0
mirror of https://github.com/wavetermdev/xterm.js.git synced 2026-08-05 13:43:48 -07:00
Code Issues Packages Projects Releases Wiki Activity

Use uint32 bit-shifting for rgb->rgba interleaving

Browse Source
This commit is contained in:
Anthony Kim
2026-02-15 22:15:43 -08:00
parent d5ae437dda
commit 24e2eb9d7b
2 changed files with 108 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/addon-image/src/kitty/KittyGraphicsHandler.ts
+33 -8
View File
@@ -632,18 +632,43 @@ export class KittyGraphicsHandler implements IApcHandler, IResetHandler, IDispos
}
const pixelCount = width * height;
if (image.format === KittyFormat.RGBA) {
// RGBA: use bytes directly — no copy needed
return createImageBitmap(new ImageData(new Uint8ClampedArray(bytes.buffer as ArrayBuffer, bytes.byteOffset, pixelCount * BYTES_PER_PIXEL_RGBA), width, height));
}
// RGB→RGBA: interleave alpha using uint32 block processing (4 pixels per iteration).
// 3 uint32 reads + 4 uint32 writes per 4 pixels vs 28 byte reads/writes — ~6x faster.
// Assumes little-endian (all modern browsers/Node.js).
const data = new Uint8ClampedArray(pixelCount * BYTES_PER_PIXEL_RGBA);
const isRgba = image.format === KittyFormat.RGBA;
const src32 = new Uint32Array(bytes.buffer, bytes.byteOffset, Math.floor(bytes.byteLength / 4));
const dst32 = new Uint32Array(data.buffer);
const alignedPixels = pixelCount & ~3; // round down to multiple of 4
let srcOffset = 0;
let dstOffset = 0;
for (let i = 0; i < pixelCount; i++) {
data[dstOffset] = bytes[srcOffset];
data[dstOffset + 1] = bytes[srcOffset + 1];
data[dstOffset + 2] = bytes[srcOffset + 2];
data[dstOffset + 3] = isRgba ? bytes[srcOffset + 3] : ALPHA_OPAQUE;
srcOffset += bytesPerPixel;
dstOffset += BYTES_PER_PIXEL_RGBA;
for (let i = 0; i < alignedPixels; i += 4) {
const b0 = src32[srcOffset++];
const b1 = src32[srcOffset++];
const b2 = src32[srcOffset++];
// Little-endian: pixel bytes are [R,G,B] → uint32 ABGR layout
dst32[dstOffset++] = (b0 & 0x00FFFFFF) | 0xFF000000;
dst32[dstOffset++] = ((b0 >>> 24) | (b1 << 8)) & 0x00FFFFFF | 0xFF000000;
dst32[dstOffset++] = ((b1 >>> 16) | (b2 << 16)) & 0x00FFFFFF | 0xFF000000;
dst32[dstOffset++] = (b2 >>> 8) | 0xFF000000;
}
// Handle remaining 1–3 pixels
let srcByte = alignedPixels * BYTES_PER_PIXEL_RGB;
let dstByte = alignedPixels * BYTES_PER_PIXEL_RGBA;
for (let i = alignedPixels; i < pixelCount; i++) {
data[dstByte] = bytes[srcByte];
data[dstByte + 1] = bytes[srcByte + 1];
data[dstByte + 2] = bytes[srcByte + 2];
data[dstByte + 3] = ALPHA_OPAQUE;
srcByte += BYTES_PER_PIXEL_RGB;
dstByte += BYTES_PER_PIXEL_RGBA;
}
return createImageBitmap(new ImageData(data, width, height));
addons/addon-image/test/KittyGraphics.test.ts
+75
View File
@@ -57,6 +57,19 @@ const RAW_RGB_2X2 = Buffer.from([
255, 0, 0, 0, 255, 0,
0, 0, 255, 255, 255, 0
]).toString('base64');
// 5 pixels (1 uint32 block + 1 remainder) — tests block+tail boundary
const RAW_RGB_5X1 = Buffer.from([
255, 0, 0,
0, 255, 0,
0, 0, 255,
255, 255, 0,
255, 0, 255
]).toString('base64');
// 8 pixels (2 full uint32 blocks, 0 remainder) — tests multi-block path
const RAW_RGB_4X2 = Buffer.from([
255, 0, 0, 0, 255, 0, 0, 0, 255, 255, 255, 0,
255, 0, 255, 0, 255, 255, 128, 128, 128, 255, 255, 255
]).toString('base64');
// Raw RGBA pixel data (f=32): 4 bytes per pixel, no header — requires s= and v=
const RAW_RGBA_1X1_WHITE = Buffer.from([255, 255, 255, 255]).toString('base64');
@@ -71,6 +84,14 @@ const RAW_RGBA_2X2 = Buffer.from([
255, 0, 0, 255, 0, 255, 0, 255,
0, 0, 255, 255, 255, 255, 0, 255
]).toString('base64');
// 5 pixels — tests RGBA zero-copy with non-power-of-2 count
const RAW_RGBA_5X1 = Buffer.from([
255, 0, 0, 255,
0, 255, 0, 255,
0, 0, 255, 255,
255, 255, 0, 255,
255, 0, 255, 255
]).toString('base64');
let ctx: ITestContext;
test.beforeAll(async ({ browser }) => {
@@ -1449,6 +1470,29 @@ test.describe('Kitty Graphics Protocol', () => {
deepStrictEqual(await getPixel(0, 0, 0, 1), [0, 0, 255, 255]);
deepStrictEqual(await getPixel(0, 0, 1, 1), [255, 255, 0, 255]);
});
test('renders 5x1 row with block+remainder pixel layout', async () => {
await ctx.proxy.write(`\x1b_Ga=T,f=24,s=5,v=1;${RAW_RGB_5X1}\x1b\\`);
await timeout(100);
deepStrictEqual(await getPixel(0, 0, 0, 0), [255, 0, 0, 255]);
deepStrictEqual(await getPixel(0, 0, 1, 0), [0, 255, 0, 255]);
deepStrictEqual(await getPixel(0, 0, 2, 0), [0, 0, 255, 255]);
deepStrictEqual(await getPixel(0, 0, 3, 0), [255, 255, 0, 255]);
deepStrictEqual(await getPixel(0, 0, 4, 0), [255, 0, 255, 255]);
});
test('renders 4x2 grid with multi-block pixel layout', async () => {
await ctx.proxy.write(`\x1b_Ga=T,f=24,s=4,v=2;${RAW_RGB_4X2}\x1b\\`);
await timeout(100);
deepStrictEqual(await getPixel(0, 0, 0, 0), [255, 0, 0, 255]);
deepStrictEqual(await getPixel(0, 0, 1, 0), [0, 255, 0, 255]);
deepStrictEqual(await getPixel(0, 0, 2, 0), [0, 0, 255, 255]);
deepStrictEqual(await getPixel(0, 0, 3, 0), [255, 255, 0, 255]);
deepStrictEqual(await getPixel(0, 0, 0, 1), [255, 0, 255, 255]);
deepStrictEqual(await getPixel(0, 0, 1, 1), [0, 255, 255, 255]);
deepStrictEqual(await getPixel(0, 0, 2, 1), [128, 128, 128, 255]);
deepStrictEqual(await getPixel(0, 0, 3, 1), [255, 255, 255, 255]);
});
});
test.describe('Storage and dimensions', () => {
@@ -1465,6 +1509,20 @@ test.describe('Kitty Graphics Protocol', () => {
strictEqual(await getImageStorageLength(), 1);
deepStrictEqual(await getOrigSize(1), [2, 2]);
});
test('stores image with correct original dimensions (5x1)', async () => {
await ctx.proxy.write(`\x1b_Ga=T,f=24,s=5,v=1;${RAW_RGB_5X1}\x1b\\`);
await timeout(100);
strictEqual(await getImageStorageLength(), 1);
deepStrictEqual(await getOrigSize(1), [5, 1]);
});
test('stores image with correct original dimensions (4x2)', async () => {
await ctx.proxy.write(`\x1b_Ga=T,f=24,s=4,v=2;${RAW_RGB_4X2}\x1b\\`);
await timeout(100);
strictEqual(await getImageStorageLength(), 1);
deepStrictEqual(await getOrigSize(1), [4, 2]);
});
});
test.describe('Validation', () => {
@@ -1566,6 +1624,16 @@ test.describe('Kitty Graphics Protocol', () => {
deepStrictEqual(await getPixel(0, 0, 0, 1), [0, 0, 255, 255]);
deepStrictEqual(await getPixel(0, 0, 1, 1), [255, 255, 0, 255]);
});
test('renders 5x1 row with zero-copy pixel layout', async () => {
await ctx.proxy.write(`\x1b_Ga=T,f=32,s=5,v=1;${RAW_RGBA_5X1}\x1b\\`);
await timeout(100);
deepStrictEqual(await getPixel(0, 0, 0, 0), [255, 0, 0, 255]);
deepStrictEqual(await getPixel(0, 0, 1, 0), [0, 255, 0, 255]);
deepStrictEqual(await getPixel(0, 0, 2, 0), [0, 0, 255, 255]);
deepStrictEqual(await getPixel(0, 0, 3, 0), [255, 255, 0, 255]);
deepStrictEqual(await getPixel(0, 0, 4, 0), [255, 0, 255, 255]);
});
});
test.describe('Storage and dimensions', () => {
@@ -1582,6 +1650,13 @@ test.describe('Kitty Graphics Protocol', () => {
strictEqual(await getImageStorageLength(), 1);
deepStrictEqual(await getOrigSize(1), [2, 2]);
});
test('stores image with correct original dimensions (5x1)', async () => {
await ctx.proxy.write(`\x1b_Ga=T,f=32,s=5,v=1;${RAW_RGBA_5X1}\x1b\\`);
await timeout(100);
strictEqual(await getImageStorageLength(), 1);
deepStrictEqual(await getOrigSize(1), [5, 1]);
});
});
test.describe('Validation', () => {