@gg-web-engine/core 0.0.16 → 0.0.18

package/dist/3d/entities/controllers/input/free-camera.controller.d.ts

@@ -24,7 +24,7 @@ export declare type FreeCameraControllerOptions = {
     /**
      * Options for configuring mouse input.
      */
-    mouseOptions: MouseInputOptions;
+    mouseOptions: Partial<MouseInputOptions>;
 };
 /**
  * A controller for a free-moving camera.

package/dist/3d/entities/controllers/input/free-camera.controller.js

@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { combineLatest, takeUntil } from 'rxjs';
+import { combineLatest, filter, takeUntil } from 'rxjs';
 import { MouseInput } from '../../../../base/inputs/mouse.input';
 import { Pnt3 } from '../../../../base/math/point3';
 import { Pnt2 } from '../../../../base/math/point2';
@@ -59,7 +59,10 @@ export class FreeCameraController extends GgEntity {
             });
             // Subscribe to mouse input for camera rotation
             let rotationDelta = { x: 0, y: 0 };
-            this.mouseInput.delta$.pipe(takeUntil(this._onRemoved$)).subscribe(delta => {
+            let isTouchScreen = MouseInput.isTouchDevice();
+            this.mouseInput.delta$
+                .pipe(takeUntil(this._onRemoved$), filter(() => isTouchScreen || this.mouseInput.isPointerLocked))
+                .subscribe(delta => {
                 rotationDelta = Pnt2.add(rotationDelta, delta);
             });
             // Setup updating camera position and rotation based on input
@@ -76,7 +79,11 @@ export class FreeCameraController extends GgEntity {
                     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));
+                    const spherical = Pnt3.toSpherical(Pnt3.rot({ x: 0, y: 0, z: -1 }, this.camera.rotation));
+                    spherical.theta -= rotationDelta.x / 300;
+                    spherical.phi += rotationDelta.y / 300;
+                    spherical.phi = Math.max(0.000001, Math.min(Math.PI - 0.000001, spherical.phi));
+                    this.camera.rotation = Qtrn.lookAt(this.camera.position, Pnt3.add(this.camera.position, Pnt3.fromSpherical(spherical)), { x: 0, y: 0, z: 1 });
                     rotationDelta = { x: 0, y: 0 };
                 }
             });

package/dist/3d/entities/controllers/input/orbit-camera.controller.d.ts

@@ -0,0 +1,33 @@
+import { GgEntity, GGTickOrder } from '../../../../base/entities/gg-entity';
+import { MouseInput, MouseInputOptions } from '../../../../base/inputs/mouse.input';
+import { Gg3dCameraEntity } from '../../gg-3d-camera.entity';
+import { GgWorld } from '../../../../base/gg-world';
+import { MutableSpherical, Point3 } from '../../../../base/models/points';
+export declare type OrbitCameraControllerOptions = {
+    mouseOptions: Partial<MouseInputOptions>;
+    target: Point3;
+    orbiting: {
+        sensitivityX: number;
+        sensitivityY: number;
+    } | false;
+    zooming: {
+        sensitivity: number;
+    } | false;
+    panning: {
+        sensitivityX: number;
+        sensitivityY: number;
+    } | false;
+    dollying: {
+        sensitivity: number;
+    } | false;
+};
+export declare class OrbitCameraController extends GgEntity {
+    protected readonly camera: Gg3dCameraEntity;
+    readonly tickOrder = GGTickOrder.INPUT_CONTROLLERS;
+    protected readonly options: OrbitCameraControllerOptions;
+    protected readonly mouseInput: MouseInput;
+    protected spherical: MutableSpherical;
+    constructor(camera: Gg3dCameraEntity, options?: Partial<OrbitCameraControllerOptions>);
+    onSpawned(world: GgWorld<any, any>): Promise<void>;
+    onRemoved(): Promise<void>;
+}

package/dist/3d/entities/controllers/input/orbit-camera.controller.js

@@ -0,0 +1,112 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { GgEntity, GGTickOrder } from '../../../../base/entities/gg-entity';
+import { MouseInput, MouseInputState } from '../../../../base/inputs/mouse.input';
+import { filter, takeUntil } from 'rxjs';
+import { Qtrn } from '../../../../base/math/quaternion';
+import { Pnt3 } from '../../../../base/math/point3';
+import { map } from 'rxjs/operators';
+const DEFAULT_OPTIONS = {
+    mouseOptions: {},
+    target: { x: 0, y: 0, z: 0 },
+    orbiting: { sensitivityX: 1, sensitivityY: 1 },
+    zooming: { sensitivity: 1 },
+    panning: { sensitivityX: 1, sensitivityY: 1 },
+    dollying: { sensitivity: 1 },
+};
+export class OrbitCameraController extends GgEntity {
+    constructor(camera, options = {}) {
+        super();
+        this.camera = camera;
+        this.tickOrder = GGTickOrder.INPUT_CONTROLLERS;
+        this.spherical = { phi: 0, radius: 0, theta: 0 };
+        this.options = Object.assign(Object.assign({}, DEFAULT_OPTIONS), options);
+        this.mouseInput = new MouseInput(this.options.mouseOptions);
+    }
+    onSpawned(world) {
+        const _super = Object.create(null, {
+            onSpawned: { get: () => super.onSpawned }
+        });
+        return __awaiter(this, void 0, void 0, function* () {
+            yield _super.onSpawned.call(this, world);
+            this.spherical = Pnt3.toSpherical(Pnt3.sub(this.camera.position, this.options.target));
+            if (this.options.orbiting) {
+                this.mouseInput.delta$
+                    .pipe(takeUntil(this._onRemoved$), filter(() => this.mouseInput.state == MouseInputState.DRAG))
+                    .subscribe(delta => {
+                    this.spherical.theta -= (delta.x * this.options.orbiting.sensitivityX * Math.PI) / 900;
+                    this.spherical.phi -= (delta.y * this.options.orbiting.sensitivityY * Math.PI) / 900;
+                    this.spherical.phi = Math.max(0.000001, Math.min(Math.PI - 0.000001, this.spherical.phi));
+                });
+            }
+            if (this.options.zooming) {
+                this.mouseInput.wheel$.pipe(takeUntil(this._onRemoved$)).subscribe(delta => {
+                    if (delta != 0) {
+                        this.spherical.radius *= Math.pow(0.95, this.options.zooming.sensitivity * (delta > 0 ? -1 : 1));
+                    }
+                });
+            }
+            const performPan = (delta) => {
+                const targetCameraVector = Pnt3.fromSpherical(this.spherical);
+                const viewUp = Pnt3.rotAround(targetCameraVector, {
+                    x: -Math.sin(this.spherical.theta),
+                    y: Math.cos(this.spherical.theta),
+                    z: 0,
+                }, Math.PI / 2);
+                const viewRight = Pnt3.rotAround(targetCameraVector, Pnt3.norm(viewUp), Math.PI / 2);
+                this.options.target = Pnt3.add(this.options.target, Pnt3.add(Pnt3.scalarMult(viewUp, (-this.options.panning.sensitivityY * delta.y) / 1000), Pnt3.scalarMult(viewRight, (this.options.panning.sensitivityX * delta.x) / 1000)));
+            };
+            if (this.options.panning) {
+                this.mouseInput.delta$
+                    .pipe(takeUntil(this._onRemoved$), filter(() => this.mouseInput.state == MouseInputState.DRAG_RIGHT_BUTTON))
+                    .subscribe(delta => {
+                    performPan(delta);
+                });
+            }
+            if (this.options.dollying) {
+                this.mouseInput.delta$
+                    .pipe(takeUntil(this._onRemoved$), filter(() => this.mouseInput.state == MouseInputState.DRAG_MIDDLE_BUTTON))
+                    .subscribe(delta => {
+                    this.spherical.radius *= Math.pow(0.95, (-this.options.dollying.sensitivity * delta.y) / 10);
+                });
+            }
+            if (MouseInput.isTouchDevice() && (this.options.dollying || this.options.panning)) {
+                this.mouseInput.twoTouchGestureDelta$.pipe(takeUntil(this._onRemoved$)).subscribe(delta => {
+                    // dolly on fingers pitch
+                    if (this.options.dollying) {
+                        this.spherical.radius *= Math.pow(0.95, (this.options.dollying.sensitivity * delta.distanceDelta) / 10);
+                    }
+                    // pan on fingers move
+                    if (this.options.panning) {
+                        performPan(delta.centerPointDelta);
+                    }
+                });
+            }
+            // Setup updating camera position and rotation based on input
+            this.camera.tick$
+                .pipe(takeUntil(this._onRemoved$), map(() => this.spherical))
+                .subscribe(spherical => {
+                this.camera.position = Pnt3.add(this.options.target, Pnt3.fromSpherical(spherical));
+                this.camera.rotation = Qtrn.lookAt(this.camera.position, this.options.target, { x: 0, y: 0, z: 1 });
+            });
+            // start input
+            yield this.mouseInput.start();
+        });
+    }
+    onRemoved() {
+        const _super = Object.create(null, {
+            onRemoved: { get: () => super.onRemoved }
+        });
+        return __awaiter(this, void 0, void 0, function* () {
+            yield _super.onRemoved.call(this);
+            yield this.mouseInput.stop(true);
+        });
+    }
+}

package/dist/base/entities/base-gg-renderer.d.ts

@@ -1,20 +1,60 @@
 import { GgEntity, GGTickOrder } from './gg-entity';
 import { Point2 } from '../models/points';
 import { GgWorld } from '../gg-world';
+import { BehaviorSubject, Observable } from 'rxjs';
+/**
+ * Represents the options that can be passed to a renderer.
+ * @typedef {Object} RendererOptions
+ * @property {boolean} transparent - Specifies whether pixels can be transparent. false by default.
+ * @property {number} background - Specifies the background color of the renderer. black by default.
+ * @property {Point2 | 'fullscreen' | ((pageSize: Point2) => Point2) | Observable<Point2>} size - Specifies the size of the renderer and canvas if set. 'fullscreen' by default.
+ * @property {number} [forceResolution] - Specifies the pixel resolution. Not set by default, which means "use device resolution".
+ * @property {boolean} antialias - Specifies whether antialiasing is turned on/off. true by default.
+ */
 export declare type RendererOptions = {
     transparent: boolean;
     background: number;
-    forceRendererSize?: Point2;
+    size: Point2 | 'fullscreen' | ((pageSize: Point2) => Point2) | Observable<Point2>;
     forceResolution?: number;
     antialias: boolean;
 };
