Seeking Guidance on Camera Configuration for Specialized Scene View

Questions
,
1

I’m developing a project that requires a specialized viewing setup in my BabylonJS scene. I need to achieve two distinct visual perspectives within the same scene: a focused view in a central area and a broader view of the entire scene around it.

Requirements:

  1. A central focus area with a 16:9 aspect ratio, delineated by a red border, showing a specific part of the scene.
  2. The surrounding area should display the extended scene for an immersive experience.

Current Considerations: I’m contemplating using either dual cameras (one for the entire scene and another for the focused area) or a single camera with FOV adjustments. However, I’m not certain which approach would be more effective. (Also don’t know how to implement yet)

Challenges:

  • Integrating the focused and extended views seamlessly.
  • Deciding whether to use one or two cameras and how to manage their interaction.

I would greatly appreciate any advice, examples, or insights on how to best set up the camera(s) for this purpose. Any suggestions on camera configuration or FOV tricks would be incredibly helpful.

Here is an example of what I want visually:

Screenshot 2024-01-16 at 22.32.38
Screenshot 2024-01-16 at 22.32.381920×1068 86.1 KB

2

I think I’ve found the solution. The focus area and the wrapper area need to have the same aspect ratio, then I can calculate the new FOV based on the heights of the areas. I found this formula, which works well for now:

function calculateNewFOV(originalFOV, originalHeight, newHeight) {
    return 2 * Math.atan(Math.tan(originalFOV / 2) * (newHeight / originalHeight));
}
4 Likes