@gg-web-engine/core 0.0.1

package/src/base/math/quaternion.ts

@@ -0,0 +1,172 @@
+import { Point3, Point4 } from '../models/points';
+import { Pnt3 } from './point3';
+import { Mtrx4 } from './matrix4';
+
+export class Qtrn {
+  /** clone quaternion */
+  static clone(q: Point4): Point4 {
+    return { ...q };
+  }
+
+  /** add quaternion b to quaternion a */
+  static add(a: Point4, b: Point4): Point4 {
+    const w = a.w + b.w;
+    const x = a.x + b.x;
+    const y = a.y + b.y;
+    const z = a.z + b.z;
+    const magnitude = Math.sqrt(w * w + x * x + y * y + z * z);
+    return { w: w / magnitude, x: x / magnitude, y: y / magnitude, z: z / magnitude };
+  }
+
+  static mult(a: Point4, b: Point4): Point4 {
+    return {
+      w: a.w * b.w - a.x * b.x - a.y * b.y - a.z * b.z,
+      x: a.w * b.x + a.x * b.w + a.y * b.z - a.z * b.y,
+      y: a.w * b.y - a.x * b.z + a.y * b.w + a.z * b.x,
+      z: a.w * b.z + a.x * b.y - a.y * b.x + a.z * b.w,
+    };
+  }
+
+  static combineRotations(...quaternions: Point4[]): Point4 {
+    let result = { w: 1, x: 0, y: 0, z: 0 };
+    for (const quat of quaternions) {
+      result = this.mult(result, quat);
+    }
+    return result;
+  }
+
+  /** linear interpolation */
+  static lerp(a: Point4, b: Point4, t: number): Point4 {
+    return {
+      x: a.x + t * (b.x - a.x),
+      y: a.y + t * (b.y - a.y),
+      z: a.z + t * (b.z - a.z),
+      w: a.w + t * (b.w - a.w),
+    };
+  }
+
+  /** spherical interpolation */
+  static slerp(a: Point4, b: Point4, t: number): Point4 {
+    let dot = a.x * b.x + a.y * b.y + a.z * b.z + a.w * b.w;
+    let theta = Math.acos(dot);
+    let sinTheta = Math.sin(theta);
+
+    let x = (a.x * Math.sin((1 - t) * theta)) / sinTheta + (b.x * Math.sin(t * theta)) / sinTheta;
+    let y = (a.y * Math.sin((1 - t) * theta)) / sinTheta + (b.y * Math.sin(t * theta)) / sinTheta;
+    let z = (a.z * Math.sin((1 - t) * theta)) / sinTheta + (b.z * Math.sin(t * theta)) / sinTheta;
+    let w = (a.w * Math.sin((1 - t) * theta)) / sinTheta + (b.w * Math.sin(t * theta)) / sinTheta;
+
+    if (isNaN(x) || isNaN(y) || isNaN(z) || isNaN(w)) {
+      // happens when they are equal
+      return Qtrn.clone(a);
+    }
+    return { x, y, z, w };
+  }
+
+  /** creates quaternion from simple angle around axis. Assumes that axis vector is normalized */
+  static fromAngle(axis: Point3, angle: number) {
+    // http://www.euclideanspace.com/maths/geometry/rotations/conversions/angleToQuaternion/index.htm
+    const halfAngle = angle / 2,
+      s = Math.sin(halfAngle);
+    return {
+      ...Pnt3.scalarMult(axis, s),
+      w: Math.cos(halfAngle),
+    };
+  }
+
+  /** creates quaternion from 4-dimension rotation matrix */
+  static fromMatrix4(m: number[]): Point4 {
+    // http://www.euclideanspace.com/maths/geometry/rotations/conversions/matrixToQuaternion/index.htm
+    // assumes the upper 3x3 of m is a pure rotation matrix (i.e, unscaled)
+    const m11 = m[0],
+      m12 = m[4],
+      m13 = m[8],
+      m21 = m[1],
+      m22 = m[5],
+      m23 = m[9],
+      m31 = m[2],
+      m32 = m[6],
+      m33 = m[10],
+      trace = m11 + m22 + m33;
+    if (trace > 0) {
+      const s = 0.5 / Math.sqrt(trace + 1.0);
+      return {
+        x: (m32 - m23) * s,
+        y: (m13 - m31) * s,
+        z: (m21 - m12) * s,
+        w: 0.25 / s,
+      };
+    } else if (m11 > m22 && m11 > m33) {
+      const s = 2.0 * Math.sqrt(1.0 + m11 - m22 - m33);
+      return {
+        x: 0.25 * s,
+        y: (m12 + m21) / s,
+        z: (m13 + m31) / s,
+        w: (m32 - m23) / s,
+      };
+    } else if (m22 > m33) {
+      const s = 2.0 * Math.sqrt(1.0 + m22 - m11 - m33);
+      return {
+        x: (m12 + m21) / s,
+        y: 0.25 * s,
+        z: (m23 + m32) / s,
+        w: (m13 - m31) / s,
+      };
+    } else {
+      const s = 2.0 * Math.sqrt(1.0 + m33 - m11 - m22);
+      return {
+        x: (m13 + m31) / s,
+        y: (m23 + m32) / s,
+        z: 0.25 * s,
+        w: (m21 - m12) / s,
+      };
+    }
+  }
+
+  /** creates a quaternion from euler */
+  static fromEuler(e: Point3): Point4 {
+    const roll = e.x;
+    const pitch = e.y;
+    const yaw = e.z;
+
+    const cy = Math.cos(yaw * 0.5);
+    const sy = Math.sin(yaw * 0.5);
+    const cp = Math.cos(pitch * 0.5);
+    const sp = Math.sin(pitch * 0.5);
+    const cr = Math.cos(roll * 0.5);
+    const sr = Math.sin(roll * 0.5);
+
+    const qw = cr * cp * cy + sr * sp * sy;
+    const qx = sr * cp * cy - cr * sp * sy;
+    const qy = cr * sp * cy + sr * cp * sy;
+    const qz = cr * cp * sy - sr * sp * cy;
+
+    return { w: qw, x: qx, y: qy, z: qz };
+  }
+
+  /** converts a quaternion to euler */
+  static toEuler(q: Point4): Point3 {
+    const qw = q.w;
+    const qx = q.x;
+    const qy = q.y;
+    const qz = q.z;
+
+    const sinr_cosp = 2 * (qw * qx + qy * qz);
+    const cosr_cosp = 1 - 2 * (qx * qx + qy * qy);
+    const roll = Math.atan2(sinr_cosp, cosr_cosp);
+
+    const sinp = 2 * (qw * qy - qz * qx);
+    const pitch = Math.abs(sinp) >= 1 ? (Math.sign(sinp) * Math.PI) / 2 : Math.asin(sinp);
+
+    const siny_cosp = 2 * (qw * qz + qx * qy);
+    const cosy_cosp = 1 - 2 * (qy * qy + qz * qz);
+    const yaw = Math.atan2(siny_cosp, cosy_cosp);
+
+    return { x: roll, y: pitch, z: yaw };
+  }
+
+  /** creates a rotation for object, so it will look at some point in space */
+  static lookAt(eye: Point3, target: Point3, up: Point3): Point4 {
+    return this.fromMatrix4(Mtrx4.lookAt(eye, target, up));
+  }
+}