+/**
+ * Represents an abstract base class for a renderer controller.
+ * @abstract
+ * @class
+ */
 export declare abstract class BaseGgRenderer extends GgEntity {
     protected readonly canvas?: HTMLCanvasElement | undefined;
     readonly tickOrder = GGTickOrder.RENDERING;
+    /** Specifies the options for the renderer. */
     readonly rendererOptions: RendererOptions;
+    /** Represents the current size of the renderer. */
+    protected _rendererSize$: BehaviorSubject<Point2 | null>;
+    /**
+     * Gets the observable that represents the current size of the renderer.
+     * @returns {Observable<Point2 | null>} - An observable that represents the size of the renderer.
+     */
+    get rendererSize$(): Observable<Point2 | null>;
+    /**
+     Gets the current size of the renderer.
+     @returns {Point2 | null} - The size of the renderer.
+     */
+    get rendererSize(): Point2 | null;
+    /**
+     Initializes a new instance of the BaseGgRenderer class.
+     @param {HTMLCanvasElement} [canvas] - The canvas element to render onto.
+     @param {Partial<RendererOptions>} [options={}] - The options to configure the renderer.
+     */
     protected constructor(canvas?: HTMLCanvasElement | undefined, options?: Partial<RendererOptions>);
+    /**
+     * Renders the scene.
+     */
     abstract render(): void;
-    abstract resize(newSize: Point2): void;
+    /**
+     * Resizes the renderer to the specified size.
+     * @param {Point2} newSize - The new size of the renderer.
+     */
+    protected abstract resizeRenderer(newSize: Point2): void;
     onSpawned(world: GgWorld<any, any>): void;
-    onRemoved(): void;
+    dispose(): void;
 }

