Projecting camera onto 2d world

[promontis]

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()?

 

 

 

 

[Nabroski]

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. 

 

[promontis]

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. 

[promontis]

Cool, found it! The 1.4 comes from my 2d canvas. 

[Nabroski]

https://www.babylonjs-playground.com/#VNE2Z#22

 https://www.babylonjs-playground.com/#1BGF1O#3

https://www.babylonjs-playground.com/#1BGF1O#4

http://www.babylonjs-playground.com/#4IVMG#1

https://www.babylonjs-playground.com/#1JPHAD#11

[promontis]

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.