How to search children by a window?

[around7en]

Is there a way that we can search children by a window? The usage is something like:

app.stage.search([0, 0, 100, 100])

and it should returns an array of children within or intersect with the window [0, 0, 100, 10]

I try to google it, but no luck

[ivan.popelyshev]

Good idea!

If you find a 2d rendering engine (maybe not JS) that can give that has that feature , I'll be happy to make a plugin for pixi based on that algorithm.

[around7en]

I find a js library RBush which is a high performance RTree

https://github.com/mourner/rbush

Finally I figure it out by this way:

// Create a class extends from Graphics
// Add props minX, minY, maxX, maxY as RBush required

class BaseShape extends PIXI.Graphics {
    constructor(rect) {
        super(true);
        // These 4 props are required by RBush
        this.minX = rect[0];
        this.minY = rect[1];
        this.maxX = rect[2];
        this.maxY = rect[3];
        // Plot graphcis Here
        this.beginFill(....)
        this.endFill()
    }
}


// Create a RTree to manage PIXI graphics
let rtree = rbush();

let shape = new BaseShape([10, 10, 100, 100]);
// Add the shape to stage
app.stage.addChild(shape);
// Add the shape to RTree
rtree.insert(shape);

// we can add more shapes to the RTree
...
...


// How to search
// It returns an array of BaseShape objects within/intersect with window [0, 0, 100, 100]
let results = rtree.search({minX: 0, minY: 0, maxX: 100, maxY: 100})

 

[around7en]

22 minutes ago, ivan.popelyshev said:

Good idea!

If you find a 2d rendering engine (maybe not JS) that can give that has that feature , I'll be happy to make a plugin for pixi based on that algorithm.

 

I have pasted solution i find out. Could you make it as plugin inside PIXI?  It should be a very useful plugin, at least to me.  For example, we can write mouse drag event, select all objects within the mouse drag window

What I pasted is just a simple example for rectangle shapes only. I think polygon shapes should be similar but may be a bit more complicated?

[ivan.popelyshev]

OK, now imagine that this thing has to support runtime. All graphics and sprites and meshes are moving. Every time you change X it has to be recalculated, or maybe lazily recalculated later when you submit a query. That seriously affects complexity of solution. I remember that there was solution like that : https://github.com/ErikSom/PixiCulling , please look through that code.

I think for the interaction case its easier to just look through all the pixi tree and intersect everything with a rect, like pixi does with points right now. The problem is that we have to add "intersectsRect" function like "containsPoint" for all elements: sprites, graphics, e.t.c.

Also I have already like 10 plugins to update to pixi-v5 before I do something like that , so you are on your own for several months at least. Though I can help with demos if you make them

[around7en]

I see. I didn't thought of that. In my cases, moving graphics is very low frequent, and all of my graphics are static, with no animation. I think RTree work enough for my needs.

Thanks for the information