@gg-web-engine/core 0.0.1

package/src/3d/controllers/free-camera.controller.ts

@@ -0,0 +1,86 @@
+import { IController } from '../../base/controllers/i-controller';
+import { combineLatest, Subject, takeUntil } from 'rxjs';
+import { MouseController, MouseControllerOptions } from '../../base/controllers/mouse.controller';
+import { Pnt3 } from '../../base/math/point3';
+import { Gg3dCameraEntity } from '../entities/gg-3d-camera.entity';
+import { KeyboardController } from '../../base/controllers/keyboard.controller';
+import { Pnt2 } from '../../base/math/point2';
+import { Point2 } from '../../base/models/points';
+import { Qtrn } from '../../base/math/quaternion';
+import { bindDirectionKeys, DirectionKeymap, DirectionOutput } from '../../base/controllers/common';
+
+type FreeCameraControllerOptions = {
+  keymap: DirectionKeymap;
+  movementOptions: {
+    speed: number;
+  };
+  mouseOptions: MouseControllerOptions;
+};
+
+export class FreeCameraController implements IController {
+  private readonly mController: MouseController;
+  private readonly stop$: Subject<void> = new Subject<void>();
+
+  constructor(
+    private readonly keyboardController: KeyboardController,
+    private readonly camera: Gg3dCameraEntity,
+    private readonly options: FreeCameraControllerOptions = {
+      keymap: 'wasd',
+      movementOptions: { speed: 0.5 },
+      mouseOptions: {},
+    },
+  ) {
+    this.mController = new MouseController(options.mouseOptions);
+  }
+
+  async start(): Promise<void> {
+    let controls: { direction: DirectionOutput; rest: boolean[] } = { direction: {}, rest: [] };
+    const keys = ['KeyE', 'KeyQ'];
+    if (this.camera.object3D.supportsFov) {
+      keys.push('KeyZ', 'KeyC');
+    }
+    bindDirectionKeys(this.keyboardController, this.options.keymap)
+      .pipe(takeUntil(this.stop$))
+      .subscribe(d => {
+        controls.direction = d;
+      });
+    combineLatest(keys.map(c => this.keyboardController.bind(c)))
+      .pipe(takeUntil(this.stop$))
+      .subscribe((d: boolean[]) => {
+        controls.rest = d;
+      });
+
+    let rotationDelta: Point2 = { x: 0, y: 0 };
+    this.mController.delta$.pipe(takeUntil(this.stop$)).subscribe(delta => {
+      rotationDelta = Pnt2.add(rotationDelta, delta);
+    });
+
+    this.camera.tick$.pipe(takeUntil(this.stop$)).subscribe(() => {
+      let translateVector = { x: 0, y: 0, z: 0 };
+      const [u, d, zo, zi] = controls.rest;
+      if (controls.direction.upDown !== undefined) translateVector.z = controls.direction.upDown ? -1 : 1;
+      if (controls.direction.leftRight !== undefined) translateVector.x = controls.direction.leftRight ? -1 : 1;
+      if (u != d) translateVector.y = d ? -1 : 1;
+      if (zo != zi) this.camera.object3D.fov += zo ? 1 : -1;
+      this.camera.position = Pnt3.add(
+        this.camera.position,
+        Pnt3.rot(Pnt3.scalarMult(Pnt3.norm(translateVector), this.options.movementOptions.speed), this.camera.rotation),
+      );
+      if (rotationDelta.x != 0 || rotationDelta.y != 0) {
+        this.camera.rotation = Qtrn.combineRotations(
+          Qtrn.fromAngle({ x: 0, y: 0, z: 1 }, -rotationDelta.x / 300),
+          this.camera.rotation,
+          Qtrn.fromAngle({ x: 1, y: 0, z: 0 }, -rotationDelta.y / 300),
+        );
+        rotationDelta = { x: 0, y: 0 };
+      }
+    });
+
+    await this.mController.start();
+  }
+
+  async stop(unlockPointer: boolean = true): Promise<void> {
+    this.stop$.next();
+    await this.mController.stop(unlockPointer);
+  }
+}

package/src/3d/entities/controllers/entity-motion.controller.ts

