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

Recommended Posts

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: — 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 by mr_hippo
making url a link

Share this post

Link to post
Share on other sites

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.

Share this post

Link to post
Share on other sites

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)

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.