webgl now follows right-handedness

src/renderer/general/matrix.ts

@@ -11,6 +11,8 @@ import {
   makeMatrix4Translate,
   multiplyMatrices4,
   multiplyMatrix4Vector3,
+  makeOrthographicMatrix4,
+  makePerspectiveMatrix4,
 } from "rabbit-ear/math/matrix4.js";
 import {
   quaternionFromTwoVectors,
@@ -82,13 +84,21 @@ export const getScreenPoint = (
  */
 const SENSITIVITY = 0.075;
 
-export const makeViewMatrixFront = (): number[] => [
-  1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, -1.85, 1,
-];
+//export const viewMatrixRightHanded: readonly number[] = Object.freeze([
+//  1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, -1.85, 1,
+//]);
+//
+//export const viewMatrixLeftHanded: readonly number[] = Object.freeze([
+//  -1, 0, 0, 0, 0, 1, 0, 0, 0, 0, -1, 0, 0, 0, -1.85, 1,
+//]);
 
-export const makeViewMatrixBack = (): number[] => [
-  -1, 0, 0, 0, 0, 1, 0, 0, 0, 0, -1, 0, 0, 0, -1.85, 1,
-];
+export const viewMatrixRightHanded: readonly number[] = Object.freeze([
+  1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1,
+]);
+
+export const viewMatrixLeftHanded: readonly number[] = Object.freeze([
+  1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1,
+]);
 
 /**
  * @description Convert a point on a canvas into a 2D vector in the
@@ -195,3 +205,40 @@ export const zoomViewMatrix = (
       return viewMatrix;
   }
 };
+
+/**
+ * @description Create a 4x4 projection matrix for either a
+ * perspective or orthographic view.
+ * @param {[number, number]} size the size of the HTML canvas
+ * @param {string} perspective "orthographic" or "perspective"
+ * @param {number} fov the field of view (perspective only)
+ * @returns {number[]} a 4x4 projection matrix
+ */
+export const makeProjectionMatrix = (
+  [width, height],
+  perspective = "perspective",
+  fov = 45,
+  rightHanded = true,
+) => {
+  console.log("rightHanded", rightHanded);
+  const Z_NEAR = 0.1;
+  const Z_FAR = 20;
+  const ORTHO_FAR = -100;
+  const ORTHO_NEAR = 100;
+  const vmin = Math.min(width, height);
+  const padding = [(width - vmin) / vmin / 2, (height - vmin) / vmin / 2];
+  const side = padding.map((p) => p + 0.5);
+  switch (perspective) {
+    case "orthographic":
+      return rightHanded
+        ? makeOrthographicMatrix4(side[1], side[0], -side[1], -side[0], ORTHO_FAR, ORTHO_NEAR)
+        : makeOrthographicMatrix4(-side[1], side[0], side[1], -side[0], ORTHO_FAR, ORTHO_NEAR);
+    case "perspective":
+    default:
+      return rightHanded
+        ? makePerspectiveMatrix4(fov * (Math.PI / 180), width / height, Z_NEAR, Z_FAR)
+        : multiplyMatrices4(
+          makePerspectiveMatrix4(fov * (Math.PI / 180), width / height, Z_NEAR, Z_FAR),
+          [1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]);
+  }
+};

src/renderer/ui/UI.svelte.ts

@@ -1,8 +1,7 @@
-import type { UITool } from "./UITool.ts";
-//import type { Panel } from "./panel/panel.ts";
-import Tools from "./tools/index.ts";
+import type { UITool } from "./tools/UITool.ts";
 import { ViewportManager } from "./viewport/ViewportManager.svelte.ts";
 import { PanelsManager } from "./panel/PanelsManager.svelte.ts";
+import Tools from "./tools/index.ts";
 
 export class UI {
   viewports: ViewportManager;

src/renderer/ui/components/WebGL/WebGLFOLD.svelte

@@ -2,21 +2,23 @@
   //import { untrack } from "svelte";
   import earcut from "earcut";
   import type { FOLD, WebGLModel } from "rabbit-ear/types.js";
-  import type { ViewportEvents } from "../../viewport/viewport.ts";
+  import type { ViewportEvents } from "../../viewport/ViewportTypes.ts";
   import { identity4x4, multiplyMatrices4 } from "rabbit-ear/math/matrix4.js";
   import { makeModelMatrix } from "rabbit-ear/webgl/general/view.js";
   import { creasePattern } from "rabbit-ear/webgl/creasePattern/models.js";
   import { foldedForm } from "rabbit-ear/webgl/foldedForm/models.js";
-  import { makeProjectionMatrix } from "rabbit-ear/webgl/general/view.js";
+  //import { makeProjectionMatrix } from "rabbit-ear/webgl/general/view.js";
   import { worldAxes } from "./WorldAxes/models.js";
   // import { touchIndicators } from "rabbit-ear/webgl/touches/models.js";
   import { deallocModel } from "rabbit-ear/webgl/general/model.js";
   import { dark, light } from "rabbit-ear/webgl/general/colors.js";
   import WebGLModelView from "./WebGLModelView.svelte";
   import WebGLTouchCanvas from "./WebGLTouchCanvas.svelte";
+  import { makeProjectionMatrix } from "../../../general/matrix.ts";
 
   type PropsType = ViewportEvents & {
     graph?: FOLD;
+    rightHanded?: boolean;
     perspective?: string;
     renderStyle?: string;
     viewMatrix?: number[];
@@ -37,6 +39,7 @@
 
   let {
     graph = {},
+    rightHanded = true,
     perspective = "orthographic",
     renderStyle = "creasePattern",
     viewMatrix = [...identity4x4],
@@ -67,7 +70,9 @@
   let canvas: HTMLCanvasElement | undefined = $state();
   let canvasSize: [number, number] = $state([0, 0]);
 
-  let projectionMatrix = $derived(makeProjectionMatrix(canvasSize, perspective, fov));
+  let projectionMatrix = $derived(
+    makeProjectionMatrix(canvasSize, perspective, fov, rightHanded),
+  );
   let outlineColor = $derived(darkMode ? "white" : "black");
   let cpColor = $derived(darkMode ? "#111111" : "white");
   let modelMatrix = $derived(makeModelMatrix(graph));

src/renderer/ui/components/WebGL/WebGLTouchCanvas.svelte

@@ -4,7 +4,7 @@
     ViewportMouseEvent,
     ViewportWheelEvent,
     ViewportTouchEvent,
-  } from "../../viewport/viewport.ts";
+  } from "../../viewport/ViewportTypes.ts";
   import { identity4x4 } from "rabbit-ear/math/matrix4.js";
   import { vectorFromScreenLocation } from "../../../general/matrix.ts";
   import WebGLCanvas from "./WebGLCanvas.svelte";

src/renderer/ui/panel/PanelsManager.svelte.ts

@@ -1,8 +1,8 @@
 import type { Component } from "svelte";
 import type { UI } from "../UI.svelte.ts";
 import type {
-  ModelViewportClassTypes,
   ViewportClassTypes,
+  ModelViewportClassTypes,
 } from "../viewport/viewports.ts";
 import AppPanel from "./AppPanel.svelte";
 import { uniqueObjects } from "./arrays.ts";

src/renderer/ui/UITool.ts → src/renderer/ui/tools/UITool.ts

@@ -1,5 +1,5 @@
 import type { Component } from "svelte";
-import type { IModelViewport } from "./viewport/viewport.ts";
+import type { IModelViewport } from "../viewport/viewport.ts";
 
 export interface Deallocable {
   dealloc(): void;

src/renderer/ui/tools/index.ts

@@ -1,4 +1,4 @@
-import type { UITool } from "../UITool.ts";
+import type { UITool } from "../tools/UITool.ts";
 import circle from "./circle/index.ts";
 import line from "./line/index.ts";
 import rect from "./rect/index.ts";

src/renderer/ui/tools/line/GlobalState.svelte.ts

@@ -1,4 +1,4 @@
-import type { Deallocable } from "../../viewport/viewport.ts";
+import type { Deallocable } from "../../viewport/Viewport.ts";
 
 export class GlobalState implements Deallocable {
   dealloc(): void {

src/renderer/ui/tools/line/events.ts

@@ -2,7 +2,7 @@ import type {
   ViewportMouseEvent,
   ViewportWheelEvent,
   ViewportEvents,
-} from "../../viewport/viewport.ts";
+} from "../../viewport/Viewport.ts";
 import type { SVGViewport } from "../../viewport/SVGViewport/SVGViewport.svelte.ts";
 //import type { Settings } from "../../viewport/SVGViewport/Settings/Settings.svelte.ts";
 import { SVGTouches } from "./SVGTouches.svelte.ts";

src/renderer/ui/tools/line/index.ts

@@ -1,5 +1,5 @@
-import type { UITool } from "../../UITool.ts";
-import type { Viewport } from "../../viewport/viewport.ts";
+import type { UITool } from "../UITool.ts";
+import type { Viewport } from "../../viewport/Viewport.ts";
 import { SVGViewport } from "../../viewport/SVGViewport/SVGViewport.svelte.ts";
 import { WebGLViewport } from "../../viewport/WebGLViewport/WebGLViewport.svelte.ts";
 import { GlobalState } from "./GlobalState.svelte.ts";

src/renderer/ui/tools/zoom/events.ts

@@ -2,7 +2,7 @@ import type {
   ViewportMouseEvent,
   ViewportWheelEvent,
   ViewportEvents,
-} from "../../viewport/viewport.ts";
+} from "../../viewport/ViewportTypes.ts";
 import { ToolState } from "./state.svelte.ts";
 import type { SVGViewport } from "../../viewport/SVGViewport/SVGViewport.svelte.ts";
 import type { WebGLViewport } from "../../viewport/WebGLViewport/WebGLViewport.svelte.ts";
@@ -14,7 +14,7 @@ export class WebGLViewportEvents implements ViewportEvents {
   previousPoint: [number, number] | undefined;
 
   onmousemove = (event: ViewportMouseEvent): void => {
-    // console.log("onmousemove", this, this.viewport);
+    //console.log("onmousemove", this, this.viewport);
     event.preventDefault();
     const { point } = event;
     const buttons = this.previousPoint ? 1 : 0;

src/renderer/ui/viewport/FramesViewport/FramesViewport.svelte.ts

@@ -1,5 +1,5 @@
 import type { Component } from "svelte";
-import type { IViewport } from "../viewport.ts";
+import type { IViewport } from "../ViewportTypes.ts";
 import FramesViewportComponent from "./FramesViewportComponent.svelte";
 import app from "../../../app/App.svelte.js";
 import { Frame } from "./Frame.svelte.ts";

src/renderer/ui/viewport/SVGViewport/SVGViewport.svelte.ts

@@ -5,8 +5,8 @@ import type {
   ViewportMouseEvent,
   ViewportWheelEvent,
   ViewportTouchEvent,
-} from "../viewport.ts";
-import { unsetViewportEvents } from "../viewport.ts";
+} from "../ViewportTypes.ts";
+import { unsetViewportEvents } from "../ViewportTypes.ts";
 import { Grid } from "./Settings/Grid.svelte.ts";
 import { Snap } from "./Settings/Snap.svelte.ts";
 import { View } from "./Settings/View.svelte.ts";

src/renderer/ui/viewport/ScriptViewport/ScriptViewport.svelte.ts

@@ -4,8 +4,8 @@ import type {
   ViewportMouseEvent,
   ViewportWheelEvent,
   ViewportTouchEvent,
-} from "../viewport.ts";
-import { unsetViewportEvents } from "../viewport.ts";
+} from "../ViewportTypes.ts";
+import { unsetViewportEvents } from "../ViewportTypes.ts";
 import ViewportComponent from "./ViewportComponent.svelte";
 //import { ViewportPanel } from "./Panels/Panel.svelte.ts";
 //import { ClassPanel } from "./Panels/ClassPanel.svelte.ts";

src/renderer/ui/viewport/SimulatorViewport/SimulatorViewport.svelte.ts

@@ -4,8 +4,8 @@ import type {
   ViewportMouseEvent,
   ViewportWheelEvent,
   ViewportTouchEvent,
-} from "../viewport.ts";
-import { unsetViewportEvents } from "../viewport.ts";
+} from "../ViewportTypes.ts";
+import { unsetViewportEvents } from "../ViewportTypes.ts";
 //import ViewportComponent from "./Simulator.svelte";
 import ViewportComponent from "./SimulatorSimple.svelte";
 //import { ViewportPanel } from "./SettingsPanel.svelte.ts";

src/renderer/ui/viewport/TerminalViewport/TerminalViewport.svelte.ts

@@ -1,7 +1,6 @@
 import type { Component } from "svelte";
-import type { IViewport } from "../viewport.ts";
-import type { ViewportEvents } from "../viewport.ts";
-import { unsetViewportEvents } from "../viewport.ts";
+import type { IViewport, ViewportEvents } from "../ViewportTypes.ts";
+import { unsetViewportEvents } from "../ViewportTypes.ts";
 import ViewportComponent from "./Viewport.svelte";
 import { Events } from "./Events.svelte.ts";
 import { TerminalReprint } from "./TerminalReprint.svelte.ts";

src/renderer/ui/viewport/WebGLViewport/Settings/View.svelte.ts

@@ -1,17 +1,36 @@
-import { identity4x4 } from "rabbit-ear/math/matrix4.js";
+import { identity4x4, multiplyMatrices4 } from "rabbit-ear/math/matrix4.js";
+import settings from "./ClassSettings.svelte.ts";
+import {
+  viewMatrixRightHanded,
+  viewMatrixLeftHanded,
+} from "../../../../general/matrix.ts";
 
-const defaultViewMatrix = (): number[] => [
-  1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, -5, 1,
-];
+const defaultViewMatrix: number[] = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, -5, 1];
 
 export class View {
   projectionMatrix: number[] = $state([...identity4x4]);
-  viewMatrix: number[] = $state(defaultViewMatrix());
+
+  // view matrix
+  viewMatrix: number[] = $state([...defaultViewMatrix]);
+  //#viewMatrixPre: number[] = $state([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, -5, 1]);
+  //#handedMatrix: number[] = $derived(
+  //  settings.rightHanded ? [...viewMatrixRightHanded] : [...viewMatrixLeftHanded],
+  //);
+  //#viewMatrix: number[] = $derived(
+  //  multiplyMatrices4(this.#handedMatrix, this.#viewMatrixPre),
+  //);
+  //get viewMatrix(): number[] {
+  //  return this.#viewMatrix;
+  //}
+  //set viewMatrix(value: number[]) {
+  //  this.#viewMatrixPre = value;
+  //}
+
   modelMatrix: number[] = $state([...identity4x4]);
 
   canvasSize: [number, number] = $state([0, 0]);
 
-  perspective: string = $state("perspective");
+  perspective: string = $state("orthographic");
   renderStyle: string = $state("creasePattern");
   fov: number = $state(30.25);
 

src/renderer/ui/viewport/WebGLViewport/ViewportComponent.svelte

@@ -14,12 +14,13 @@
 
 <WebGLFOLD
   graph={app.file?.graph}
-  onmousemove={(...args): void => viewport.onmousemove?.(...args)}
-  onmousedown={(...args): void => viewport.onmousedown?.(...args)}
-  onmouseup={(...args): void => viewport.onmouseup?.(...args)}
-  onmouseleave={(...args): void => viewport.onmouseleave?.(...args)}
-  onwheel={(...args): void => viewport.onwheel?.(...args)}
+  onmousemove={viewport.onmousemove}
+  onmousedown={viewport.onmousedown}
+  onmouseup={viewport.onmouseup}
+  onmouseleave={viewport.onmouseleave}
+  onwheel={viewport.onwheel}
   bind:redraw={viewport.redraw}
+  rightHanded={settings.rightHanded}
   perspective={viewport?.view?.perspective}
   viewMatrix={viewport?.view?.viewMatrix}
   renderStyle={viewport?.view?.renderStyle}

src/renderer/ui/viewport/WebGLViewport/WebGLViewport.svelte.ts

@@ -4,8 +4,8 @@ import type {
   ViewportMouseEvent,
   ViewportWheelEvent,
   ViewportTouchEvent,
-} from "../viewport.ts";
-import { unsetViewportEvents } from "../viewport.ts";
+} from "../ViewportTypes.ts";
+import { unsetViewportEvents } from "../ViewportTypes.ts";
 import ViewportComponent from "./ViewportComponent.svelte";
 import Dropdown from "./Dropdown.svelte";
 import Panel from "./Panel.svelte";

src/renderer/ui/viewport/viewports.ts

@@ -1,5 +1,5 @@
 import type { Component } from "svelte";
-import type { IViewport, IModelViewport } from "./viewport.ts";
+import type { IViewport, IModelViewport } from "./types.ts";
 import { FramesViewport } from "./FramesViewport/FramesViewport.svelte.ts";
 import { ScriptViewport } from "./ScriptViewport/ScriptViewport.svelte.ts";
 import { SimulatorViewport } from "./SimulatorViewport/SimulatorViewport.svelte.ts";
@@ -42,7 +42,7 @@ export type ViewportClassTypes = (
 
 export const ModelViewports = [SVGViewport, WebGLViewport, SimulatorViewport];
 
-export const Viewport = [
+export const Viewports = [
   SVGViewport,
   WebGLViewport,
   SimulatorViewport,