Класс BaseTexture и управление GPU-ресурсами

В PixiJS класс BaseTexture представляет собой фундаментальный объект, который хранит информацию о графическом ресурсе и управляет его представлением в виде текстуры на GPU. Он является низкоуровневым компонентом, на основе которого создаются все текстуры (Texture), спрайты (Sprite) и другие графические объекты.

Создание и инициализация BaseTexture

BaseTexture создаётся с помощью конструктора:

const baseTexture = new PIXI.BaseTexture(imageURL, options);

Параметры:

  • imageURL — строка с путем к изображению, HTMLImageElement, HTMLCanvasElement или видеоэлемент.
  • options — объект с настройками, например:
{
    scaleMode: PIXI.SCALE_MODES.LINEAR, // способ масштабирования
    resolution: 1,                      // плотность пикселей
    mipmap: PIXI.MIPMAP_MODES.OFF,      // генерация MIPMAP
    wrapMode: PIXI.WRAP_MODES.CLAMP     // режим обрезки
}

BaseTexture автоматически загружает изображение и создаёт соответствующий текстурный ресурс на GPU. Для контроля момента загрузки можно использовать событие:

baseTexture.on('loaded', () => {
    console.log('BaseTexture загружена и готова к использованию.');
});

Свойства BaseTexture

Ключевые свойства, которые определяют работу с GPU:

  • width / height — размеры текстуры в пикселях.
  • realWidth / realHeight — реальные размеры ресурса на GPU (могут отличаться при power-of-two оптимизации).
  • resolution — коэффициент масштабирования для поддержки HiDPI.
  • scaleMode — режим фильтрации (NEAREST или LINEAR).
  • wrapMode — поведение при выходе за границы текстуры (CLAMP, REPEAT, MIRRORED_REPEAT).
  • valid — булевое значение, указывающее, готов ли ресурс к использованию.

Управление GPU-ресурсами

Подключение к GPU

При создании BaseTexture автоматически создаётся WebGL-текстура. Важно понимать, что BaseTexture хранит только данные изображения, а фактическое копирование на GPU происходит при первом использовании в рендеринге.

const texture = PIXI.Texture.from('image.png');
const sprite = new PIXI.Sprite(texture);
app.stage.addChild(sprite); // здесь происходит загрузка на GPU

Ручное обновление текстуры

Если содержимое BaseTexture изменилось (например, на Canvas), нужно вызвать метод:

baseTexture.update();

Это гарантирует, что GPU-ресурс будет синхронизирован с обновлёнными данными.

Освобождение ресурсов

WebGL-ресурсы не очищаются автоматически при удалении объекта JavaScript. Для предотвращения утечек памяти необходимо использовать:

baseTexture.destroy({
    destroyBase: true, // удаляет также базовый ресурс
});

Это освобождает память GPU и удаляет текстуру из менеджера ресурсов BaseTextureCache.

Взаимодействие с текстурами

Каждая текстура (Texture) создаётся на основе BaseTexture, что позволяет использовать один графический ресурс в нескольких спрайтах без дублирования данных на GPU:

const baseTex = PIXI.BaseTexture.from('image.png');
const tex1 = new PIXI.Texture(baseTex, new PIXI.Rectangle(0, 0, 100, 100));
const tex2 = new PIXI.Texture(baseTex, new PIXI.Rectangle(100, 0, 100, 100));

Преимущество: экономия видеопамяти и высокая производительность, так как один BaseTexture может обслуживать множество текстурных регионов.

Поддержка анимации и видео

BaseTexture может быть создан не только из статичных изображений, но и из HTMLCanvasElement и HTMLVideoElement:

const videoElement = document.createElement('video');
videoElement.src = 'video.mp4';
const baseVideoTexture = new PIXI.BaseTexture(videoElement, { scaleMode: PIXI.SCALE_MODES.LINEAR });

В этом случае метод update() необходимо вызывать на каждом кадре для синхронизации GPU с текущим состоянием видео или canvas.

Кэширование и управление памятью

PixiJS хранит все BaseTexture в глобальном кэше BaseTextureCache:

console.log(PIXI.utils.BaseTextureCache);

Можно удалять конкретный ресурс из кэша, чтобы контролировать использование памяти:

delete PIXI.utils.BaseTextureCache['image.png'];

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

Оптимизация производительности

  1. Использование power-of-two текстур — ускоряет работу с MIPMAP и фильтрацией.
  2. Реиспользование BaseTexture — один ресурс для множества текстур.
  3. Отложенная загрузка GPU-ресурсов — ресурсы загружаются только при необходимости.
  4. Удаление неиспользуемых текстур — предотвращает утечки памяти.
  5. Масштабирование и фильтрация — выбор scaleMode и wrapMode в зависимости от визуальных требований.

Методы BaseTexture

  • update() — синхронизация с источником изображения/видео/канвасом.
  • destroy([options]) — освобождение GPU и JS ресурсов.
  • dispose() — помечает ресурс для удаления, удаляя из кэша.
  • destroyed — булевое свойство, указывающее, уничтожен ли объект.

Важные нюансы

  • Асинхронная загрузка: BaseTexture может быть недоступен сразу, поэтому проверка события loaded или свойства valid обязательна.
  • HiDPI и ретина: использование resolution позволяет корректно отображать графику на дисплеях с высокой плотностью пикселей.
  • Множественные текстуры из одного ресурса: изменение BaseTexture автоматически отражается на всех Texture, что удобно для спрайт-сетов и анимации.

BaseTexture является ядром системы управления графическими ресурсами в PixiJS, обеспечивая контроль над GPU-памятью, эффективное повторное использование текстур и синхронизацию с динамическими источниками изображений. Его правильное использование напрямую влияет на производительность и стабильность WebGL-приложений.

Оглавление