solved Pixel perfection

Recommended Posts

Hello, I am trying to achieve pixel perfection in BabylonJs (ie a plane facing towards the camera with width and height lets say 100, should be 100x100px) using a simple formula ( https://github.com/mrdoob/three.js/issues/1239#issuecomment-374228203  ) I used eons ago in Papervision and later in ThreeJS but I am having some problems.

I suppose it's something related to the camera settings, but I just can't pinpoint the specific issue..

TIA

Share on other sites

Hi @jurito and welcome to the forum. A playground would be helpful and probably elicit more responses.

Share on other sites

something like this https://playground.babylonjs.com/#M9XT7F

I see for threeJS they set the last parameter of the perspectiveCamera (camera frustum far plane) to the distance. I couldn't find how to do that in Babylon.

Share on other sites

..to give it a bit of context, what I'm trying to do is drawing a bitmap of a DOM element (with html2canvas), mapping it on a plane and tweaking the camera distanca and FOV so that the size in pixels of the plane facing the camera is the same as the texture and DOM element.

Share on other sites

Hey !

Welcome to the forum

Try this - http://jsfiddle.net/zmatocef/

and here's the PG- https://playground.babylonjs.com/#M9XT7F#3

as you can see, if you use diag, the FOV for 0px offset still leaves some area(coz of sq root) which is because of the fact (basic maths)

let's say you render size was 500*500;

diag = Math.sqrt(500*500 + 500*500) => 500 * Math.sqrt(2); because of this (sqr 2)1.41 there's some region left in the view area. (same case happen with Three.js; you can try yourself! )

This is how the formula is derived ->

tan(x) = height/ base. Now for FOV ( we have to find 2tan(x))

In our case tan(x) = (renderHeight/2)/ (distance) ;      //(distance btw camera and mesh; because camera is in middle)

now x = tan-1(renderHeight/ 2* distance);

and FOV = 2x; if you use diagonal; you can't get accurate result (x in this case)

Share on other sites

well thanks a lot for the explanation, you made my day sir!

Thanks @ssaket!

Share on other sites

I feel VERY stupid asking this but my math skills are beyond rusty and after an hour trying i kinda gave up..

How can I find the inverse formula, finding the distance having the FOV?

*so embarassed*

Share on other sites

Just work backwards

x = FOV/2

distance = (render height / 2) / tan(x) = render height / (2 * tan(x))

presuming you know the render height

Share on other sites

thank you very much ?

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.

×   Pasted as rich text.   Paste as plain text instead

Only 75 emoji are allowed.