Конвертация Graphics в текстуру

В библиотеке PixiJS объект Graphics используется для создания векторной графики непосредственно в коде. Прямое использование Graphics удобно для динамического рисования, но часто требуется получить из него текстуру для оптимизации производительности или повторного использования.

Метод generateCanvasTexture или generateTexture позволяет конвертировать Graphics в объект Texture, который можно использовать для создания спрайтов, хранения кэшированных изображений и применения в сложных сценах без повторного рендеринга.

const graphics = new PIXI.Graphics();
graphics.beginFill(0xff0000);
graphics.drawCircle(0, 0, 50);
graphics.endFill();

const texture = graphics.generateCanvasTexture(); // создание текстуры
const sprite = new PIXI.Sprite(texture);
sprite.x = 100;
sprite.y = 100;
app.stage.addChild(sprite);

Отличие generateTexture и generateCanvasTexture

  • generateTexture — современный метод, использует WebGL рендеринг, быстрее при повторных вызовах, позволяет задавать масштаб, разрешение и границы (region).
  • generateCanvasTexture — создает текстуру через canvas, полезно в средах без WebGL или при необходимости совместимости с обычным Canvas API.
const textureWebGL = graphics.generateTexture({
    scaleMode: PIXI.SCALE_MODES.LINEAR,
    resolution: 2
});

Параметры метода generateTexture:

  • scaleMode — режим масштабирования (LINEAR или NEAREST), влияет на сглаживание при увеличении.
  • resolution — разрешение текстуры, по умолчанию 1; увеличение дает более четкое изображение на высоких DPI.
  • region — Rectangle, ограничивающий область рендеринга графики.

Сохранение текстуры для повторного использования

Часто текстуры создаются один раз и используются многократно. Это позволяет экономить ресурсы GPU и ускоряет рендеринг. Для этого создается кэш:

const cachedTexture = graphics.generateTexture();
PIXI.utils.TextureCache['circleTexture'] = cachedTexture;

const sprite1 = new PIXI.Sprite(PIXI.utils.TextureCache['circleTexture']);
const sprite2 = new PIXI.Sprite(PIXI.utils.TextureCache['circleTexture']);
app.stage.addChild(sprite1, sprite2);

Работа с прозрачностью и фильтрами

При создании текстуры важно учитывать альфа-канал и возможное наложение фильтров. Любые фильтры, примененные к Graphics до конвертации, будут учтены в итоговой текстуре. Для сохранения прозрачности используется настройка alpha через beginFill или глобальные параметры текстуры.

graphics.beginFill(0x00ff00, 0.5); // 50% прозрачность
graphics.drawRect(0, 0, 100, 100);
graphics.endFill();

const transparentTexture = graphics.generateTexture();

Обновление динамических текстур

Если графика изменяется часто, текстура требует обновления. Для этого можно вызвать update или повторно вызвать generateTexture после изменений.

graphics.clear();
graphics.beginFill(0x0000ff);
graphics.drawCircle(50, 50, 30);
graphics.endFill();

const updatedTexture = graphics.generateTexture(); // новая текстура после изменений
sprite.texture = updatedTexture;

Ограничение области текстуры

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

const region = new PIXI.Rectangle(0, 0, 50, 50);
const textureRegion = graphics.generateTexture({ region });

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

Итоговые рекомендации

  • Использовать generateTexture для WebGL и высокой производительности.
  • Кэшировать текстуры для повторного использования.
  • Учесть прозрачность и фильтры при конвертации.
  • Ограничивать область с помощью region для экономии памяти.
  • Обновлять текстуры после изменений графики для корректного отображения.

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

Оглавление