@gg-web-engine/core 0.0.39 → 0.0.40

package/dist/2d/components/rendering/i-visual-scene-2d.component.d.ts

@@ -1,5 +1,5 @@
 import { IVisualSceneComponent, Point2, RendererOptions } from '../../../base';
 import { VisualTypeDocRepo2D } from '../../gg-2d-world';
 export interface IVisualScene2dComponent<TypeDoc extends VisualTypeDocRepo2D = VisualTypeDocRepo2D> extends IVisualSceneComponent<Point2, number, TypeDoc> {
-    createRenderer(canvas?: HTMLCanvasElement, rendererOptions?: Partial<RendererOptions>): TypeDoc['renderer'];
+    createRenderer(canvas?: HTMLCanvasElement, rendererOptions?: Partial<RendererOptions & TypeDoc['rendererExtraOpts']>): TypeDoc['renderer'];
 }

package/dist/2d/entities/i-renderable-2d.entity.d.ts

@@ -1,4 +1,6 @@
 import { IRenderableEntity, Point2 } from '../../base';
-import { PhysicsTypeDocRepo2D, VisualTypeDocRepo2D } from '../gg-2d-world';
+import { Gg2dWorld, PhysicsTypeDocRepo2D, VisualTypeDocRepo2D } from '../gg-2d-world';
 export declare abstract class IRenderable2dEntity<TypeDoc extends VisualTypeDocRepo2D = VisualTypeDocRepo2D, PTypeDoc extends PhysicsTypeDocRepo2D = PhysicsTypeDocRepo2D> extends IRenderableEntity<Point2, number, TypeDoc, PTypeDoc> {
+    protected _world: Gg2dWorld<TypeDoc, PTypeDoc> | null;
+    get world(): Gg2dWorld<TypeDoc, PTypeDoc> | null;
 }

package/dist/2d/entities/i-renderable-2d.entity.js

@@ -1,3 +1,10 @@
 import { IRenderableEntity } from '../../base';
 export class IRenderable2dEntity extends IRenderableEntity {
+    constructor() {
+        super(...arguments);
+        this._world = null;
+    }
+    get world() {
+        return this._world;
+    }
 }

package/dist/2d/gg-2d-world.d.ts

@@ -13,6 +13,7 @@ export declare type VisualTypeDocRepo2D = {
     factory: IDisplayObject2dComponentFactory;
     displayObject: IDisplayObject2dComponent;
     renderer: IRenderer2dComponent;
+    rendererExtraOpts: {};
     texture: unknown;
 };
 export declare type PhysicsTypeDocRepo2D = {

package/dist/3d/components/rendering/i-visual-scene-3d.component.d.ts

@@ -2,5 +2,5 @@ import { IVisualSceneComponent, Point3, Point4, RendererOptions } from '../../..
 import { VisualTypeDocRepo3D } from '../../gg-3d-world';
 export interface IVisualScene3dComponent<TypeDoc extends VisualTypeDocRepo3D = VisualTypeDocRepo3D> extends IVisualSceneComponent<Point3, Point4, TypeDoc> {
     readonly loader: TypeDoc['loader'];
-    createRenderer(camera: TypeDoc['camera'], canvas?: HTMLCanvasElement, rendererOptions?: Partial<RendererOptions>): TypeDoc['renderer'];
+    createRenderer(camera: TypeDoc['camera'], canvas?: HTMLCanvasElement, rendererOptions?: Partial<RendererOptions & TypeDoc['rendererExtraOpts']>): TypeDoc['renderer'];
 }

package/dist/3d/entities/i-renderable-3d.entity.d.ts

@@ -1,4 +1,6 @@
 import { IRenderableEntity, Point3, Point4 } from '../../base';
-import { PhysicsTypeDocRepo3D, VisualTypeDocRepo3D } from '../gg-3d-world';
+import { Gg3dWorld, PhysicsTypeDocRepo3D, VisualTypeDocRepo3D } from '../gg-3d-world';
 export declare abstract class IRenderable3dEntity<TypeDoc extends VisualTypeDocRepo3D = VisualTypeDocRepo3D, PTypeDoc extends PhysicsTypeDocRepo3D = PhysicsTypeDocRepo3D> extends IRenderableEntity<Point3, Point4, TypeDoc, PTypeDoc> {
+    protected _world: Gg3dWorld<TypeDoc, PTypeDoc> | null;
+    get world(): Gg3dWorld<TypeDoc, PTypeDoc> | null;
 }

package/dist/3d/entities/i-renderable-3d.entity.js

@@ -1,3 +1,10 @@
 import { IRenderableEntity } from '../../base';
 export class IRenderable3dEntity extends IRenderableEntity {
+    constructor() {
+        super(...arguments);
+        this._world = null;
+    }
+    get world() {
+        return this._world;
+    }
 }

package/dist/3d/entities/map-graph-3d.entity.d.ts

@@ -1,5 +1,5 @@
 import { BehaviorSubject, Observable, Subject } from 'rxjs';
-import { Graph, IEntity, Point3, Point4, TickOrder } from '../../base';
+import { Graph, IEntity, PausableClock, Point3, Point4, TickOrder } from '../../base';
 import { Gg3dWorld, PhysicsTypeDocRepo3D, VisualTypeDocRepo3D } from '../gg-3d-world';
 import { Entity3d } from './entity-3d';
 import { LoadOptions, LoadResultWithProps } from '../loader';
@@ -60,10 +60,9 @@ export declare class MapGraph3dEntity<VTypeDoc extends VisualTypeDocRepo3D = Vis
             rotation: Point4;
         }
     ]>;
