Consistent screen-space coordinates (#8306)

# Objective

Make the coordinate systems of screen-space items (cursor position, UI,
viewports, etc.) consistent.

## Solution

Remove the weird double inversion of the cursor position's Y origin.
Once in bevy_winit to the bottom and then again in bevy_ui back to the
top.
This leaves the origin at the top left like it is in every other popular
app framework.

Update the `world_to_viewport`, `viewport_to_world`, and
`viewport_to_world_2d` methods to flip the Y origin (as they should
since the viewport coordinates were always relative to the top left).

## Migration Guide

`Window::cursor_position` now returns the position of the cursor
relative to the top left instead of the bottom left.
This now matches other screen-space coordinates like
`RelativeCursorPosition`, UI, and viewports.

The `world_to_viewport`, `viewport_to_world`, and `viewport_to_world_2d`
methods on `Camera` now return/take the viewport position relative to
the top left instead of the bottom left.

If you were using `world_to_viewport` to position a UI node the returned
`y` value should now be passed into the `top` field on `Style` instead
of the `bottom` field.
Note that this might shift the position of the UI node as it is now
anchored at the top.

If you were passing `Window::cursor_position` to `viewport_to_world` or
`viewport_to_world_2d` no change is necessary.

crates/bevy_render/src/camera/camera.rs

@@ -233,7 +233,10 @@ impl Camera {
         }
 
         // Once in NDC space, we can discard the z element and rescale x/y to fit the screen
-        Some((ndc_space_coords.truncate() + Vec2::ONE) / 2.0 * target_size)
+        let mut viewport_position = (ndc_space_coords.truncate() + Vec2::ONE) / 2.0 * target_size;
+        // Flip the Y co-ordinate origin from the bottom to the top.
+        viewport_position.y = target_size.y - viewport_position.y;
+        Some(viewport_position)
     }
 
     /// Returns a ray originating from the camera, that passes through everything beyond `viewport_position`.