@@ -0,0 +1,122 @@
+import { GgEntity } from '../../../base/entities/gg-entity';
+import { ITickListener } from '../../../base/entities/interfaces/i-tick-listener';
+import { Subject, Subscription, takeUntil } from 'rxjs';
+import { Gg3dWorld } from '../../gg-3d-world';
+import { GgPositionable3dEntity } from '../gg-positionable-3d-entity';
+import { Point3, Point4 } from '../../../base/models/points';
+import { Pnt3 } from '../../../base/math/point3';
+import { Qtrn } from '../../../base/math/quaternion';
+
+export type MotionControlFuncReturn = { position: Point3; rotation: Point4; customParameters: { [key: string]: any } };
+export type MotionControlFunction = (delta: number) => MotionControlFuncReturn;
+
+export class EntityMotionController extends GgEntity implements ITickListener {
+  get motionControlFunction(): MotionControlFunction {
+    return this._motionControlFunction;
+  }
+
+  set motionControlFunction(value: MotionControlFunction) {
+    if (this.currentTransition) {
+      this.currentTransition.unsubscribe();
+      this.currentTransition = null;
+    }
+    this._motionControlFunction = value;
+  }
+  public readonly tick$: Subject<[number, number]> = new Subject<[number, number]>();
+
+  protected readonly removed$: Subject<void> = new Subject<void>();
+  public readonly tickOrder: number = 750;
+
+  constructor(
+    public target: GgPositionable3dEntity,
+    protected _motionControlFunction: MotionControlFunction,
+    public customParametersHandleFunc: (target: GgPositionable3dEntity, params: any) => void = () => {},
+  ) {
+    super();
+  }
+
+  protected lastValue: MotionControlFuncReturn | undefined;
+  private currentTransition: Subscription | null = null;
+
+  // smoothly set controller function, animate from some determined state
+  transitFromStaticState(
+    state: MotionControlFuncReturn,
+    newFunc: MotionControlFunction,
+    transitionDuration: number,
+    easing: (t: number) => number = x => x,
+    customParametersLerpFunc: (a: any, b: any, t: number) => any = (a, b, t) => b,
+  ) {
+    this.lastValue = state;
+    this._motionControlFunction = () => state;
+    return this.transitControlFunction(newFunc, transitionDuration, easing, customParametersLerpFunc);
+  }
+
+  // smoothly change controller function
+  transitControlFunction(
+    newFunc: MotionControlFunction,
+    transitionDuration: number,
+    easing: (t: number) => number = x => x,
+    customParametersLerpFunc: (a: any, b: any, t: number) => any = (a, b, t) => b,
+  ) {
+    let oldControlFunc: MotionControlFunction;
+    if (this.currentTransition) {
+      this.currentTransition.unsubscribe();
+      this.currentTransition = null;
+      if (this.lastValue) {
+        oldControlFunc = () => this.lastValue!;
+      } else {
+        this._motionControlFunction = newFunc;
+        return;
+      }
+    } else {
+      oldControlFunc = this._motionControlFunction;
+    }
+    let k = 0;
+    this._motionControlFunction = delta => {
+      const oldRes = oldControlFunc(delta);
+      const newRes = newFunc(delta);
+      return {
+        customParameters: customParametersLerpFunc(oldRes.customParameters, newRes.customParameters, k),
+        position: Pnt3.lerp(oldRes.position, newRes.position, k),
+        rotation: Qtrn.slerp(oldRes.rotation, newRes.rotation, k),
+      };
+    };
+    let startTime: number | undefined;
+    this.currentTransition = this.tick$.pipe(takeUntil(this.removed$)).subscribe(([elapsed, _]) => {
+      if (startTime === undefined) {
+        startTime = elapsed;
+      } else {
+        k = (elapsed - startTime) / transitionDuration;
+        if (k >= 1) {
+          k = 1;
+          this.currentTransition!.unsubscribe();
+          this.currentTransition = null;
+          this._motionControlFunction = newFunc;
+        } else {
+          k = easing(k);
+        }
+      }
+    });
+  }
+
+  onSpawned(world: Gg3dWorld) {
+    super.onSpawned(world);
+    this.tick$.pipe(takeUntil(this.removed$)).subscribe(([_, delta]) => {
+      this.lastValue = this._motionControlFunction(delta);
+      this.target.position = this.lastValue.position;
+      this.target.rotation = this.lastValue.rotation;
+      this.customParametersHandleFunc(this.target, this.lastValue.customParameters);
+    });
+  }
+
+  onRemoved() {
+    super.onRemoved();
+    this.removed$.next();
+  }
+
+  dispose(): void {
+    super.dispose();
+    this.tick$.unsubscribe();
+    this.tick$.complete();
+  }
+}