package/dist/base/entities/base-gg-renderer.js

@@ -1,29 +1,81 @@
 import { GgEntity, GGTickOrder } from './gg-entity';
-import { GgViewportManager } from '../gg-viewport-manager';
+import { auditTime, BehaviorSubject, fromEvent, merge, Observable, takeUntil } from 'rxjs';
+import { distinctUntilChanged, map, startWith } from 'rxjs/operators';
+const DEFAULT_RENDERER_OPTIONS = {
+    transparent: false,
+    background: 0x000000,
+    size: 'fullscreen',
+    antialias: true,
+};
+/**
+ * Represents an abstract base class for a renderer controller.
+ * @abstract
+ * @class
+ */
 export class BaseGgRenderer extends GgEntity {
+    /**
+     Initializes a new instance of the BaseGgRenderer class.
+     @param {HTMLCanvasElement} [canvas] - The canvas element to render onto.
+     @param {Partial<RendererOptions>} [options={}] - The options to configure the renderer.
+     */
     constructor(canvas, options = {}) {
         super();
         this.canvas = canvas;
         this.tickOrder = GGTickOrder.RENDERING;
-        this.rendererOptions = Object.assign({ transparent: false, background: 0x000000, antialias: true }, (options || {}));
+        /** Represents the current size of the renderer. */
+        this._rendererSize$ = new BehaviorSubject(null);
+        this.rendererOptions = Object.assign(Object.assign({}, DEFAULT_RENDERER_OPTIONS), (options || {}));
         this.tick$.subscribe(() => {
             this.render();
         });
     }
+    /**
+     * Gets the observable that represents the current size of the renderer.
+     * @returns {Observable<Point2 | null>} - An observable that represents the size of the renderer.
+     */
+    get rendererSize$() {
+        return this._rendererSize$.asObservable();
+    }
+    /**
+     Gets the current size of the renderer.
+     @returns {Point2 | null} - The size of the renderer.
+     */
+    get rendererSize() {
+        return this._rendererSize$.getValue();
+    }
     onSpawned(world) {
         super.onSpawned(world);
-        if (this.canvas) {
-            setTimeout(() => {
-                GgViewportManager.instance.assignRendererToCanvas(this, this.canvas).then();
-            }, 0);
+        this._rendererSize$.next(null);
+        if (this.rendererOptions.size == 'fullscreen' || this.rendererOptions.size instanceof Function) {
+            if (this.canvas) {
+                this.canvas.style.position = 'absolute';
+            }
+            merge(fromEvent(window, 'resize').pipe(auditTime(100)), fromEvent(window, 'orientationchange'))
+                .pipe(takeUntil(this._onRemoved$), map(() => ({ x: window.innerWidth, y: window.innerHeight })), startWith({ x: window.innerWidth, y: window.innerHeight }))
+                .subscribe(size => {
+                this._rendererSize$.next(this.rendererOptions.size instanceof Function ? this.rendererOptions.size(size) : size);
+            });
         }
-    }
-    onRemoved() {
-        super.onRemoved();
-        if (this.canvas) {
-            setTimeout(() => {
-                GgViewportManager.instance.deregisterCanvas(this.canvas).then();
-            }, 0);
+        else if (this.rendererOptions.size instanceof Observable ||
+            // for cases when project uses two separate rxjs packages, instanceof can return false for observable
+            (!!this.rendererOptions.subscribe !== undefined && !!this.rendererOptions.pipe !== undefined)) {
+            this.rendererOptions.size.pipe(takeUntil(this._onRemoved$)).subscribe(newSize => {
+                this._rendererSize$.next(newSize);
+            });
         }
+        else {
+            this._rendererSize$.next(this.rendererOptions.size);
+        }
+        this._rendererSize$
+            .pipe(takeUntil(this._onRemoved$), distinctUntilChanged((a, b) => (a === null || a === void 0 ? void 0 : a.x) == (b === null || b === void 0 ? void 0 : b.x) && (a === null || a === void 0 ? void 0 : a.y) == (b === null || b === void 0 ? void 0 : b.y)))
+            .subscribe(size => {
+            if (size) {
+                this.resizeRenderer(size);
+            }
+        });
+    }
+    dispose() {
+        super.dispose();
+        this._rendererSize$.complete();
     }
 }

package/dist/base/inputs/mouse.input.d.ts

@@ -1,49 +1,84 @@
 import { Input } from './input';
 import { Observable } from 'rxjs';
 import { Point2 } from '../models/points';
-/**
- * Options for pointer lock in a MouseInput.
- *
- * ignoreMovementWhenNotLocked: Whether to ignore mouse movement when pointer lock is not active.
- *
- * canvas: The canvas element to request pointer lock on.
- */
-export declare type MouseInputPointLockOptions = {
-    ignoreMovementWhenNotLocked: boolean;
-    canvas: HTMLCanvasElement;
-};
 /**
  * Options for a MouseInput.
  *
- * pointerLock: The options for pointer lock. Do not provide it to disable pointer lock functionality
+ * canvas?: Canvas element. If not provided, mouse events will be listened on the whole window
+ * pointerLock: The flag to enable pointer lock when clicking on canvas
  */
 export declare type MouseInputOptions = {
-    pointerLock?: MouseInputPointLockOptions;
+    canvas?: HTMLCanvasElement;
+    pointerLock: boolean;
 };
 /**
- * A class representing mouse input.
+ Represents the state of the mouse/touch input on the screen.
  */
-export declare class MouseInput extends Input<[], [unlockPointer?: boolean]> {
-    private readonly options;
+export declare enum MouseInputState {
+    /**
+     No mouse or touch input is detected. Mouse move can still be emitted
+     */
+    NONE = 0,
+    /**
+     The left mouse button or a single touch is being dragged on the screen.
+     */
+    DRAG = 1,
+    /**
+     The middle mouse button is being dragged on the screen.
+     */
+    DRAG_MIDDLE_BUTTON = 2,
     /**
-     * An observable of the change in the x position of the mouse.
+     The right mouse button is being dragged on the screen.
      */
-    get deltaX$(): Observable<number>;
+    DRAG_RIGHT_BUTTON = 3,
     /**
-     * An observable of the change in the y position of the mouse.
+     *Two fingers are being used to drag on the screen.
      */
-    get deltaY$(): Observable<number>;
+    DRAG_TOUCH_TWO_FINGERS = 4
+}
+/**
+ * A class representing mouse input.
+ */
+export declare class MouseInput extends Input<[], [unlockPointer?: boolean]> {
+    static isTouchDevice(): boolean;
     /**
      An observable of the change in the position of the mouse.
      */
     get delta$(): Observable<Point2>;
+    /**
+     A global position of the mouse.
+     */
+    get position(): Point2;
+    /**
+     An observable of the global position of the mouse.
+     */
+    get position$(): Observable<Point2>;
+    /**
+     An observable of the wheel scrolling.
+     */
+    get wheel$(): Observable<number>;
+    get isPointerLocked(): boolean;
+    private readonly options;
     private _delta$;
+    private _position$;
+    private _multiTouchPositions$;
+    private _wheel$;
     private stopped$;
+    private _state$;
+    get state(): MouseInputState;
+    get state$(): Observable<MouseInputState>;
+    get multiTouchPositions$(): Observable<Point2[]>;
+    get twoTouchGestureDelta$(): Observable<{
+        centerPointDelta: Point2;
+        angleDelta: number;
+        distanceDelta: number;
+    }>;
+    private get _element();
     /**
      Creates an instance of MouseInput.
      @param {MouseInputOptions} options - The options for the MouseInput.
      */
-    constructor(options?: MouseInputOptions);
+    constructor(options?: Partial<MouseInputOptions>);
     protected startInternal(): Promise<void>;
     /**
      Stop listening for mouse movement events.

package/dist/base/inputs/mouse.input.js

@@ -8,8 +8,38 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { Input } from './input';
-import { filter, fromEvent, Subject, takeUntil } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { BehaviorSubject, filter, fromEvent, NEVER, Subject, takeUntil } from 'rxjs';
+import { map, pairwise, switchMap } from 'rxjs/operators';
+import { Pnt2 } from '../math/point2';
+const DEFAULT_MOUSE_INPUT_OPTIONS = {
+    pointerLock: false,
+};
+/**
+ Represents the state of the mouse/touch input on the screen.
+ */
+export var MouseInputState;
+(function (MouseInputState) {
+    /**
+     No mouse or touch input is detected. Mouse move can still be emitted
+     */
+    MouseInputState[MouseInputState["NONE"] = 0] = "NONE";
+    /**
+     The left mouse button or a single touch is being dragged on the screen.
+     */
+    MouseInputState[MouseInputState["DRAG"] = 1] = "DRAG";
+    /**
+     The middle mouse button is being dragged on the screen.
+     */
+    MouseInputState[MouseInputState["DRAG_MIDDLE_BUTTON"] = 2] = "DRAG_MIDDLE_BUTTON";
+    /**
+     The right mouse button is being dragged on the screen.
+     */
+    MouseInputState[MouseInputState["DRAG_RIGHT_BUTTON"] = 3] = "DRAG_RIGHT_BUTTON";
+    /**
+     *Two fingers are being used to drag on the screen.
+     */
+    MouseInputState[MouseInputState["DRAG_TOUCH_TWO_FINGERS"] = 4] = "DRAG_TOUCH_TWO_FINGERS";
+})(MouseInputState || (MouseInputState = {}));
 /**
  * A class representing mouse input.
  */
@@ -20,39 +50,151 @@ export class MouseInput extends Input {
      */
     constructor(options = {}) {
         super();
-        this.options = options;
         this._delta$ = new Subject();
+        this._position$ = new BehaviorSubject({ x: 0, y: 0 });
+        this._multiTouchPositions$ = new BehaviorSubject([]);
+        this._wheel$ = new Subject();
         this.stopped$ = new Subject();
+        this._state$ = new BehaviorSubject(MouseInputState.NONE);
+        this.options = Object.assign(Object.assign({}, DEFAULT_MOUSE_INPUT_OPTIONS), options);
         this.canvasClickListener = this.canvasClickListener.bind(this);
     }
+    static isTouchDevice() {
+        return ('createTouch' in document ||
+            !!navigator.userAgent.match(/(iPhone|iPod|iPad)/) ||
+            !!navigator.userAgent.match(/Android/));
+    }
+    /**
+     An observable of the change in the position of the mouse.
+     */
+    get delta$() {
+        return this._delta$.asObservable();
+    }
     /**
-     * An observable of the change in the x position of the mouse.
+     A global position of the mouse.
      */
-    get deltaX$() {
-        return this._delta$.pipe(map(d => d.x));
+    get position() {
+        return this._position$.getValue();
     }
     /**
-     * An observable of the change in the y position of the mouse.
+     An observable of the global position of the mouse.
      */
-    get deltaY$() {
-        return this._delta$.pipe(map(d => d.y));
+    get position$() {
+        return this._position$.asObservable();
     }
     /**
-     An observable of the change in the position of the mouse.
+     An observable of the wheel scrolling.
      */
-    get delta$() {
-        return this._delta$.asObservable();
+    get wheel$() {
+        return this._wheel$.asObservable();
+    }
+    get isPointerLocked() {
+        return !!document.pointerLockElement;
+    }
+    get state() {
+        return this._state$.getValue();
+    }
+    get state$() {
+        return this._state$.asObservable();
+    }
+    get multiTouchPositions$() {
+        return this._multiTouchPositions$.asObservable();
+    }
+    get twoTouchGestureDelta$() {
+        return this.state$.pipe(switchMap((s) => s == MouseInputState.DRAG_TOUCH_TWO_FINGERS ? this.multiTouchPositions$ : NEVER), map((p) => p.map(v => ({ x: v.x, y: v.y }))), pairwise(), filter(([prev, cur]) => prev.length > 1 && cur.length > 1), map(([prev, cur]) => ({
+            centerPointDelta: Pnt2.sub(Pnt2.scalarMult(cur.reduce((p, c) => Pnt2.add(p, c), { x: 0, y: 0 }), 1 / cur.length), Pnt2.scalarMult(prev.reduce((p, c) => Pnt2.add(p, c), { x: 0, y: 0 }), 1 / cur.length)),
+            angleDelta: Pnt2.angle(cur[1], cur[0]) - Pnt2.angle(prev[1], prev[0]),
+            distanceDelta: Pnt2.dist(cur[1], cur[0]) - Pnt2.dist(prev[1], prev[0]),
+        })));
+    }
+    get _element() {
+        return this.options.canvas || window;
     }
     startInternal() {
         return __awaiter(this, void 0, void 0, function* () {
-            fromEvent(window, 'mousemove')
-                .pipe(takeUntil(this.stopped$), filter(() => !this.options.pointerLock ||
-                !this.options.pointerLock.ignoreMovementWhenNotLocked ||
-                !!document.pointerLockElement), map((e) => ({ x: e.movementX, y: e.movementY })))
-                .subscribe(v => this._delta$.next(v));
-            if (!!this.options.pointerLock) {
-                this.options.pointerLock.canvas.addEventListener('click', this.canvasClickListener);
+            if (this.options.canvas) {
+                this.options.canvas.style.touchAction = 'none';
+            }
+            this._state$.next(MouseInputState.NONE);
+            const mouseButtonStateMap = [
+                MouseInputState.DRAG,
+                MouseInputState.DRAG_MIDDLE_BUTTON,
+                MouseInputState.DRAG_RIGHT_BUTTON,
+            ];
+            const pointerLengthsStateMap = [MouseInputState.NONE, MouseInputState.DRAG, MouseInputState.DRAG_TOUCH_TWO_FINGERS];
+            const pointers = [];
+            const pointerPositions = {};
+            fromEvent(this._element, 'mousemove')
+                .pipe(takeUntil(this.stopped$))
+                .subscribe((event) => {
+                this._delta$.next({ x: event.movementX, y: event.movementY });
+            });
+            fromEvent(this._element, 'pointermove')
+                .pipe(takeUntil(this.stopped$))
+                .subscribe((event) => {
+                if (event instanceof PointerEvent) {
+                    if (event.pointerType === 'touch') {
+                        pointerPositions[event.pointerId] = { x: event.pageX, y: event.pageY };
+                    }
+                    const newPosition = { x: event.pageX, y: event.pageY };
+                    this._position$.next(newPosition);
+                    this._multiTouchPositions$.next(Object.values(pointerPositions));
+                }
+                else {
+                    this._position$.next({ x: event.clientX, y: event.clientY });
+                }
+                this._delta$.next({ x: event.movementX, y: event.movementY });
+            });
+            if (!MouseInput.isTouchDevice() && this.options.pointerLock && this.options.canvas) {
+                this.options.canvas.addEventListener('click', this.canvasClickListener);
             }
+            const onPointerUp = (event) => {
+                delete pointerPositions[event.pointerId];
+                for (let i = 0; i < pointers.length; i++) {
+                    if (pointers[i].pointerId == event.pointerId) {
+                        pointers.splice(i, 1);
+                        break;
+                    }
+                }
+                if (pointers.length === 0) {
+                    if (this.options.canvas) {
+                        this.options.canvas.releasePointerCapture(event.pointerId);
+                    }
+                    this._element.removeEventListener('pointerup', onPointerUp);
+                    this._element.removeEventListener('pointercancel', onPointerUp);
+                }
+                this._state$.next(pointerLengthsStateMap[Math.min(pointers.length, 2)]);
+            };
+            fromEvent(this._element, 'pointerdown')
+                .pipe(takeUntil(this.stopped$))
+                .subscribe((event) => {
+                if (pointers.length === 0) {
+                    if (this.options.canvas) {
+                        this.options.canvas.setPointerCapture(event.pointerId);
+                    }
+                    this._element.addEventListener('pointerup', onPointerUp);
+                    this._element.addEventListener('pointercancel', onPointerUp);
+                }
+                pointers.push(event);
+                if (event.pointerType === 'touch') {
+                    pointerPositions[event.pointerId] = { x: event.pageX, y: event.pageY };
+                    this._state$.next(pointerLengthsStateMap[Math.min(pointers.length, 2)]);
+                }
+                else {
+                    this._state$.next(mouseButtonStateMap[event.button] || MouseInputState.NONE);
+                }
+            });
+            fromEvent(this._element, 'contextmenu')
+                .pipe(takeUntil(this.stopped$))
+                .subscribe(event => {
+                event.preventDefault();
+            });
+            fromEvent(this._element, 'wheel', { passive: false })
+                .pipe(takeUntil(this.stopped$))
+                .subscribe(e => {
+                e.preventDefault();
+                this._wheel$.next(e.deltaY);
+            });
         });
     }
     /**
@@ -62,8 +204,8 @@ export class MouseInput extends Input {
     stopInternal(unlockPointer = true) {
         return __awaiter(this, void 0, void 0, function* () {
             this.stopped$.next();
-            if (unlockPointer && !!this.options.pointerLock) {
-                this.options.pointerLock.canvas.removeEventListener('click', this.canvasClickListener);
+            if (unlockPointer && !!this.options.canvas) {
+                this.options.canvas.removeEventListener('click', this.canvasClickListener);
                 document.exitPointerLock();
             }
         });
@@ -72,6 +214,6 @@ export class MouseInput extends Input {
      Request pointer lock on the canvas element.
      */
     canvasClickListener() {
-        this.options.pointerLock.canvas.requestPointerLock();
+        this.options.canvas.requestPointerLock();
     }
 }

package/dist/base/math/point2.d.ts

@@ -6,6 +6,12 @@ export declare class Pnt2 {
     static add(a: Point2, b: Point2): Point2;
     /** subtract point b from point a */
     static sub(a: Point2, b: Point2): Point2;
+    /** calculate vector length (squared) */
+    static lenSq(v: Point2): number;
+    /** calculate vector length */
+    static len(v: Point2): number;
+    /** distance between points */
+    static dist(a: Point2, b: Point2): number;
     /** normalize */
     static norm(p: Point2): Point2;
     /** scalar multiplication */

package/dist/base/math/point2.js

@@ -11,6 +11,18 @@ export class Pnt2 {
     static sub(a, b) {
         return { x: a.x - b.x, y: a.y - b.y };
     }
+    /** calculate vector length (squared) */
+    static lenSq(v) {
+        return v.x * v.x + v.y * v.y;
+    }
+    /** calculate vector length */
+    static len(v) {
+        return Math.sqrt(v.x * v.x + v.y * v.y);
+    }
+    /** distance between points */
+    static dist(a, b) {
+        return Pnt2.len(Pnt2.sub(a, b));
+    }
     /** normalize */
     static norm(p) {
         const length = Math.sqrt(p.x ** 2 + p.y ** 2);

package/dist/base/math/point3.d.ts

@@ -1,4 +1,4 @@
-import { Point3, Point4 } from '../models/points';
+import { Point3, Point4, Spherical } from '../models/points';
 export declare class Pnt3 {
     /** clone point */
     static clone(p: Point3): Point3;
@@ -10,6 +10,8 @@ export declare class Pnt3 {
     static lenSq(v: Point3): number;
     /** calculate vector length */
     static len(v: Point3): number;
+    /** distance between points */
+    static dist(a: Point3, b: Point3): number;
     /** cross vectors */
     static cross(a: Point3, b: Point3): Point3;
     /** normalize */
@@ -24,4 +26,18 @@ export declare class Pnt3 {
     static rot(p: Point3, q: Point4): Point3;
     /** rotate point around axis a (normalized vector) */
     static rotAround(p: Point3, axis: Point3, angle: number): Point3;
+    /**
+     * Converts a cartesian 3D point to a spherical coordinate system, where theta is azimuth and phi is inclination,
+     * theta == 0 is faced towards X axis direction, and phi == 0 is faced towards zenith (Z axis)
+     * @param p - The cartesian 3D point.
+     * @returns The spherical coordinates as an object with radius, theta, and phi properties.
+     */
+    static toSpherical(p: Point3): Spherical;
+    /**
+     * Converts a spherical coordinate system to a cartesian 3D point. Used spherical coordinates, where theta is azimuth
+     * and phi is inclination, theta == 0 is faced towards X axis direction, and phi == 0 is faced towards zenith (Z axis)
+     * @param s - The spherical coordinate system.
+     * @returns The cartesian 3D point as an object with x, y, and z properties.
+     */
+    static fromSpherical(s: Spherical): Point3;
 }

package/dist/base/math/point3.js

@@ -20,6 +20,10 @@ export class Pnt3 {
     static len(v) {
         return Math.sqrt(v.x * v.x + v.y * v.y + v.z * v.z);
     }
+    /** distance between points */
+    static dist(a, b) {
+        return Pnt3.len(Pnt3.sub(a, b));
+    }
     /** cross vectors */
     static cross(a, b) {
         const ax = a.x, ay = a.y, az = a.z;
@@ -103,4 +107,31 @@ export class Pnt3 {
     static rotAround(p, axis, angle) {
         return this.rot(p, Qtrn.fromAngle(axis, angle));
     }
+    /**
+     * Converts a cartesian 3D point to a spherical coordinate system, where theta is azimuth and phi is inclination,
+     * theta == 0 is faced towards X axis direction, and phi == 0 is faced towards zenith (Z axis)
+     * @param p - The cartesian 3D point.
+     * @returns The spherical coordinates as an object with radius, theta, and phi properties.
+     */
+    static toSpherical(p) {
+        const radius = Math.sqrt(p.x * p.x + p.y * p.y + p.z * p.z);
+        return {
+            radius,
+            theta: radius == 0 ? 0 : Math.atan2(p.y, p.x),
+            phi: radius == 0 ? 0 : Math.atan2(Math.sqrt(p.x * p.x + p.y * p.y), p.z),
+        };
+    }
+    /**
+     * Converts a spherical coordinate system to a cartesian 3D point. Used spherical coordinates, where theta is azimuth
+     * and phi is inclination, theta == 0 is faced towards X axis direction, and phi == 0 is faced towards zenith (Z axis)
+     * @param s - The spherical coordinate system.
+     * @returns The cartesian 3D point as an object with x, y, and z properties.
+     */
+    static fromSpherical(s) {
+        return {
+            x: s.radius * Math.sin(s.phi) * Math.cos(s.theta),
+            y: s.radius * Math.sin(s.phi) * Math.sin(s.theta),
+            z: s.radius * Math.cos(s.phi),
+        };
+    }
 }

package/dist/base/models/points.d.ts

@@ -13,3 +13,13 @@ export declare type Point4 = {
     readonly z: number;
     readonly w: number;
 };
+export declare type Spherical = {
+    readonly radius: number;
+    readonly phi: number;
+    readonly theta: number;
+};
+export declare type MutableSpherical = {
+    radius: number;
+    phi: number;
+    theta: number;
+};

package/dist/index.d.ts

@@ -1,8 +1,6 @@
 export * from './base/clock/i-clock';
 export * from './base/clock/pausable-clock';
 export * from './base/clock/global-clock';
-export * from './base/gg-viewport';
-export * from './base/gg-viewport-manager';
 export * from './base/entities/controllers/animation-mixer';
 export * from './base/entities/gg-entity';
 export * from './base/entities/base-gg-renderer';
@@ -46,6 +44,7 @@ export * from './3d/entities/gg-3d-raycast-vehicle.entity';
 export * from './3d/entities/gg-3d-trigger.entity';
 export * from './3d/entities/controllers/input/car-keyboard-handling.controller';
 export * from './3d/entities/controllers/input/free-camera.controller';
+export * from './3d/entities/controllers/input/orbit-camera.controller';
 export * from './3d/models/body-options';
 export * from './3d/models/gg-meta';
 export * from './3d/models/shapes';

package/dist/index.js

@@ -1,8 +1,6 @@
 export * from './base/clock/i-clock';
 export * from './base/clock/pausable-clock';
 export * from './base/clock/global-clock';
-export * from './base/gg-viewport';
-export * from './base/gg-viewport-manager';
 export * from './base/entities/controllers/animation-mixer';
 export * from './base/entities/gg-entity';
 export * from './base/entities/base-gg-renderer';
@@ -46,6 +44,7 @@ export * from './3d/entities/gg-3d-raycast-vehicle.entity';
 export * from './3d/entities/gg-3d-trigger.entity';
 export * from './3d/entities/controllers/input/car-keyboard-handling.controller';
 export * from './3d/entities/controllers/input/free-camera.controller';
+export * from './3d/entities/controllers/input/orbit-camera.controller';
 export * from './3d/models/body-options';
 export * from './3d/models/gg-meta';
 export * from './3d/models/shapes';

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@gg-web-engine/core",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "description": "An attempt to create open source game engine for browser",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "test": "jest",
     "prettier-format": "prettier --config .prettierrc 'src/**/*.ts' --write",
-    "prepublish": "tsc",
+    "prepublish": "rm -rf ./dist/ && tsc",
     "build": "tsc"
   },
   "repository": {

package/dist/base/gg-viewport-manager.d.ts

@@ -1,19 +0,0 @@
-import { Subject } from 'rxjs';
-import { BaseGgRenderer } from './entities/base-gg-renderer';
-export declare type CanvasAppDescr = {
-    canvas: HTMLCanvasElement;
-    renderer?: BaseGgRenderer;
-};
-export declare class GgViewportManager {
-    private static _instance;
-    static get instance(): GgViewportManager;
-    private constructor();
-    private readonly canvases;
-    private gameStage$;
-    protected destroyed: Subject<void>;
-    private getStageAsync;
-    createCanvas(zIndex: number): Promise<HTMLCanvasElement>;
-    registerCanvas(canvas: HTMLCanvasElement, zIndex: number): Promise<void>;
-    deregisterCanvas(canvas: HTMLCanvasElement): Promise<void>;
-    assignRendererToCanvas(renderer: BaseGgRenderer, canvas: HTMLCanvasElement): Promise<void>;
-}

package/dist/base/gg-viewport-manager.js

@@ -1,131 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import { BehaviorSubject, filter, first, Subject, takeUntil } from 'rxjs';
-import { GgViewport } from './gg-viewport';
-export class GgViewportManager {
-    constructor() {
-        this.canvases = {};
-        this.gameStage$ = new BehaviorSubject(null);
-        this.destroyed = new Subject();
-        setTimeout(() => __awaiter(this, void 0, void 0, function* () {
-            let retries = 120;
-            let stage = null;
-            while (retries > 0) {
-                retries--;
-                stage = document.getElementById('gg-stage');
-                if (stage) {
-                    break;
-                }
-                yield new Promise(r => setTimeout(r, 250));
-            }
-            if (!stage) {
-                this.gameStage$.error(new Error('Div with id "gg-stage" not found in 30 seconds'));
-            }
-            else {
-                GgViewport.instance
-                    .subscribeOnViewportSize()
-                    .pipe(takeUntil(this.destroyed))
-                    .subscribe(size => {
-                    for (const zIndex of Object.keys(this.canvases)) {
-                        const canvasDescr = this.canvases[+zIndex];
-                        if (canvasDescr.renderer && !canvasDescr.renderer.rendererOptions.forceRendererSize) {
-                            canvasDescr.renderer.resize(size);
-                        }
-                        canvasDescr.canvas.width = size.x;
-                        canvasDescr.canvas.height = size.y;
-                    }
-                });
-                this.gameStage$.next(stage);
-            }
-        }), 0);
-    }
-    static get instance() {
-        if (!this._instance) {
-            this._instance = new GgViewportManager();
-        }
-        return this._instance;
-    }
-    getStageAsync() {
-        const current = this.gameStage$.getValue();
-        if (current) {
-            return Promise.resolve(current);
-        }
-        return Promise.race([
-            this.gameStage$
-                .pipe(takeUntil(this.destroyed), filter(x => !!x), first())
-                .toPromise(),
-            new Promise((resolve, reject) => {
-                setTimeout(() => {
-                    reject('Cannot find div with id "gg-stage" in 30 seconds');
-                }, 30000);
-            }),
-        ]);
-    }
-    createCanvas(zIndex) {
-        return __awaiter(this, void 0, void 0, function* () {
-            zIndex = Math.round(zIndex);
-            if (this.canvases[zIndex]) {
-                throw new Error(`Cannot add canvas on zIndex ${zIndex}. Index is locked by another canvas`);
-            }
-            const stage = yield this.getStageAsync();
-            const canvas = document.createElement('canvas');
-            yield this.registerCanvas(canvas, zIndex);
-            stage.appendChild(canvas);
-            return canvas;
-        });
-    }
-    registerCanvas(canvas, zIndex) {
-        return __awaiter(this, void 0, void 0, function* () {
-            canvas.style.zIndex = '' + zIndex;
-            canvas.style.position = 'absolute';
-            canvas.style.width = '100%';
-            canvas.style.height = '100%';
-            canvas.id = 'canvas-' + zIndex;
-            this.canvases[zIndex] = { canvas };
-            const size = GgViewport.instance.getCurrentViewportSize();
-            canvas.width = size.x;
-            canvas.height = size.y;
-        });
-    }
-    deregisterCanvas(canvas) {
-        return __awaiter(this, void 0, void 0, function* () {
-            for (const index in this.canvases) {
-                if (this.canvases[index].canvas === canvas) {
-                    delete this.canvases[index];
-                    break;
-                }
-            }
-        });
-    }
-    assignRendererToCanvas(renderer, canvas) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!GgViewport.instance.isActive) {
-                GgViewport.instance.activate();
-            }
-            let zIndex = null;
-            let maxExistingZIndex = 0;
-            for (const index in this.canvases) {
-                if (this.canvases[index].canvas === canvas) {
-                    zIndex = +index;
-                    break;
-                }
-                maxExistingZIndex = +index;
-            }
-            if (!zIndex) {
-                zIndex = maxExistingZIndex + 1;
-                yield this.registerCanvas(canvas, zIndex);
-            }
-            this.canvases[zIndex].renderer = renderer;
-            if (!renderer.rendererOptions.forceRendererSize) {
-                renderer.resize(GgViewport.instance.getCurrentViewportSize());
-            }
-        });
-    }
-}

package/dist/base/gg-viewport.d.ts

@@ -1,23 +0,0 @@
-import { Observable, Subject } from 'rxjs';
-import { Point2 } from './models/points';
-export declare class GgViewport {
-    private static _instance;
-    static get instance(): GgViewport;
-    private constructor();
-    protected destroy$: Subject<void> | null;
-    private scenes;
-    get isActive(): boolean;
-    activate(): void;
-    deactivate(): void;
-    private viewportSize;
-    getCurrentViewportSize(): Point2;
-    subscribeOnViewportSize(): Observable<Point2>;
-    private mousePosition;
-    private mouseClicked;
-    private isMouseDown;
-    isMouseEnabled(): boolean;
-    isTouchDevice(): boolean;
-    subscribeOnMouseMove(): Observable<Point2>;
-    subscribeOnIsMouseDown(): Observable<boolean>;
-    subscribeOnMouseClick(): Observable<Point2>;
-}

package/dist/base/gg-viewport.js

@@ -1,119 +0,0 @@
-import { BehaviorSubject, distinctUntilChanged, fromEvent, merge, Subject, takeUntil } from 'rxjs';
-import { map } from 'rxjs/operators';
-const getCurrentWindowSize = () => {
-    return {
-        x: window.innerWidth,
-        y: window.innerHeight,
-    };
-};
-const getMousePositionFromEvent = (event) => {
-    if (event instanceof MouseEvent) {
-        return { x: event.x, y: event.y };
-    }
-    else if (event instanceof TouchEvent) {
-        if (event.touches.length === 0) {
-            return null;
-        }
-        return { x: event.touches[0].clientX, y: event.touches[0].clientY };
-    }
-    console.warn('Cannot determine mouse position from event', event);
-    return null;
-};
-export class GgViewport {
-    constructor() {
-        this.destroy$ = null;
-        this.scenes = [];
-        // ================================================== VIEWPORT SIZE ==================================================
-        this.viewportSize = new BehaviorSubject(getCurrentWindowSize());
-        // ================================================== VIEWPORT SIZE ==================================================
-        // ================================================== POINTER LOGIC ==================================================
-        this.mousePosition = new BehaviorSubject({ x: 0, y: 0 });
-        this.mouseClicked = new Subject();
-        this.isMouseDown = new Subject();
-    }
-    static get instance() {
-        if (!this._instance) {
-            this._instance = new GgViewport();
-        }
-        return this._instance;
-    }
-    get isActive() {
-        return !!this.destroy$;
-    }
-    activate() {
-        if (this.destroy$) {
-            throw new Error('GgViewport is already active');
-        }
-        this.destroy$ = new Subject();
-        // cursor position
-        merge(fromEvent(window, 'mousemove'), fromEvent(window, 'touchstart'), fromEvent(window, 'touchmove'))
-            .pipe(takeUntil(this.destroy$), map(event => event))
-            .subscribe(event => {
-            const point = getMousePositionFromEvent(event);
-            if (point) {
-                this.mousePosition.next(point);
-            }
-        });
-        // clicks
-        merge(fromEvent(window, 'mousedown'), fromEvent(window, 'touchstart'))
-            .pipe(takeUntil(this.destroy$), map(event => event))
-            .subscribe(event => {
-            const point = getMousePositionFromEvent(event);
-            if (point) {
-                this.mousePosition.next(point);
-            }
-            this.isMouseDown.next(true);
-        });
-        merge(fromEvent(window, 'mouseup'), fromEvent(window, 'click'), fromEvent(window, 'touchend'))
-            .pipe(takeUntil(this.destroy$), map(event => event))
-            .subscribe(event => {
-            const point = getMousePositionFromEvent(event);
-            if (point) {
-                this.mousePosition.next(point);
-            }
-            this.isMouseDown.next(false);
-            if (event.target['nodeName'] === 'canvas') {
-                this.mouseClicked.next(this.mousePosition.getValue());
-            }
-        });
-        // viewport size
-        merge(fromEvent(window, 'resize'), fromEvent(window, 'orientationchange'))
-            .pipe(takeUntil(this.destroy$), map(() => getCurrentWindowSize()))
-            .subscribe(this.viewportSize);
-    }
-    deactivate() {
-        if (!this.destroy$) {
-            throw new Error('GgViewport is already inactive');
-        }
-        this.destroy$.next();
-        this.destroy$.complete();
-        this.destroy$ = null;
-    }
-    getCurrentViewportSize() {
-        return this.viewportSize.getValue();
-    }
-    subscribeOnViewportSize() {
-        return this.viewportSize.asObservable().pipe(distinctUntilChanged((v1, v2) => {
-            return v1.x === v2.x && v1.y === v2.y;
-        }));
-    }
-    isMouseEnabled() {
-        return matchMedia('(hover:hover)').matches && matchMedia('(pointer:fine)').matches;
-    }
-    isTouchDevice() {
-        return ('createTouch' in document ||
-            !!navigator.userAgent.match(/(iPhone|iPod|iPad)/) ||
-            !!navigator.userAgent.match(/Android/));
-    }
-    subscribeOnMouseMove() {
-        return this.mousePosition.asObservable().pipe(distinctUntilChanged((v1, v2) => {
-            return v1.x === v2.x && v1.y === v2.y;
-        }));
-    }
-    subscribeOnIsMouseDown() {
-        return this.isMouseDown.asObservable().pipe(distinctUntilChanged());
-    }
-    subscribeOnMouseClick() {
-        return this.mouseClicked.asObservable();
-    }
-}