color-kitnext

@pbroom/color-kit/interopBuffers

packColors

Write many colors into one flat array, such as a GPU vertex, uniform or storage buffer. Each color occupies stride elements starting at offset + i * stride: three channels of space, then alpha when alpha: true. Elements between colors (padding or other interleaved attributes) are left untouched.

functionimport { packColors } from '@pbroom/color-kit/interop';pack.ts:123
function packColors(
  colors: readonly Color[],
  space: ArraySpace,
  out?: undefined,
  options?: PackColorsOptions,
): Float32Array;

function packColors<T extends WritableArrayLike>(
  colors: readonly Color[],
  space: ArraySpace,
  out: T,
  options?: PackColorsOptions,
): T;

function packColors<T extends WritableArrayLike>(
  colors: readonly Color[],
  space: ArraySpace,
  out: T | undefined,
  options?: PackColorsOptions,
): Float32Array<ArrayBufferLike> | T;

Values are unclamped floats by default; see clamp. To gamut-map, map the colors before packing: packColors(colors.map(toSrgbGamut), space).

Overload 1 of 3

Parameters

colorsreadonly Color[]
Colors to write, in order.
spaceArraySpace
Channel layout: 'linearSrgb', 'srgb', 'linearP3', 'display-p3', 'oklab' or 'oklch'.
out?undefined
Destination. When omitted, a Float32Array of length offset + colors.length * stride is allocated. Throws a RangeError if out is too short, since typed arrays silently drop out-of-range writes.
options?PackColorsOptions
Layout and out-of-gamut options.

Returns

Float32Arrayout, or the newly allocated Float32Array.

Overload 2 of 3

Parameters

colorsreadonly Color[]
Colors to write, in order.
spaceArraySpace
Channel layout: 'linearSrgb', 'srgb', 'linearP3', 'display-p3', 'oklab' or 'oklch'.
outT
Destination. When omitted, a Float32Array of length offset + colors.length * stride is allocated. Throws a RangeError if out is too short, since typed arrays silently drop out-of-range writes.
options?PackColorsOptions
Layout and out-of-gamut options.

Returns

Tout, or the newly allocated Float32Array.

Overload 3 of 3

Parameters

colorsreadonly Color[]
Colors to write, in order.
spaceArraySpace
Channel layout: 'linearSrgb', 'srgb', 'linearP3', 'display-p3', 'oklab' or 'oklch'.
outT | undefined
Destination. When omitted, a Float32Array of length offset + colors.length * stride is allocated. Throws a RangeError if out is too short, since typed arrays silently drop out-of-range writes.
options?PackColorsOptions
Layout and out-of-gamut options.

Returns

Float32Array<ArrayBufferLike> | Tout, or the newly allocated Float32Array.

Example

TypeScript
// WebGPU: an array<vec4f> storage buffer of linear-sRGB colors.
// WGSL:  @group(0) @binding(0) var<storage, read> palette: array<vec4f>;
const data = packColors(colors, 'linearSrgb', undefined, { alpha: true });
const buffer = device.createBuffer({
  size: data.byteLength,
  usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
});
device.queue.writeBuffer(buffer, 0, data);

// Gamut-map first when the target cannot show wide colors.
packColors(colors.map(toSrgbGamut), 'srgb', data, { alpha: true });

// three.js: per-vertex colors (BufferAttribute expects linear sRGB).
geometry.setAttribute(
  'color',
  new THREE.BufferAttribute(packColors(colors, 'linearSrgb'), 3),
);

Also exported from