Comments (2)
It depends on number of elements that has displayGroup, and whether you sort them. If you have 10k elements i suggest you to learn how pixi updateTransform() works and think how can you optimize it for your case.
pixi-display is the best "runtime" solution, and of course you can make better only if you know "static" optimizations for certain game that dont calculate everything on every frame.
- Walk through all elements and determine which elements belong to which groups. That's a linear time algorithm, it has the same price that you are paying pixi for walks like "updateTransform" or "renderWebGL" (without cost of rendering itself).
- cheap, but 10k elements on slow computers will screw it. Optimize only if you know how to get rid of pixi updateTransform() too.
- Z-index sorting for groups: suppose we have a container with 1002 elements, two of them have different behaviour - one if in front and one is in back. If you just assign a "z-index" to all of them, you'll have to sort them all every frame. But with pixi-display you can assign them three different groups: one for back, one for front, and one for everything else, and thus the sort will work only on 3 elements
- that is cheap, most of developers dont think about that approach, that's our gem :)
- Z-order sorting inside a group: when you have 1000 elements on different distance from screen, put that distance into zOrder field and enable sorting in the group.
- that sort is slow, its the same sort as in phaserjs. First candidate for optimizations.
Currently I have custom "display" solution for 10k elements that uses CPU only when it needs to re-sort something. I will publish it later.
btw, there's new version: https://github.com/pixijs/pixi-display/tree/layers , it has different API , its easier to understand and it allows to use filters/masks: https://pixijs.github.io/examples/#/layers/lighting.js
from layers.
I re-open it because that's the best explanation i gave so far :)
from layers.
Related Issues (20)
- A bit confused about how to use HOT 3
- PIXI Events propagation bug with zOrder HOT 2
- Z-Index change has no effect HOT 1
- Masking don't work with pixi/layers
- Bug: PIXI Events not respecting zOrder hierarchy of PIXI Layers plugin HOT 2
- Uncaught TypeError: renderer.incDisplayOrder is not a function HOT 6
- updates for pixi v8 HOT 1
- Examples not working
- TS error: Can't assign Layer to Container HOT 4
- Uncaught TypeError: this.applyRenderMixing is not a function HOT 4
- Calling InteractionManager.hitTest throws an exception HOT 3
- Layers cannot be masked ? HOT 9
- I've read through all the documentation / examples and still don't understand how to use this plugin. HOT 13
- how to use webpack pixi-layers HOT 3
- Renderer mixin not applied properly
- How to Set a Clear Colour
- Examples are not working
- After upgrade to v1.0.11, compile to commonjs modules no longer possible in tsConfig HOT 3
- No output with webworkers HOT 1
- support @pixi/events
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from layers.