Huge continous frame drop gets started after mouse pointer is left browser window.

Expected Behavior

No frame drop or little frame drop

Current Behavior

Reproduce video : https://youtu.be/febJBPb2kBs

Please watch above video. when I make event (mouse or tablet pen whatever) to Container which has quite large sprites (5000 ~ 10000), If I left mouse cursor or event pointer, the frame drop get started. It’s very weird, I don’t understand why it happens. I even didn’t endable “interactive” anywhere. More weird thing is if I hover my mouse or pointer to Container, The frame goes to increase again for example, 30 to 40. But If my pointer left the container, frame drop starts again. in Android tablet, It makes huge continous frame drop like the video. (60ps to 20ps for 30 sec) I see the GoodBoy’s “bunnymark” doesn’t have this problem, because It uses particle container. But in vanilla Container, it happens. in M1 Macbook, while there is no frame drop, the cpu usage goes really higher after pointer leaving the container. The pointer should be left completely (out side of Browser windows) Please tell me why this happen. I made very very simple code to reproduce this.

Steps to Reproduce

import { Application, Sprite, Texture, UPDATE_PRIORITY } from 'pixi.js'
import { addStats } from 'pixi-stats'

class SimpleApp extends Application {

    constructor () {

        super ({

            width : 100,
            height : 100,
            backgroundColor : 0x000000

        })

        document.body.appendChild(this.view)

        const SPRITE_COUNT = 5000

        for (let i = 0; i < SPRITE_COUNT; ++i) {

            const s = new Sprite(Texture.WHITE)

            s.x = Math.random() * 100
            s.y = Math.random() * 100
            s.tint = 0xffffff * Math.random()

            this.stage.addChild(s)

        }

        const stats = addStats(document, this)

        this.ticker.add(stats.update, stats, UPDATE_PRIORITY.UTILITY)
        
    }

}

window.onload = (() => new SimpleApp())

Environment

• pixi.js version: 6.1.1
• Browser & Version: Android Glaxay Tab Chrome & Apple M1 Chrome
• OS & Version: Android or MacOs BigSur
• Running Example: https://youtu.be/febJBPb2kBs

[ivanpopelyshev]

To switch off interaction you have to do container.interactiveChildren=false, otherwise it will go through all children to check whether someone is interactive. there are no caches, no quadtrees, no bounds checking there, pixi interaction is very simple

You guys looked at https://github.com/pixijs/pixijs/blob/dev/packages/interaction/src/TreeSearch.ts , right?

[owendwyer]

If I wanted to investigate this, I’d look to see how the frame rate behaves with different numbers of sprites - see what happens with 0 sprites, 10 sprites, 100, 500, 1000 etc.

And maybe see how things are different when interaction settings are changed. Things like App.renderer.plugins.interaction.autoPreventDefault = false; App.renderer.view.style.touchAction = ‘auto’;