CODEWITHSUNDEEP
javascriptpixi.js
MitchEff
MitchEff

Reputation: 1557

PixiJS consuming enormous amounts of GPU

So I have a scene in Pixi, with about 7-8 textures in it. A couple are just looping simple transforms (e.g spinning like a fan, etc), some are static.

Without interacting with it at all (it's in a separate window to this), the mere presence of it makes my 16BG i7 MacBook Pro heat up like crazy and it's occupying 50% CPU.

Here's an example of how I'm setting up one of the spinning animations. Does anything in there look suspicious? I can't believe how much power it's consuming, and I'm about to throw out all my Pixi code and just use CSS as it seems much more efficient. 

rotorPositions.forEach((rotor, index) => {
    const sprite = new PIXI.Sprite(resources.rotor.texture)
    sprite.position.set(foregroundContainer.width/100 * rotor[0], foregroundContainer.height/100 * rotor[1])
    foregroundContainer.addChild(sprite)

    sprite.anchor.x = 0.5
    sprite.anchor.y = 0.616

    let speed = 0.03

    sprite.zIndex = 3

    if(index == 1){
        speed = 0.04
        sprite.rotation = 0.5
    }

    app.ticker.add(() => {
        sprite.rotation += speed
    })
})

Upvotes: 3

Views: 1434

Answers (1)

Jawad Khan
Jawad Khan

Reputation: 341

Preload your textures and try using cacheAsBitmap property. It takes snapshot of the display object resulting in better performance.

Here is an example: multiple textures example with cacheAsBitmap

Edit: You are using foreach loop. Loops can be very tricky, maybe use console.log and print a counter variable to see how many times the loop executes.

Upvotes: 1

Related Questions