package/src/3d/entities/gg-3d-camera.entity.ts

@@ -0,0 +1,8 @@
+import { IGg3dBody, IGg3dCamera } from '../interfaces';
+import { Gg3dEntity } from './gg-3d-entity';
+
+export class Gg3dCameraEntity<T extends IGg3dCamera = IGg3dCamera> extends Gg3dEntity {
+  constructor(public readonly object3D: T, public readonly objectBody: IGg3dBody | null = null) {
+    super(object3D, objectBody);
+  }
+}

package/src/3d/entities/gg-3d-entity.ts

@@ -0,0 +1,116 @@
+import { Subject } from 'rxjs';
+import { GgPositionable3dEntity } from './gg-positionable-3d-entity';
+import { ITickListener } from '../../base/entities/interfaces/i-tick-listener';
+import { Point3, Point4 } from '../../base/models/points';
+import { Gg3dWorld } from '../gg-3d-world';
+import { IGg3dBody, IGg3dObject } from '../interfaces';
+
+export class Gg3dEntity extends GgPositionable3dEntity implements ITickListener {
+  public readonly tick$: Subject<[number, number]> = new Subject<[number, number]>();
+  public readonly tickOrder = 750;
+
+  public get position(): Point3 {
+    return super.position;
+  }
+
+  set position(value: Point3) {
+    if (this.object3D) {
+      this.object3D.position = value;
+    }
+    if (this.objectBody) {
+      this.objectBody.position = value;
+    }
+    super.position = value;
+  }
+
+  public get rotation(): Point4 {
+    return super.rotation;
+  }
+
+  set rotation(value: Point4) {
+    if (this.object3D) {
+      this.object3D.rotation = value;
+    }
+    if (this.objectBody) {
+      this.objectBody.rotation = value;
+    }
+    super.rotation = value;
+  }
+
+  public get scale(): Point3 {
+    return super.scale;
+  }
+
+  set scale(value: Point3) {
+    if (this.object3D) {
+      this.object3D.scale = value;
+    }
+    if (this.objectBody) {
+      this.objectBody.scale = value;
+    }
+    super.scale = value;
+  }
+
+  public get visible(): boolean {
+    return !!this.object3D?.visible;
+  }
+
+  set visible(value: boolean) {
+    if (this.object3D) {
+      this.object3D.visible = value;
+    }
+    for (const entity of this._children) {
+      if (entity instanceof Gg3dEntity && entity.object3D) {
+        entity.object3D.visible = value;
+      }
+    }
+  }
+
+  protected runTransformBinding(objectBody: IGg3dBody, object3D: IGg3dObject): void {
+    // bind physics body transform to mesh transform
+    const pos = objectBody.position;
+    const quat = objectBody.rotation;
+    object3D.position = pos;
+    object3D.rotation = quat;
+    this._position$.next(pos);
+    this._rotation$.next(quat);
+  }
+
+  constructor(public readonly object3D: IGg3dObject | null, public readonly objectBody: IGg3dBody | null = null) {
+    super();
+    if (objectBody && object3D) {
+      this.tick$.subscribe(() => {
+        this.runTransformBinding(objectBody, object3D);
+      });
+      this.runTransformBinding(objectBody, object3D);
+    } else if (!objectBody && !object3D) {
+      throw new Error('Cannot create entity without a mesh and a body');
+    }
+    if (objectBody) {
+      objectBody.entity = this;
+    }
+  }
+
+  onSpawned(world: Gg3dWorld) {
+    super.onSpawned(world);
+    this.object3D?.addToWorld(world.visualScene);
+    this.objectBody?.addToWorld(world.physicsWorld);
+  }
+
+  onRemoved() {
+    this.object3D?.removeFromWorld(this.world!.visualScene);
+    this.objectBody?.removeFromWorld(this.world!.physicsWorld);
+    super.onRemoved();
+  }
+
+  dispose(): void {
+    super.dispose();
+    this.tick$.unsubscribe();
+    if (this.object3D) {
+      this.object3D.dispose();
+    }
+    if (this.objectBody) {
+      this.objectBody.dispose();
+    }
+  }
+}

