move & update keyframes

2026-10-17 00:13:17 +00:00 · 2024-03-14 18:48:03 -04:00
parent baa9431c39
commit 7c7435d2cc
6 changed files with 502 additions and 134 deletions
@@ -5,37 +5,53 @@ use bevy::{
    },
    prelude::*,
 };
+
 use serde::{Deserialize, Serialize};
 use space_editor::space_prefab::editor_registry::EditorRegistryExt;

+use crate::interaction::Selectable;
+
 pub struct TimelinePlugin;

 impl Plugin for TimelinePlugin {
    fn build(&self, app: &mut App) {
-        app.register_type::<TimedAnimationClip>()
-            .editor_registry::<TimedAnimationClip>()
+        app.register_type::<TimedAnimationClipAsset>()
+            .editor_registry::<TimedAnimationClipAsset>()
            .register_type::<AnimationTarget>()
            .editor_registry::<AnimationTarget>()
-            .add_event::<TimelineEvent>();
+            .register_type::<TransformKeyframe>()
+            .editor_registry::<TransformKeyframe>()
+            .register_type::<Keyframe>()
+            .editor_registry::<Keyframe>()
+            .register_type::<KeyframeOrder>()
+            .editor_registry::<KeyframeOrder>()
+            .add_event::<TimelineInteractionEvent>()
+            .add_event::<KeyframeInteractionEvent>();

        app.insert_resource(GlobalSeekTime {
            time: 0.,
            playing: false,
        });

-        app.add_systems(PreUpdate,
-            (process_timeline_events, update_tick).chain(),
-        );
+        app.add_systems(PreUpdate, (process_timeline_events, update_tick).chain());
+
+        app.add_systems(Update, process_keyframe_events);

        #[cfg(feature = "wasm")]
        {
-            app.add_systems(First, 
-                wasm::update_global_seek_time);
            app.add_systems(
-                Update,
+                First,
+                (
+                    wasm::update_global_seek_time,
+                    wasm::update_keyframe_interaction,
+                ),
+            );
+            app.add_systems(
+                PostUpdate,
                (
                    wasm::notify_seek_time_changes.map(bevy::utils::error),
-                    wasm::notify_updated_animation_targets.map(bevy::utils::error)
+                    wasm::notify_keyframe_changes.map(bevy::utils::error),
+                    wasm::notify_updated_animation_targets.map(bevy::utils::error),
                ),
            );
        }
@@ -43,12 +59,18 @@ impl Plugin for TimelinePlugin {
 }

 #[derive(Event, Clone, Copy, Debug)]
-pub enum TimelineEvent {
+pub enum TimelineInteractionEvent {
    Play,
    Pause,
    Seek(f32),
 }

+#[derive(Event, Clone, Copy, Debug)]
+pub enum KeyframeInteractionEvent {
+    RecordKeyframe { target: Entity },
+    MoveKeyframeTime { target: Entity, time: f32 },
+}
+
 #[derive(Resource, Clone, Copy, Debug, Default, Reflect, Serialize, Deserialize)]
 #[reflect(Resource)]
 pub struct GlobalSeekTime {
@@ -56,71 +78,110 @@ pub struct GlobalSeekTime {
    pub playing: bool,
 }

-#[derive(Component, Clone, Debug, Reflect, PartialEq)]
-#[reflect(Component, MapEntities)]
-pub struct TimedAnimationClip {
-    clip: Handle<AnimationClip>,
-    start_time: f32,
-    duration: f32,
-    incoming_transition_duration: f32,
-    speed: f32,
-    target: Entity,
+#[derive(Clone, Debug, Copy, Default, Reflect, PartialEq, Serialize, Deserialize)]
+pub enum EaseType {
+    #[default]
+    Linear,
+    CubicHermite,
 }

-impl PartialOrd for TimedAnimationClip {
-    fn partial_cmp(&self, other: &Self) -> Option<std::cmp::Ordering> {
-        match self.start_time.partial_cmp(&other.start_time) {
-            Some(core::cmp::Ordering::Equal) => {}
-            ord => return ord,
+#[derive(Component, Clone, Debug, Reflect, PartialEq)]
+#[reflect(Component)]
+pub struct TransformKeyframe {
+    incoming_easing: EaseType,
+    affect_translation: bool,
+    affect_rotation: bool,
+    affect_scale: bool,
+}
+
+impl Default for TransformKeyframe {
+    fn default() -> Self {
+        Self {
+            incoming_easing: Default::default(),
+            affect_translation: true,
+            affect_rotation: true,
+            affect_scale: true,
        }
+    }
+}
+
+#[derive(Component, Clone, Debug, Reflect, PartialEq)]
+#[reflect(Component, MapEntities)]
+pub struct Keyframe {
+    target: Entity,
+    time: f32,
+}
+
+#[derive(Component, Clone, Debug, Default, Reflect, PartialEq, Eq, PartialOrd, Ord)]
+#[reflect(Component)]
+pub struct KeyframeOrder(u32);
+
+impl PartialOrd for Keyframe {
+    fn partial_cmp(&self, other: &Self) -> Option<std::cmp::Ordering> {
+        self.time.partial_cmp(&other.time)
+    }
+}
+
+impl MapEntities for Keyframe {
+    fn map_entities(&mut self, entity_mapper: &mut EntityMapper) {
+        self.target = entity_mapper.get_or_reserve(self.target);
+    }
+}
+
+impl Default for Keyframe {
+    fn default() -> Self {
+        Self {
+            target: Entity::PLACEHOLDER,
+            time: Default::default(),
+        }
+    }
+}
+
+#[derive(Component, Clone, Debug, Reflect, PartialEq)]
+#[reflect(Component)]
+pub struct TimedAnimationClipAsset {
+    clip: Handle<AnimationClip>,
+    duration: f32,
+    speed: f32,
+}
+
+impl PartialOrd for TimedAnimationClipAsset {
+    fn partial_cmp(&self, other: &Self) -> Option<std::cmp::Ordering> {
        match self.duration.partial_cmp(&other.duration) {
            Some(core::cmp::Ordering::Equal) => {}
            ord => return ord,
        }
-        match self.clip.partial_cmp(&other.clip) {
+        match self.speed.partial_cmp(&other.speed) {
            Some(core::cmp::Ordering::Equal) => {}
            ord => return ord,
        }
-        match self
-            .incoming_transition_duration
-            .partial_cmp(&other.incoming_transition_duration)
-        {
-            Some(core::cmp::Ordering::Equal) => {}
-            ord => return ord,
-        }
-        self.target.partial_cmp(&other.target)
+        None
    }
 }

-impl Default for TimedAnimationClip {
+impl Default for TimedAnimationClipAsset {
    fn default() -> Self {
        Self {
            clip: Default::default(),
-            start_time: Default::default(),
            duration: Default::default(),
            speed: 1.0,
-            incoming_transition_duration: Default::default(),
-            target: Entity::PLACEHOLDER,
        }
    }
 }

-impl MapEntities for TimedAnimationClip {
-    fn map_entities(&mut self, entity_mapper: &mut EntityMapper) {
-        self.target = entity_mapper.get_or_reserve(self.target);
-    }
-}
-
 #[derive(Component, Clone, Debug, Default, Reflect)]
 #[reflect(Component)]
 pub struct AnimationTarget;

-fn process_timeline_events(mut e_timeline_event: EventReader<TimelineEvent>, mut r_global_seek_time: ResMut<GlobalSeekTime>) {
+fn process_timeline_events(
+    mut e_timeline_event: EventReader<TimelineInteractionEvent>,
+    mut r_global_seek_time: ResMut<GlobalSeekTime>,
+) {
    for event in e_timeline_event.read() {
        match event {
-            TimelineEvent::Play => r_global_seek_time.playing = true,
-            TimelineEvent::Pause => r_global_seek_time.playing = false,
-            TimelineEvent::Seek(time) => r_global_seek_time.time = *time,
+            TimelineInteractionEvent::Play => r_global_seek_time.playing = true,
+            TimelineInteractionEvent::Pause => r_global_seek_time.playing = false,
+            TimelineInteractionEvent::Seek(time) => r_global_seek_time.time = *time,
        }
    }
 }
@@ -131,39 +192,116 @@ fn update_tick(mut r_global_seek_time: ResMut<GlobalSeekTime>, time: Res<Time>)
    }
 }

+fn process_keyframe_events(
+    mut commands: Commands,
+    mut e_timeline_event: EventReader<KeyframeInteractionEvent>,
+    r_global_seek_time: Res<GlobalSeekTime>,
+    q_animation_targets: Query<(Entity, &Transform), With<AnimationTarget>>,
+    mut q_keyframes: Query<&mut Keyframe>,
+) {
+    for event in e_timeline_event.read() {
+        info!("Processing Keyframe Event {event:?}");
+        match event {
+            KeyframeInteractionEvent::RecordKeyframe { target } => {
+                if let Ok((target, transform)) = q_animation_targets.get(*target) {
+                    commands.spawn((
+                        SpatialBundle {
+                            transform: *transform,
+                            ..Default::default()
+                        },
+                        Selectable,
+                        Keyframe {
+                            target,
+                            time: r_global_seek_time.time,
+                        },
+                        TransformKeyframe::default(),
+                    ));
+                }
+            }
+            KeyframeInteractionEvent::MoveKeyframeTime { target, time } => {
+                if let Ok(mut keyframe) = q_keyframes.get_mut(*target) {
+                    keyframe.time = *time;
+                }
+            }
+        }
+    }
+}
+
 #[cfg(feature = "wasm")]
 mod wasm {
    use bevy::{prelude::*, utils::hashbrown::HashMap, window::PrimaryWindow};
    use serde::{Deserialize, Serialize};
    use wasm_bindgen::prelude::*;

-    use crate::{scene::SceneElement, wasm::{StaticBuffer, WasmMessageBuffer}};
+    use crate::{
+        scene::SceneElement,
+        wasm::{FromStr, StaticBuffer, WasmMessageBuffer},
+    };

-    use super::{AnimationTarget, GlobalSeekTime, TimelineEvent};
+    use super::{
+        AnimationTarget, EaseType, GlobalSeekTime, Keyframe, KeyframeInteractionEvent,
+        TimedAnimationClipAsset, TimelineInteractionEvent, TransformKeyframe,
+    };

-    static SEEK_TIME: WasmMessageBuffer<TimelineEvent> = WasmMessageBuffer::new();
+    static SEEK_TIME: WasmMessageBuffer<TimelineInteractionEvent> = WasmMessageBuffer::new();
+    static KEYFRAME_EVENT: WasmMessageBuffer<Vec<KeyframeInteractionEvent>> =
+        WasmMessageBuffer::new();

    #[wasm_bindgen(js_name = seekTime)]
    pub fn seek_time(timestamp: f32) {
-        SEEK_TIME.write_message(TimelineEvent::Seek(timestamp));
+        SEEK_TIME.write_message(TimelineInteractionEvent::Seek(timestamp));
    }

    #[wasm_bindgen(js_name = play)]
    pub fn play() {
-        SEEK_TIME.write_message(TimelineEvent::Play);
+        SEEK_TIME.write_message(TimelineInteractionEvent::Play);
    }

    #[wasm_bindgen(js_name = pause)]
    pub fn pause() {
-        SEEK_TIME.write_message(TimelineEvent::Pause);
+        SEEK_TIME.write_message(TimelineInteractionEvent::Pause);
    }

-    pub(super) fn update_global_seek_time(mut e_timeline_event: EventWriter<TimelineEvent>) {
+    #[wasm_bindgen(js_name = recordKeyframe)]
+    pub fn record_keyframe(entities: Vec<String>) {
+        KEYFRAME_EVENT.write_message(
+            entities
+                .iter()
+                .filter_map(|entity| Entity::from_str(entity).ok())
+                .map(|target| KeyframeInteractionEvent::RecordKeyframe { target })
+                .collect(),
+        );
+    }
+
+    #[wasm_bindgen(js_name = moveKeyframeTime)]
+    pub fn move_keyframe_time(entity: String, time: f32) {
+        let Ok(target) = Entity::from_str(&entity) else {
+            return;
+        };
+        KEYFRAME_EVENT.write_message(vec![KeyframeInteractionEvent::MoveKeyframeTime {
+            target,
+            time,
+        }]);
+    }
+
+    pub(super) fn update_global_seek_time(
+        mut e_timeline_event: EventWriter<TimelineInteractionEvent>,
+    ) {
        if let Some(timestamp) = SEEK_TIME.take_message() {
            e_timeline_event.send(timestamp);
        }
    }

+    pub(super) fn update_keyframe_interaction(
+        mut e_keyframe_event: EventWriter<KeyframeInteractionEvent>,
+    ) {
+        if let Some(keyframes) = KEYFRAME_EVENT.take_message() {
+            for keyframe in keyframes.into_iter() {
+                e_keyframe_event.send(keyframe);
+            }
+        }
+    }
+
    #[wasm_bindgen(typescript_custom_section)]
    const TIMELINE_TYPES: &str = r#"
    export interface SeekTimeChanged extends CustomEvent {
@@ -177,7 +315,37 @@ mod wasm {
    export interface UpdateAnimationTargets extends CustomEvent {
        type: "update-animation-targets",
        details: {
-            added: Record<string, { name?: string, target_type: 'camera' | 'transform' | 'light' | 'bone' | 'skeleton' | 'mesh' >,
+            added: Record<string, { name?: string, target_type: 'camera' | 'transform' | 'light' | 'bone' | 'skeleton' | 'mesh' } >,
+            removed: string[]
+        }
+    }
+
+    export interface TransformKeyframeInfo {
+        target: string,
+        time: number,
+        entity: string,
+        incoming_easing: "linear" | "cubic-hermite",
+        affect_translation: bool,
+        affect_rotation: bool,
+        affect_scale: bool
+    }
+
+    export interface TimedAnimationClipInfo {
+        target: string,
+        time: number,
+        entity: string,
+        type: 'animation-clip',
+        clip: string,
+        duration: number,
+        speed: number
+    }
+
+    export type Keyframe = TransformKeyframeInfo | TimedAnimationClipInfo;
+
+    export interface UpdateKeyframes extends CustomEvent {
+        type: "update-keyframes",
+        details: {
+            added: Record<string, Keyframe)>,
            removed: string[]
        }
    }
@@ -186,55 +354,123 @@ mod wasm {
        export interface GlobalEventHandlersEventMap {
            "seek-time-changed": CameraKeyframesEvent; 
            "update-animation-targets": UpdateAnimationTargets;
+            "update-keyframes": UpdateKeyframes;
        }
    }
    "#;

-    const CAMERA : &str = "camera";
-    const TRANSFORM : &str = "transform";
-    const LIGHT : &str = "light";
-    const BONE : &str = "bone";
-    const SKELETON : &str = "skeleton";
-    const MESH : &str = "mesh";
+    const CAMERA: &str = "camera";
+    const TRANSFORM: &str = "transform";
+    const LIGHT: &str = "light";
+    const BONE: &str = "bone";
+    const SKELETON: &str = "skeleton";
+    const MESH: &str = "mesh";

    #[derive(Serialize, Deserialize)]
    struct AddedAnimationTargetRecordItem {
        name: Option<String>,
-        target_type: String
+        target_type: String,
    }

-    
-
    #[derive(Serialize, Deserialize)]
    struct UpdatedAnimationTargetsEvent {
-        added: HashMap<Entity, AddedAnimationTargetRecordItem>,
-        removed: Vec<Entity>
+        added: HashMap<String, AddedAnimationTargetRecordItem>,
+        removed: Vec<String>,
+    }
+
+    #[derive(Serialize, Deserialize)]
+    struct TimedAnimationClipInfo {
+        entity: String,
+        target: String,
+        time: f32,
+        clip: String,
+        duration: f32,
+        speed: f32,
+    }
+
+    #[derive(Serialize, Deserialize)]
+    struct TransformKeframeInfo {
+        entity: String,
+        target: String,
+        time: f32,
+        incoming_easing: EaseType,
+        affect_translation: bool,
+        affect_rotation: bool,
+        affect_scale: bool,
+    }
+
+    #[derive(Serialize, Deserialize, Debug)]
+    struct UpdateKeyframes {
+        added: HashMap<String, serde_json::Value>,
+        removed: Vec<String>,
    }

    pub(super) fn notify_updated_animation_targets(
        q_window: Query<&Window, With<PrimaryWindow>>,
        q_cameras: Query<(Entity, Option<&Name>), (Added<AnimationTarget>, With<Camera>)>,
-        q_scene_elements: Query<(Entity, Option<&Name>, &SceneElement), (Added<AnimationTarget>, Without<Camera>)>,
-        q_transforms: Query<(Entity, Option<&Name>), (Added<AnimationTarget>, With<Transform>, Without<Camera>, Without<SceneElement>)>,
-        mut removed: bevy::prelude::RemovedComponents<AnimationTarget>
+        q_scene_elements: Query<
+            (Entity, Option<&Name>, &SceneElement),
+            (Added<AnimationTarget>, Without<Camera>),
+        >,
+        q_transforms: Query<
+            (Entity, Option<&Name>),
+            (
+                Added<AnimationTarget>,
+                With<Transform>,
+                Without<Camera>,
+                Without<SceneElement>,
+            ),
+        >,
+        mut removed: bevy::prelude::RemovedComponents<AnimationTarget>,
    ) -> Result<(), String> {
        let Ok(window) = q_window.get_single() else {
            return Ok(());
        };

-        let added = q_transforms.iter().map(|(entity, name)| {
-            (entity, AddedAnimationTargetRecordItem { name: name.map(|v| v.to_string()), target_type: TRANSFORM.to_owned()})
-        }).chain(q_cameras.iter().map(|(entity, name)| (entity, AddedAnimationTargetRecordItem { name: name.map(|v| v.to_string()), target_type: CAMERA.to_owned()})))
-        .chain(q_scene_elements.iter().map(|(entity, name, element)| (entity, AddedAnimationTargetRecordItem { name: name.map(|v| v.to_string()), target_type: match element {
-            SceneElement::Generic => TRANSFORM,
-            SceneElement::Mesh => MESH,
-            SceneElement::Skeleton => SKELETON,
-            SceneElement::Bone => BONE,
-            SceneElement::Light => LIGHT,
-            SceneElement::Camera => CAMERA,
-        }.to_string()}))).collect::<HashMap<_,_>>();
+        let added = q_transforms
+            .iter()
+            .map(|(entity, name)| {
+                (
+                    format!("{entity:?}"),
+                    AddedAnimationTargetRecordItem {
+                        name: name.map(|v| v.to_string()),
+                        target_type: TRANSFORM.to_owned(),
+                    },
+                )
+            })
+            .chain(q_cameras.iter().map(|(entity, name)| {
+                (
+                    format!("{entity:?}"),
+                    AddedAnimationTargetRecordItem {
+                        name: name.map(|v| v.to_string()),
+                        target_type: CAMERA.to_owned(),
+                    },
+                )
+            }))
+            .chain(q_scene_elements.iter().map(|(entity, name, element)| {
+                (
+                    format!("{entity:?}"),
+                    AddedAnimationTargetRecordItem {
+                        name: name.map(|v| v.to_string()),
+                        target_type: match element {
+                            SceneElement::Generic => TRANSFORM,
+                            SceneElement::Mesh => MESH,
+                            SceneElement::Skeleton => SKELETON,
+                            SceneElement::Bone => BONE,
+                            SceneElement::Light => LIGHT,
+                            SceneElement::Camera => CAMERA,
+                        }
+                        .to_string(),
+                    },
+                )
+            }))
+            .collect::<HashMap<_, _>>();

-        let removed = removed.read().collect::<Vec<_>>();
+        let removed = removed.read().map(|v| format!("{v:?}")).collect::<Vec<_>>();
+
+        if added.is_empty() && removed.is_empty() {
+            return Ok(());
+        }

        let event = UpdatedAnimationTargetsEvent { added, removed };

@@ -245,6 +481,74 @@ mod wasm {
        )
    }

+    pub(super) fn notify_keyframe_changes(
+        q_window: Query<&Window, With<PrimaryWindow>>,
+        q_transform_keyframes: Query<
+            (Entity, &Keyframe, &TransformKeyframe),
+            Or<(Changed<Keyframe>, Changed<TransformKeyframe>)>,
+        >,
+        q_clips: Query<
+            (Entity, &Keyframe, &TimedAnimationClipAsset),
+            Or<(Changed<Keyframe>, Changed<TimedAnimationClipAsset>)>,
+        >,
+        mut removed: bevy::prelude::RemovedComponents<Keyframe>,
+    ) -> Result<(), String> {
+        let Ok(window) = q_window.get_single() else {
+            return Ok(());
+        };
+
+        let added = q_transform_keyframes
+            .iter()
+            .map(|(entity, keyframe, transform_keyframe)| {
+                match serde_json::to_value(TransformKeframeInfo {
+                    entity: format!("{entity:?}"),
+                    target: format!("{:?}", keyframe.target),
+                    time: keyframe.time,
+                    incoming_easing: transform_keyframe.incoming_easing,
+                    affect_translation: transform_keyframe.affect_translation,
+                    affect_rotation: transform_keyframe.affect_rotation,
+                    affect_scale: transform_keyframe.affect_scale,
+                })
+                .map_err(|e| format!("{e}"))
+                {
+                    Ok(value) => Ok((format!("{entity:?}"), value)),
+                    Err(e) => Err(e),
+                }
+            })
+            .chain(q_clips.iter().map(|(entity, keyframe, clip)| {
+                match serde_json::to_value(TimedAnimationClipInfo {
+                    entity: format!("{entity:?}"),
+                    target: format!("{:?}", keyframe.target),
+                    time: keyframe.time,
+                    clip: clip.clip.id().to_string(),
+                    duration: clip.duration,
+                    speed: clip.speed,
+                })
+                .map_err(|e| format!("{e}"))
+                {
+                    Ok(value) => Ok((format!("{entity:?}"), value)),
+                    Err(e) => Err(e),
+                }
+            }))
+            .collect::<Result<HashMap<_, _>, String>>()?;
+
+        let removed = removed.read().map(|v| format!("{v:?}")).collect::<Vec<_>>();
+
+        if added.is_empty() && removed.is_empty() {
+            return Ok(());
+        }
+
+        let event = UpdateKeyframes { added, removed };
+
+        info!("Updating keyframes: {event:?}");
+
+        crate::wasm::dispatch_to_js(
+            window,
+            "update-keyframes",
+            &serde_json::to_value(&event).map_err(|e| format!("{e}"))?,
+        )
+    }
+
    pub(super) fn notify_seek_time_changes(
        r_global_seek_time: Res<GlobalSeekTime>,
        q_window: Query<&Window, With<PrimaryWindow>>,
@@ -23,7 +23,14 @@ use wasm_bindgen::prelude::wasm_bindgen;
 use wgpu::{TextureDescriptor, TextureUsages};

 use crate::{
-    anim::timeline_animation::AnimationTarget, camera_controller::{CameraController, CameraControllerBundle}, change_tracking::{ChangeTracker, ChangeTrackingPlugin}, debug::DebugPoint, headless::{is_headless, is_not_headless, HeadlessSettings}, math::{Combinable, Extrema}, screenshot::ScreenCapture, MainCamera
+    anim::timeline_animation::AnimationTarget,
+    camera_controller::{CameraController, CameraControllerBundle},
+    change_tracking::{ChangeTracker, ChangeTrackingPlugin},
+    debug::DebugPoint,
+    headless::{is_headless, is_not_headless, HeadlessSettings},
+    math::{Combinable, Extrema},
+    screenshot::ScreenCapture,
+    MainCamera,
 };

 pub struct ScenePlugin;