added base for multi rendering camera.

app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx

@@ -26,8 +26,7 @@ export const ControlsTopButtons = () => {
     editorEngine?.start_playback();
   };
   const handleButtonLoad = () => {
-
-
+    editorEngine?.renderVideo();
   };
   const handleButtonRender = () => {
     editorEngine?.take_timeline_cam_clip();
@@ -95,7 +94,7 @@ export const ControlsTopButtons = () => {
         </Button>
       </div>
       <div className="flex gap-2">
-        <Button onClick={handleButtonLoad}>Load</Button>
+        <Button onClick={handleButtonLoad}>Render Video</Button>
         <Button onClick={handleButtonRender}>Take Frame</Button>
         <Button onClick={handleButtonPlay}>Play</Button>
       </div>

app/pages/PageEnigma/js/editor.ts

@@ -42,6 +42,7 @@ class Editor {
   version: number;
   activeScene: Scene;
   camera: any;
+  render_camera: any;
   renderer: THREE.WebGLRenderer | undefined;
   clock: THREE.Clock | undefined;
   canvReference: any;
@@ -91,7 +92,9 @@ class Editor {
 
   can_initialize: boolean;
   dispatchAppUiState: any; // todo figure out the type
-  
+  camera_person_mode: boolean;
+  render_width: number;
+  render_height: number;
 
   // Default params.
   constructor() {
@@ -115,6 +118,7 @@ class Editor {
     this.activeScene = new Scene("" + this.version);
     this.activeScene.initialize();
     this.camera;
+    this.render_camera;
     this.renderer;
     this.clock;
     this.canvReference = null;
@@ -158,6 +162,9 @@ class Editor {
     this.max_length = 10;
     // Audio Engine Test.
 
+    this.render_width = 1280;
+    this.render_height = 720;
+
     this.audio_engine = new AudioEngine();
     this.transform_engine = new TransformEngine(this.version);
     this.lipsync_engine = new LipSyncEngine();
@@ -209,6 +216,9 @@ class Editor {
     this.camera.position.z = 3;
     this.camera.position.y = 3;
     this.camera.position.x = -3;
+
+    this.render_camera = new THREE.PerspectiveCamera(70, width / height, 0.1, 50);
+
     // Base WebGL render and clock for delta time.
     this.renderer = new THREE.WebGLRenderer({
       antialias: true,
@@ -582,6 +592,7 @@ class Editor {
   render_mode() {
     this.rendering = !this.rendering;
     this.activeScene.render_mode(this.rendering);
+    console.log("works.")
 
     //if (this.rendering) {
     //    this._remove_post_processing()
@@ -590,6 +601,12 @@ class Editor {
     //}
   }
 
+  renderVideo() {
+    this.rendering = true;
+    this.activeScene.render_mode(this.rendering);
+    console.log("Rendering...");
+  }
+
   togglePlay() {
     this.playback = !this.playback;
     this.playback_location = 0;
@@ -660,6 +677,11 @@ class Editor {
       }
     }
 
+    if(this.render_camera && this.cam_obj) {
+      this.render_camera.position.copy(this.cam_obj.position);
+      this.render_camera.rotation.copy(this.cam_obj.rotation);
+    }
+
     this.timeline.update(delta_time);
 
     this.render_scene();
@@ -773,10 +795,10 @@ class Editor {
 
   // Render the scene to the camera.
   render_scene() {
-    if (this.composer != null) {
+    if (this.composer != null && !this.timeline.isPlaying) {
       this.composer.render();
-    } else if (this.renderer && this.camera) {
-      this.renderer.render(this.activeScene.scene, this.camera);
+    } else if (this.renderer && this.render_camera) {
+      this.renderer.render(this.activeScene.scene, this.render_camera);
     } else {
       console.error("Could not render to canvas no render or composer!");
     }
@@ -812,6 +834,12 @@ class Editor {
     if (this.composer != null) {
       this.composer.setSize(width, height);
     }
+
+    if (this.render_camera == undefined) { return; }
+
+    //this.renderer.setSize(this.render_width, this.render_height);
+    this.render_camera.aspect = this.render_width / this.render_height;
+    this.render_camera.updateProjectionMatrix();
   }
 
   onContextMenu(event: any) {