# Best way to calculate the percentage of an object shown in a camera frame? **URL:** \ **Category:** Questions\ **Tags:** camera\ **Created:** [April 25, 2024, 12:44am UTC](https://forum.babylonjs.com/t/best-way-to-calculate-the-percentage-of-an-object-shown-in-a-camera-frame/50002 "2024-04-25T00:44:45Z")\ **Posts on this page:** 10\ **Page:** 1
**Author:** ![tawibox](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tawibox/32/22881_2.png) [@tawibox](https://forum.babylonjs.com/u/tawibox)\ **Post date:** [April 25, 2024, 12:44am UTC](https://forum.babylonjs.com/t/best-way-to-calculate-the-percentage-of-an-object-shown-in-a-camera-frame/50002/1 "2024-04-25T00:44:46Z")
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) ![Screenshot 2024-04-24 at 6.17.59 PM](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/2/2/22b991d243a7909e28b138be45772680bc27512a.jpeg) 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: ![Screenshot 2024-04-24 at 6.18.03 PM](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/6/5/65a1886d37a9a237660b681b8501da63c2f18e37.jpeg) And if the camera zoom all the way into the object, it could be a factor between `0` and `1`: ![Screenshot 2024-04-24 at 6.17.42 PM](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/d/f/dfd36cef64398ad04f9038c038d488b4efa4fafa.png) 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: > **[Babylon.js Playground](https://playground.babylonjs.com/#4AZJV8%2331)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes (PS: This PG derived from this great topic: [https://forum.babylonjs.com/t/check-isinfrustum-but-with-a-percentage-of-the-camera-view/16906`](https://forum.babylonjs.com/t/check-isinfrustum-but-with-a-percentage-of-the-camera-view/16906%60)) 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 ---
**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\ **Post date:** [April 25, 2024, 4:13pm UTC](https://forum.babylonjs.com/t/best-way-to-calculate-the-percentage-of-an-object-shown-in-a-camera-frame/50002/2 "2024-04-25T16:13:49Z")
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. ---
**Author:** ![tawibox](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tawibox/32/22881_2.png) [@tawibox](https://forum.babylonjs.com/u/tawibox)\ **Post date:** [April 25, 2024, 4:54pm UTC](https://forum.babylonjs.com/t/best-way-to-calculate-the-percentage-of-an-object-shown-in-a-camera-frame/50002/3 "2024-04-25T16:54:01Z")
@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 ---
**Author:** ![tawibox](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tawibox/32/22881_2.png) [@tawibox](https://forum.babylonjs.com/u/tawibox)\ **Post date:** [April 25, 2024, 5:42pm UTC](https://forum.babylonjs.com/t/best-way-to-calculate-the-percentage-of-an-object-shown-in-a-camera-frame/50002/4 "2024-04-25T17:42:41Z")
Oh I think I found it. Is it `vector3.Project`? [https://doc.babylonjs.com/typedoc/classes/BABYLON.Vector3#Project](https://doc.babylonjs.com/typedoc/classes/BABYLON.Vector3#Project) ---
**Author:** ![Tricotou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tricotou/32/5844_2.png) [@Tricotou](https://forum.babylonjs.com/u/Tricotou)\ **Post date:** [April 25, 2024, 6:14pm UTC](https://forum.babylonjs.com/t/best-way-to-calculate-the-percentage-of-an-object-shown-in-a-camera-frame/50002/5 "2024-04-25T18:14:10Z")
> [@tawibox](#): > > `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](https://playground.babylonjs.com/#9688C9) Have fun ! 🙂 ++ Tricotou ---
**Author:** ![tawibox](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tawibox/32/22881_2.png) [@tawibox](https://forum.babylonjs.com/u/tawibox)\ **Post date:** [April 26, 2024, 2:20pm UTC](https://forum.babylonjs.com/t/best-way-to-calculate-the-percentage-of-an-object-shown-in-a-camera-frame/50002/6 "2024-04-26T14:20:57Z")
@Tricotou Wow that’s exactly what I am looking for!! Thank you so much!! ---
**Author:** ![Anupam\_Das](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/anupam_das/32/16709_2.png) [@Anupam\_Das](https://forum.babylonjs.com/u/Anupam_Das)\ **Post date:** [April 26, 2024, 3:24pm UTC](https://forum.babylonjs.com/t/best-way-to-calculate-the-percentage-of-an-object-shown-in-a-camera-frame/50002/7 "2024-04-26T15:24:56Z")
This is an awesome trick. Bookmarked! I love this community, lot of cool techniques out there always learn something new! ---
**Author:** ![tawibox](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tawibox/32/22881_2.png) [@tawibox](https://forum.babylonjs.com/u/tawibox)\ **Post date:** [June 24, 2024, 12:24am UTC](https://forum.babylonjs.com/t/best-way-to-calculate-the-percentage-of-an-object-shown-in-a-camera-frame/50002/8 "2024-06-24T00:24:46Z")
Hey @Tricotou I have a follow up question. If I just want to do this calculation only once instead of do it on every frame at run-time, how should I do it? For example, when I load in a gltf with animation, I just want to go a certain frame to do the calculation to get the “framing factor” on that particular frame. How would I do it? Can you provide a PG example? Or you can use my PG: > **[Babylon.js Playground](https://playground.babylonjs.com/#YLNVSM%234)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes As you can see, in line `71` I am trying to print out the framing factor outside of rendering loop but got null. I was trying to do it myself but no luck. Many thanks! Tawibox ---
**Author:** ![Tricotou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tricotou/32/5844_2.png) [@Tricotou](https://forum.babylonjs.com/u/Tricotou)\ **Post date:** [June 24, 2024, 1:54pm UTC](https://forum.babylonjs.com/t/best-way-to-calculate-the-percentage-of-an-object-shown-in-a-camera-frame/50002/9 "2024-06-24T13:54:21Z")
> [@tawibox](#): > > As you can see, in line `71` I am trying to print out the framing factor outside of rendering loop but got null. The problem comes from the fact that, you are running it inside the `createScene` function, and even before it’s done. The scene is not fully ready. For example you can wrap it inside the `scene.whenReadyAsync` function to make sure it’s ok : [Playground](https://playground.babylonjs.com/#YLNVSM#5) ---
**Author:** ![tawibox](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tawibox/32/22881_2.png) [@tawibox](https://forum.babylonjs.com/u/tawibox)\ **Post date:** [June 24, 2024, 3:52pm UTC](https://forum.babylonjs.com/t/best-way-to-calculate-the-percentage-of-an-object-shown-in-a-camera-frame/50002/10 "2024-06-24T15:52:26Z")
@Tricotou aha gotcha!! thank you so much!!!