How to Convert Graphics to Texture in Pixi.js

Drawing shapes dynamically with the Pixi.js Graphics class is highly flexible, but rendering complex vector shapes repeatedly can degrade your application’s performance. By converting a dynamically drawn Graphics object into a reusable Texture, you allow Pixi.js to cache the shape on the GPU and render it as a fast Sprite. This article explains how to perform this conversion, reuse the resulting texture, and manage memory efficiently.

The Core Concept: renderer.generateTexture

The standard way to convert any display object (including Graphics) into a texture in Pixi.js is by using the renderer’s generateTexture method. This process takes the vector data of your graphics object, draws it once onto an offscreen canvas or frame buffer, and returns a static Texture object.

Step-by-Step Implementation

1. Create the Dynamics Graphics Object

First, instantiate a Graphics object and draw your desired shape.

import * as PIXI from 'pixi.js';

// Initialize PixiJS Application
const app = new PIXI.Application();
await app.init({ width: 800, height: 600 });
document.body.appendChild(app.canvas);

// Create and draw a dynamic shape
const graphics = new PIXI.Graphics();
graphics.fill(0xff0000); // Red fill
graphics.drawCircle(0, 0, 50); // Draw a circle with a 50px radius

2. Generate the Texture

Pass the graphics object to the renderer’s generateTexture method. This creates a reusable texture containing the drawn shape.

// Convert the Graphics object to a reusable Texture
const circleTexture = app.renderer.generateTexture(graphics);

3. Instantiate Sprites Using the Texture

Now that you have a Texture, you can create multiple Sprite instances from it. This is much more performant than adding multiple copy-pasted Graphics objects to your stage.

// Create Sprite 1
const sprite1 = new PIXI.Sprite(circleTexture);
sprite1.x = 200;
sprite1.y = 300;

// Create Sprite 2
const sprite2 = new PIXI.Sprite(circleTexture);
sprite2.x = 400;
sprite2.y = 300;

// Add sprites to the stage
app.stage.addChild(sprite1);
app.stage.addChild(sprite2);

4. Clean Up the Original Graphics Object

Once the texture has been generated, the original Graphics object is no longer needed to render the shape. You should destroy it to free up system memory.

// Clean up the original graphics object
graphics.destroy();

Best Practices and Memory Management