From a725024fbf317ab3d2cdda172622216640fc1afc Mon Sep 17 00:00:00 2001 From: Quicksticks-oss Date: Fri, 12 Apr 2024 15:54:59 -0400 Subject: [PATCH 1/6] fixed fps with playback in timeline. --- app/pages/PageEnigma/js/editor.ts | 18 +++++++++++------- app/pages/PageEnigma/js/timeline.ts | 7 +++---- 2 files changed, 14 insertions(+), 11 deletions(-) diff --git a/app/pages/PageEnigma/js/editor.ts b/app/pages/PageEnigma/js/editor.ts index d0842bf5ea..1b17520a0c 100644 --- a/app/pages/PageEnigma/js/editor.ts +++ b/app/pages/PageEnigma/js/editor.ts @@ -324,8 +324,6 @@ class Editor { this.activeScene.scene.add(this.control); // Resets canvas size. this.onWindowResize(); - // Creates the main update loop. - this.renderer.setAnimationLoop(this.updateLoop.bind(this)); this.timeline.scene = this.activeScene; @@ -348,6 +346,11 @@ class Editor { this.cam_obj = this.activeScene.get_object_by_name("::CAM::"); + // Creates the main update loop. + //this.renderer.setAnimationLoop(this.updateLoop.bind(this)); + + this.updateLoop(); + this.dispatchAppUiState({ type: APPUI_ACTION_TYPES.UPDATE_EDITOR_LOADINGBAR, payload: { @@ -703,7 +706,11 @@ class Editor { } // Basicly Unity 3D's update loop. - async updateLoop(time: number) { + async updateLoop() { + setTimeout( () => { + requestAnimationFrame( this.updateLoop.bind(this) ); + }, 1000 / this.cap_fps ); + if (this.cam_obj == undefined) { this.cam_obj = this.activeScene.get_object_by_name("::CAM::"); } @@ -750,7 +757,7 @@ class Editor { } if (this.timeline.is_playing) { - const changeView = await this.timeline.update(delta_time, this.rendering); + const changeView = await this.timeline.update(this.rendering); if (changeView) { this.switchCameraView(); } @@ -854,9 +861,6 @@ class Editor { //console.log("Video FPS:", video_fps) this.rendering = false; - console.log(this.frame_buffer); - - const videoBlob = new Blob(this.frame_buffer, { type: 'video/webm' }); const videoURL = URL.createObjectURL(videoBlob); //const arrayBuffer = await videoBlob.arrayBuffer(); diff --git a/app/pages/PageEnigma/js/timeline.ts b/app/pages/PageEnigma/js/timeline.ts index 619d0a31c1..2b514385ef 100644 --- a/app/pages/PageEnigma/js/timeline.ts +++ b/app/pages/PageEnigma/js/timeline.ts @@ -404,7 +404,6 @@ export class TimeLine { public async deletePlayableClip(clip_uuid: string): Promise {} public async scrub(data: any): Promise { - console.log('Scrubby Scrubby'); if (this.is_playing) { return; } @@ -471,11 +470,11 @@ export class TimeLine { } // called by the editor update loop on each frame - public async update(delta: number, isRendering = false): Promise { + public async update(isRendering = false): Promise { //if (this.is_playing === false) return; // start and stop this.timeline_limit = this.getEndPoint(); if (this.is_playing) { - this.current_time += 1; + this.current_time += 60/this.timeline_limit; // This fixes fps issues at 60. this.pushEvent(fromEngineActions.UPDATE_TIME, { currentTime: this.current_time, }); @@ -540,7 +539,7 @@ export class TimeLine { await this.animation_engine.clips[ object.uuid + element.media_id ].play(object); - let fps = 120; + let fps = 60; this.animation_engine.clips[object.uuid + element.media_id].step( this.scrubber_frame_position / fps, // Double FPS for best result. ); From d861e0704029002eaca82948a0a17b2e51369f36 Mon Sep 17 00:00:00 2001 From: Quicksticks-oss Date: Fri, 12 Apr 2024 16:59:25 -0400 Subject: [PATCH 2/6] Fixed with push event. --- app/pages/PageEnigma/js/editor.ts | 19 +++++++++++++++++++ app/pages/PageEnigma/js/timeline.ts | 6 ++++-- 2 files changed, 23 insertions(+), 2 deletions(-) diff --git a/app/pages/PageEnigma/js/editor.ts b/app/pages/PageEnigma/js/editor.ts index 2024ac1730..d18775148d 100644 --- a/app/pages/PageEnigma/js/editor.ts +++ b/app/pages/PageEnigma/js/editor.ts @@ -931,9 +931,28 @@ class Editor { // Write the Uint8Array to the FFmpeg file system ffmpeg.FS('writeFile', 'input.webm', await fetchFile(videoURL)); + await ffmpeg.run( "-i", "input.webm", + "-vf", + "scale=516:290", + "-c:v", + "libx264", + "-preset", + "fast", + "-crf", + "23", + "-c:a", + "aac", + "-b:a", + "192k", + "input.mp4", + ); + + await ffmpeg.run( + "-i", + "input.mp4", "-f", "lavfi", "-i", diff --git a/app/pages/PageEnigma/js/timeline.ts b/app/pages/PageEnigma/js/timeline.ts index 2b514385ef..d39cbc9c2a 100644 --- a/app/pages/PageEnigma/js/timeline.ts +++ b/app/pages/PageEnigma/js/timeline.ts @@ -94,7 +94,7 @@ export class TimeLine { } public async pushEvent(action: fromEngineActions, data: any) { - this.current_time += 1; + //this.current_time += 0.75; Queue.publish({ queueName: QueueNames.FROM_ENGINE, action: fromEngineActions.UPDATE_TIME, @@ -473,12 +473,14 @@ export class TimeLine { public async update(isRendering = false): Promise { //if (this.is_playing === false) return; // start and stop this.timeline_limit = this.getEndPoint(); + console.log(this.is_playing); if (this.is_playing) { - this.current_time += 60/this.timeline_limit; // This fixes fps issues at 60. + this.current_time += 1; // This fixes fps issues at 60. this.pushEvent(fromEngineActions.UPDATE_TIME, { currentTime: this.current_time, }); this.scrubber_frame_position = this.current_time; + console.log(this.current_time, (120/this.timeline_limit)/4) } if (this.scrubber_frame_position <= 0) { From c802be0b634f0c83d5dcfe430c3ccdf72eaf50c0 Mon Sep 17 00:00:00 2001 From: Quicksticks-oss Date: Fri, 12 Apr 2024 16:59:48 -0400 Subject: [PATCH 3/6] removed line. --- app/pages/PageEnigma/js/timeline.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/app/pages/PageEnigma/js/timeline.ts b/app/pages/PageEnigma/js/timeline.ts index d39cbc9c2a..5dcf4414cd 100644 --- a/app/pages/PageEnigma/js/timeline.ts +++ b/app/pages/PageEnigma/js/timeline.ts @@ -480,7 +480,6 @@ export class TimeLine { currentTime: this.current_time, }); this.scrubber_frame_position = this.current_time; - console.log(this.current_time, (120/this.timeline_limit)/4) } if (this.scrubber_frame_position <= 0) { From 58c1217867b80264302be95bc1f4ebf62621699a Mon Sep 17 00:00:00 2001 From: Quicksticks-oss Date: Fri, 12 Apr 2024 17:11:19 -0400 Subject: [PATCH 4/6] clean up. --- app/pages/PageEnigma/js/timeline.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/app/pages/PageEnigma/js/timeline.ts b/app/pages/PageEnigma/js/timeline.ts index 5dcf4414cd..255a2ca760 100644 --- a/app/pages/PageEnigma/js/timeline.ts +++ b/app/pages/PageEnigma/js/timeline.ts @@ -473,7 +473,6 @@ export class TimeLine { public async update(isRendering = false): Promise { //if (this.is_playing === false) return; // start and stop this.timeline_limit = this.getEndPoint(); - console.log(this.is_playing); if (this.is_playing) { this.current_time += 1; // This fixes fps issues at 60. this.pushEvent(fromEngineActions.UPDATE_TIME, { From e223e1701c7521f67562549def1d43f91d98daa1 Mon Sep 17 00:00:00 2001 From: Quicksticks-oss Date: Fri, 12 Apr 2024 20:18:59 -0400 Subject: [PATCH 5/6] fixed resolution. --- app/pages/PageEnigma/js/editor.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/app/pages/PageEnigma/js/editor.ts b/app/pages/PageEnigma/js/editor.ts index e5eeebba32..372348a415 100644 --- a/app/pages/PageEnigma/js/editor.ts +++ b/app/pages/PageEnigma/js/editor.ts @@ -714,8 +714,10 @@ class Editor { console.error("Could not render to canvas no render or composer!"); } - if (this.rendering && this.rawRenderer && this.clock) { + if (this.rendering && this.rawRenderer && this.clock && this.renderer) { if (this.recorder == undefined) { + this.rawRenderer.setSize(1024, 576); + this.render_camera.aspect = 1024 / 576; this.record_stream = this.rawRenderer.domElement.captureStream(60); // Capture at 30 FPS this.recorder = new MediaRecorder(this.record_stream, { mimeType: 'video/webm' }); this.recorder.ondataavailable = (event) => { @@ -921,7 +923,7 @@ class Editor { "-i", "input.webm", "-vf", - "scale=516:290", + "scale=1024:576", "-c:v", "libx264", "-preset", @@ -1001,6 +1003,7 @@ class Editor { console.log(result); this.recorder = undefined; + this.onWindowResize(); } switchPreview() { From b1530eb49d7dc1c1505223563b3acde949a7de6a Mon Sep 17 00:00:00 2001 From: Quicksticks-oss Date: Fri, 12 Apr 2024 21:01:00 -0400 Subject: [PATCH 6/6] fixed resolution. --- app/pages/PageEnigma/js/editor.ts | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/app/pages/PageEnigma/js/editor.ts b/app/pages/PageEnigma/js/editor.ts index 372348a415..775c82b33d 100644 --- a/app/pages/PageEnigma/js/editor.ts +++ b/app/pages/PageEnigma/js/editor.ts @@ -718,7 +718,7 @@ class Editor { if (this.recorder == undefined) { this.rawRenderer.setSize(1024, 576); this.render_camera.aspect = 1024 / 576; - this.record_stream = this.rawRenderer.domElement.captureStream(60); // Capture at 30 FPS + this.record_stream = this.rawRenderer.domElement.captureStream(60); // Capture at 60 FPS this.recorder = new MediaRecorder(this.record_stream, { mimeType: 'video/webm' }); this.recorder.ondataavailable = (event) => { if (event.data.size > 0) { @@ -743,9 +743,9 @@ class Editor { // Basicly Unity 3D's update loop. async updateLoop() { - setTimeout( () => { - requestAnimationFrame( this.updateLoop.bind(this) ); - }, 1000 / this.cap_fps ); + setTimeout(() => { + requestAnimationFrame(this.updateLoop.bind(this)); + }, 1000 / this.cap_fps); if (this.cam_obj == undefined) { this.cam_obj = this.activeScene.get_object_by_name("::CAM::"); @@ -928,7 +928,7 @@ class Editor { "libx264", "-preset", "fast", - "-crf", + "-crf", "23", "-c:a", "aac", @@ -1003,7 +1003,13 @@ class Editor { console.log(result); this.recorder = undefined; - this.onWindowResize(); + if (this.rawRenderer) { + const stylePreview: HTMLVideoElement | null = document.getElementById( + "styled-preview", + ) as HTMLVideoElement; + this.rawRenderer.setSize(stylePreview.width, stylePreview.height); + this.render_camera.aspect = stylePreview.width / stylePreview.height; + } } switchPreview() {