Array of objects at xy position (hitTest, processInteractive)

[jasonsturges]

If I have multiple objects under the same root container (like, two overlapping graphic descendants of stage), how can I hit test a point to retrieve all objects in the scene graph?

Pixi.js tutorials show the `hitTest()` method, which returns the first interactive object
https://api.pixijs.io/tutorials/_basics/interaction.html

// Find out what interactive object lies at [100, 50]
let globalPt = new PIXI.Point(100,50);
let obj = app.renderer.plugins.interaction.hitTest(globalPt);

 

Seems like the `processInteractive()` function that `hitTest()` uses should work - I can't find many / any examples of how to use `processInteractive()`.

Like here, this traversal wouldn't work since both objects are under the same `root`.

processInteractive(hitTestEvent, root, null, true);

 

Lot of discussions regarding this over the years, but looks like `processInteractive` is now the modern approach for this?  Think it'd work if I could traverse down through roots, but I'm not sure I understand at the same root.

 

As an aside - I have a lot of bulk scene graph operations I'd like to perform, and more examples / tutorials of `processInteractive` would be super awesome.

 

[ivan.popelyshev]

processInteractive was moved to TreeSearch so you can make your own "renderer.interaction.search = myTreeSearch"

[jasonsturges]

@ivan.popelyshev Sorry, little confused here.

Are there any examples of how to implement a custom TreeSearch?

If I set `renderer.plugins.interaction.search = myCustomSearch` then I would replace the built-in search, right?  `InteractionManager` has a `processInteractive` that is using that search, right?

https://github.com/pixijs/pixijs/blob/7703aa1d66c1116c2a771d6e8f69a720619e979a/packages/interaction/src/InteractionManager.ts#L1252

For a custom `TreeSearch`, I'd need to implement a `findHit()`? 

There's no interface on that class.

Built-in functionality seems there, but not understanding how to combine this and interaction events; or, what effect it would have.  Perhaps instead I should implement my own depth first / breadth first traversal functions and test point coordinates against bounds in a global space.

[ivan.popelyshev]

> Are there any examples of how to implement a custom TreeSearch?

Ctrl+c, ctrl+v, change it.

> Perhaps instead I should implement my own depth first / breadth first traversal functions and test point coordinates against bounds in a global space.

That's basically your own TreeSearch, whats the problem?

[ivan.popelyshev]

Here's pixi default treesearch: https://github.com/pixijs/pixijs/blob/7703aa1d66c1116c2a771d6e8f69a720619e979a/packages/interaction/src/TreeSearch.ts

Here's custom for pixi-layers: https://github.com/pixijs/layers/blob/master/src/LayersTreeSearch.ts

Because pixi-layers hacked processInteractive before, I made a PR to pixi to separate treesearch, so other people can write their own traversal functions.

> There's no interface on that class.

It was there even before full conversion to TS. Make a PR  

=====

btw, alternative events lib @pixi/events went live, and people are experimenting with it - it has boundaries that can add custom traversal. I havent experiment with it yet.

Edited September 2, 2021 by ivan.popelyshev

[jasonsturges]

4 hours ago, ivan.popelyshev said:

Ctrl+c, ctrl+v, change it.

Are you referring to this?

On 8/30/2021 at 5:06 AM, ivan.popelyshev said:

renderer.interaction.search = myTreeSearch

That sets the tree search, but isn't really an example of how to create a tree search; or, what ramification setting that has to the framework.

Which, also shouldn't that be: `renderer.plugins.interaction.search`?  I don't think renderer has interaction, does it?

This LayerTreeSearch helps, but yeah - I could craft any functionality to replace pixi, just seemed like there was something built-in here:

     * This function is provides a neat way of crawling through the scene graph and running a
     * specified function on all interactive objects it finds.

Seemingly useful utility, but some examples would prove valuable - hit, or function outside of interaction events.  Maybe I'm reading that wrong.

[ivan.popelyshev]

this comment was added somewhere in pixi v3. 

> Seemingly useful utility, but some examples would prove valuable - hit, or function outside of interaction events. 

Someone made processInteracitve. Other people modified it, added comments. I made custom interaction for Layers, then some people made their own custom changes in processInteractive, so I made a PR to main pixi repo to move this thing away to TreeSearch

more excuses for me:

1. I'm not native english speaker

2. Some algorithms are better explained through code, not through documentation.

3. TreeSearch wasnt actually my focus, I just spent hours on it while i spent days on documenting the main lib. For example whole lighting system of youtube.com/watch?v=QjEkszIj7sk works on my layers

I take it, you want to be part of this story. Do you want to sign up to make these examples?  Welcome to open-source.
 

======

In case you are paying for pixijs through https://opencollective.com/pixijs/ : you can assign a bounty on " give me more custom interaction examples" and contact bigtimebuddy so he pays your money to whoever will make it

Edited September 2, 2021 by ivan.popelyshev

[jasonsturges]

My pixi.js contributions are small.

Pixi.js GitHub contributor

Some npm modules, Medium articles, CodePens...

Technical reviewer of two publications regarding Pixi.js from Apress, Springer Science + Business Media including Learn Pixi.js (2015)

- https://www.apress.com/us/book/9781484210956

 

Taking my evangelism to the next level might be cool as a direct contributor of documentation.  My focus is more in the 3D space, but I'll consider financially backing this open source initiative.

Per TreeSearch, let me circle back on the specific issues I have with it... though I'm learning towards rolling a depth first or Dijkstra algorithm here.

 

[ivan.popelyshev]

> Taking my evangelism to the next level might be cool as a direct contributor of documentation. 

There's https://github.com/pixijs/guides , our next level of docs. Hope you are ready that other people will search for you and ask for more stuff after you do the contribution  My past commits are haunting me for years

>  I'm learning towards rolling a depth first or Dijkstra algorithm here.

Dijkstra.. here? Why and how? Its a tree

[jasonsturges]

This project is a graph, which I'm projecting via Pixi - more than just graphics picking here anyways.

Currently this editor is Fabric.js, which I'm contemplating unifying to Pixi or alternative platform.