Создание текстуры из массива пикселей

В библиотеке PixiJS текстура может быть создана не только из изображений или спрайтов, но и непосредственно из массива пикселей. Такой подход полезен для генеративной графики, процедурных эффектов, фильтров и динамически изменяемых текстур.

Формат массива пикселей

Массив пикселей в PixiJS представляет собой одномерный массив значений типа Uint8Array или Uint8ClampedArray, где каждые четыре последовательных элемента описывают один пиксель в формате RGBA:

  • R — красный канал (0–255)
  • G — зелёный канал (0–255)
  • B — синий канал (0–255)
  • A — альфа-канал (0–255), 0 — полностью прозрачный, 255 — полностью непрозрачный

Например, массив для одного красного пикселя будет выглядеть так:

const pixels = new Uint8Array([255, 0, 0, 255]);

Для изображения размером width × height длина массива должна быть равна width * height * 4.

Создание текстуры через PIXI.Texture.fromBuffer

Метод PIXI.Texture.fromBuffer позволяет создать текстуру напрямую из массива пикселей:

const width = 100;
const height = 100;
const pixels = new Uint8Array(width * height * 4);

// Заполнение массива случайными цветами
for (let i = 0; i < pixels.length; i += 4) {
    pixels[i] = Math.random() * 255;       // R
    pixels[i + 1] = Math.random() * 255;   // G
    pixels[i + 2] = Math.random() * 255;   // B
    pixels[i + 3] = 255;                   // A
}

const texture = PIXI.Texture.fromBuffer(pixels, width, height);
const sprite = new PIXI.Sprite(texture);
app.stage.addChild(sprite);

Ключевые моменты:

  • pixels — одномерный массив пикселей в формате RGBA.
  • width и height определяют размеры текстуры.
  • Текстура может быть повторно использована и применена к любому спрайту.

Использование PIXI.BaseTexture и PIXI.Texture

Для более низкоуровневого контроля можно создавать текстуру через PIXI.BaseTexture, передавая массив пикселей в PIXI.Texture:

const baseTexture = new PIXI.BaseTexture(pixels, {
    width: width,
    height: height,
    scaleMode: PIXI.SCALE_MODES.NEAREST
});

const texture = new PIXI.Texture(baseTexture);
const sprite = new PIXI.Sprite(texture);

Параметр scaleMode позволяет управлять масштабированием текстуры:

  • PIXI.SCALE_MODES.NEAREST — резкое масштабирование (пиксельный стиль)
  • PIXI.SCALE_MODES.LINEAR — плавное сглаживание

Обновление текстуры в реальном времени

Текстуру, созданную из массива пикселей, можно обновлять динамически. Для этого используется метод update у BaseTexture:

function updateTexture(texture, newPixels) {
    texture.update(newPixels);
}

// Пример динамической анимации
for (let i = 0; i < pixels.length; i += 4) {
    pixels[i] = Math.random() * 255;
    pixels[i + 1] = Math.random() * 255;
    pixels[i + 2] = Math.random() * 255;
}
updateTexture(texture.baseTexture, pixels);

Такой подход позволяет создавать эффекты шума, огня, воды и других процедурных текстур без необходимости загружать изображения.

Генерация градиентов и паттернов

Массив пикселей можно формировать программно для создания градиентов:

for (let y = 0; y < height; y++) {
    for (let x = 0; x < width; x++) {
        const i = (y * width + x) * 4;
        pixels[i] = (x / width) * 255;        // R
        pixels[i + 1] = (y / height) * 255;   // G
        pixels[i + 2] = 128;                  // B
        pixels[i + 3] = 255;                  // A
    }
}

Такой код создаст плавный переход красного и зелёного по горизонтали и вертикали.

Особенности производительности

  • Работа с Uint8Array предпочтительна для больших текстур, так как использование обычного массива Array значительно медленнее.
  • Частое обновление массивов больших размеров может быть ресурсоёмким. Для оптимизации используют WebGL шейдеры или ограничивают обновление лишь части текстуры.
  • scaleMode влияет на визуальное качество и скорость рендеринга при масштабировании.

Советы по отладке

  1. Проверять, что длина массива строго равна width * height * 4.
  2. Убедиться, что альфа-канал корректно установлен, иначе текстура может быть полностью прозрачной.
  3. Для визуальной проверки полезно сначала создавать маленькие текстуры (например, 16×16) и выводить их на спрайт.

Создание текстуры из массива пикселей открывает мощные возможности генеративной графики в PixiJS, позволяя работать с динамическим содержимым без необходимости в сторонних изображениях. Такой подход идеально подходит для эффектов частиц, процедурных карт и интерактивных визуализаций.

Оглавление