CODEWITHSUNDEEP
maththree.js3d
user606521
user606521

Reputation: 15434

How to reproduce given viewport maintaining aspect ratio?

I have 3D scene rendered in a viewport that fits to the window size. So the viewport (camera) aspect ratio depends on window size. On top of the viewport I draw a frame that has aspect ratio 16:9 and it also fits the viewport and it's centered vertically and horizontally inside the viewport. The purpose of the frame is to show which part of the viewport will be rendered in 16:9 aspect ratio. See screen below:

enter image description here

Now I want to render same 3D scene in the viewport 16:9 that will contain exactly same "pixels" that are contained in orange frame on the screen above. So inside another window I create a viewport that has 16:9 aspect ratio, set the object and camera positions to exactlty same position/orientation as on the previous scene. This time both viewport and camera aspect ratios are 16:9. However pixels rendered inside viewport differ from pixels from orange frame on the first screen (the sticks should be "cut" in half):

enter image description here

I guess I missed some calculations that have to be done to reproduce exact viewport from orange frame but I can't figure out which. The data I have from first viewport:

The data I have from second viewport:

What I need is to reproduce exact amount of first viewport (inside orange frame) in the second viewport.

Upvotes: 0

Views: 405

Answers (1)

MvG
MvG

Reputation: 60908

Code in PerspectiveCamera.js suggests that the fov (field of view) in Three.js gives the angle in the vertical direction.

top = near * Math.tan( _Math.DEG2RAD * 0.5 * this.fov ) / this.zoom

Say you go with the default of 50°. Then that tan there will be tan(25°) except for JavaScript you actually need to compute that in radians. If you want the width to be 50° instead, you want fov = 2 * atan(tan(50°/2) * 9/16) except you need to convert between degrees and radians. The idea is that you take the tangens, apply the aspect ratio to map it from width (where you want to measure it) to height (where the class expects it), then reverse the tangens computation.

But perhaps you don't want to specify the angle for the width. Perhaps you want the original scene at a vertical fov of 50°, but still want the adjusted cene to be the 16:9 clipped version of that. In this case you can multiply with the ratio of ratios. So if your original image was 4:3 and the new image is 16:9, multiply by (9/16)/(3/4) also known as (9*4)/(16*3) also known as 3/4 and you convert from original height to width to new height angle in one go.

Upvotes: 1

Related Questions