Added orthographic camera

res/static/orthographic.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-rectangle" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#00abfb" fill="none" stroke-linecap="round" stroke-linejoin="round" id="orthographic-svg">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <rect x="3" y="5" width="18" height="14" rx="2" />
+</svg>

res/static/perspective.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-perspective" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#00abfb" fill="none" stroke-linecap="round" stroke-linejoin="round" id="perspective-svg">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path d="M6.141 4.163l12 1.714a1 1 0 0 1 .859 .99v10.266a1 1 0 0 1 -.859 .99l-12 1.714a1 1 0 0 1 -1.141 -.99v-13.694a1 1 0 0 1 1.141 -.99z" />
+</svg>

src/app_context.ts

@@ -15,6 +15,7 @@ import { OutputStyle } from './ui/elements/output';
 import { IExporter } from './exporters/base_exporter';
 import { TVoxelisers, VoxeliseParams, VoxeliserFactory } from './voxelisers/voxelisers';
 import { ExporterFactory, TExporters } from './exporters/exporters';
+import { ArcballCamera } from './camera';
 
 /* eslint-disable */
 export enum EAction {
@@ -83,6 +84,7 @@ export class AppContext {
 
         Renderer.Get.toggleIsGridEnabled();
         Renderer.Get.toggleIsAxesEnabled();
+        ArcballCamera.Get.setCameraMode('perspective');
     }
 
     public do(action: EAction) {

src/camera.ts

@@ -4,6 +4,7 @@ import { degreesToRadians } from './math';
 import { Renderer } from './renderer';
 import { SmoothVariable, SmoothVectorVariable } from './util';
 import { Vector3 } from './vector';
+import { EAppEvent, EventManager } from './event';
 
 export class ArcballCamera {
     public isUserRotating = false;
@@ -14,6 +15,8 @@ export class ArcballCamera {
     private readonly zFar: number;
     public aspect: number;
 
+    private _isPerspective: boolean = true;
+    
     private readonly _defaultDistance = 18.0;
     private readonly _defaultAzimuth = -1.0;
     private readonly _defaultElevation = 1.3;
@@ -45,6 +48,21 @@ export class ArcballCamera {
 
         this._elevation.setClamp(0.01, Math.PI - 0.01);
         this._distance.setClamp(1.0, 100.0);
+
+        this.setCameraMode('perspective');
+    }
+
+    public isPerspective() {
+        return this._isPerspective;
+    }
+
+    public isOrthographic() {
+        return !this._isPerspective;
+    }
+
+    public setCameraMode(mode: 'perspective' | 'orthographic') {
+        this._isPerspective = mode === 'perspective';
+        EventManager.Get.broadcast(EAppEvent.onCameraViewModeChanged);
     }
 
     public updateCamera() {
@@ -114,7 +132,12 @@ export class ArcballCamera {
     }
 
     public getProjectionMatrix() {
-        return m4.perspective(this.fov, this.aspect, this.zNear, this.zFar);
+        if (this._isPerspective) {
+            return m4.perspective(this.fov, this.aspect, this.zNear, this.zFar);
+        } else {
+            const zoom = this._distance.getActual() / 3.6;
+            return m4.ortho(-zoom * this.aspect, zoom * this.aspect, -zoom, zoom, -1000, 1000);
+        }
     }
 
     public getCameraMatrix() {

src/event.ts

@@ -9,6 +9,7 @@ export enum EAppEvent {
     onWireframeEnabledChanged,
     onNormalsEnabledChanged,
     onDevViewEnabledChanged,
+    onCameraViewModeChanged
 }
 /* eslint-enable */
 

src/ui/elements/toolbar_item.ts

@@ -12,6 +12,15 @@ export class ToolbarItemElement {
     private _isActive: boolean;
     private _onClick: () => void;
     
+    /**
+     * 
+     * @param iconName The name of the icon for this button
+     * @param onClick The function to call when this button is clicked
+     * @param _activeChangedEvent The name of the event to listen for to change active state
+     * @param _activeChangedDelegate The function to call when the active event has been broadcast
+     * @param _enableChangedEvent The name of the event to listen for to change enable state
+     * @param _enableChangedDelegate The function to call when the enable event has been broadcast
+     */
     public constructor(iconName: string, onClick: () => void,
         _activeChangedEvent?: EAppEvent, _activeChangedDelegate?: (...args: any[]) => boolean,
         _enableChangedEvent?: EAppEvent, _enableChangedDelegate?: (...args: any[]) => boolean,

src/ui/layout.ts

@@ -262,8 +262,23 @@ export class UI {
                 },
                 elementsOrder: ['grid', 'axes'],
             },
+            'camera': {
+                elements: {
+                    'perspective': new ToolbarItemElement('perspective', () => {
+                        ArcballCamera.Get.setCameraMode('perspective');
+                    }, EAppEvent.onCameraViewModeChanged, (...args: any[]) => {
+                        return ArcballCamera.Get.isPerspective();
+                    }),
+                    'orthographic': new ToolbarItemElement('orthographic', () => {
+                        ArcballCamera.Get.setCameraMode('orthographic');
+                    }, EAppEvent.onCameraViewModeChanged, (...args: any[]) => {
+                        return ArcballCamera.Get.isOrthographic();
+                    }),
+                },
+                elementsOrder: ['perspective', 'orthographic'],
+            },
         },
-        groupsOrder: ['viewmode', 'zoom', 'debug'],
+        groupsOrder: ['viewmode', 'zoom', 'debug', 'camera'],
     };
 
     private _toolbarRight = {

src/util.ts

@@ -4,6 +4,7 @@ import { clamp } from './math';
 
 import path from 'path';
 import fs from 'fs';
+import { m4 } from 'twgl.js';
 
 export class UV {
     public u: number;