wip(camera): fix ortho camera

samples/base/Sample_CameraType.ts

@@ -0,0 +1,78 @@
+import { Engine3D, Scene3D, AtmosphericComponent, HoverCameraController, Object3D, MeshRenderer, BoxGeometry, LitMaterial, DirectLight, View3D, Camera3D, GridObject, Frustum, OrbitController, Vector3 } from "@orillusion/core";
+import { Stats } from "@orillusion/stats";
+import * as dat from "dat.gui"
+
+// initializa engine
+await Engine3D.init();
+
+// create new scene as root node
+let scene3D: Scene3D = new Scene3D();
+
+// add performance stats
+scene3D.addComponent(Stats)
+
+// add an Atmospheric sky enviroment
+let sky = scene3D.addComponent(AtmosphericComponent);
+sky.sunY = 0.6;
+
+// create camera
+let cameraObj: Object3D = new Object3D();
+let camera = cameraObj.addComponent(Camera3D);
+// adjust camera view
+camera.perspective(45, Engine3D.aspect, 0.1, 1000.0);
+camera.lookAt(new Vector3(0, 10, 10), Vector3.ZERO, Vector3.UP)
+// set camera controller
+let controller = cameraObj.addComponent(OrbitController);
+// add camera node
+scene3D.addChild(cameraObj);
+
+// create light obj
+let light: Object3D = new Object3D();
+// adjust light rotation
+light.rotationX = 45;
+light.rotationY = 30;
+// add direct light component
+let dirLight: DirectLight = light.addComponent(DirectLight);
+dirLight.intensity = 3;
+// add light object to scene
+scene3D.addChild(light);
+
+// create a box
+const box: Object3D = new Object3D();
+// add MeshRenderer
+let mr: MeshRenderer = box.addComponent(MeshRenderer);
+// set geometry
+mr.geometry = new BoxGeometry(1, 1, 1);
+// set material
+mr.material = new LitMaterial();
+// set rotation
+box.rotationY = 0;
+box.y = 1
+// add object
+scene3D.addChild(box);
+
+// add a grid
+let grid = new GridObject(1000, 100);
+scene3D.addChild(grid)
+
+// create a view with target scene and camera
+let view = new View3D();
+view.scene = scene3D;
+view.camera = camera;
+// start render
+Engine3D.startRenderView(view);
+
+// add debug GUI
+let gui = new dat.GUI();
+let f = gui.addFolder('Camera')
+let buttons = {
+    'ortho': () => camera.ortho(camera.frustumSize, camera.near, camera.far),
+    'perspective': () => camera.perspective(camera.fov, camera.aspect, camera.near, camera.far)
+}
+f.add(camera, 'near', -100, 100).onChange(()=> camera.type === 1 ? buttons.perspective() : buttons.ortho())
+f.add(camera, 'far', 0, 1000).onChange(()=> camera.type === 1 ? buttons.perspective() : buttons.ortho())
+f.add(buttons, 'perspective')
+f.add(camera, 'fov', 1, 179).onChange(buttons.perspective)
+f.add(buttons, 'ortho')
+f.add(camera, 'frustumSize', 1, 1000).listen().onChange(buttons.ortho)
+f.open()

src/Engine3D.ts

@@ -376,30 +376,30 @@ export class Engine3D {
         return;
     }
 
