text rendering: convert colours only once per section (#5474)

# Objective

- Improve performance when rendering text

## Solution

- While playing with example `many_buttons`, I noticed a lot of time was spent converting colours
- Investigating, the biggest culprit seems to be text colour. Each glyph in a text is an individual UI node for rendering, with a copy of the colour. Making the conversion to RGBA linear only once per text section reduces the number of conversion done once rendering.
- This improves FPS for example `many_buttons` from ~33 to ~42
- I did the same change for text 2d

Author: mockersf

crates/bevy_text/src/text2d.rs

@@ -11,6 +11,7 @@ use bevy_ecs::{
 use bevy_math::{Vec2, Vec3};
 use bevy_reflect::Reflect;
 use bevy_render::{
+    prelude::Color,
     texture::Image,
     view::{ComputedVisibility, Visibility},
     Extract,
@@ -101,11 +102,16 @@ pub fn extract_text2d_sprite(
                 HorizontalAlign::Right => Vec3::new(-width, 0.0, 0.0),
             };
 
+            let mut color = Color::WHITE;
+            let mut current_section = usize::MAX;
             for text_glyph in text_glyphs {
-                let color = text.sections[text_glyph.section_index]
-                    .style
-                    .color
-                    .as_rgba_linear();
+                if text_glyph.section_index != current_section {
+                    color = text.sections[text_glyph.section_index]
+                        .style
+                        .color
+                        .as_rgba_linear();
+                    current_section = text_glyph.section_index;
+                }
                 let atlas = texture_atlases
                     .get(&text_glyph.atlas_info.texture_atlas)
                     .unwrap();

crates/bevy_ui/src/render/mod.rs

@@ -295,8 +295,16 @@ pub fn extract_text_uinodes(
             let text_glyphs = &text_layout.glyphs;
             let alignment_offset = (uinode.size / -2.0).extend(0.0);
 
+            let mut color = Color::WHITE;
+            let mut current_section = usize::MAX;
             for text_glyph in text_glyphs {
-                let color = text.sections[text_glyph.section_index].style.color;
+                if text_glyph.section_index != current_section {
+                    color = text.sections[text_glyph.section_index]
+                        .style
+                        .color
+                        .as_rgba_linear();
+                    current_section = text_glyph.section_index;
+                }
                 let atlas = texture_atlases
                     .get(&text_glyph.atlas_info.texture_atlas)
                     .unwrap();