package/src/base/models/axis-directions.ts

@@ -0,0 +1,3 @@
+export type AxisDirection2 = 'x' | 'y' | '-x' | '-y';
+export type AxisDirection3 = AxisDirection2 | 'z' | '-z';
+export type AxisDirection4 = AxisDirection3 | 'w' | '-w';

package/src/base/models/body-options.ts

@@ -0,0 +1,6 @@
+export interface BodyOptions {
+  dynamic: boolean;
+  mass: number;
+  restitution: number;
+  friction: number;
+}

package/src/base/models/geometry-nodes.ts

@@ -0,0 +1,5 @@
+import { Point2, Point3 } from './points';
+
+export type GgBox<T> = { min: T; max: T };
+export type GgBox2d = GgBox<Point2>;
+export type GgBox3d = GgBox<Point3>;

package/src/base/models/points.ts

@@ -0,0 +1,3 @@
+export type Point2 = { x: number; y: number };
+export type Point3 = { x: number; y: number; z: number };
+export type Point4 = { x: number; y: number; z: number; w: number };

package/src/base/ui/gg-console.ui.ts

@@ -0,0 +1,165 @@
+import { GgStatic } from '../gg-static';
+
+export class GgConsoleUI {
+  private static _instance: GgConsoleUI | null;
+  static get instance(): GgConsoleUI {
+    if (!this._instance) {
+      this._instance = new GgConsoleUI();
+    }
+    return this._instance;
+  }
+
+  private constructor() {}
+
+  private output: string = `
+                  ▄████   ▄████     █     █░▓█████  ▄▄▄▄   
+                 ██▒ ▀█▒ ██▒ ▀█▒   ▓█░ █ ░█░▓█   ▀ ▓█████▄ 
+                ▒██░▄▄▄░▒██░▄▄▄░   ▒█░ █ ░█ ▒███   ▒██▒ ▄██
+                ░▓█  ██▓░▓█  ██▓   ░█░ █ ░█ ▒▓█  ▄ ▒██░█▀  
+                ░▒▓███▀▒░▒▓███▀▒   ░░██▒██▓ ░▒████▒░▓█  ▀█▓
+                 ░▒   ▒  ░▒   ▒    ░ ▓░▒ ▒  ░░ ▒░ ░░▒▓███▀▒
+                  ░   ░   ░   ░      ▒ ░ ░   ░ ░  ░▒░▒   ░ 
+                ░ ░   ░ ░ ░   ░      ░   ░     ░    ░    ░ 
+                      ░       ░        ░       ░  ░ ░      
+                                                         ░ 
+             >>> https://github.com/AndyGura/gg-web-engine <<<
+Welcome to GG web engine UI console. 
+Enter command in input below.
+
+List of available commands: commandslist 
+`;
+
+  private commandHistory: string[] = [];
+  private currentCommandIndex = 0; // for repeating command using up/down arrow keys
+
+  elements: {
+    main: HTMLDivElement;
+    input: HTMLInputElement;
+    output: HTMLTextAreaElement;
+  } | null = null;
+
+  public get isUIShown(): boolean {
+    return !!this.elements;
+  }
+
+  public createUI() {
+    if (this.elements) {
+      return;
+    }
+    const main: HTMLDivElement = document.createElement('div');
+    main.innerHTML = `
+  <div id="gg-console-header" style="padding: 10px; cursor: move; z-index: 10; background-color: #054a81; border: 1px solid white; font-size: large;">GG web engine UI console</div>
+  <textarea id="gg-console-output" disabled style="resize: none; flex-grow: 1; background: #555555; border: 1px solid white; color: white; font-family: monospace;" ></textarea>
+  <input id="gg-console-input" style="background: #555555; border: 1px solid white; color: white; font-family: monospace;"/>`;
+    main.style.position = 'absolute';
+    main.style.zIndex = '1000';
+    main.style.backgroundColor = '#222222';
+    main.style.border = '1px solid white';
+    main.style.width = '640px';
+    main.style.height = '480px';
+    main.style.display = 'flex';
+    main.style.flexDirection = 'column';
+    main.style.alignItems = 'stretch';
+    main.style.padding = '3px';
+    main.style.rowGap = '3px';
+    main.style.fontFamily = 'monospace';
+    main.style.color = 'white';
+    document.body.append(main);
+    this.elements = {
+      main,
+      input: document.getElementById('gg-console-input')! as HTMLInputElement,
+      output: document.getElementById('gg-console-output')! as HTMLTextAreaElement,
+    };
+    this.elements.input.onkeydown = event => {
+      if (event?.keyCode === 13) {
+        event.preventDefault();
+        this.onInput().then();
+      } else if (event?.keyCode === 38) {
+        event.preventDefault();
+        this.onUsePreviousCommand();
+      } else if (event?.keyCode === 40) {
+        event.preventDefault();
+        this.onUseNextCommand();
+      }
+    };
+    this.stdout();
+    this.setupDragging();
+    setTimeout(() => this.elements!.input.focus(), 20);
+  }
+
+  public destroyUI() {
+    if (!this.elements) {
+      return;
+    }
+    document.body.removeChild(this.elements.main);
+    this.elements = null;
+  }
+
+  onUsePreviousCommand() {
+    if (this.commandHistory.length === 0) {
+      return;
+    }
+    this.currentCommandIndex--;
+    if (this.currentCommandIndex < 0) {
+      this.currentCommandIndex += this.commandHistory.length;
+    }
+    this.elements!.input.value = this.commandHistory[this.currentCommandIndex % this.commandHistory.length];
+  }
+
+  onUseNextCommand() {
+    if (this.commandHistory.length === 0) {
+      return;
+    }
+    this.currentCommandIndex++;
+    this.elements!.input.value = this.commandHistory[this.currentCommandIndex % this.commandHistory.length];
+  }
+
+  async onInput() {
+    const command = this.elements!.input.value;
+    this.elements!.input.value = '';
+    this.stdout('\n> ' + command);
+    this.stdout('\n' + (await GgStatic.instance.console(command)));
+    this.commandHistory.push(command);
+    this.currentCommandIndex = this.commandHistory.length;
+  }
+
+  private stdout(s: string = ''): void {
+    this.output += s;
+    this.elements!.output.value = this.output;
+    this.elements!.output.scrollTop = this.elements!.output.scrollHeight;
+  }
+
+  setupDragging() {
+    let x = 0,
+      y = 0;
+    const dragMouseDown = (e: MouseEvent) => {
+      e = e || window.event;
+      e.preventDefault();
+      // get the mouse cursor position at startup:
+      x = e.clientX;
+      y = e.clientY;
+      document.onmouseup = closeDragElement;
+      // call a function whenever the cursor moves:
+      document.onmousemove = elementDrag;
+    };
+
+    const elementDrag = (e: MouseEvent) => {
+      e.preventDefault();
+      // calculate the new cursor position:
+      const curX = x - e.clientX;
+      const curY = y - e.clientY;
+      x = e.clientX;
+      y = e.clientY;
+      // set the element's new position:
+      this.elements!.main.style.left = this.elements!.main.offsetLeft - curX + 'px';
+      this.elements!.main.style.top = this.elements!.main.offsetTop - curY + 'px';
+    };
+
+    const closeDragElement = () => {
+      // stop moving when mouse button is released:
+      document.onmouseup = null;
+      document.onmousemove = null;
+    };
+    document.getElementById('gg-console-header')!.onmousedown = dragMouseDown;
+  }
+}