-    /**
-     * set render view and start renderer
-     * @param view 
-     * @returns 
-     */
-    public static startRenderView(view: View3D) {
-        this.renderJobs ||= new Map<View3D, RendererJob>();
-        this.views = [view];
+    private static startRenderJob(view: View3D){
         let renderJob = new ForwardRenderJob(view);
         this.renderJobs.set(view, renderJob);
-        let presentationSize = webGPUContext.presentationSize;
-        // RTResourceMap.createRTTexture(RTResourceConfig.colorBufferTex_NAME, presentationSize[0], presentationSize[1], GPUTextureFormat.rgba16float, false);
 
         if (this.setting.pick.mode == `pixel`) {
             let postProcessing = view.scene.getOrAddComponent(PostProcessingComponent);
             postProcessing.addPost(FXAAPost);
-
-        } else {
         }
 
         if (this.setting.pick.mode == `pixel` || this.setting.pick.mode == `bound`) {
             view.enablePick = true;
         }
+        return renderJob;
+    }
 
+    /**
+     * set render view and start renderer
+     * @param view 
+     * @returns 
+     */
+    public static startRenderView(view: View3D) {
+        this.renderJobs ||= new Map<View3D, RendererJob>();
+        this.views = [view];
+        let renderJob = this.startRenderJob(view);
         this.resume();
         return renderJob;
     }
@@ -414,21 +414,7 @@ export class Engine3D {
         this.renderJobs ||= new Map<View3D, RendererJob>();
         this.views = views;
         for (let i = 0; i < views.length; i++) {
-            const view = views[i];
-            let renderJob = new ForwardRenderJob(view);
-            this.renderJobs.set(view, renderJob);
-            let presentationSize = webGPUContext.presentationSize;
-
-            if (this.setting.pick.mode == `pixel`) {
-                let postProcessing = view.scene.addComponent(PostProcessingComponent);
-                postProcessing.addPost(FXAAPost);
-            } else {
-                RTResourceMap.createRTTexture(RTResourceConfig.colorBufferTex_NAME, presentationSize[0], presentationSize[1], GPUTextureFormat.rgba16float, false);
-            }
-
-            if (this.setting.pick.mode == `pixel` || this.setting.pick.mode == `bound`) {
-                view.enablePick = true;
-            }
+            this.startRenderJob(views[i])
         }
         this.resume();
     }
@@ -446,7 +432,7 @@ export class Engine3D {
      * Pause the engine render
      */
     public static pause() {
-        if (this._requestAnimationFrameID != 0) {
+        if (this._requestAnimationFrameID !== 0) {
             cancelAnimationFrame(this._requestAnimationFrameID);
             this._requestAnimationFrameID = 0;
         }
@@ -463,23 +449,22 @@ export class Engine3D {
      * start engine render
      * @internal
      */
-    private static render(time) {
+    private static async render(time: number) {
         this._deltaTime = time - this._time;
         this._time = time;
-
         if (this._frameRateValue > 0) {
             this._frameTimeCount += this._deltaTime * 0.001;
             if (this._frameTimeCount >= this._frameRateValue * 0.95) {
                 this._frameTimeCount = 0;
-                this.updateFrame(time);
+                await this.updateFrame(time);
             }
         } else {
-            this.updateFrame(time);
+            await this.updateFrame(time);
         }
         this.resume();
     }
 
-    private static updateFrame(time: number) {
+    private static async updateFrame(time: number) {
         Time.delta = time - Time.time;
         Time.time = time;
         Time.frame += 1;
@@ -493,10 +478,10 @@ export class Engine3D {
             view.scene.waitUpdate();
             let [w, h] = webGPUContext.presentationSize;
             view.camera.viewPort.setTo(0, 0, w, h);
-            view.camera.resetPerspective(webGPUContext.aspect);
         }
 
-        if (this._beforeRender) this._beforeRender();
+        if (this._beforeRender) 
+            await this._beforeRender();
 
         /****** auto start with component list *****/
         // ComponentCollect.startComponents();
@@ -555,14 +540,10 @@ export class Engine3D {
         }
 
         if (this._renderLoop) {
-            this._renderLoop();
+            await this._renderLoop();
         }
 
-        // console.log("useCount", Matrix4.useCount);
-        // let t = performance.now();
         WasmMatrix.updateAllContinueTransform(0, Matrix4.useCount, 16);
-        // this.divB.innerText = "wasm:" + (performance.now() - t).toFixed(2);
-
         /****** auto update global matrix share buffer write to gpu *****/
         let globalMatrixBindGroup = GlobalBindGroup.modelMatrixBindGroup;
         globalMatrixBindGroup.writeBuffer(Matrix4.useCount * 16);
@@ -587,8 +568,7 @@ export class Engine3D {
             }
         }
 
-        if (this._lateRender) this._lateRender();
+        if (this._lateRender) 
+            await this._lateRender();
     }
-
-
 }

src/components/controller/HoverCameraController.ts

@@ -284,7 +284,6 @@ export class HoverCameraController extends ComponentBase {
         this._tempPos.add(this._currentPos.transform.localPosition, this._tempPos);
 
         this.transform.lookAt(this._tempPos, this._currentPos.transform.localPosition, Vector3.UP);
-        this.camera.lookTarget.copy(this._currentPos.transform.localPosition);
     }
 
     /**

src/components/controller/OrbitController.ts

@@ -5,6 +5,7 @@ import { Vector3 } from '../../math/Vector3';
 import { Vector3Ex } from '../../util/Vector3Ex';
 import { clamp } from '../../math/MathUtil';
 import { PointerEvent3D } from '../../event/eventConst/PointerEvent3D';
+import { CameraType } from '../../core/CameraType';
 
 /**
  * Orbit Camera Controller
@@ -211,6 +212,12 @@ export class OrbitController extends ComponentBase {
         this._spherical.radius += e.deltaY * this.zoomFactor;
         this._spherical.radius = clamp(this._spherical.radius, this.minDistance, this.maxDistance);
         this.updateCamera();
+
+        // zoom ortho frustumSize
+        if(this._camera.type === CameraType.ortho){
+            this._camera.frustumSize += e.deltaY * this.zoomFactor
+            this._camera.updateProjection()
+        }
     }
     /**
      * @internal