PixiJS Render Textures — Offscreen Rendering and Caching

DodaTech Updated 2026-06-28 3 min read

In this tutorial, you will learn about PixiJS Render Textures. We cover key concepts, practical examples, and best practices to help you master this topic.

PixiJS RenderTexture enables rendering display objects to an offscreen texture for Caching, dynamic texture generation, and advanced compositing effects.

What You'll Learn

By the end of this guide, you will render objects to textures for caching, generate textures dynamically, use RenderTexture for minimaps, update textures each frame for mirror effects, and optimize performance with cached render textures.

Basic RenderTexture

var rt = PIXI.RenderTexture.create({ width: 200, height: 200 });
app.renderer.render(container, { renderTexture: rt });

var sprite = new PIXI.Sprite(rt);
sprite.x = 300;
sprite.y = 50;
app.stage.addChild(sprite);

Caching Complex Graphics

var complex = new PIXI.Graphics();
// ... many drawing commands ...

var cachedTex = app.renderer.generateTexture(complex);
var cachedSprite = new PIXI.Sprite(cachedTex);
// Cached sprite renders much faster

Dynamic Texture

var rt = PIXI.RenderTexture.create({ width: 400, height: 300 });
var brush = new PIXI.Graphics();
brush.beginFill(0x4ecdc4, 0.5);
brush.drawCircle(0, 0, 20);
brush.endFill();

app.stage.on('pointermove', function(event) {
    brush.x = event.global.x;
    brush.y = event.global.y;
    app.renderer.render(brush, { renderTexture: rt, clear: false });
});

Common Mistakes

1. Not Clearing RenderTexture

RenderTexture accumulates content. Set clear: true or call rt.clear() before rendering each frame.

2. Infinite Recursion

Do not render a container to a RenderTexture if that same container is on the stage. It causes recursive rendering.

3. Resolution Mismatch

RenderTexture resolution should match the display resolution. Set resolution: 2 for retina.

4. Texture Disposal

RenderTexture uses GPU memory. Call rt.destroy() when no longer needed.

5. generateTexture on Animated Objects

generateTexture captures the current state. For animated objects, regenerate each frame.

Practice Questions

Q1: What is a RenderTexture? A: An offscreen texture that you can render display objects into.

Q2: How do you cache a complex graphic? A: Use app.renderer.generateTexture(complexGraphic).

Q3: How do you create a paint brush effect? A: Render a small circle at pointer position onto a RenderTexture each frame with clear: false.

Q4: How do you clear a RenderTexture? A: Call rt.clear() or pass clear: true in render options.

Q5: How do you dispose a RenderTexture? A: Call rt.destroy(true) to free GPU memory.

Challenge: Build a drawing app. Use a RenderTexture as the canvas. Add color picker and brush size controls. The drawing should persist when switching tools.

FAQ

Can RenderTexture be any size?

Yes, but large textures (>2048) use more GPU memory. Keep sizes reasonable.

Can I render multiple objects to one texture?

Yes. Render each object to the same texture with clear: false.

Does RenderTexture work on Canvas renderer?

Yes, but with lower performance.

How do I use RenderTexture for a mirror effect?

Render the scene flipped vertically to a texture and display it below.

Can I use RenderTexture for shader effects?

Yes. Use a filter on the RenderTexture sprite for post-processing.

Try It Yourself

Create a paint brush with RenderTexture.

<!DOCTYPE html>
<html>
<head>
    <title>PixiJS RenderTexture</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.3/pixi.min.js"></script>
</head>
<body style="font-family:sans-serif;padding:20px;">
<h2>Paint Demo (Drag to draw)</h2>
<script>
var app = new PIXI.Application({ width: 500, height: 350, background: 0xffffff });
document.body.appendChild(app.view);

var rt = PIXI.RenderTexture.create({ width: 500, height: 350 });
var displaySprite = new PIXI.Sprite(rt);
app.stage.addChild(displaySprite);

var brush = new PIXI.Graphics();
brush.beginFill(0x4ecdc4);
brush.drawCircle(0, 0, 15);
brush.endFill();

var isDrawing = false;

app.stage.interactive = true;
app.stage.hitArea = app.screen;

app.stage.on('pointerdown', function() {
    isDrawing = true;
});

app.stage.on('pointerup', function() {
    isDrawing = false;
});

app.stage.on('pointerupoutside', function() {
    isDrawing = false;
});

app.stage.on('pointermove', function(event) {
    if (!isDrawing) return;
    brush.x = event.global.x;
    brush.y = event.global.y;
    app.renderer.render(brush, { renderTexture: rt, clear: false });
});
</script>
</body>
</html>

What's Next

Use bitmap text.

Bitmap Text — Bitmap text rendering. WebGL vs Canvas — WebGL and Canvas renderers.

← Previous PixiJS Interaction — Pointer Events and Event Handling Next → PixiJS Bitmap Text — High-Performance Text Rendering

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Pixijs