Vary transforms for custom_skinned_mesh example (#15710)

# Objective

Enhance the [custom skinned mesh
example](https://bevyengine.org/examples/animation/custom-skinned-mesh/)
to show some variety and clarify what the transform does to the mesh.

## Solution


https://github.com/user-attachments/assets/c919db74-6e77-4f33-ba43-0f40a88042b3

Add variety and clarity with the following changes:

- vary transform changes,
- use a UV texture,
- and show transform changes via gizmos.

(Maybe it'd be worth turning on wireframe rendering to show what happens
to the mesh. I think it'd be nice visually but might make the code a
little noisy.)

## Testing

I exercised it on my x86 macOS computer. It'd be good to have it
validated on Windows, Linux, and WASM.

---

## Showcase

- Custom skinned mesh example varies the transforms changes and uses a
UV test texture.

examples/animation/custom_skinned_mesh.rs

@@ -31,13 +31,14 @@ fn main() {
 
 /// Used to mark a joint to be animated in the [`joint_animation`] system.
 #[derive(Component)]
-struct AnimatedJoint;
+struct AnimatedJoint(isize);
 
 /// Construct a mesh and a skeleton with 2 joints for that mesh,
 ///   and mark the second joint to be animated.
 /// It is similar to the scene defined in `models/SimpleSkin/SimpleSkin.gltf`
 fn setup(
     mut commands: Commands,
+    asset_server: Res<AssetServer>,
     mut meshes: ResMut<Assets<Mesh>>,
     mut materials: ResMut<Assets<StandardMaterial>>,
     mut skinned_mesh_inverse_bindposes_assets: ResMut<Assets<SkinnedMeshInverseBindposes>>,
@@ -45,7 +46,7 @@ fn setup(
     // Create a camera
     commands.spawn((
         Camera3d::default(),
-        Transform::from_xyz(-2.0, 2.5, 5.0).looking_at(Vec3::ZERO, Vec3::Y),
+        Transform::from_xyz(2.5, 2.5, 9.0).looking_at(Vec3::ZERO, Vec3::Y),
     ));
 
     // Create inverse bindpose matrices for a skeleton consists of 2 joints
@@ -75,6 +76,23 @@ fn setup(
             [1.0, 2.0, 0.0],
         ],
     )
+    // Add UV coordinates that map the left half of the texture since its a 1 x
+    // 2 rectangle.
+    .with_inserted_attribute(
+        Mesh::ATTRIBUTE_UV_0,
+        vec![
+            [0.0, 0.00],
+            [0.5, 0.00],
+            [0.0, 0.25],
+            [0.5, 0.25],
+            [0.0, 0.50],
+            [0.5, 0.50],
+            [0.0, 0.75],
+            [0.5, 0.75],
+            [0.0, 1.00],
+            [0.5, 1.00],
+        ],
+    )
     // Set mesh vertex normals
     .with_inserted_attribute(Mesh::ATTRIBUTE_NORMAL, vec![[0.0, 0.0, 1.0]; 10])
     // Set mesh vertex joint indices for mesh skinning.
@@ -130,9 +148,15 @@ fn setup(
     for i in -5..5 {
         // Create joint entities
         let joint_0 = commands
-            .spawn(Transform::from_xyz(i as f32 * 1.5, 0.0, i as f32 * 0.1))
+            .spawn(Transform::from_xyz(
+                i as f32 * 1.5,
+                0.0,
+                // Move quads back a small amount to avoid Z-fighting and not
+                // obscure the transform gizmos.
+                -(i as f32 * 0.01).abs(),
+            ))
             .id();
-        let joint_1 = commands.spawn((AnimatedJoint, Transform::IDENTITY)).id();
+        let joint_1 = commands.spawn((AnimatedJoint(i), Transform::IDENTITY)).id();
 
         // Set joint_1 as a child of joint_0.
         commands.entity(joint_0).add_children(&[joint_1]);
@@ -143,11 +167,15 @@ fn setup(
         // Create skinned mesh renderer. Note that its transform doesn't affect the position of the mesh.
         commands.spawn((
             Mesh3d(mesh.clone()),
-            MeshMaterial3d(materials.add(Color::srgb(
+            MeshMaterial3d(materials.add(StandardMaterial {
-                rng.gen_range(0.0..1.0),
+                base_color: Color::srgb(
-                rng.gen_range(0.0..1.0),
+                    rng.gen_range(0.0..1.0),
-                rng.gen_range(0.0..1.0),
+                    rng.gen_range(0.0..1.0),
-            ))),
+                    rng.gen_range(0.0..1.0),
+                ),
+                base_color_texture: Some(asset_server.load("textures/uv_checker_bw.png")),
+                ..default()
+            })),
             SkinnedMesh {
                 inverse_bindposes: inverse_bindposes.clone(),
                 joints: joint_entities,
@@ -157,8 +185,51 @@ fn setup(
 }
 
 /// Animate the joint marked with [`AnimatedJoint`] component.
-fn joint_animation(time: Res<Time>, mut query: Query<&mut Transform, With<AnimatedJoint>>) {
+fn joint_animation(
-    for mut transform in &mut query {
+    time: Res<Time>,
-        transform.rotation = Quat::from_rotation_z(FRAC_PI_2 * ops::sin(time.elapsed_seconds()));
+    mut query: Query<(&mut Transform, &AnimatedJoint)>,
+    mut gizmos: Gizmos,
+) {
+    for (mut transform, animated_joint) in &mut query {
+        match animated_joint.0 {
+            -5 => {
+                transform.rotation =
+                    Quat::from_rotation_x(FRAC_PI_2 * ops::sin(time.elapsed_seconds()));
+            }
+            -4 => {
+                transform.rotation =
+                    Quat::from_rotation_y(FRAC_PI_2 * ops::sin(time.elapsed_seconds()));
+            }
+            -3 => {
+                transform.rotation =
+                    Quat::from_rotation_z(FRAC_PI_2 * ops::sin(time.elapsed_seconds()));
+            }
+            -2 => {
+                transform.scale.x = ops::sin(time.elapsed_seconds()) + 1.0;
+            }
+            -1 => {
+                transform.scale.y = ops::sin(time.elapsed_seconds()) + 1.0;
+            }
+            0 => {
+                transform.translation.x = 0.5 * ops::sin(time.elapsed_seconds());
+                transform.translation.y = ops::cos(time.elapsed_seconds());
+            }
+            1 => {
+                transform.translation.y = ops::sin(time.elapsed_seconds());
+                transform.translation.z = ops::cos(time.elapsed_seconds());
+            }
+            2 => {
+                transform.translation.x = ops::sin(time.elapsed_seconds());
+            }
+            3 => {
+                transform.translation.y = ops::sin(time.elapsed_seconds());
+                transform.scale.x = ops::sin(time.elapsed_seconds()) + 1.0;
+            }
+            _ => (),
+        }
+        // Show transform
+        let mut axis = *transform;
+        axis.translation.x += animated_joint.0 as f32 * 1.5;
+        gizmos.axes(axis, 1.0);
     }
 }