diff --git a/app/pages/PageEnigma/js/editor.ts b/app/pages/PageEnigma/js/editor.ts index 1fdc26dcb3..775c82b33d 100644 --- a/app/pages/PageEnigma/js/editor.ts +++ b/app/pages/PageEnigma/js/editor.ts @@ -330,8 +330,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; @@ -354,6 +352,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(); + if (this.isEmpty(sceneToken) == false) { this.loadScene(sceneToken) } @@ -711,9 +714,11 @@ 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.record_stream = this.rawRenderer.domElement.captureStream(60); // Capture at 30 FPS + this.rawRenderer.setSize(1024, 576); + this.render_camera.aspect = 1024 / 576; + 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) { @@ -737,7 +742,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::"); } @@ -784,7 +793,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(); } @@ -897,9 +906,6 @@ class Editor { //let video_fps = Math.floor(this.frames * (this.cap_fps / this.timeline.timeline_limit)); //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); @@ -912,16 +918,17 @@ 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", + "scale=1024:576", "-c:v", "libx264", "-preset", "fast", - "-crf", + "-crf", "23", "-c:a", "aac", @@ -996,6 +1003,13 @@ class Editor { console.log(result); this.recorder = undefined; + 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() { diff --git a/app/pages/PageEnigma/js/timeline.ts b/app/pages/PageEnigma/js/timeline.ts index 619d0a31c1..255a2ca760 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, @@ -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 += 1; // 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. );