Jump to content

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: 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 by mr_hippo
making url a link
Link to comment
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.

Link to comment
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)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...