diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/Editor/editor.ts b/frontend/apps/editor3d/app/src/pages/PageEnigma/Editor/editor.ts index d4211f7ce6..891a314e04 100644 --- a/frontend/apps/editor3d/app/src/pages/PageEnigma/Editor/editor.ts +++ b/frontend/apps/editor3d/app/src/pages/PageEnigma/Editor/editor.ts @@ -197,6 +197,10 @@ class Editor { processingHasFailed: boolean; stats: Stats; + // Allows us to cancel the queued render + private renderEventToken: number; + private shouldRender: boolean; + constructor() { this.processingHasFailed = false; console.log( @@ -256,6 +260,8 @@ class Editor { this.lastFrameTime = 0; this.last_selected_sum = 0; this.selectedCanvas = false; + this.renderEventToken = -1; + this.shouldRender = true; // Audio Engine Test. this.render_camera_aspect_ratio = CameraAspectRatio.HORIZONTAL_3_2; @@ -645,7 +651,7 @@ class Editor { // Creates the main update loop. //this.renderer.setAnimationLoop(this.updateLoop.bind(this)); - this.updateLoop(); + this.startRenderLoop(); if (!this.utils.isEmpty(sceneToken)) { this.loadScene(sceneToken); @@ -1155,10 +1161,10 @@ class Editor { : this.render_camera_aspect_ratio === meraAspectRatio.VERTICAL_9_16 ? 576 : this.render_camera_aspect_ratio === - meraAspectRatio.HORIZONTAL_3_2 + meraAspectRatio.HORIZONTAL_3_2 ? 900 : this.render_camera_aspect_ratio === - meraAspectRatio.VERTICAL_2_3 + meraAspectRatio.VERTICAL_2_3 ? 600 : 1000; const height = @@ -1167,10 +1173,10 @@ class Editor { : this.render_camera_aspect_ratio === meraAspectRatio.VERTICAL_9_16 ? 1024 : this.render_camera_aspect_ratio === - meraAspectRatio.HORIZONTAL_3_2 + meraAspectRatio.HORIZONTAL_3_2 ? 600 : this.render_camera_aspect_ratio === - meraAspectRatio.VERTICAL_2_3 + meraAspectRatio.VERTICAL_2_3 ? 900 : 1000; @@ -1377,10 +1383,15 @@ class Editor { } // Basicly Unity 3D's update loop. - async updateLoop() { + updateLoop() { + if (!this.shouldRender) { + console.debug("Stopping 3D render loop"); + return; + } + // Performance improvement: Handle frame cap // Request the next render already - this is necessary so the loop doesn't stop if the fps cap is hit - requestAnimationFrame(this.updateLoop.bind(this)); + this.renderEventToken = requestAnimationFrame(this.updateLoop.bind(this)); const frameTime = performance.now(); if (frameTime - this.lastFrameTime < 1000 / this.cap_fps) { return; @@ -1390,6 +1401,23 @@ class Editor { this.renderSingleFrame(); } + startRenderLoop() { + if (this.shouldRender) { + console.warn("Render flag is already true"); + } + this.shouldRender = true; + this.updateLoop(); + } + + stopRenderLoop() { + this.shouldRender = false; + + if (this.renderEventToken) { + cancelAnimationFrame(this.renderEventToken); + this.renderEventToken = -1; + } + } + change_mode(type: "translate" | "rotate" | "scale") { if (this.control == undefined) { return;