Port bevy_ui to pipelined-rendering (#2653)

# Objective

Port bevy_ui to pipelined-rendering (see #2535 )

## Solution

I did some changes during the port:
- [X] separate color from the texture asset (as suggested [here](https://discord.com/channels/691052431525675048/743663924229963868/874353914525413406))
- [X] ~give the vertex shader a per-instance buffer instead of per-vertex buffer~ (incompatible with batching)

Remaining features to implement to reach parity with the old renderer:
- [x] textures
- [X] TextBundle

I'd also like to add these features, but they need some design discussion:
- [x] batching
- [ ] separate opaque and transparent phases
- [ ] multiple windows
- [ ] texture atlases
- [ ] (maybe) clipping

Cargo.toml

@@ -25,6 +25,8 @@ default = [
   "bevy_sprite2",
   "bevy_render2",
   "bevy_pbr2",
+  "bevy_ui2",
+  "bevy_text2",
   "bevy_winit",
   "render",
   "png",
@@ -59,6 +61,8 @@ bevy_render2 = ["bevy_internal/bevy_render2"]
 bevy_sprite2 = ["bevy_internal/bevy_sprite2"]
 bevy_pbr2 = ["bevy_internal/bevy_pbr2"]
 bevy_gltf2 = ["bevy_internal/bevy_gltf2"]
+bevy_ui2 = ["bevy_internal/bevy_ui2"]
+bevy_text2 = ["bevy_internal/bevy_text2"]
 
 trace_chrome = ["bevy_internal/trace_chrome"]
 trace_tracy = ["bevy_internal/trace_tracy"]
@@ -140,6 +144,10 @@ path = "examples/2d/sprite_sheet.rs"
 name = "text2d"
 path = "examples/2d/text2d.rs"
 
+[[example]]
+name = "text2d_pipelined"
+path = "examples/2d/text2d_pipelined.rs"
+
 [[example]]
 name = "texture_atlas"
 path = "examples/2d/texture_atlas.rs"
@@ -506,6 +514,10 @@ path = "examples/ui/text_debug.rs"
 name = "ui"
 path = "examples/ui/ui.rs"
 
+[[example]]
+name = "ui_pipelined"
+path = "examples/ui/ui_pipelined.rs"
+
 # Window
 [[example]]
 name = "clear_color"

crates/bevy_internal/Cargo.toml

@@ -39,7 +39,7 @@ wayland = ["bevy_winit/wayland"]
 x11 = ["bevy_winit/x11"]
 
 # enable rendering of font glyphs using subpixel accuracy
-subpixel_glyph_atlas = ["bevy_text/subpixel_glyph_atlas"]
+subpixel_glyph_atlas = ["bevy_text/subpixel_glyph_atlas", "bevy_text2/subpixel_glyph_atlas"]
 
 # enable systems that allow for automated testing on CI
 bevy_ci_testing = ["bevy_app/bevy_ci_testing"]
@@ -74,7 +74,9 @@ bevy_dynamic_plugin = { path = "../bevy_dynamic_plugin", optional = true, versio
 bevy_sprite = { path = "../bevy_sprite", optional = true, version = "0.5.0" }
 bevy_sprite2 = { path = "../../pipelined/bevy_sprite2", optional = true, version = "0.5.0" }
 bevy_text = { path = "../bevy_text", optional = true, version = "0.5.0" }
+bevy_text2 = { path = "../../pipelined/bevy_text2", optional = true, version = "0.5.0" }
 bevy_ui = { path = "../bevy_ui", optional = true, version = "0.5.0" }
+bevy_ui2 = { path = "../../pipelined/bevy_ui2", optional = true, version = "0.5.0" }
 bevy_wgpu = { path = "../bevy_wgpu", optional = true, version = "0.5.0" }
 bevy_winit = { path = "../bevy_winit", optional = true, version = "0.5.0" }
 bevy_gilrs = { path = "../bevy_gilrs", optional = true, version = "0.5.0" }

crates/bevy_internal/src/default_plugins.rs

@@ -138,6 +138,12 @@ impl PluginGroup for PipelinedDefaultPlugins {
             #[cfg(feature = "bevy_sprite2")]
             group.add(bevy_sprite2::SpritePlugin::default());
 
+            #[cfg(feature = "bevy_text2")]
+            group.add(bevy_text2::TextPlugin::default());
+
+            #[cfg(feature = "bevy_ui2")]
+            group.add(bevy_ui2::UiPlugin::default());
+
             #[cfg(feature = "bevy_pbr2")]
             group.add(bevy_pbr2::PbrPlugin::default());
 

crates/bevy_internal/src/lib.rs

@@ -147,12 +147,24 @@ pub mod text {
     pub use bevy_text::*;
 }
 
+#[cfg(feature = "bevy_text2")]
+pub mod text2 {
+    //! Text drawing, styling, and font assets.
+    pub use bevy_text2::*;
+}
+
 #[cfg(feature = "bevy_ui")]
 pub mod ui {
     //! User interface components and widgets.
     pub use bevy_ui::*;
 }
 
+#[cfg(feature = "bevy_ui2")]
+pub mod ui2 {
+    //! User interface components and widgets.
+    pub use bevy_ui2::*;
+}
+
 #[cfg(feature = "bevy_winit")]
 pub mod winit {
     pub use bevy_winit::*;

examples/2d/text2d_pipelined.rs

@@ -0,0 +1,92 @@
+use bevy::{
+    core::Time,
+    math::{Quat, Vec3},
+    prelude::{App, AssetServer, Commands, Component, Query, Res, Transform, With},
+    render2::{camera::OrthographicCameraBundle, color::Color},
+    text2::{HorizontalAlign, Text, Text2dBundle, TextAlignment, TextStyle, VerticalAlign},
+    PipelinedDefaultPlugins,
+};
+
+fn main() {
+    App::new()
+        .add_plugins(PipelinedDefaultPlugins)
+        .add_startup_system(setup)
+        .add_system(animate_translation)
+        .add_system(animate_rotation)
+        .add_system(animate_scale)
+        .run();
+}
+
+#[derive(Component)]
+struct AnimateTranslation;
+#[derive(Component)]
+struct AnimateRotation;
+#[derive(Component)]
+struct AnimateScale;
+
+fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
+    let font = asset_server.load("fonts/FiraSans-Bold.ttf");
+    let text_style = TextStyle {
+        font,
+        font_size: 60.0,
+        color: Color::WHITE,
+    };
+    let text_alignment = TextAlignment {
+        vertical: VerticalAlign::Center,
+        horizontal: HorizontalAlign::Center,
+    };
+    // 2d camera
+    commands.spawn_bundle(OrthographicCameraBundle::new_2d());
+    // Demonstrate changing translation
+    commands
+        .spawn_bundle(Text2dBundle {
+            text: Text::with_section("translation", text_style.clone(), text_alignment),
+            ..Default::default()
+        })
+        .insert(AnimateTranslation);
+    // Demonstrate changing rotation
+    commands
+        .spawn_bundle(Text2dBundle {
+            text: Text::with_section("rotation", text_style.clone(), text_alignment),
+            ..Default::default()
+        })
+        .insert(AnimateRotation);
+    // Demonstrate changing scale
+    commands
+        .spawn_bundle(Text2dBundle {
+            text: Text::with_section("scale", text_style, text_alignment),
+            ..Default::default()
+        })
+        .insert(AnimateScale);
+}
+
+fn animate_translation(
+    time: Res<Time>,
+    mut query: Query<&mut Transform, (With<Text>, With<AnimateTranslation>)>,
+) {
+    for mut transform in query.iter_mut() {
+        transform.translation.x = 100.0 * time.seconds_since_startup().sin() as f32 - 400.0;
+        transform.translation.y = 100.0 * time.seconds_since_startup().cos() as f32;
+    }
+}
+
+fn animate_rotation(
+    time: Res<Time>,
+    mut query: Query<&mut Transform, (With<Text>, With<AnimateRotation>)>,
+) {
+    for mut transform in query.iter_mut() {
+        transform.rotation = Quat::from_rotation_z(time.seconds_since_startup().cos() as f32);
+    }
+}
+
+fn animate_scale(
+    time: Res<Time>,
+    mut query: Query<&mut Transform, (With<Text>, With<AnimateScale>)>,
+) {
+    // Consider changing font-size instead of scaling the transform. Scaling a Text2D will scale the
+    // rendered quad, resulting in a pixellated look.
+    for mut transform in query.iter_mut() {
+        transform.translation = Vec3::new(400.0, 0.0, 0.0);
+        transform.scale = Vec3::splat((time.seconds_since_startup().sin() as f32 + 1.1) * 2.0);
+    }
+}

examples/README.md

@@ -89,6 +89,7 @@ Example | File | Description
 `sprite` | [`2d/sprite.rs`](./2d/sprite.rs) | Renders a sprite
 `sprite_sheet` | [`2d/sprite_sheet.rs`](./2d/sprite_sheet.rs) | Renders an animated sprite
 `text2d` | [`2d/text2d.rs`](./2d/text2d.rs) | Generates text in 2d
+`text2d_pipelined` | [`2d/text2d_pipelined.rs`](./2d/text2d_pipelined.rs) | Generates text in 2d
 `sprite_flipping` | [`2d/sprite_flipping.rs`](./2d/sprite_flipping.rs) | Renders a sprite flipped along an axis
 `texture_atlas` | [`2d/texture_atlas.rs`](./2d/texture_atlas.rs) | Generates a texture atlas (sprite sheet) from individual sprites
 
@@ -253,6 +254,7 @@ Example | File | Description
 `text` | [`ui/text.rs`](./ui/text.rs) | Illustrates creating and updating text
 `text_debug` | [`ui/text_debug.rs`](./ui/text_debug.rs) | An example for debugging text layout
 `ui` | [`ui/ui.rs`](./ui/ui.rs) | Illustrates various features of Bevy UI
+`ui_pipelined` | [`ui/ui_pipelined.rs`](./ui/ui_pipelined.rs) | Illustrates various features of Bevy UI
 
 ## Window