-    get world(): Gg3dWorld<VTypeDoc, PTypeDoc> | null;
-    protected _world: Gg3dWorld<VTypeDoc, PTypeDoc> | null;
     protected readonly mapGraphNodes: MapGraph[];
     protected readonly options: Gg3dMapGraphEntityOptions;
+    protected loadClock: PausableClock | null;
     constructor(mapGraph: MapGraph, options?: Partial<Gg3dMapGraphEntityOptions>);
     onSpawned(world: Gg3dWorld<VTypeDoc, PTypeDoc>): void;
     onRemoved(): void;

package/dist/3d/entities/map-graph-3d.entity.js

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { BehaviorSubject, NEVER, startWith, Subject, switchMap, takeUntil } from 'rxjs';
-import { distinctUntilChanged, map, tap, throttleTime } from 'rxjs/operators';
+import { distinctUntilChanged, map, tap } from 'rxjs/operators';
 import { Graph, Qtrn, TickOrder } from '../../base';
 import { IRenderable3dEntity } from './i-renderable-3d.entity';
 export class MapGraph extends Graph {
@@ -90,7 +90,7 @@ export class MapGraph3dEntity extends IRenderable3dEntity {
         this._initialLoadComplete$ = new BehaviorSubject(false);
         this._nearestDummy$ = new BehaviorSubject(null);
         this._chunkLoaded$ = new Subject();
-        this._world = null;
+        this.loadClock = null;
         this.options = Object.assign(Object.assign({}, defaultOptions), options);
         this.mapGraphNodes = mapGraph.nodes();
     }
@@ -103,15 +103,14 @@ export class MapGraph3dEntity extends IRenderable3dEntity {
     get chunkLoaded$() {
         return this._chunkLoaded$.asObservable();
     }
-    get world() {
-        return this._world;
-    }
     onSpawned(world) {
         super.onSpawned(world);
+        this.loadClock = world.createClock(true);
+        this.loadClock.tickRateLimit = 1;
         this.loaderCursorEntity$
             .pipe(takeUntil(this._onRemoved$), switchMap(entity => entity
-            ? this.tick$.pipe(startWith(null), // map will perform initial loading even if world not started yet. Handy to preload map
-            takeUntil(entity.onRemoved$), throttleTime(1000), map(() => entity.position))
+            ? this.loadClock.tick$.pipe(startWith(null), // map will perform initial loading even if world not started yet. Handy to preload map
+            takeUntil(entity.onRemoved$), map(() => entity.position))
             : NEVER), map(pos => this.mapGraph.getNearestDummy(this.mapGraphNodes, pos)), tap(node => this._nearestDummy$.next(node)), distinctUntilChanged())
             .subscribe(currentChunk => {
             let haveToBeLoaded = new Set();
@@ -143,6 +142,10 @@ export class MapGraph3dEntity extends IRenderable3dEntity {
     }
     onRemoved() {
         super.onRemoved();
+        if (this.loadClock) {
+            this.loadClock.stop();
+            this.loadClock = null;
+        }
         this.loaderCursorEntity$.next(null);
     }
     loadChunk(node) {

package/dist/3d/entities/raycast-vehicle-3d.entity.d.ts

@@ -51,6 +51,8 @@ export declare class RaycastVehicle3dEntity<VTypeDoc extends VisualTypeDocRepo3D
     protected readonly wheelLocalRotation: (Point4 | null)[];
     protected readonly frontWheelsIndices: number[];
     protected readonly rearWheelsIndices: number[];
+    get name(): string;
+    set name(value: string);
     getSpeed(): number;
     readonly tractionWheelRadius: number;
     private _steeringAngle;

package/dist/3d/entities/raycast-vehicle-3d.entity.js

@@ -93,11 +93,25 @@ export class RaycastVehicle3dEntity extends Entity3d {
                 localRotation = { x: 0, y: 0.707107 * (flip ? 1 : -1), z: 0, w: 0.707107 };
             }
             this.wheelLocalRotation.push(localRotation);
-            this.wheels.push(new Entity3d(entity));
+            const wheelEntity = new Entity3d(entity);
+            wheelEntity.name = this.name + '__wheel_' + (options.isFront ? 'f' : 'r') + (options.isLeft ? 'l' : 'r');
+            this.wheels.push(wheelEntity);
         }
         this.addChildren(...this.wheels.filter(x => !!x));
         this.vehicleComponent.entity = this;
     }
+    get name() {
+        return super.name;
+    }
+    set name(value) {
+        const oldName = super.name;
+        super.name = value;
+        for (const w of this.wheels || []) {
+            if (w) {
+                w.name = w.name.replace(oldName, value);
+            }
+        }
+    }
     // m/s
     getSpeed() {
         return this.vehicleComponent.wheelSpeed;

package/dist/3d/gg-3d-world.d.ts

@@ -18,6 +18,7 @@ export declare type VisualTypeDocRepo3D = {
     loader: IDisplayObject3dComponentLoader;
     displayObject: IDisplayObject3dComponent;
     renderer: IRenderer3dComponent;
+    rendererExtraOpts: {};
     camera: ICameraComponent;
     texture: unknown;
 };

package/dist/base/clock/pausable-clock.d.ts

@@ -6,6 +6,7 @@ import { IClock } from './i-clock';
 export declare class PausableClock implements IClock {
     protected readonly parentClock: IClock;
     private tickSub;
+    private readonly _internalTick$;
     private readonly _tick$;
     /**
      * Observable stream of ticks, emitting an array containing the current time and the tick delta.
@@ -35,12 +36,17 @@ export declare class PausableClock implements IClock {
      * Gets the elapsed time since the clock started.
      */
     get elapsedTime(): number;
+    /**
+     * Tick rate limiter. If set to 0 - tick rate is unlimited, 15 means "allow at most 15 ticks per second"
+     */
+    tickRateLimit: number;
     private startedAt;
     private oldRelativeTime;
     private pausedAt;
     private lastStopElapsed;
     private _timeScale;
     private pausedByTimescale;
+    private lastFiredTickElapsed;
     /**
      * Constructs a new PausableClock instance.
      * @param autoStart Indicates whether the clock should start automatically upon creation.

package/dist/base/clock/pausable-clock.js

@@ -1,4 +1,4 @@
-import { Subject } from 'rxjs';
+import { filter, Subject } from 'rxjs';
 import { map, tap } from 'rxjs/operators';
 import { GgGlobalClock } from './global-clock';
 /**
@@ -13,7 +13,12 @@ export class PausableClock {
     constructor(autoStart = false, parentClock = GgGlobalClock.instance) {
         this.parentClock = parentClock;
         this.tickSub = null;
+        this._internalTick$ = new Subject();
         this._tick$ = new Subject();
+        /**
+         * Tick rate limiter. If set to 0 - tick rate is unlimited, 15 means "allow at most 15 ticks per second"
+         */
+        this.tickRateLimit = 0;
         // State variables
         this.startedAt = -1;
         this.oldRelativeTime = 0; // "elapsed", emitted on last tick
@@ -21,15 +26,21 @@ export class PausableClock {
         this.lastStopElapsed = 0;
         this._timeScale = 1;
         this.pausedByTimescale = false;
+        this.lastFiredTickElapsed = 0;
         if (autoStart) {
             this.start();
         }
+        this._internalTick$
+            .pipe(map(([_, newTime]) => [newTime, newTime - this.lastFiredTickElapsed]), filter(([elapsed]) => !this.tickRateLimit ||
+            Math.floor((this.lastFiredTickElapsed * this.tickRateLimit) / 1000) <
+                Math.floor((elapsed * this.tickRateLimit) / 1000)), tap(([elapsed]) => (this.lastFiredTickElapsed = elapsed)))
+            .subscribe(this._tick$);
     }
     /**
      * Observable stream of ticks, emitting an array containing the current time and the tick delta.
      */
     get tick$() {
-        return this._tick$.pipe(map(([oldTime, newTime]) => [newTime, newTime - oldTime]));
+        return this._tick$.asObservable();
     }
     /**
      * Checks if the clock is currently running.
@@ -145,7 +156,7 @@ export class PausableClock {
         }
         this.tickSub = this.parentClock.tick$
             .pipe(map(([_, d]) => [this.oldRelativeTime, this.oldRelativeTime + d * this.timeScale]), tap(([_, cur]) => (this.oldRelativeTime = cur)))
-            .subscribe(this._tick$);
+            .subscribe(this._internalTick$);
     }
     /**
      * Stops listening for ticks from the parent clock.

package/dist/base/components/rendering/i-renderer.component.d.ts

@@ -25,12 +25,12 @@ export declare abstract class IRendererComponent<D, R, VTypeDoc extends VisualTy
     readonly canvas?: HTMLCanvasElement | undefined;
     entity: IEntity | null;
     /** Specifies the options for the renderer. */
-    readonly rendererOptions: RendererOptions;
+    readonly rendererOptions: RendererOptions & Partial<VTypeDoc['rendererExtraOpts']>;
     /** get flag whether renderer shows physics debugger view */
     abstract get physicsDebugViewActive(): boolean;
     /** turns on/off physics debugger view for this renderer */
     abstract set physicsDebugViewActive(value: boolean);
-    protected constructor(scene: IVisualSceneComponent<D, R, VTypeDoc>, canvas?: HTMLCanvasElement | undefined, options?: Partial<RendererOptions>);
+    protected constructor(scene: IVisualSceneComponent<D, R, VTypeDoc>, canvas?: HTMLCanvasElement | undefined, options?: Partial<RendererOptions & VTypeDoc['rendererExtraOpts']>);
     /**
      * Renders the scene.
      */

package/dist/base/entities/controllers/inline-controller.d.ts

@@ -1,3 +1,3 @@
 import { GgWorld } from '../../gg-world';
 import { Observable } from 'rxjs';
-export declare function createInlineTickController(world: GgWorld<any, any>, tickOrder?: number): Observable<[number, number]>;
+export declare function createInlineTickController(world: GgWorld<any, any>, tickOrder?: number, name?: string): Observable<[number, number]>;

package/dist/base/entities/controllers/inline-controller.js

@@ -6,8 +6,11 @@ class InlineTickController extends IEntity {
         this.tickOrder = tickOrder;
     }
 }
-export function createInlineTickController(world, tickOrder = TickOrder.CONTROLLERS) {
+export function createInlineTickController(world, tickOrder = TickOrder.CONTROLLERS, name) {
     const controller = new InlineTickController(tickOrder);
+    if (name) {
+        controller.name = name;
+    }
     world.addEntity(controller);
     return controller.tick$.pipe(finalize(() => {
         world.removeEntity(controller, true);

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

@@ -1,8 +1,10 @@
 import { IDisplayObjectComponent, IEntity, IPhysicsWorldComponent, IPositionable, IRenderableEntity, IRendererComponent, IRigidBodyComponent, ITriggerComponent, IVisualSceneComponent, KeyboardInput, PausableClock } from '../base';
+import { Subject } from 'rxjs';
 export declare type VisualTypeDocRepo<D, R> = {
     factory: unknown;
     displayObject: IDisplayObjectComponent<D, R>;
     renderer: IRendererComponent<D, R>;
+    rendererExtraOpts: {};
 };
 export declare type PhysicsTypeDocRepo<D, R> = {
     factory: unknown;
@@ -12,14 +14,17 @@ export declare type PhysicsTypeDocRepo<D, R> = {
 export declare abstract class GgWorld<D, R, VTypeDoc extends VisualTypeDocRepo<D, R> = VisualTypeDocRepo<D, R>, PTypeDoc extends PhysicsTypeDocRepo<D, R> = PhysicsTypeDocRepo<D, R>, VS extends IVisualSceneComponent<D, R, VTypeDoc> = IVisualSceneComponent<D, R, VTypeDoc>, PW extends IPhysicsWorldComponent<D, R, PTypeDoc> = IPhysicsWorldComponent<D, R, PTypeDoc>> {
     readonly visualScene: VS;
     readonly physicsWorld: PW;
+    private static default_name_counter;
+    private static _documentWorlds;
+    static get documentWorlds(): GgWorld<any, any>[];
     readonly worldClock: PausableClock;
     readonly keyboardInput: KeyboardInput;
-    private static default_name_counter;
     name: string;
     readonly children: IEntity[];
     protected readonly tickListeners: IEntity[];
-    private static _documentWorlds;
-    static get documentWorlds(): GgWorld<any, any>[];
+    readonly tickStarted$: Subject<void>;
+    readonly tickForwardTo$: Subject<IEntity | 'PHYSICS_WORLD'>;
+    readonly tickForwardedTo$: Subject<IEntity | 'PHYSICS_WORLD'>;
     protected constructor(visualScene: VS, physicsWorld: PW);
     init(): Promise<void>;
     start(): void;

package/dist/base/gg-world.js

@@ -8,6 +8,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { GgGlobalClock, IRendererEntity, KeyboardInput, TickOrder, } from '../base';
+import { lastValueFrom, Subject, take } from 'rxjs';
+import { PerformanceMeterEntity } from '../dev';
 export class GgWorld {
     constructor(visualScene, physicsWorld) {
         this.visualScene = visualScene;
@@ -18,17 +20,13 @@ export class GgWorld {
         this.children = [];
         // the same as children, but sorted by tick order
         this.tickListeners = [];
+        // events
+        this.tickStarted$ = new Subject();
+        this.tickForwardTo$ = new Subject();
+        this.tickForwardedTo$ = new Subject();
         GgWorld._documentWorlds.push(this);
         this.keyboardInput.start();
         if (window.ggstatic) {
-            window.ggstatic.registerConsoleCommand(this, 'show_debugger', (...args) => __awaiter(this, void 0, void 0, function* () {
-                window.ggstatic.showDebugControls = ['1', 'true', '+'].includes(args[0]);
-                return '' + window.ggstatic.showDebugControls;
-            }), 'args: [0 or 1]; turn on/off debug panel. Default value is 0');
-            window.ggstatic.registerConsoleCommand(this, 'show_stats', (...args) => __awaiter(this, void 0, void 0, function* () {
-                window.ggstatic.showStats = ['1', 'true', '+'].includes(args[0]);
-                return '' + window.ggstatic.showStats;
-            }), 'args: [0 or 1]; turn on/off stats. Default value is 0');
             window.ggstatic.registerConsoleCommand(this, 'ph_timescale', (...args) => __awaiter(this, void 0, void 0, function* () {
                 this.worldClock.timeScale = +args[0];
                 return JSON.stringify(this.worldClock.timeScale);
@@ -56,6 +54,40 @@ export class GgWorld {
                 return 'false';
             }), 'args: [0 or 1] or [0 or 1, string]; turn on/off physics debug view. Second argument expects renderer ' +
                 'name, if not provided first renderer will be picked. Look up for renderer names using command "ls_renderers"');
+            window.ggstatic.registerConsoleCommand(this, 'performance_report', (...args) => __awaiter(this, void 0, void 0, function* () {
+                let mode = 'avg';
+                let samples = 20;
+                for (let i = 0; i < 2; i++) {
+                    if (['avg', 'peak'].includes(args[i])) {
+                        mode = args[i];
+                    }
+                    else if (!isNaN(+args[i])) {
+                        samples = +args[i];
+                    }
+                }
+                const meter = new PerformanceMeterEntity(samples, 250);
+                this.addEntity(meter);
+                yield lastValueFrom(this.worldClock.tick$.pipe(take(samples)));
+                const report = mode === 'avg' ? meter.avgReport : meter.peakReport;
+                this.removeEntity(meter);
+                const renderItems = report.entries.map(([name, value]) => `<span style='color:lightgray;'>${name}:</span>` +
+                    new Array(Math.max(0, 26 - name.length)).join('&nbsp;') +
+                    `${value.toFixed(2)} ms` +
+                    (mode === 'avg' ? ` (${((value * 100) / report.totalTime).toFixed(2)}%)` : ''));
+                let totalColor = 'lightgreen';
+                if (report.totalTime > 12) {
+                    totalColor = report.totalTime < 16 ? 'yellow' : 'red';
+                }
+                const title = `${mode === 'avg' ? 'Average' : 'Peak'} Frame time`;
+                renderItems.unshift(title +
+                    ':' +
+                    new Array(Math.max(0, 26 - title.length)).join('&nbsp;') +
+                    `<span style='color:${totalColor};'>${report.totalTime.toFixed(2)} ms</span>`);
+                renderItems.unshift(`Performance report (${samples} samples)`);
+                return renderItems.join('\n');
+            }), 'args: [int, avg|peak]; [avg|peak, int]; [avg|peak]; [int] or []; measure how much time was spent per ' +
+                'entity in world. Arguments are samples amount (20 by default) and "peak" or "avg" choice, both arguments are ' +
+                'optional. "avg" report sorts entities by average time consumed, "peak" records highest value for each entity');
         }
     }
     static get documentWorlds() {
@@ -64,24 +96,30 @@ export class GgWorld {
     init() {
         return __awaiter(this, void 0, void 0, function* () {
             yield Promise.all([this.physicsWorld.init(), this.visualScene.init()]);
+            const forwardTick = (listener, elapsed, delta) => {
+                if (listener.active) {
+                    this.tickForwardTo$.next(listener);
+                    listener.tick$.next([elapsed, delta]);
+                    this.tickForwardedTo$.next(listener);
+                }
+            };
             this.worldClock.tick$.subscribe(([elapsed, delta]) => {
+                this.tickStarted$.next();
                 let i = 0;
                 // emit tick to all entities with tick order < GGTickOrder.PHYSICS_SIMULATION
                 for (i; i < this.tickListeners.length; i++) {
                     if (this.tickListeners[i].tickOrder >= TickOrder.PHYSICS_SIMULATION) {
                         break;
                     }
-                    if (this.tickListeners[i].active) {
-                        this.tickListeners[i].tick$.next([elapsed, delta]);
-                    }
+                    forwardTick(this.tickListeners[i], elapsed, delta);
                 }
                 // run physics simulation
+                this.tickForwardTo$.next('PHYSICS_WORLD');
                 this.physicsWorld.simulate(delta);
+                this.tickForwardedTo$.next('PHYSICS_WORLD');
                 // emit tick to all remained entities
                 for (i; i < this.tickListeners.length; i++) {
-                    if (this.tickListeners[i].active) {
-                        this.tickListeners[i].tick$.next([elapsed, delta]);
-                    }
+                    forwardTick(this.tickListeners[i], elapsed, delta);
                 }
             });
         });
@@ -113,6 +151,9 @@ export class GgWorld {
         }
         this.worldClock.stop();
         this.keyboardInput.stop();
+        this.tickStarted$.complete();
+        this.tickForwardTo$.complete();
+        this.tickForwardedTo$.complete();
         for (let i = 0; i < this.children.length; i++) {
             this.children[i].onRemoved();
             this.children[i].dispose();

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

@@ -162,11 +162,16 @@ export class MouseInput extends IInput {
             .pipe(takeUntil(this.stopped$))
             .subscribe((event) => {
             if (pointers.length === 0) {
-                if (this.options.canvas) {
-                    this.options.canvas.setPointerCapture(event.pointerId);
+                try {
+                    if (this.options.canvas) {
+                        this.options.canvas.setPointerCapture(event.pointerId);
+                    }
+                    this._element.addEventListener('pointerup', onPointerUp);
+                    this._element.addEventListener('pointercancel', onPointerUp);
+                }
+                catch (err) {
+                    console.error(err);
                 }
-                this._element.addEventListener('pointerup', onPointerUp);
-                this._element.addEventListener('pointercancel', onPointerUp);
             }
             pointers.push(event);
             if (event.pointerType === 'touch') {

package/dist/dev/gg-debugger.ui.d.ts

@@ -10,6 +10,11 @@ export declare class GgDebuggerUI {
     get showDebugControls(): boolean;
     setShowDebugControls(selectedWorld: GgWorld<any, any>, value: boolean): void;
     private snapshot;
+    perfStatsMode: 'AVG' | 'PEAK';
+    private performanceStatsSnapshot;
     private makeSnapshot;
+    private makePerformanceStatsSnapshot;
+    css: string;
     private renderControls;
+    private renderPerformanceStats;
 }

package/dist/dev/gg-debugger.ui.js

@@ -2,9 +2,12 @@ import { createInlineTickController, IRendererEntity } from '../base';
 import { animationFrameScheduler, fromEvent, of, Subject, takeUntil } from 'rxjs';
 import Stats from 'stats.js';
 import { repeat } from 'rxjs/operators';
+import { PerformanceMeterEntity } from './performance-meter.entity';
 const snapshotEqual = (a, b) => {
     if (a.timeScale !== b.timeScale)
         return false;
+    if (a.performanceStatsEnabled !== b.performanceStatsEnabled)
+        return false;
     if (a.renderers.length !== b.renderers.length)
         return false;
     for (let i = 0; i < a.renderers.length; i++) {
@@ -17,6 +20,23 @@ const snapshotEqual = (a, b) => {
     }
     return true;
 };
+const performanceStatsSnapshotEqual = (a, b) => {
+    if (!!a !== !!b)
+        return false;
+    if (a && b) {
+        if (a.totalTime !== b.totalTime)
+            return false;
+        if (a.entries.length !== b.entries.length)
+            return false;
+        for (let i = 0; i < a.entries.length; i++) {
+            if (a.entries[i][0] !== b.entries[i][0])
+                return false;
+            if (a.entries[i][1] !== b.entries[i][1])
+                return false;
+        }
+    }
+    return true;
+};
 export class GgDebuggerUI {
     constructor() {
         this.ui = {
@@ -30,7 +50,11 @@ export class GgDebuggerUI {
         this.snapshot = {
             timeScale: 1,
             renderers: [],
+            performanceStatsEnabled: false,
         };
+        this.perfStatsMode = 'AVG';
+        this.performanceStatsSnapshot = null;
+        this.css = "style='display:flex;align-items:center;margin:0.25rem;'";
     }
     get showStats() {
         return !!this.ui.stats;
@@ -52,12 +76,12 @@ export class GgDebuggerUI {
             stats.dom.style.right = '0';
             stats.showPanel(0); // 0: fps, 1: ms, 2: mb
             document.body.appendChild(stats.dom);
-            createInlineTickController(selectedWorld, -1)
+            createInlineTickController(selectedWorld, -1, 'fps_meter_init')
                 .pipe(takeUntil(this.statsRemoved$))
                 .subscribe(() => {
                 stats === null || stats === void 0 ? void 0 : stats.begin();
             });
-            createInlineTickController(selectedWorld, 10000)
+            createInlineTickController(selectedWorld, 10000, 'fps_meter')
                 .pipe(takeUntil(this.statsRemoved$))
                 .subscribe(() => {
                 stats === null || stats === void 0 ? void 0 : stats.end();
@@ -90,7 +114,9 @@ export class GgDebuggerUI {
             debugControlsContainer.style.cssText =
                 'position:fixed;top:48px;right:0;opacity:0.9;z-index:9999;background-color:#333;color:white;display:flex;flex-direction:column';
             this.snapshot = this.makeSnapshot();
+            this.performanceStatsSnapshot = this.makePerformanceStatsSnapshot();
             this.renderControls(debugControlsContainer);
+            this.renderPerformanceStats();
             of(undefined, animationFrameScheduler)
                 .pipe(repeat(), takeUntil(this.debugControlsRemoved$))
                 .subscribe(() => {
@@ -99,6 +125,11 @@ export class GgDebuggerUI {
                     this.snapshot = newSnapshot;
                     this.renderControls(debugControlsContainer);
                 }
+                const newPerformanceStats = this.makePerformanceStatsSnapshot();
+                if (!performanceStatsSnapshotEqual(this.performanceStatsSnapshot, newPerformanceStats)) {
+                    this.performanceStatsSnapshot = newPerformanceStats;
+                    this.renderPerformanceStats();
+                }
             });
         }
         else {
@@ -108,33 +139,74 @@ export class GgDebuggerUI {
         }
     }
     makeSnapshot() {
+        const renderers = [];
+        let performanceMeter = null;
+        for (const e of this.currentWorld.children) {
+            if (e instanceof IRendererEntity) {
+                renderers.push(e);
+            }
+            else if (e instanceof PerformanceMeterEntity) {
+                performanceMeter = e;
+            }
+        }
         return {
             timeScale: this.currentWorld.worldClock.timeScale,
-            renderers: this.currentWorld.children
-                .filter(x => x instanceof IRendererEntity)
-                .map(r => ({
+            renderers: renderers.map(r => ({
                 name: r.name,
                 entity: r,
                 physicsDebugViewActive: r.physicsDebugViewActive,
             })),
+            performanceStatsEnabled: !!performanceMeter,
         };
     }
+    makePerformanceStatsSnapshot() {
+        if (!this.snapshot.performanceStatsEnabled)
+            return null;
+        let performanceMeter = this.currentWorld.children.find(e => e instanceof PerformanceMeterEntity);
+        if (performanceMeter) {
+            if (this.perfStatsMode === 'AVG') {
+                return performanceMeter.avgReport;
+            }
+            else if (this.perfStatsMode === 'PEAK') {
+                return performanceMeter.peakReport;
+            }
+        }
+        return null;
+    }
     renderControls(debugControlsContainer) {
-        const debugLabelCss = "style='display:flex;align-items:center;margin:0.25rem;'";
         let html = '';
         for (const { entity, physicsDebugViewActive } of this.snapshot.renderers) {
             html += `
-      <div ${debugLabelCss}>
+      <div ${this.css}>
         <input type='checkbox' name='checkbox' id='physics_debugger_checkbox_id_${entity.name}' value='1'${physicsDebugViewActive ? ' checked' : ''}>
         <label for='physics_debugger_checkbox_id_${entity.name}' style='user-select: none;'>Physics debugger${this.snapshot.renderers.length > 1 ? ' (' + entity.name + ')' : ''}</label>
       </div>`;
         }
         html += `
-      <div ${debugLabelCss}>
+      <div ${this.css}>
         <input id='time_scale_slider' type='range' min='0' max='5' step='0.01' style='flex-grow:1' value='${this.snapshot.timeScale}'/>
         <label for='time_scale_slider' style='user-select: none;'>Time scale</label>
       </div>`;
+        html +=
+            `
+      <div ${this.css}>
+        <input type='checkbox' name='checkbox' id='perf_stats_checkbox_id' value='1'${this.snapshot.performanceStatsEnabled ? ' checked' : ''}>
+        <label for='perf_stats_checkbox_id' style='user-select: none;'>Entities performance distribution</label>
+      </div>
+    ` +
+                (this.snapshot.performanceStatsEnabled
+                    ? `<div ${this.css}>
+          <label for='per_mode'>Mode:</label>
+          <select id='per_mode'>
+            <option value='AVG' ${this.perfStatsMode === 'AVG' ? 'selected' : ''}>Average</option>
+            <option value='PEAK' ${this.perfStatsMode === 'PEAK' ? 'selected' : ''}>Peak</option>
+          </select>
+        </div>`
+                    : '') +
+                `
+      <div style='display: contents' id='perf_stats_container'></div>`;
         debugControlsContainer.innerHTML = html;
+        debugControlsContainer.style.minWidth = '25rem';
         this.viewUpdated$.next();
         for (const { entity } of this.snapshot.renderers) {
             fromEvent(document.getElementById('physics_debugger_checkbox_id_' + entity.name), 'change')
@@ -158,5 +230,54 @@ export class GgDebuggerUI {
                 console.error(err);
             }
         });
+        fromEvent(document.getElementById('perf_stats_checkbox_id'), 'change')
+            .pipe(takeUntil(this.debugControlsRemoved$), takeUntil(this.viewUpdated$))
+            .subscribe(e => {
+            const entity = this.currentWorld.children.find(x => x instanceof PerformanceMeterEntity);
+            if (e.target.checked == !entity) {
+                if (entity) {
+                    this.currentWorld.removeEntity(entity);
+                }
+                else {
+                    this.currentWorld.addEntity(new PerformanceMeterEntity());
+                }
+            }
+        });
+        if (this.snapshot.performanceStatsEnabled) {
+            fromEvent(document.getElementById('per_mode'), 'change')
+                .pipe(takeUntil(this.debugControlsRemoved$), takeUntil(this.viewUpdated$))
+                .subscribe(e => {
+                this.perfStatsMode = e.target.value;
+            });
+        }
+    }
+    renderPerformanceStats() {
+        const pCss = "style='display:flex;align-items:center;margin:0.25rem;max-width:25rem'";
+        const em = document.getElementById('perf_stats_container');
+        if (!em)
+            return;
+        let html = '';
+        if (this.performanceStatsSnapshot) {
+            const total = this.performanceStatsSnapshot.totalTime;
+            const labelCss = `style='user-select:none;width:3.5rem;text-align:left;flex-shrink:0;'`;
+            const progressCss = `style='width:11.5rem;margin:4px;flex-shrink:0;'`;
+            const spanCss = `style='user-select:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:calc(9.5rem - 8px);'`;
+            html += `
+          <div ${pCss}>
+            <label for='stat_progress' ${labelCss}>${total.toFixed(2)}ms</label>
+            <progress id="stat_progress" ${progressCss} max="16" value="${total}"></progress>
+            <span ${spanCss}>Total frame time</span>
+          </div>`;
+            for (const [i, [name, value]] of this.performanceStatsSnapshot.entries.entries()) {
+                const strVal = this.perfStatsMode == 'AVG' ? ((value * 100) / total).toFixed(2) + '%' : value.toFixed(2) + 'ms';
+                html += `
+          <div ${pCss}>
+            <label for='stat_progress_${i}' ${labelCss}>${strVal}</label>
+            <progress id='stat_progress_${i}' ${progressCss} max='${total}' value='${value}'></progress>
+            <span ${spanCss}>${name}</span>
+          </div>`;
+            }
+        }
+        em.innerHTML = html;
     }
 }

package/dist/dev/gg-static.js

@@ -30,13 +30,13 @@ export class GgStatic {
         this.consoleCommands = new Map();
         this.registerConsoleCommand(null, 'ls_commands', () => __awaiter(this, void 0, void 0, function* () {
             return this.availableCommands
-                .map(([key, value]) => `<span style="color:yellow">${key}</span>${value.doc ? '\t<span style="color:#aaa">// ' + value.doc + '</span>' : ''}`)
+                .map(([key, value]) => `<span style='color:yellow'>${key}</span>${value.doc ? '\t<span style="color:#aaa">// ' + value.doc + '</span>' : ''}`)
                 .sort()
                 .join('\n\n');
         }), 'no args; print all available commands');
         this.registerConsoleCommand(null, 'ls_worlds', () => __awaiter(this, void 0, void 0, function* () {
             return GgWorld.documentWorlds
-                .map(w => (w === this.selectedWorld ? `<span style="color:green;">* ${w.name}</span>` : `  ${w.name}`))
+                .map(w => (w === this.selectedWorld ? `<span style='color:lightgreen;'>* ${w.name}</span>` : `  ${w.name}`))
                 .join('\n');
         }), 'no args; print all available worlds');
         this.registerConsoleCommand(null, 'select_world', (...args) => __awaiter(this, void 0, void 0, function* () {
@@ -49,6 +49,14 @@ export class GgStatic {
             }
             return ((_a = this.selectedWorld) === null || _a === void 0 ? void 0 : _a.name) || 'null';
         }), 'args: [string]; select world by name');
+        this.registerConsoleCommand(null, 'show_debugger', (...args) => __awaiter(this, void 0, void 0, function* () {
+            this.showDebugControls = ['1', 'true', '+'].includes(args[0]);
+            return '' + this.showDebugControls;
+        }), 'args: [0 or 1]; turn on/off debug panel. Default value is 0');
+        this.registerConsoleCommand(null, 'show_stats', (...args) => __awaiter(this, void 0, void 0, function* () {
+            this.showStats = ['1', 'true', '+'].includes(args[0]);
+            return '' + this.showStats;
+        }), 'args: [0 or 1]; turn on/off stats. Default value is 0');
     }
     static get instance() {
         if (!window.ggstatic) {
@@ -126,14 +134,14 @@ export class GgStatic {
             if (!action) {
                 action = (this.consoleCommands.get(this.selectedWorld) || {})[command];
                 if (!action) {
-                    return `<span style="color:red">Unrecognized command: ${command}</span>`;
+                    return `<span style='color:red'>Unrecognized command: ${command}</span>`;
                 }
             }
             try {
                 return yield action.handler(...args);
             }
             catch (err) {
-                return `<span style="color:red">${err}</span>`;
+                return `<span style='color:red'>${err}</span>`;
             }
         });
     }

package/dist/dev/index.d.ts

@@ -1,3 +1,4 @@
 export * from './gg-console.ui';
 export * from './gg-debugger.ui';
 export * from './gg-static';
+export * from './performance-meter.entity';

package/dist/dev/index.js

@@ -1,3 +1,4 @@
 export * from './gg-console.ui';
 export * from './gg-debugger.ui';
 export * from './gg-static';
+export * from './performance-meter.entity';

package/dist/dev/performance-meter.entity.d.ts

@@ -0,0 +1,21 @@
+import { GgWorld, IEntity, TickOrder } from '../base';
+export declare class PerformanceMeterEntity extends IEntity {
+    private readonly maxSamples;
+    private readonly maxRows;
+    readonly tickOrder: TickOrder | number;
+    private sampleIndex;
+    private collectedData;
+    private _avgReport;
+    get avgReport(): {
+        totalTime: number;
+        entries: [string, number][];
+    };
+    private _peakReport;
+    get peakReport(): {
+        totalTime: number;
+        entries: [string, number][];
+    };
+    constructor(maxSamples?: number, maxRows?: number);
+    onSpawned(world: GgWorld<unknown, unknown>): void;
+    onRemoved(): void;
+}

package/dist/dev/performance-meter.entity.js

@@ -0,0 +1,120 @@
+import { IEntity } from '../base';
+import { takeUntil } from 'rxjs';
+export class PerformanceMeterEntity extends IEntity {
+    constructor(maxSamples = 60, maxRows = 15) {
+        super();
+        this.maxSamples = maxSamples;
+        this.maxRows = maxRows;
+        this.tickOrder = Number.MAX_SAFE_INTEGER;
+        this.sampleIndex = 0;
+        this.collectedData = new Map();
+        this._avgReport = { totalTime: 0, entries: [] };
+        this._peakReport = { totalTime: 0, entries: [] };
+    }
+    get avgReport() {
+        return this._avgReport;
+    }
+    get peakReport() {
+        return this._peakReport;
+    }
+    onSpawned(world) {
+        super.onSpawned(world);
+        this.sampleIndex = 0;
+        const now = () => (typeof performance === 'undefined' ? Date : performance).now();
+        this.world.tickForwardTo$.pipe(takeUntil(this.onRemoved$)).subscribe(e => {
+            if (e === this)
+                return;
+            if (!this.collectedData.has(e)) {
+                this.collectedData.set(e, [[this.sampleIndex, now(), 0]]);
+            }
+            else {
+                this.collectedData.get(e).push([this.sampleIndex, now(), 0]);
+            }
+        });
+        this.world.tickForwardedTo$.pipe(takeUntil(this.onRemoved$)).subscribe(e => {
+            if (e === this)
+                return;
+            const report = this.collectedData.get(e);
+            report[report.length - 1][2] = now();
+        });
+        this.tick$.pipe(takeUntil(this.onRemoved$)).subscribe(() => {
+            this.sampleIndex++;
+            // remove oldest samples
+            const entries = Array.from(this.collectedData.entries());
+            for (const [k, v] of entries) {
+                while (v.length > 0 && v[0][0] < this.sampleIndex - this.maxSamples) {
+                    v.shift();
+                }
+                if (v.length === 0) {
+                    this.collectedData.delete(k);
+                }
+            }
+            // helper functions
+            const label = (e) => {
+                if (e instanceof IEntity) {
+                    if (e.name === '') {
+                        return e.constructor.name;
+                    }
+                    else {
+                        return e.name;
+                    }
+                }
+                else if (e === 'PHYSICS_WORLD') {
+                    return 'Physics simulation';
+                }
+                else {
+                    return e;
+                }
+            };
+            const truncateReport = (report) => {
+                let restSum = 0;
+                let restAmount = 0;
+                for (restAmount; restAmount < report.length - 2; restAmount++) {
+                    if (this.maxRows > report.length - restAmount + 1) {
+                        restAmount--;
+                        break;
+                    }
+                    restSum += report[report.length - restAmount - 1][1];
+                }
+                if (restAmount > 1) {
+                    report = report.slice(0, report.length - restAmount);
+                    report.push([`Rest (${restAmount})`, restSum]);
+                }
+                return report;
+            };
+            // build avg report
+            let totalTimeAvg = 0;
+            let avgReport = Array.from(this.collectedData.entries())
+                .map(([e, samples]) => {
+                const timeSpentAvg = samples.reduce((prev, [_, start, finish]) => prev + finish - start, 0) / this.maxSamples;
+                totalTimeAvg += timeSpentAvg;
+                return [label(e), timeSpentAvg];
+            })
+                .sort((a, b) => b[1] - a[1]);
+            avgReport = truncateReport(avgReport);
+            this._avgReport = { totalTime: totalTimeAvg, entries: avgReport };
+            // build peak report
+            let totalTimePeaks = new Map();
+            let peakReport = Array.from(this.collectedData.entries())
+                .map(([e, samples]) => {
+                let peakTime = 0;
+                for (const [sample, start, finish] of samples) {
+                    const time = finish - start;
+                    peakTime = Math.max(peakTime, time);
+                    totalTimePeaks.set(sample, time + (totalTimePeaks.get(sample) || 0));
+                }
+                return [label(e), peakTime];
+            })
+                .sort((a, b) => b[1] - a[1]);
+            peakReport = truncateReport(peakReport);
+            let totalPeak = Array.from(totalTimePeaks.values()).reduce((prev, cur) => Math.max(prev, cur), 0);
+            this._peakReport = { totalTime: totalPeak, entries: peakReport };
+        });
+    }
+    onRemoved() {
+        super.onRemoved();
+        this.collectedData = new Map();
+        this._avgReport = { totalTime: 0, entries: [] };
+        this._peakReport = { totalTime: 0, entries: [] };
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gg-web-engine/core",
-  "version": "0.0.39",
+  "version": "0.0.40",
   "description": "An attempt to create open source game engine for browser",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",