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

TIA

#### Share this post

##### Share on other sites

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

#### Share this post

##### 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 this post

##### 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 this post

##### 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 this post

##### Share on other sites

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

Thanks @ssaket!

#### Share this post

##### 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 this post

##### 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 this post

##### Share on other sites

thank you very much 😐

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