package/src/3d/entities/gg-3d-map-graph.entity.ts

@@ -0,0 +1,204 @@
+import { BehaviorSubject, NEVER, Observable, startWith, Subject, switchMap } from 'rxjs';
+import { distinctUntilChanged, map, tap, throttleTime } from 'rxjs/operators';
+import { Point3, Point4 } from '../../base/models/points';
+import { Graph } from '../../base/data-structures/graph';
+import { GgEntity } from '../../base/entities/gg-entity';
+import { ITickListener } from '../../base/entities/interfaces/i-tick-listener';
+import { GgPositionable3dEntity } from './gg-positionable-3d-entity';
+import { Gg3dWorld } from '../gg-3d-world';
+import { Gg3dEntity } from './gg-3d-entity';
+import { LoadOptions, LoadResultWithProps } from '../loader';
+
+type MapGraphNodeType = {
+  path: string;
+  position: Point3;
+  rotation?: Point4;
+  loadOptions: Partial<Omit<LoadOptions, 'position' | 'rotation'>>;
+};
+
+export class MapGraph extends Graph<MapGraphNodeType> {
+  static fromMapArray(array: MapGraphNodeType[]): MapGraph {
+    const root = new MapGraph(array[0]);
+    let tail = root;
+    for (let i = 1; i < array.length; i++) {
+      const newTail = new MapGraph(array[i]);
+      tail.addAdjacent(newTail);
+      tail = newTail;
+    }
+    return root;
+  }
+  static fromMapSquareGrid(grid: MapGraphNodeType[][]): MapGraph {
+    const nodes = grid.map(sgrid => sgrid.map(item => new MapGraph(item)));
+    // bind them
+    for (let j = 0; j < nodes.length; j++) {
+      for (let i = 0; i < nodes.length; i++) {
+        if (i > 0) {
+          nodes[j][i].addAdjacent(nodes[j][i - 1]);
+        }
+        if (j > 0) {
+          nodes[j][i].addAdjacent(nodes[j - 1][i]);
+        }
+      }
+    }
+    return nodes[0][0];
+  }
+  public getNearestDummy(thisNodes: Graph<MapGraphNodeType>[], cursor: Point3): Graph<MapGraphNodeType> {
+    let min = Infinity;
+    let node: Graph<MapGraphNodeType> = this;
+    // TODO should be heavily optimized with kd-tree-javascript, but building spatial index takes too much time. Serialize to file?
+    thisNodes.forEach(n => {
+      let dist = Math.sqrt(
+        Math.pow(cursor.x - n.data.position.x, 2) +
+          Math.pow(cursor.y - n.data.position.y, 2) +
+          Math.pow(cursor.z - n.data.position.z, 2),
+      );
+      if (dist < min) {
+        min = dist;
+        node = n;
+      }
+    });
+    return node;
+  }
+
+  // TODO return iterable?
+  nodes(): MapGraph[] {
+    return Array.from(this.walkRead(-1)) as MapGraph[];
+  }
+}
+
+export type Gg3dMapGraphEntityOptions = {
+  // depth in tree to load. 0 means load only the nearest node, 1 means nearest + all of it's neighbours etc.
+  loadDepth: number;
+  // additional depth, means unload delay. Nodes with this depth won't load, but if already loaded, will not be destroyed
+  inertia: number;
+};
+
+const defaultOptions: Gg3dMapGraphEntityOptions = {
+  loadDepth: 5,
+  inertia: 0,
+};
+
+export class Gg3dMapGraphEntity extends GgEntity implements ITickListener {
+  public readonly tick$: Subject<[number, number]> = new Subject<[number, number]>();
+  public readonly tickOrder = 1500;
+
+  public readonly loaderCursorEntity$: BehaviorSubject<GgPositionable3dEntity | null> =
+    new BehaviorSubject<GgPositionable3dEntity | null>(null);
+  readonly loaded: Map<MapGraphNodeType, GgPositionable3dEntity[]> = new Map();
+
+  private _initialLoadComplete$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+  public get initialLoadComplete$(): Observable<boolean> {
+    return this._initialLoadComplete$.asObservable();
+  }
+
+  private _nearestDummy$: BehaviorSubject<Graph<MapGraphNodeType> | null> =
+    new BehaviorSubject<Graph<MapGraphNodeType> | null>(null);
+  public get nearestDummy(): Graph<MapGraphNodeType> | null {
+    return this._nearestDummy$.getValue();
+  }
+
+  private _chunkLoaded$: Subject<[LoadResultWithProps, { position: Point3; rotation: Point4 }]> = new Subject<
+    [LoadResultWithProps, { position: Point3; rotation: Point4 }]
+  >();
+  public get chunkLoaded$(): Observable<[LoadResultWithProps, { position: Point3; rotation: Point4 }]> {
+    return this._chunkLoaded$.asObservable();
+  }
+
+  get world(): Gg3dWorld | null {
+    return this._world;
+  }
+  protected _world: Gg3dWorld | null = null;
+  private readonly mapGraphNodes: MapGraph[];
+
+  protected readonly options: Gg3dMapGraphEntityOptions;
+
+  constructor(public readonly mapGraph: MapGraph, options: Partial<Gg3dMapGraphEntityOptions> = {}) {
+    super();
+    this.options = { ...defaultOptions, ...options };
+    this.mapGraphNodes = mapGraph.nodes();
+  }
+
+  onSpawned(world: Gg3dWorld) {
+    super.onSpawned(world);
+    // TODO takeUntil removed from world?
+    this.loaderCursorEntity$
+      .pipe(
+        switchMap(entity =>
+          entity
+            ? this.tick$.pipe(
+                startWith(null), // map will perform initial loading even if world not started yet. Handy to preload map
+                throttleTime(1000),
+                map(() => entity.position),
+              )
+            : NEVER,
+        ),
+        map(pos => this.mapGraph.getNearestDummy(this.mapGraphNodes, pos)),
+        tap(node => this._nearestDummy$.next(node)),
+        distinctUntilChanged(),
+      )
+      .subscribe(currentChunk => {
+        let haveToBeLoaded: Set<MapGraphNodeType> = new Set();
+        let canBeLoaded: Set<MapGraphNodeType>;
+        if (this.options.inertia > 0) {
+          canBeLoaded = new Set();
+          const nodes = currentChunk.walkReadPreserveDepth(this.options.loadDepth + this.options.inertia);
+          for (let distance = 0; distance < nodes.length; distance++) {
+            nodes[distance].forEach(node => canBeLoaded.add(node.data));
+            if (distance <= this.options.loadDepth) {
+              nodes[distance].forEach(node => haveToBeLoaded.add(node.data));
+            }
+          }
+        } else {
+          currentChunk.walkRead(this.options.loadDepth).forEach(node => haveToBeLoaded.add(node.data));
+          canBeLoaded = haveToBeLoaded;
+        }
+        for (const loadedNode of this.loaded.keys()) {
+          if (!canBeLoaded.has(loadedNode)) {
+            this.disposeChunk(loadedNode);
+          } else {
+            haveToBeLoaded.delete(loadedNode);
+          }
+        }
+        Promise.all(Array.from(haveToBeLoaded.keys()).map(n => this.loadChunk(n))).then(() =>
+          this._initialLoadComplete$.next(true),
+        );
+      });
+  }
+
+  onRemoved() {
+    super.onRemoved();
+    this.loaderCursorEntity$.next(null);
+  }
+
+  protected async loadChunk(node: MapGraphNodeType): Promise<Gg3dEntity[]> {
+    const loaded = await this.world!.loader.loadGgGlb(node.path, {
+      position: node.position,
+      rotation: node.rotation || { x: 0, y: 0, z: 0, w: 1 },
+      ...node.loadOptions,
+    });
+    const entities = [
+      ...loaded.entities,
+      ...(loaded.props || [])
+        .map(p => p.entities)
+        .reduce((p, c) => {
+          p.push(...c);
+          return p;
+        }, []),
+    ];
+    this.loaded.set(node, entities);
+    this.addChildren(...entities);
+    this._chunkLoaded$.next([
+      loaded,
+      { position: node.position, rotation: node.rotation || { x: 0, y: 0, z: 0, w: 1 } },
+    ]);
+    return entities;
+  }
+
+  protected disposeChunk(node: MapGraphNodeType) {
+    if (!this.loaded.has(node)) {
+      return;
+    }
+    this.removeChildren(this.loaded.get(node)!, true);
+    this.loaded.delete(node);
+  }
+}