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?


Share this post

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

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

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

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.