Jump to content

Projecting camera onto 2d world


Recommended Posts

Hi there!

I currently have two canvases, one BabylonJS based and one KonvaJS based. One is 3D, the other 2D.  Now, I need to switch between the 3D and the 2D world, and vice versa. You can see what I mean in the uploaded image.

I somehow need to calculate the 'scale' factor for the 2D world based on the 3D world. Is there any way to do such a thing for the whole scene, or do I have to do this projection for every mesh point?

Will something like this work or is this oversimplified for BabylonJS? Or should I perhaps use Babylon.Vector3.Project()?







Link to comment
Share on other sites

Just from *.gif you shared: you projecting from 2D to 2D. And in this case ,it is a basic Javascript you can copy, paste from Stackoverflow. Map one range to an other. Assuming  you have a second canvas, like  a minimap situation, you get you mouse coordinates (w: 50px h: 50px) and your football/soccer field (BabylonJs plane) is the canvas you "paint"/project the mouse position ( w:  200 babylonjs3Dunits, h : 200 babylonjs3Dunits ). So the coords on the minimap needed to be “screched”/mapped to the BabylonJs Plane, very simple, (3 lines of code)

The  3D and the 2D world thing, you are talking about, - is usually needed if you want to pic an 3D Object in 3D Space. I’m sure someone will answer this one properly soon, meanwhile you can use the BabylonJs Forum Search ( right corner the beneath login form ). I see this question pop up like every 2 Weeks. 


Link to comment
Share on other sites

In your example (50px vs 200 3d units) I indeed try to figure out what the scale factor is between those two. 

Both units (px and 3d units) in my case are of equal value, say both a 1000. So the 3d world 'square' is 1000x1000 babylonjs3dunits, and the 2d world 'square is 1000x1000 px.

Now the 2d 1000x1000 px, is actually a 1000x1000 px (duh haha), but the 1000x1000 babylonjs3dunits isn't a 1000x1000 px, it is less because of the FOV and distance of the camera to the 'square' (mesh). Say, the 'square' (mesh) is actually 600x600 px on screen then I'm looking for the ratio 1000/600.

I'm actually came as far as getting it to the following function:

var scale = 2 * Math.tan(camera.fov / 2) / camera.radius * 1000 * 1.4;

This seems to work, I however don't have clue of why I need to put 1.4 in the function. The 2 * Math.tan(camera.fov / 2) / camera.radius seems to be in line with the picture in the first post. The * 1000 is actually my scaling factor that I use on every coordinate on my mesh (more or less the factor between meters and babylonjs3dunits, if that makes sense). 

Does anyone know where the 1.4 is coming from? The value works, but I determined it by changing the value until the two squares matched. If I zoom in/out in the BabylonJS scene, the scale still works, and if I zoom in/out on the 2d scene, the scale holds as well. 

Link to comment
Share on other sites

Just to summary for other people stumbling on this issue...

The following formula is indeed correct:

2 * Math.tan(camera.fov / 2) * camera.radius

... and it calculates the size of one babylonjsunit taken into account the the fov and the radius to such unit. You most likely will have a scale factor in your 3d scene, so you'll have to divide that scale factor by this result. For example, mine is a 1000, so 1000 / result of above.

That result, call it the finalScale, can be used as the scaling factor in other canvases.

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