package/src/base/ui/gg-debugger.ui.ts

@@ -0,0 +1,69 @@
+import { GgStatic } from '../gg-static';
+import { createInlineTickController } from '../entities/inline-controller';
+import { fromEvent, Subject, takeUntil } from 'rxjs';
+import Stats from 'stats.js';
+
+export class GgDebuggerUI {
+  private static _instance: GgDebuggerUI | null;
+  static get instance(): GgDebuggerUI {
+    if (!this._instance) {
+      this._instance = new GgDebuggerUI();
+    }
+    return this._instance;
+  }
+
+  private ui: { stats: Stats; customContainer: HTMLDivElement } | null = null;
+
+  private removed$: Subject<void> = new Subject<void>();
+
+  private constructor() {}
+
+  public get isUIShown(): boolean {
+    return !!this.ui;
+  }
+
+  public createUI() {
+    const stats = new Stats();
+    stats.dom.style.left = 'unset';
+    stats.dom.style.right = '0';
+    stats.showPanel(0); // 0: fps, 1: ms, 2: mb
+    document.body.appendChild(stats.dom);
+    createInlineTickController(GgStatic.instance.selectedWorld!, -1)
+      .pipe(takeUntil(this.removed$))
+      .subscribe(() => {
+        stats?.begin();
+      });
+    createInlineTickController(GgStatic.instance.selectedWorld!, 10000)
+      .pipe(takeUntil(this.removed$))
+      .subscribe(() => {
+        stats?.end();
+      });
+    const customContainer: HTMLDivElement = document.createElement('div');
+    customContainer.style.cssText =
+      'position:fixed;top:48px;right:0;opacity:0.9;z-index:9999;background-color:#333;color:white';
+    customContainer.innerHTML = `<input type="checkbox" name="checkbox" id="physics_debugger_checkbox_id" value="1"${
+      GgStatic.instance.selectedWorld?.physicsWorld.physicsDebugViewActive ? ' checked' : ''
+    }>
+                                 <label for="physics_debugger_checkbox_id" style="user-select: none;">Show physics bodies in scene</label>`;
+    document.body.appendChild(customContainer);
+    fromEvent(document.getElementById('physics_debugger_checkbox_id')! as HTMLInputElement, 'change')
+      .pipe(takeUntil(this.removed$))
+      .subscribe(e => {
+        GgStatic.instance.console('dr_drawphysics ' + (e.target as HTMLInputElement).checked).then();
+      });
+    this.ui = {
+      stats,
+      customContainer,
+    };
+  }
+
+  public destroyUI() {
+    if (this.ui) {
+      document.body.removeChild(this.ui.stats.dom);
+      document.body.removeChild(this.ui.customContainer);
+      this.ui.stats.end();
+      this.ui = null;
+    }
+    this.removed$.next();
+  }
+}

