added camera object and camera view.

app/pages/PageEnigma/comps/PreviewEngineCamera/index.tsx

@@ -23,11 +23,7 @@ export const PreviewEngineCamera = ()=>{
         </div>
         <div className="relative rounded-lg border border-white box overflow-hidden">
           
-          <img
-            //shoot that datat from engine context to this image
-            className="aspect-video max-h-40" 
-            src="/resources/uiAssets/video_player_placeholder.gif"
-          />
+          <canvas className="aspect-video max-h-40" id="camera-view"></canvas>
           <div className="absolute w-full h-full top-0 left-0">
             <LoadingDotsTyping isShowing={showLoader}/>
           </div>

app/pages/PageEnigma/comps/ViewSideBySide/index.tsx

@@ -18,11 +18,7 @@ export const ViewSideBySide = ()=>{
           <label>Raw Preview</label>
         </div>
         <div className="relative">
-          <img
-            //shoot that datat from engine context to this image
-            className="aspect-video max-h-150" 
-            src="/resources/uiAssets/video_player_placeholder.gif"
-          />
+        <video className="aspect-video max-h-150 border" id="raw-preview"></video>
         </div>
       </div>
 
@@ -31,11 +27,7 @@ export const ViewSideBySide = ()=>{
           <label>Stylized Preview</label>
         </div>
         <div className="relative">
-          <img
-            //shoot that datat from engine context to this image
-            className="aspect-video max-h-150" 
-            src="/resources/uiAssets/video_player_placeholder.gif"
-          />
+        <video className="aspect-video max-h-150 border" id="stylized-preview"></video>
         </div>
       </div>
       <div className="absolute top-0 left-0 w-full h-full">

app/pages/PageEnigma/js/editor.ts

@@ -45,8 +45,10 @@ class Editor {
   camera: any;
   render_camera: any;
   renderer: THREE.WebGLRenderer | undefined;
+  rawRenderer: THREE.WebGLRenderer | undefined;
   clock: THREE.Clock | undefined;
   canvReference: any;
+  canvasRenderCamReference: any;
   composer: EffectComposer | undefined;
   effectFXAA: EffectComposer | undefined;
   outlinePass: OutlinePass | undefined;
@@ -120,6 +122,7 @@ class Editor {
     this.camera;
     this.render_camera;
     this.renderer;
+    this.rawRenderer;
     this.clock;
     this.canvReference = null;
     this.cam_obj;
@@ -165,6 +168,8 @@ class Editor {
     this.render_width = 1280;
     this.render_height = 720;
 
+    this.canvasRenderCamReference;
+
     this.audio_engine = new AudioEngine();
     this.transform_engine = new TransformEngine(this.version);
     this.lipsync_engine = new LipSyncEngine();
@@ -205,16 +210,18 @@ class Editor {
 
     // Gets the canvas.
     this.canvReference = document.getElementById("video-scene");
+    this.canvasRenderCamReference = document.getElementById("camera-view");
+
     // Base width and height.
     let width = this.canvReference.width;
     let height = this.canvReference.height;
     // Sets up camera and base position.
-    this.camera = new THREE.PerspectiveCamera(70, width / height, 0.1, 50);
+    this.camera = new THREE.PerspectiveCamera(70, width / height, 0.15, 30);
     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);
+    this.render_camera = new THREE.PerspectiveCamera(70, width / height, 0.15, 30);
 
     // Base WebGL render and clock for delta time.
     this.renderer = new THREE.WebGLRenderer({
@@ -223,6 +230,12 @@ class Editor {
       preserveDrawingBuffer: true,
     });
 
+    this.rawRenderer = new THREE.WebGLRenderer({
+      antialias: false,
+      canvas: this.canvasRenderCamReference,
+      preserveDrawingBuffer: true,
+    });
+
     this.renderer.shadowMap.enabled = true;
     this.clock = new THREE.Clock();
     // Resizes the renderer.
@@ -271,11 +284,6 @@ class Editor {
     this.renderer.domElement.addEventListener("mouseup", this.onMouseUp.bind(this), false);
     this.renderer.domElement.addEventListener("onContextMenu", this.onContextMenu.bind(this), false);
 
-    this.cam_obj = this.activeScene.get_object_by_name("::CAM::");
-    if (this.cam_obj) {
-      this.addTransformClipBase("Camera Object", "camera", this.cam_obj, 0, 150)
-    }
-
     // saving state of the scene
     this.current_scene_media_token = null;
     this.current_scene_glb_media_token = null;
@@ -301,6 +309,8 @@ class Editor {
       this.addTransformClipBase("Camera Object", "camera", this.cam_obj, 0, 150);
     }
 
+    console.log(this.cam_obj);
+
     this.dispatchAppUiState({
       type: APPUI_ACTION_TYPES.UPDATE_EDITOR_LOADINGBAR,
       payload: {
@@ -483,6 +493,7 @@ class Editor {
 
   switchCameraView() {
     this.camera_person_mode = !this.camera_person_mode;
+    console.log("camera")
     if (this.cam_obj) {
       if (this.camera_person_mode) {
         this.last_cam_pos.copy(this.camera.position);
@@ -723,6 +734,14 @@ class Editor {
 
   // Basicly Unity 3D's update loop.
   updateLoop(time: number) {
+
+    if(this.cam_obj == undefined){
+      this.cam_obj = this.activeScene.get_object_by_name("::CAM::");
+      if (this.cam_obj) {
+        this.addTransformClipBase("Camera Object", "camera", this.cam_obj, 0, 150)
+      }
+    }
+
     // Updates debug stats.
     if (this.stats != null) {
       this.stats.update();
@@ -977,8 +996,9 @@ class Editor {
 
   // Render the scene to the camera.
   renderScene() {
-    if (this.composer != null && !this.rendering) {
+    if (this.composer != null && !this.rendering && this.rawRenderer) {
       this.composer.render();
+      this.rawRenderer.render(this.activeScene.scene, this.render_camera);
     } else if (this.renderer && this.render_camera) {
       this.renderer.setSize(this.render_width, this.render_height);
       this.renderer.render(this.activeScene.scene, this.render_camera);
@@ -1088,6 +1108,7 @@ class Editor {
     this.raycaster.setFromCamera(this.mouse, this.camera);
     let interactable: any[] = [];
     this.activeScene.scene.children.forEach((child: THREE.Object3D) => {
+      console.log(child);
       if (child.name != "") {
         if (child.type == "Mesh" || child.type == "Object3D") {
           interactable.push(child);

app/pages/PageEnigma/js/scene.ts

@@ -64,7 +64,7 @@ class Scene {
         let obj = new THREE.Mesh(geometry, material);
         obj.position.copy(pos);
         obj.receiveShadow = visable;
-        if(this.hot_items != undefined){
+        if (this.hot_items != undefined) {
             this.hot_items.push(obj);
         }
         this.scene.add(obj);
@@ -75,15 +75,17 @@ class Scene {
     }
 
     _create_camera_obj() {
-        let cam_obj: THREE.Object3D = new THREE.Object3D();
-        cam_obj.userData["name"] = "::CAM::";
-        cam_obj.name = "::CAM::";
-        this.scene.add(cam_obj);
+        this.load_glb("/resources/models/camera/camera.glb", false).then((cam_obj) => {
+            cam_obj.userData["name"] = "::CAM::";
+            cam_obj.name = "::CAM::";
+            this.scene.add(cam_obj);
+        });
     }
 
-    renderMode(enabled:boolean=true) {
-        if(this.gridHelper == undefined) { return; }
-        if(enabled) {
+
+    renderMode(enabled: boolean = true) {
+        if (this.gridHelper == undefined) { return; }
+        if (enabled) {
             this._disable_skybox();
             this.scene.remove(this.gridHelper);
         } else {
@@ -92,7 +94,7 @@ class Scene {
         }
     }
 
-    async load_glb(filepath: string) { //: Promise<THREE.Object3D> {
+    async load_glb(filepath: string, auto_add: boolean = true): Promise<THREE.Object3D> { //: Promise<THREE.Object3D> {
         return new Promise((resolve) => {
             let glbLoader = new GLTFLoader();
             glbLoader.load(filepath, (glb) => {
@@ -106,7 +108,12 @@ class Scene {
                             c.material.transparent = false;
                         }
                     });
-                    this.scene.add(child);
+                    if (child.type == "Group") {
+                        if (auto_add) { this.scene.add(child.children[0]); }
+                        resolve(child.children[0]);
+                        return;
+                    }
+                    if (auto_add) { this.scene.add(child); }
                     resolve(child);
                 });
             });