Fit the silhouette of a GLTF mesh to a window/viewport

I am asking this question again with a different context now that I understand the problem a bit more.

I want to fit a GLTF mesh to the application viewport. I have been experimenting with bounding boxes, OBBs etc. but I have come to the conclusion I need a different approach since I want the “silhouette” to fit within the specified bounds and I think that’s different from trying to fit 3D geometry.

I made a fiddle to illustrate what I mean - Edit fiddle - JSFiddle - Code Playground - the different options are just rotations and I came up with the various offsets required to make the model fit in the window.

How can I calculate these offsets in code for any given rotation?

if you fix y offset, you could calculate z offset for every vertex and then just use the furthest position. however, since you want both top and bottom to touch the mesh, you will have to do a binary search on y, with the above method being a single iteration.

actually scratch that, there is a fixed number of points you need to check.

here - you need to test the intersections of red and green lines (black = mesh vertices):

(where the angle of lines comes from camera.fov)

Interesting - I was just experimenting - starting with a bounding sphere as a first guess (which I do know how to fit to the viewport), writing the silhouette into a canvas, determining if it fits (for some definition) and continually iterating on the mesh position until I find something that looks right.

I’m not good enough to know if this might work but it’s interesting.

in fact, it is probably even easier, you need two leftmost lines, so just intersect them all with y=0 and see which are the leftmost first, then intersect with each other

Just a get around though. If it is not necessary to keep the current wide perspective, you can set fov smaller to make the distortion from the perspective lesser. Then it’d be enough to compute the frustum by just bounding box. Something like this Edit fiddle - JSFiddle - Code Playground

Thanks a lot for the suggestions - I was working on understanding/implementing what you proposed when the small-fov idea came in and I think that will work for my use case. Cheers!

Neat idea to reduce the FOV - I think that’s going to work really well. Thank you so much (again) .

1 Like