package/src/index.ts

@@ -0,0 +1,53 @@
+export * from './base/clock';
+export * from './base/gg-viewport';
+export * from './base/gg-viewport-manager';
+export * from './base/entities/interfaces/i-tick-listener';
+export * from './base/entities/gg-entity';
+export * from './base/entities/base-gg-renderer';
+export * from './base/entities/inline-controller';
+export * from './base/interfaces/gg-body';
+export * from './base/interfaces/gg-debug-physics-drawer';
+export * from './base/interfaces/gg-object';
+export * from './base/interfaces/gg-physics-world';
+export * from './base/interfaces/gg-trigger';
+export * from './base/interfaces/gg-visual-scene';
+export * from './base/models/axis-directions';
+export * from './base/models/body-options';
+export * from './base/models/geometry-nodes';
+export * from './base/models/points';
+export * from './base/math/box';
+export * from './base/math/point2';
+export * from './base/math/point3';
+export * from './base/math/quaternion';
+export * from './base/math/numbers';
+export * from './base/math/matrix4';
+export * from './base/controllers/common';
+export * from './base/controllers/i-controller';
+export * from './base/controllers/keyboard.controller';
+export * from './base/controllers/mouse.controller';
+
+export * from './2d/entities/gg-2d-entity';
+export * from './2d/entities/gg-positionable-2d-entity';
+export * from './2d/entities/gg-2d-trigger.entity';
+export * from './2d/models/body-options';
+export * from './2d/models/shapes';
+export * from './2d/interfaces';
+export * from './2d/factories';
+export * from './2d/gg-2d-world';
+
+export * from './3d/controllers/car-keyboard.controller';
+export * from './3d/controllers/free-camera.controller';
+export * from './3d/entities/controllers/entity-motion.controller';
+export * from './3d/entities/gg-3d-entity';
+export * from './3d/entities/gg-positionable-3d-entity';
+export * from './3d/entities/gg-3d-camera.entity';
+export * from './3d/entities/gg-3d-map-graph.entity';
+export * from './3d/entities/gg-3d-raycast-vehicle.entity';
+export * from './3d/entities/gg-3d-trigger.entity';
+export * from './3d/models/body-options';
+export * from './3d/models/gg-meta';
+export * from './3d/models/shapes';
+export * from './3d/interfaces';
+export * from './3d/factories';
+export * from './3d/gg-3d-world';
+export * from './3d/loader';

