Bounding sphere projected height on screen

say, did you consider that even after you find A and B and plug it in your code, it is still going to be off :smiling_face_with_tear: because the sphere shape on the screen is not a circle :pleading_face:

I mean, those are right points to look for, but in order for them to be on the enclosing circle they need to be aligned with the screen center. Otherwise your circle will intersect with the sphere.

Ok, here is my forked previous codepen: https://codepen.io/abernier/pen/oNdPJgN?editors=0011

I have add 2 more red spheres to the scene: top2 and bottom2 respectively for my A and B points.

Thanks to the previous calculus, I have expressed their coordinates vA and vB (in the lookAt-rotated cube basis) and transform them into world-coordinates to position them absolutely:

We can see the red spheres now “touch” the surface of the sphere:

From those 2 points, have also calculated the h_apparent projected height, which is bigger than the h projected height.

:raised_hands:t2:

BTW, I’m still having strange results (this the console.log values) when zooming a lot, event if the red sphere is correctly positionned… I don’t really know if this is correct/ok…

I now see your point and in effective, when the sphere is not centered into the screen, it has a ellipse/potato shape:


and the red bottom sphere isn’t at the bottom of the sphere…

I guess we have no solution for this? except what you were initially suggesting: projecting all vertices to the screen and make a Box2 of it, to get its projected width/height…


ERRATUM:

BTW, I was wrong when I supposed δ was the fov: it is actually just the angle OCA

Again, the solution would be to pick A and B in a way that the three points are in line :pensive: Just need to math this a little harder
Screenshot 2022-10-07 at 15-25-12 oNdPJgN

The visible diameter is always smaller than the actual diameter, for a sphere (because of the curvature, like we both noticed before), so it makes sense for the multiplication factor to be less than 1. What can indeed be larger than both of these is the projection (especially when the camera is close), but that is handled by Three.js via .project() so no need to worry on that front. :wink:

Can you make your drawing skills speak again? (sorry I haven’t understood the 3 points alignment thing)

But if there is a solution (other than projecting all vertices) I’d like to try harder, hopefully with your precious help which is really amazing. Thank you Yin and makc3d for this thread, it’s so instructive (to me at least and to others I hope)!

a plane that contains the camera, the sphere center, and the scene origin (orbit controls target, actually) is the one where you need to look for points A and B (it would look like a line on the screen because the camera is in it)

That might be because of your last two operations in the h and h_apparent computations. Performing such things on the vector3s instead of the plain .y component of the initial vector3 doesn’t seem like the right choice, and getting the .length() neither. In other words, you’re looking for scalar values here, and the only component of interest is the projected Y one… :thinking:

There is always a solution. Projecting all vertices would probably work as well, but depending on their number (and the number of segments in the shape), it can be a bit intensive, and logically it’s overkill to do that when all you need are just 2 points. A slightly related approach (with a different objective than yours, mainly to center and fit an cube on the screen) is illustrated in the fiddle from this post.

That indeed looks strange, not entirely sure what would be the cause. I’ll try to rewrite this in a fiddle and see what can be done about it. By the way, you want the little A and B spheres to be in the screen space or in 3D space?

My ultimate goal and why I’m looking for that “projected height” of the bounding sphere is because in fine, I want to draw a 2d circle (so yes screen space) that always encloses my bounding sphere.

More precisely, and to be more concrete what I’m working on is this:

:point_up_2: Currently in the video you can see the red-circles have a fixed (screen-)size, but I’d like each 2D red-circle to have the exact same size as the offscreen bird’s 3D bounding sphere, it follows.

Now, if the bounding sphere is distorted (due to the perspective of the camera) and has a shape of a “potato”, I’d like my 2d red-circle to have the size to enclose that “potato”.
→ And since this sphere could be distorted (what I didn’t consider first), it makes me realize, that I’m not specially looking for the projected height specifically, but rather more for the maximum screen-projected width OR height of a such distorted sphere (to draw the enclosing circle of that distorted sphere).

Simple solution:

distanceToCamera=Math.abs(distanceToCamera);
if(distanceToCamera>1000){ radius=0.01; }
else{ radius=radius-radius*(distanceToCamera/1000); }