From 82c02f9fb6c9a9c372a35e196a984b66cecd97bd Mon Sep 17 00:00:00 2001 From: Miles Ryan <75916236+Quicksticks-oss@users.noreply.github.com> Date: Tue, 22 Oct 2024 11:32:38 -0700 Subject: [PATCH] Motion Builder (#677) --- app/pages/PageEnigma/Editor/editor.ts | 3 ++ app/pages/PageEnigma/Editor/scene.ts | 45 ++++++++++++++----- app/pages/PageEnigma/Editor/timeline.ts | 38 ++++++++++++++++ .../datastructures/clips/animation_clip.ts | 9 +++- .../proxy/storyteller_proxy_timeline.ts | 2 +- 5 files changed, 85 insertions(+), 12 deletions(-) diff --git a/app/pages/PageEnigma/Editor/editor.ts b/app/pages/PageEnigma/Editor/editor.ts index 9bb31999c2..ef1751cc12 100644 --- a/app/pages/PageEnigma/Editor/editor.ts +++ b/app/pages/PageEnigma/Editor/editor.ts @@ -221,6 +221,7 @@ class Editor { "" + this.version, this.camera_name, this.updateSurfaceIdAttributeToMesh.bind(this), + this.version ); this.activeScene.initialize(); this.generating_preview = false; @@ -273,6 +274,8 @@ class Editor { this.camera_name, ); + this.activeScene.timeline = this.timeline; + this.utils = new Utils(this, this.activeScene); this.videoGeneration = new VideoGeneration(this); this.save_manager = new SaveManager(this); diff --git a/app/pages/PageEnigma/Editor/scene.ts b/app/pages/PageEnigma/Editor/scene.ts index 67a9ab3db0..06c7d0adf6 100644 --- a/app/pages/PageEnigma/Editor/scene.ts +++ b/app/pages/PageEnigma/Editor/scene.ts @@ -10,6 +10,9 @@ import { LoadingPlaceHolderManager } from "./placeholder_manager"; import { MMDAnimationHelper, Water } from "three/examples/jsm/Addons.js"; import { MediaFileType } from "../enums"; import { ChromaKeyMaterial } from "./chromakey"; +import { TimeLine } from "./timeline"; +import { ClipGroup, ClipType } from "~/enums"; +import { ClipUI } from "../datastructures/clips/clip_ui"; class Scene { name: string; @@ -36,6 +39,8 @@ class Scene { updateSurfaceIdAttributeToMesh: Function; helper: MMDAnimationHelper; ambientLight: THREE.AmbientLight | undefined; + timeline: TimeLine | undefined; + version: number; // This is used to ensure we do not rerender or process the video if we already have done so. // This allows us to reprompt things quickly. This is only written when a snap shot is taken. @@ -45,7 +50,9 @@ class Scene { name: string, camera_name: string, updateSurfaceIdAttributeToMesh: Function, + version: number, ) { + this.version = version; this.name = name; this.gridHelper; this.scene = new THREE.Scene(); @@ -647,6 +654,29 @@ class Scene { if (auto_add) { this.scene.add(child_result); + if (glb.animations.length > 0) { + console.log(glb.animations); + const animation = glb.animations[0]; + child_result.animations = glb.animations; + // load first animation + this.timeline?.addSelfAnimationClip( + new ClipUI( + this.version, + ClipType.ANIMATION, + ClipGroup.CHARACTER, + animation.name, + "SelfClip", + animation.uuid, + child_result.uuid, + name, + 0, + 100, + 0, + MediaFileType.GLB, + ), + animation, + ); + } } this.updateSurfaceIdAttributeToMesh(this.scene); return child_result; @@ -739,8 +769,7 @@ class Scene { "/resources/skybox/night/Night_Moon_Burst_Cam_1_Back-Z.png", ]); this.scene.background = texture; - if(this.ambientLight) - this.scene.remove(this.ambientLight); + if (this.ambientLight) this.scene.remove(this.ambientLight); } else if (this.skybox == "m_1") { const texture = loader.load([ "/resources/skybox/gray/Sky_AllSky_Overcast4_Low_Cam_2_LeftX.png", @@ -751,13 +780,10 @@ class Scene { "/resources/skybox/gray/Sky_AllSky_Overcast4_Low_Cam_1_Back-Z.png", ]); this.scene.background = texture; - if(this.ambientLight) - this.scene.remove(this.ambientLight); + if (this.ambientLight) this.scene.remove(this.ambientLight); } else if (this.skybox == "m_2") { this.scene.background = new THREE.Color("#000000"); - if(this.ambientLight) - this.scene.add(this.ambientLight); - + if (this.ambientLight) this.scene.add(this.ambientLight); } else { const texture = loader.load([ "/resources/skybox/day/px.png", @@ -768,8 +794,7 @@ class Scene { "/resources/skybox/day/nz.png", ]); this.scene.background = texture; - if(this.ambientLight) - this.scene.remove(this.ambientLight); + if (this.ambientLight) this.scene.remove(this.ambientLight); } console.log("Backround creation.."); @@ -795,7 +820,7 @@ class Scene { const light = new THREE.HemisphereLight(color, 0x8d8d8d, 3.0); this.scene.add(light); - this.ambientLight = new THREE.AmbientLight(new THREE.Color("#ffffff"), 3) + this.ambientLight = new THREE.AmbientLight(new THREE.Color("#ffffff"), 3); const directional_light = new THREE.DirectionalLight(color, 2.0); diff --git a/app/pages/PageEnigma/Editor/timeline.ts b/app/pages/PageEnigma/Editor/timeline.ts index e982ff8136..6487376eec 100644 --- a/app/pages/PageEnigma/Editor/timeline.ts +++ b/app/pages/PageEnigma/Editor/timeline.ts @@ -549,6 +549,44 @@ export class TimeLine { this.checkEditorCanPlay(); } + public async addSelfAnimationClip(data: ClipUI, animation_clip: THREE.AnimationClip) { + const object_uuid = data.object_uuid; + const media_id = data.media_id; + const name = data.name; + const group = data.group; + const version = 1; + const type = data.type; + const offset = data.offset; + const end_offset = data.length + offset; + const object_name = + this.scene.get_object_by_uuid(object_uuid)?.name ?? "undefined"; + const clip_uuid = data.clip_uuid; + + this.animation_engine.load_object(object_uuid, media_id, name); + this.animation_engine.clips[object_uuid + media_id].animation_clip = animation_clip; + + // media id for this as well it can be downloaded + this.addPlayableClip( + new ClipUI( + version, + type, + group, + name, + media_id, + clip_uuid, + object_uuid, + object_name, + offset, + end_offset, // length + 0, + this.scene.get_object_by_uuid(object_uuid)?.userData["media_file_type"], + ), + ); + + this.checkEditorCanPlay(); + this.updateUI(); + } + public async deleteKeyFrame(data: Keyframe) { const keyframe_uuid = data.keyframe_uuid; const object_uuid = data.object_uuid; diff --git a/app/pages/PageEnigma/datastructures/clips/animation_clip.ts b/app/pages/PageEnigma/datastructures/clips/animation_clip.ts index 00e4662670..59f189436f 100644 --- a/app/pages/PageEnigma/datastructures/clips/animation_clip.ts +++ b/app/pages/PageEnigma/datastructures/clips/animation_clip.ts @@ -129,7 +129,14 @@ export class AnimationClip { async _get_clip() { if (this.animation_clip == null && this.mixer !== null) { - this.animation_clip = await this._load_animation(); + console.log(this.media_id) + if(this.media_id === "SelfClip") { + const rootObject = this.mixer?.getRoot(); + if(rootObject) + this.animation_clip = (rootObject as THREE.Object3D).animations[0]; + } else { + this.animation_clip = await this._load_animation(); + } } return this.animation_clip; } diff --git a/app/pages/PageEnigma/proxy/storyteller_proxy_timeline.ts b/app/pages/PageEnigma/proxy/storyteller_proxy_timeline.ts index 5991804c47..7426a93da9 100644 --- a/app/pages/PageEnigma/proxy/storyteller_proxy_timeline.ts +++ b/app/pages/PageEnigma/proxy/storyteller_proxy_timeline.ts @@ -89,7 +89,7 @@ export class StoryTellerProxyTimeline { element.start_offset, element.ending_offset, element.keyframe_offset, - element.media_file_type + element.media_file_type, ); new_clips.push(clip); }