GraphicsContext doesn't have much of a performance difference compared to drawing a bunch of new Graphics. What am I doing wrong here?

[leaf]

I am doing some performance testing at rendering lots of multicolored circles.

I have three approaches:
1. Instance many unique graphics contexts

2. Instance many graphics objects sharing 1 of 4 GraphicsContexts

3. Use a sprite with 1 of 4 different textures

Results

Many new unique Graphics objects
fps	15
GPU memory (mb)	8.1
Load time (ms)	70
4 randomly selected GraphicsContext
fps	15
GPU memory (mb)	8.1
Load time (ms)	23.56
Using sprites with 4 shared textures
fps	39
GPU memory (mb)	8.1
Load time (ms)	101

 

The takeaway: sprites are way more performant.

The second takeaway: there is no point to use GraphicsContext asides from load time. This must be wrong though? I feel like it can't be right based off the pixi documentation. Maybe I am doing something wrong in my testing code.

 

Test code:

Many new unique Graphics objects

function createCirclesWithTint(app: PIXI.Application, count: number) {
    console.time('New Tint Approach');

    const circleContext = new PIXI.GraphicsContext()
        .circle(0,0,10)
        .fill(0xFFFFFF);

    for (let i = 0; i < count; i++) {
        // Generate random color
        const color = Math.random() * 0xFFFFFF;
        const circle = new PIXI.Graphics(circleContext);
        circle.tint = color;
        // Position randomly
        circle.x = Math.random() * app.screen.width;
        circle.y = Math.random() * app.screen.height;

        app.stage.addChild(circle);
    }

    console.timeEnd('New Tint Approach');
}

Shared Graphics Contexts

function createCirclesFromPalette(app: PIXI.Application, count: number) {
    console.time('New Palette Approach');

    const paletteContext1 = new PIXI.GraphicsContext()
        .circle(0,0,10)
        .fill(0xFFFFFF * Math.random());

    const paletteContext2 = new PIXI.GraphicsContext()
        .circle(0,0,10)
        .fill(0xFFFFFF * Math.random());
    const paletteContext3 = new PIXI.GraphicsContext()
        .circle(0,0,10)
        .fill(0xFFFFFF * Math.random());
    const paletteContext4 = new PIXI.GraphicsContext()
        .circle(0,0,10)
        .fill(0xFFFFFF * Math.random());

    const choices = [paletteContext1, paletteContext2, paletteContext3, paletteContext4]
    for (let i = 0; i < count; i++) {
        const circle = new PIXI.Graphics(choices[Math.floor(Math.random()*choices.length)]);
        // Position randomly
        circle.x = Math.random() * app.screen.width;
        circle.y = Math.random() * app.screen.height;
        app.stage.addChild(circle);
    }

    console.timeEnd('New Palette Approach');
}

Sprite Approach

async function createSprites(app: PIXI.Application, count: number) {
    console.time('New Sprite Approach');
    const tex1 = await PIXI.Assets.load(ImgSrc1);
    const tex2 = await PIXI.Assets.load(ImgSrc2);
    const tex3 = await PIXI.Assets.load(ImgSrc3);
    const tex4 = await PIXI.Assets.load(ImgSrc4);

    const choices = [tex1, tex2, tex3, tex4]
    for (let i = 0; i < count; i++) {
        const sprite = new PIXI.Sprite(choices[Math.floor(Math.random()*choices.length)]);
        sprite.anchor.set(0.5)
        // Position randomly
        sprite.x = Math.random() * app.screen.width;
        sprite.y = Math.random() * app.screen.height;
        app.stage.addChild(sprite);
    }

    console.timeEnd('New Sprite Approach');
}