Viewport rendering incorrectly

[liketoeatcheese]

Hi,

Purpose

I'm trying to set up the viewport in the game so when user's window is set to fullscreen with:

DefaultPlugins
    .set(WindowPlugin {
        primary_window: Some(Window {
            mode: WindowMode::BorderlessFullscreen,
            ..default()
        }),
        ..default()
}),

the viewport is actually in the has the ratio of 21:9, where surrounding the viewport will be these black¡¡

Thought process

In my understanding:

1. A Window defines the actual operating system window and its properties (size, position, etc.)
2. A Camera defines what is to be viewed in the game world
3. A Viewport defines which portion of the window the camera will render to

And looking at Viewport:

/// Render viewport configuration for the [`Camera`] component.
///
/// The viewport defines the area on the render target to which the camera renders its image.
/// You can overlay multiple cameras in a single window using viewports to create effects like
/// split screen, minimaps, and character viewers.
#[derive(Reflect, Debug, Clone)]
#[reflect(Default)]
pub struct Viewport {
    /// The physical position to render this viewport to within the [`RenderTarget`] of this [`Camera`].
    /// (0,0) corresponds to the top-left corner
    pub physical_position: UVec2,
    /// The physical size of the viewport rectangle to render to within the [`RenderTarget`] of this [`Camera`].
    /// The origin of the rectangle is in the top-left corner.
    pub physical_size: UVec2,
    /// The minimum and maximum depth to render (on a scale from 0.0 to 1.0).
    pub depth: Range<f32>,
}

In my head, this means that physical size is the size of the "screen" where the content of the camera will render to. And the position is the position of this viewport in the window. So I would need to get the window size, scale it down, and set it to Viewport's physical size. And half the position of the windows's width and height to make the viewport go in the middle of the screen as the viewport position starts from (0,0) which is the top left corner of the window.

Attempts

Where I spawned the camera on StartUp:

    commands
        .spawn((
            Camera3dBundle {
                camera: Camera {
                    hdr: true,
                    ..default()
                },
                projection: bevy::prelude::Projection::Perspective(PerspectiveProjection {
                    fov: std::f32::consts::PI / 6.0,
                    ..default()
                }),
                ..default()
            },
            CameraController::default(),
            LetterboxCamera,
            PickableBundle::default(),
            // PbrBundle::default(),
            BloomSettings {
                intensity: 0.3,
                ..default()
            },
            MainCamera,
        ))
        .insert(ScreenSpaceAmbientOcclusionBundle::default())
        .insert(TemporalAntiAliasBundle::default());

The system

fn main() {
    App::new()
       .add_systems(Update, update_camera_viewport.run_if(in_state(GameState::Ready)))
...
}

fn update_camera_viewport(windows: Query<&Window>, mut cameras: Query<&mut Camera>) {
    let window = windows.single();
    let window_aspect_ratio = window.width() / window.height();
    let target_aspect_ratio = 21. / 9.;

    let mut camera = cameras.single_mut();
    let viewport = if window_aspect_ratio > target_aspect_ratio {
        let x = window.width() / 2.0;
        let y = window.height() / 2.0;

        Viewport {
            physical_position: UVec2::new(x as u32, y as u32),
            physical_size: UVec2::new((window.width() * 0.8) as u32, (window.height() * 0.8) as u32),
            ..default()
        }
    } else {
        //TODO:
        Viewport {
            ..default()
        }
    };

    camera.viewport = Some(viewport);
}

Which I thought that I succeeded

This is a simple dungeon scene.

But when I started to zoom in, I noticed there's this kinda like a filter or some sort:

The size and position of that lighter region don't change regardless of the movement of the camera inside the game world.

I have tried to fiddle with the Viewport and noticed that, if I move the position of the Viewport back to (0,0). I won't have that white region, as I assumed everything inside the camera will fall into that region.

And also did:

println!("window.width: {}", window.width());
println!("window.height: {}", window.height());

And got:
window.width: 2560
window.height: 1080

Noticing how that white region is about 0.8* of a fourth of the screen so I would assume that it's correspond to the Viewport's size. And it's proven with changing this piece of code:

// from this
physical_size: UVec2::new((window.width() * 0.8) as u32, (window.height() * 0.8) as u32),
// to this
physical_size: UVec2::new(window.width() as u32, window.height() as u32),

and got:

So checking my resolution:

It's currently set for 2560x1080. My monitor is actually 5120x2160. So the white region half the screen would probably mean that it can expand more to 5210x2160 right? right?... Not so fast.

I changed the code now to:

physical_size: UVec2::new((window.width() * 2.) as u32, (window.height() * 2.) as u32)

I don't really understand this though because based on the original documentation, the right thing would be to scale it down, not scale it up. I tried it even though it didn't make sense and as expected that it will fail, I got:

wgpu error: Validation Error

Caused by:
    In a RenderPass
      note: encoder = `<CommandBuffer-(5, 1, Metal)>`
    In a set_viewport command
    Viewport has invalid rect Rect { x: 1280.0, y: 540.0, w: 5120.0, h: 2160.0 }; origin and/or size is less than or equal to 0, and/or is not contained in the render target (5120, 2160, 1)

I have tried reading documentation, various articles, even asked AI. Also tried playing around with the aspect ratio of the Projection but didn't make any difference. I'm running out of options so if anyone can assist me to understand why is this happening it would be great.

Cheers,
W.