Jump to content

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?


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

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

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