pixijs: Bug: Moving the mouse over a huge container mostly filled with invisible sprites results in a big performance hit

Current Behavior

In an scene with a huge container with most sprites being visible=false;, moving the mouse over the canvas results in a big performance hit.

Expected Behavior

Invisible objects have no impact while moving the mouse over the canvas. (Pixi v6 had no performance penality.)

Steps to Reproduce

Open https://jsfiddle.net/TobiasW/7qf6har0/32/
Observe the framerate being e.g. around 30 FPS
Move your mouse over the canvas.
While continually moving the mouse, observe the framerate drop to e.g. around 6 FPS.

Environment

pixi.js version: 7.2.0-rc
Browser & Version: Firefox 110.0.1 (64-Bit)
OS & Version: Windows 10
Running Example: https://jsfiddle.net/TobiasW/7qf6har0/32/

Possible Solution

No response

Additional Information

This seems to be similiar to #9156, but with visible = false; being ignored instead of interactive = false; interactiveChildren = false; hitArea = { contains: () => false }.

About this issue

Original URL
State: closed
Created a year ago
Reactions: 2
Comments: 16 (8 by maintainers)

Most upvoted comments

Awesome, tested out 7.2.0-rc.2 with the new flags and performance for me back to or better than pre-v7. Even without flags, performance seems to much better.

I am seeing new weird behavior around wrong sprites receiving events, but guessing that’s a bug in my sprite caching and re-use logic, and maybe exposed now by the consolidated interaction loop and different order of events. Will debug and raise new issue if able to reproduce.

Thanks for all your help!

rwampler on Mar 10, 2023

Hey all

I have a PR up to try and fix these issues here: #9246

Before: https://jsfiddle.net/TobiasW/7qf6har0/32 After: https://jsfiddle.net/kv46xsjr/

It seems to fix this example

@rwampler For your use case i have add options to disable move, globalMove, click, and wheel events that allows you to turn on/off large parts on the event system

new Application({
    events: {
        move: false,
        globalMove: false,
        click: true,
        wheel: false
    }
})

Zyie on Mar 9, 2023

@Zyie would you mind taking a look at this?

bigtimebuddy on Mar 6, 2023