Include UI node size in the vertex inputs for UiMaterial. (#11722)

# Objective

Includes the UI node size as a parameter to the UiMaterial shader,
useful for SDF-based rendering, aspect ratio correction and other use
cases.

Fixes #11392

## Solution

Added the node size to the UiMaterial vertex shader params and also to
the data that is passed to the fragment shader.

## Migration Guide

This change should be backwards compatible, using the new field is
optional.

Note to reviewers: render pipelines are a bit outside my comfort zone,
so please make sure I haven't made any mistakes.

---------

Co-authored-by: Rob Parrett <robparrett@gmail.com>

crates/bevy_ui/src/render/ui_material.wgsl

@@ -13,11 +13,13 @@ var<uniform> globals: Globals;
 fn vertex(
     @location(0) vertex_position: vec3<f32>,
     @location(1) vertex_uv: vec2<f32>,
-    @location(2) border_widths: vec4<f32>,
+    @location(2) size: vec2<f32>,
+    @location(3) border_widths: vec4<f32>,
 ) -> UiVertexOutput {
     var out: UiVertexOutput;
     out.uv = vertex_uv;
     out.position = view.view_proj * vec4<f32>(vertex_position, 1.0);
+    out.size = size;
     out.border_widths = border_widths;
     return out;
 }

crates/bevy_ui/src/render/ui_material_pipeline.rs

@@ -120,6 +120,7 @@ impl<M: UiMaterial> Default for UiMaterialMeta<M> {
 pub struct UiMaterialVertex {
     pub position: [f32; 3],
     pub uv: [f32; 2],
+    pub size: [f32; 2],
     pub border_widths: [f32; 4],
 }
 
@@ -156,6 +157,8 @@ where
                 VertexFormat::Float32x3,
                 // uv
                 VertexFormat::Float32x2,
+                // size
+                VertexFormat::Float32x2,
                 // border_widths
                 VertexFormat::Float32x4,
             ],
@@ -558,6 +561,7 @@ pub fn prepare_uimaterial_nodes<M: UiMaterial>(
                         ui_meta.vertices.push(UiMaterialVertex {
                             position: positions_clipped[i].into(),
                             uv: uvs[i].into(),
+                            size: extracted_uinode.rect.size().into(),
                             border_widths: extracted_uinode.border,
                         });
                     }

crates/bevy_ui/src/render/ui_vertex_output.wgsl

@@ -5,5 +5,7 @@ struct UiVertexOutput {
     @location(0) uv: vec2<f32>,
     // The size of the borders in UV space. Order is Left, Right, Top, Bottom.
     @location(1) border_widths: vec4<f32>,
+    // The size of the node in pixels. Order is width, height.
+    @location(2) @interpolate(flat) size: vec2<f32>,
     @builtin(position) position: vec4<f32>,
 };