Scaling content to fit perfectly using PIXI Projection's 3d camera

[mr_hippo]

Hi, I'm using the PIXI Projection's 3d camera on a site that occupies the entire window — the camera moves, the content is always centered and the aspect ratio can change.  I'm trying to figure out how to modify the camera so it will update its scale3d so all the content within a defined rectangle in space will fit in the window as big and perfectly as possible.

Right now I'm doing it the stupid way and checking my content on a couple different aspect ratios, figuring out the numbers by hand through trial/error, and just interpolating those numbers in the actual code. Mostly works, the problem with this method is that it's off on more extreme all screens and doesn't scale perfectly — esp odd aspect ratios. It's tough to explain... here is the site: https://mmm.hsiao.science — if you resize the window you'll see the content scaling to try to fit but not perfectly. I think I just need some pointers so I know where to start. Any tips will be most appreciated! 

Also thanks for PIXI — makes it so easy to build something visual for those who don't enjoy coding too much.

Edited November 30, 2018 by mr_hippo
making url a link

[ivan.popelyshev]

Your source code is obfuscated, I dont know what do you do wrong there

Ok, let me explain how projection works:

var camera = new PIXI.projection.Camera3d();
camera.setPlanes(400, 10, 10000, false); // true if you want orthographics projection
// I assume you have an app or renderer already 
camera.position.set(app.screen.width / 2, app.screen.height / 2);

If you have width=800, height=600, fullscreen sprite should have coords (-400, -300) - (400, 300) , because Z=0 space is not transformed at all.

If you change "camera.scale" now , that aspect radio is preserved (leave X or Y not modified), like in vanilla pixi (without projection) - it will work for you. 

Remember that "position3d" ,"scale3d", are separated from it, they are applied in reversed order (because its a camera) after 2d transform and projective transform.

[ivan.popelyshev]

Ok, i see that you dont use aspect ratio there, you want just preserve Y axis .. well then, just no scaling should work for you, whats the problem?

Is your plane at z=0 , do you animate its Z or camear planes ?

Do you use "scale" or "scale3d"? If you use "Scale", try "scale3d" instead (its reversed, 0.5 instead of 2 and so on)