pixijs-scene-core-concepts

PixiJS scene graph render order processes containers and leaves sequentially, prioritizing child array indices and z-index settings to determine visual stacking. RenderLayer and isRenderGroup options further modify this flow for layer-based rendering.

PixiJS transforms use local coordinates for relative child positioning and world coordinates for absolute scene placement. Transform matrices convert between these spaces, ensuring correct object alignment during hierarchical container nesting.

Wrap PixiJS leaves in containers when you need to group multiple objects for shared transforms, masking, or render order control. Leaves are terminal renderable nodes, so containers provide the structural hierarchy required for scene construction.

Masking in the PixiJS v8 scene graph applies a visual cutout to containers or leaves using another object's shape. It integrates with the transform hierarchy, requiring correct local and world coordinate alignment to function reliably.

PixiJS supports render layers through RenderLayer and the isRenderGroup constructor option, allowing you to decouple visual stacking from the logical scene graph hierarchy. This ensures reliable layer-based rendering across complex scenes.

Incorrect PixiJS container display order often stems from misunderstanding scene graph render flow, where child array sequence and z-index dictate stacking. Reviewing constructor options and render layer assignments resolves these placement bugs.