@@ -247,9 +250,11 @@ impl Camera {
     pub fn viewport_to_world(
         &self,
         camera_transform: &GlobalTransform,
-        viewport_position: Vec2,
+        mut viewport_position: Vec2,
     ) -> Option<Ray> {
         let target_size = self.logical_viewport_size()?;
+        // Flip the Y co-ordinate origin from the top to the bottom.
+        viewport_position.y = target_size.y - viewport_position.y;
         let ndc = viewport_position * 2. / target_size - Vec2::ONE;
 
         let ndc_to_world =
@@ -273,9 +278,11 @@ impl Camera {
     pub fn viewport_to_world_2d(
         &self,
         camera_transform: &GlobalTransform,
-        viewport_position: Vec2,
+        mut viewport_position: Vec2,
     ) -> Option<Vec2> {
         let target_size = self.logical_viewport_size()?;
+        // Flip the Y co-ordinate origin from the top to the bottom.
+        viewport_position.y = target_size.y - viewport_position.y;
         let ndc = viewport_position * 2. / target_size - Vec2::ONE;
 
         let world_near_plane = self.ndc_to_world(camera_transform, ndc.extend(1.))?;

crates/bevy_ui/src/focus.rs

@@ -180,12 +180,10 @@ pub fn ui_focus_system(
             }
         })
         .find_map(|window_ref| {
-            windows.get(window_ref.entity()).ok().and_then(|window| {
-                window.cursor_position().map(|mut cursor_pos| {
-                    cursor_pos.y = window.height() - cursor_pos.y;
-                    cursor_pos
-                })
-            })
+            windows
+                .get(window_ref.entity())
+                .ok()
+                .and_then(|window| window.cursor_position())
         })
         .or_else(|| touches_input.first_pressed_position());
 

crates/bevy_winit/src/lib.rs

@@ -434,11 +434,7 @@ pub fn winit_runner(mut app: App) {
                             .send(converters::convert_keyboard_input(input));
                     }
                     WindowEvent::CursorMoved { position, .. } => {
-                        let physical_position = DVec2::new(
-                            position.x,
-                            // Flip the coordinate space from winit's context to our context.
-                            window.resolution.physical_height() as f64 - position.y,
-                        );
+                        let physical_position = DVec2::new(position.x, position.y);
 
                         window.set_physical_cursor_position(Some(physical_position));
 

examples/3d/blend_modes.rs

@@ -220,51 +220,34 @@ fn setup(
         ExampleDisplay,
     ));
 
-    commands.spawn((
-        TextBundle::from_section("┌─ Opaque\n│\n│\n│\n│", label_text_style.clone()).with_style(
-            Style {
-                position_type: PositionType::Absolute,
-                ..default()
-            },
-        ),
-        ExampleLabel { entity: opaque },
-    ));
-
-    commands.spawn((
-        TextBundle::from_section("┌─ Blend\n│\n│\n│", label_text_style.clone()).with_style(Style {
-            position_type: PositionType::Absolute,
-            ..default()
-        }),
-        ExampleLabel { entity: blend },
-    ));
-
-    commands.spawn((
-        TextBundle::from_section("┌─ Premultiplied\n│\n│", label_text_style.clone()).with_style(
-            Style {
-                position_type: PositionType::Absolute,
-                ..default()
-            },
-        ),
-        ExampleLabel {
-            entity: premultiplied,
-        },
-    ));
-
-    commands.spawn((
-        TextBundle::from_section("┌─ Add\n│", label_text_style.clone()).with_style(Style {
-            position_type: PositionType::Absolute,
-            ..default()
-        }),
-        ExampleLabel { entity: add },
-    ));
+    let mut label = |entity: Entity, label: &str| {
+        commands
+            .spawn((
+                NodeBundle {
+                    style: Style {
+                        position_type: PositionType::Absolute,
+                        ..default()
+                    },
+                    ..default()
+                },
+                ExampleLabel { entity },
+            ))
+            .with_children(|parent| {
+                parent.spawn(
+                    TextBundle::from_section(label, label_text_style.clone()).with_style(Style {
+                        position_type: PositionType::Absolute,
+                        bottom: Val::Px(0.),
+                        ..default()
+                    }),
+                );
+            });
+    };
 
-    commands.spawn((
-        TextBundle::from_section("┌─ Multiply", label_text_style).with_style(Style {
-            position_type: PositionType::Absolute,
-            ..default()
-        }),
-        ExampleLabel { entity: multiply },
-    ));
+    label(opaque, "┌─ Opaque\n│\n│\n│\n│");
+    label(blend, "┌─ Blend\n│\n│\n│");
+    label(premultiplied, "┌─ Premultiplied\n│\n│");
+    label(add, "┌─ Add\n│");
+    label(multiply, "┌─ Multiply");
 }
 
 #[derive(Component)]
@@ -347,20 +330,16 @@ fn example_control_system(
         0.0
     };
 
-    camera_transform.rotate_around(
-        Vec3::ZERO,
-        Quat::from_euler(EulerRot::XYZ, 0.0, rotation, 0.0),
-    );
+    camera_transform.rotate_around(Vec3::ZERO, Quat::from_rotation_y(rotation));
 
     for (mut style, label) in &mut labels {
-        let world_position =
-            labelled.get(label.entity).unwrap().translation() + Vec3::new(0.0, 1.0, 0.0);
+        let world_position = labelled.get(label.entity).unwrap().translation() + Vec3::Y;
 
         let viewport_position = camera
             .world_to_viewport(camera_global_transform, world_position)
             .unwrap();
 
-        style.bottom = Val::Px(viewport_position.y);
+        style.top = Val::Px(viewport_position.y);
         style.left = Val::Px(viewport_position.x);
     }
 

examples/input/text_input.rs

@@ -108,10 +108,7 @@ fn toggle_ime(
     if input.just_pressed(MouseButton::Left) {
         let mut window = windows.single_mut();
 
-        window.ime_position = window
-            .cursor_position()
-            .map(|p| Vec2::new(p.x, window.height() - p.y))
-            .unwrap();
+        window.ime_position = window.cursor_position().unwrap();
         window.ime_enabled = !window.ime_enabled;
 
         let mut text = text.single_mut();