solved Pixel perfection

[jurito]

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..
Anyone did do this already?

TIA

[JohnK]

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

[jurito]

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.

[jurito]

..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.

[ssaket]

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)  

[jurito]

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

[Guest]

Thanks @ssaket!

 

[jurito]

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*

[JohnK]

Just work backwards

x = FOV/2

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

presuming you know the render height

[jurito]

thank you very much ?