package/test/base/data-structures/graph.spec.ts

@@ -0,0 +1,76 @@
+import { Graph } from '../../../src/base/data-structures/graph';
+
+describe(`Graph<T>`, () => {
+
+  const testGrid = Array(150).fill(null).map((_, i) => (
+    Array(151).fill(null).map((_, j) => ({ i, j }))
+  ));
+  const testGridGraph = Graph.fromSquareGrid(testGrid);
+  const nodesArray: Graph<{ i: number, j: number }>[][] = Array(150).fill(null).map((_, i) => (
+    Array(151).fill(null).map((_, j) => null!)
+  ));
+  for (const node of testGridGraph.nodes()) {
+    nodesArray[node.data.i][node.data.j] = node;
+  }
+  const middleNode = nodesArray[75][75];
+
+  describe(`walkRead`, () => {
+    it('should return correct amount for depth 0', () => {
+      const result = middleNode.walkRead(0);
+      expect(result.size).toBe(1);
+      expect(result.has(middleNode)).toBe(true);
+    });
+    it('should return correct amount for depth 4', () => {
+      const result = middleNode.walkRead(4);
+      expect(result.size).toBe(41);
+    });
+    it('should return correct amount for depth 5', () => {
+      const result = middleNode.walkRead(5);
+      expect(result.size).toBe(61);
+    });
+    it('should return correct amount for depth 6', () => {
+      const result = middleNode.walkRead(6);
+      expect(result.size).toBe(85);
+    });
+    it('should return correct amount for depth 7', () => {
+      const result = middleNode.walkRead(7);
+      expect(result.size).toBe(113);
+    });
+  });
+  describe(`walkReadPreserveDepth`, () => {
+    it('should return correct amounts for depth 0', () => {
+      const result = middleNode.walkReadPreserveDepth(0);
+      expect(result.length).toBe(1);
+      expect(result[0].size).toBe(1);
+      expect(result[0].has(middleNode)).toBe(true);
+    });
+    it('should return correct amount for depth 4', () => {
+      const result = middleNode.walkReadPreserveDepth(4);
+      expect(result.length).toBe(5);
+      for (let i = 0; i < result.length; i++) {
+        expect(result[i].size).toBe(i > 0 ? i * 4 : 1);
+      }
+    });
+    it('should return correct amount for depth 5', () => {
+      const result = middleNode.walkReadPreserveDepth(5);
+      expect(result.length).toBe(6);
+      for (let i = 0; i < result.length; i++) {
+        expect(result[i].size).toBe(i > 0 ? i * 4 : 1);
+      }
+    });
+    it('should return correct amount for depth 6', () => {
+      const result = middleNode.walkReadPreserveDepth(6);
+      expect(result.length).toBe(7);
+      for (let i = 0; i < result.length; i++) {
+        expect(result[i].size).toBe(i > 0 ? i * 4 : 1);
+      }
+    });
+    it('should return correct amount for depth 7', () => {
+      const result = middleNode.walkReadPreserveDepth(7);
+      expect(result.length).toBe(8);
+      for (let i = 0; i < result.length; i++) {
+        expect(result[i].size).toBe(i > 0 ? i * 4 : 1);
+      }
+    });
+  });
+});

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./../../tsconfig.base.json",
+  "compilerOptions": {
+    "baseUrl": "./src/",
+    "outDir": "./dist/"
+  },
+  "include": ["*.ts", "**/*.ts"],
+  "exclude": ["**/*.spec.ts", "node_modules", "dist/**/*"]
+}