Jump to content

How to search children by a window?


Recommended Posts

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


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) {
        // 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

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

let shape = new BaseShape([10, 10, 100, 100]);
// Add the shape to stage
// Add the shape to RTree

// 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})


Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...