Best way to calculate the percentage of an object shown in a camera frame?

Hey community,

Just wondering, what is the best way to calculate how much percentage of an object shown in a camera frame?

For example:
(Images below are from Maya viewport)

If an object fills up the entire camera frame from top to bottom, I hope there could be a “visibility factor (vertical)” to indicate the showing status. In the image above, the sphere is showing 100% vertically and also occupied the exact full camera frame top down. So this factor could consider as `1` in vertical direction.

And if the camera zoom further, the factor could be a value greater than `1`, such as `~2.1` in the image below:

And if the camera zoom all the way into the object, it could be a factor between `0` and `1`:

If zoom to as close as one vertex, the factor could be a very small positive float number almost equals to `0`.

Of course, this whole idea could use bounding box points instead of actual vertex from the mesh to reduce the calculation load.

I figured out a way to detect if an object in completely inside of camera frustum (or a region of camera frustum) or not:

(PS: This PG derived from this great topic: https://forum.babylonjs.com/t/check-isinfrustum-but-with-a-percentage-of-the-camera-view/16906`)

I feel like I kind of started getting this idea working but not as accurate as I was expecting.

Does anyone have a better idea?
Many thanks,
Tawibox

I think it’s the right way to do it, to compute the part of the bounding box which is inside the screen. Maybe it would be a little easier by doing the computation in 2D, though, by projecting the bbox to the screen.

1 Like

@Evgeni_Popov

Thanks for the response!

Does babylon has a way to compute the pixel the bbox projecting to the screen?
Can you provide more details about it?

Many thanks,
Tawibox

Oh I think I found it. Is it `vector3.Project`?

https://doc.babylonjs.com/typedoc/classes/BABYLON.Vector3#Project

Yes !

I knew soon I will have to do this (3D projection to 2D local) so here we are :

• 3D Local (mesh) 3D Global (world)
• 3D Global 2D Canvas (project)
• 2D Canvas Bounding Box (min/max)
Playground

Have fun !

++
Tricotou

3 Likes

@Tricotou

Wow that’s exactly what I am looking for!!

Thank you so much!!

This is an awesome trick. Bookmarked! I love this community, lot of cool techniques out there always learn something new!

1 Like