Is Pixi.js a good solution for my project ?

[gonzalle]

I'm in an early phase of a new project and I'm considering using Pixi for it.
I think it's a good idea to ask the community before going further..

Basically, I have multi-layered maps with many different models (up to 12)
the top layer is interactive, and when I click on a zone I can choose what map model to display for this zone.

Heres an image of what I have in mind : https://i.imgur.com/UafKavW.jpg

The solution I'm thinking of :

Outside Pixi :
1 - I choose one of the available map model to display.
2 - I click on an element of a transparent SVG that is placed above the canvas.
3 - I Get back informations about this element (path description, bbox, etc...)

In Pixi
1 - I ask pixi to create and display a sprite with the chosen map model and the SVG element as a mask.
2 - I can, eventually, choose to apply a filter to this element.

Do you think that pixi.js can handle something like this ?
Is it a good idea to use pixi for this ?
Does using pixie will help with the speed over a vanilla DOM/SVG solution ?

Thanks in advance to the experts !;)

 

[ivan.popelyshev]

Its possible with pixi but for that task, anything will do.

It depends whether you know SVG api , canvas2d api and webgl api. Pixi does not have anything extra for SVG, it allows to use canvas2d and webgl easily. Vector on webgl is kinda problem, maybe you'll have to pack some bitmap png resources manually.

I have experiencewith SVG and vector-related projects in pixi and every project required serious knowledge on both SVG and pixi.

For first try - do it as simple as possible, without pixi, otherwise I'm afraid you'll blame our awesome lib for not doing vector stuff from package, which is VERY DIFFICULT, and no webgl html5 renderer i know does that.

SUMMARY: I don't really know. Its too wide question and it requires knowledge and I'm rambling, I don't know how to help you

[gonzalle]

Thanks Ivan, 

I'm considering Pixi because i'm impressed by how effectively it handles sprites. 
I need SVG only to define the shape of the mask for a sprite... 
So I might narrow my questions : 
I know that I can create a sprite from a SVG with Pixi (PIXI.Texture.fromImage('data:image/svg+xml;charset=utf8',...))... But...

Q1 : Can I create sprites from big bitmaps with a SVG path as masks, (at a specified bbox) ? What would be the Method to use ? 

Q2 : The way I understand Pixi, is that it "crops" the relevant portion of the src bitmap without having to handle the full bitmap in memory. Am I right ? (I can't do that with a SVG mask).

And of course. If I decide to use pixi and I can't achieve what I want, I will curse you for eternity... As always. ;)...
(to avoid that, I always do some serious Proof Of Concept before... If I mess up... It will be my own responsibility)

Thanks again.

 

Edited February 5, 2019 by gonzalle
Precision

[ivan.popelyshev]

Pixi elements have "hitArea" field where you can specify a Polygon (or something that extends containsPoint method). The problem is that pixi doesn't check bounds before the polygon, so interaction can be a bit slow, I don't know how solow exactly will it be for our case, but I recommend to manually override "containsPoint" to make it more effective (check bounds first). To understand when its called, look in InteractionManager class processInteractive method.

Also bounds calculation cached only inside one frame, so you have to optimize it too , something about calculateBounds(). 

Yeah, it looks like you have to create your own element that handles interaction and bounds a bit differently. You can look at Graphics class source, how it caches bounds and re-calculates them, and overrides containsPoint.

Actually, remove that, you just need to convert your SVG in GRAPHICS and it can be used both as a mask and interactive object and whatever. You have to be aware or interaction fields (interactive, interactiveChildren) and read Graphics source.

Q1: no, SVG's are converted to sprites and dont have geometry in them. You have to make your own SVG vector parser or store it in some other format (json + your own parser)

Q2: webgl doesnt call fragment shader on pixels that are out of frame, that's all. Nothing is stored except what is on screen right now.

If you want to fill SVG path with an image, i suggest to not use mask but beginTextureFill thingy in pixi-v5 Graphics.

to convert SVG to graphics you can use https://github.com/bigtimebuddy/pixi-svg , but you have to understand how Graphics and interaction works anyway, dont think it'll be cakewalk.

[b10b]

@gonzalle how big are your maps?

[gonzalle]

I will try to keep them 2048 x 2048 max... and I will have something like 8 of them.

I am considering now to create a script on server to build an Atlas for all SVG elements... keep track of all positions in a  Json file, then repbuild the maps within pixi from the sprites... It could be something like 5000 sprites....
But I would rather to create sprites on the fly. As a user will certainly not use all the sprites... 15% sounds to be a maximum.

I don't know where to go.

[ivan.popelyshev]

pixi-super-atlas can create runtime atlas for you. It doesn't have pretty documentation and test is very simple, so you have to dig inside sources to understand how it works. https://github.com/gameofbombs/pixi-super-atlas

however , since 4.8.x something was changed and maybe you'll need newer version of superatlas which is part of BIG plugin https://github.com/gameofbombs/pixi-heaven/ , sorry for all that extra stuff in it

In any case, we have enough source code to read for you and not whole packaged solutions

You dont need atlas if your stuff is under 200DC on PC or 50DC on mobiles. DC can be measured with this: https://github.com/eXponenta/gstatsjs

[botmaster]

This is a situation where the more you try to do at runtime, the slower and more memory consuming your app is gonna be. Personally I would focus on asset preparation where countries are defined by a series of points (json probably) and all countries map/details are extracted as individual assets. At runtime I display only the interaction layer, as the mouse hovers the map I check if mouse coordinates are inside a defined country area (there's a formula to check if a point (the mouse) is inside a series of point) and if it is I display the corresponding country view at the right location, if clicked I display the country detail view, etc ... More asset preparation but a very fast and responsive app at the end. 

[gonzalle]

Thanks to all. I keep studying solutions.

@botmaster : there should be an easier way to define area with a color map. (a hit map with unique color for each area as index) : example : https://codepen.io/lavrton/pen/OWKYMr?editors=0010