Fix Gizmo joint rendering in webgpu (#14721)

# Objective

- Gizmo rendering on WebGPU has been fixed by #14653, but gizmo joints
still cause error
(https://github.com/bevyengine/bevy/issues/14696#issuecomment-2283689669)
when enabled.

## Solution

- Applies the same fix as #14653 to Gizmo joints.

I'm noob and just copied their solution, please correct me if I did
something wrong.

## Testing

- Tested 2d-gizmos and 3d-gizmos examples in WebGPU on Chrome. No
rendering errors, and the gizmo joints are apparently rendered ok.

crates/bevy_gizmos/src/lib.rs

@@ -630,11 +630,24 @@ impl<P: PhaseItem> RenderCommand<P> for DrawLineJointGizmo {
         };
 
         let instances = {
-            pass.set_vertex_buffer(0, line_gizmo.position_buffer.slice(..));
+            let item_size = VertexFormat::Float32x3.size();
-            pass.set_vertex_buffer(1, line_gizmo.position_buffer.slice(..));
+            // position_a
-            pass.set_vertex_buffer(2, line_gizmo.position_buffer.slice(..));
+            let buffer_size_a = line_gizmo.position_buffer.size() - item_size * 2;
+            pass.set_vertex_buffer(0, line_gizmo.position_buffer.slice(..buffer_size_a));
+            // position_b
+            let buffer_size_b = line_gizmo.position_buffer.size() - item_size;
+            pass.set_vertex_buffer(
+                1,
+                line_gizmo.position_buffer.slice(item_size..buffer_size_b),
+            );
+            // position_c
+            pass.set_vertex_buffer(2, line_gizmo.position_buffer.slice(item_size * 2..));
 
-            pass.set_vertex_buffer(3, line_gizmo.color_buffer.slice(..));
+            // color
+            let item_size = VertexFormat::Float32x4.size();
+            let buffer_size = line_gizmo.color_buffer.size() - item_size;
+            // This corresponds to the color of position_b, hence starts from `item_size`
+            pass.set_vertex_buffer(3, line_gizmo.color_buffer.slice(item_size..buffer_size));
 
             u32::max(line_gizmo.vertex_count, 2) - 2
         };
@@ -723,7 +736,7 @@ fn line_joint_gizmo_vertex_buffer_layouts() -> Vec<VertexBufferLayout> {
         step_mode: VertexStepMode::Instance,
         attributes: vec![VertexAttribute {
             format: Float32x4,
-            offset: Float32x4.size(),
+            offset: 0,
             shader_location: 3,
         }],
     };
@@ -732,12 +745,10 @@ fn line_joint_gizmo_vertex_buffer_layouts() -> Vec<VertexBufferLayout> {
         position_layout.clone(),
         {
             position_layout.attributes[0].shader_location = 1;
-            position_layout.attributes[0].offset = Float32x3.size();
             position_layout.clone()
         },
         {
             position_layout.attributes[0].shader_location = 2;
-            position_layout.attributes[0].offset = 2 * Float32x3.size();
             position_layout
         },
         color_layout.clone(),

crates/bevy_gizmos/src/pipeline_2d.rs

@@ -54,7 +54,9 @@ impl Plugin for LineGizmo2dPlugin {
             )
             .add_systems(
                 Render,
+                // FIXME: added `chain()` to workaround vertex buffer being not updated when sliced size changed
                 (queue_line_gizmos_2d, queue_line_joint_gizmos_2d)
+                    .chain()
                     .in_set(GizmoRenderSystem::QueueLineGizmos2d)
                     .after(prepare_assets::<GpuLineGizmo>),
             );

crates/bevy_gizmos/src/pipeline_3d.rs

@@ -53,7 +53,9 @@ impl Plugin for LineGizmo3dPlugin {
             )
             .add_systems(
                 Render,
+                // FIXME: added `chain()` to workaround vertex buffer being not updated when sliced size changed
                 (queue_line_gizmos_3d, queue_line_joint_gizmos_3d)
+                    .chain()
                     .in_set(GizmoRenderSystem::QueueLineGizmos3d)
                     .after(prepare_assets::<GpuLineGizmo>),
             );