pixijs / pixi-projection

MIT License
190 stars 34 forks source link

How to get projected content rendering at the correct zIndex within a 2d scene? #76

Closed nous- closed 4 years ago

nous- commented 4 years ago

I am attempting to render 3d content with pixi-projection at a target zIndex within a 2d scene, but the zindex is not being obeyed, and the 3d content is rendering over the entire scene.

const background = new PIXI.Sprite(backgroundTex)
background.zIndex = 0;
stage.addChild(background);

const camera = new projection.Camera3d();
camera.setPlanes(500, 30, 10000);
camera.zIndex = 1;
stage.addChild(camera);

const sprite = new projection.Sprite3d(spriteTex);
sprite.euler.x = -20 * PIXI.DEG_TO_RAD;
camera.addChild(sprite);

const foreground = new PIXI.Sprite(foregroundTex);
foreground.zIndex = 2;
stage.addChild(foreground);

stage.sortChildren();

Also posted on stackoverflow.

ivanpopelyshev commented 4 years ago

Hello!

that's no way someone answers on pixi-layers on stackoverflow.

pixi-projection on itself doesnt have 2d zIndex, and it doesnt have 3d z-buffer going on.

pixi-v5 has zIndex inside container if you specify container.sortableChildren = true

pixi-layers uses different variable - zOrder, and you have to actually look its README instead of just smashing random pieces of code

Also, all 3d stuff must be put in camera.

nous- commented 4 years ago

I've since got the camera correctly rendering at the correct zIndex using the same code above. I blundered in my work by having it on the wrong layer and thinking in the same coordinate frame as sprites. Thanks for the slack discussion.