@gg-web-engine/core 0.0.38 → 0.0.40

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

@@ -1,6 +1,42 @@
-import { createInlineTickController } from '../base';
-import { fromEvent, Subject, takeUntil } from 'rxjs';
+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++) {
+        if (a.renderers[i].name !== b.renderers[i].name)
+            return false;
+        if (a.renderers[i].entity !== b.renderers[i].entity)
+            return false;
+        if (a.renderers[i].physicsDebugViewActive !== b.renderers[i].physicsDebugViewActive)
+            return false;
+    }
+    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 = {
@@ -10,6 +46,15 @@ export class GgDebuggerUI {
         this.statsRemoved$ = new Subject();
         this.currentWorld = null;
         this.debugControlsRemoved$ = new Subject();
+        this.viewUpdated$ = new Subject();
+        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;
@@ -31,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();
@@ -64,48 +109,175 @@ export class GgDebuggerUI {
         this.currentWorld = selectedWorld;
         if (value) {
             const debugControlsContainer = document.createElement('div');
+            document.body.appendChild(debugControlsContainer);
             this.ui.debugControlsContainer = debugControlsContainer;
-            const debugLabelCss = "style='display:flex;align-items:center;margin:0.25rem;'";
             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';
-            debugControlsContainer.innerHTML = `
-      <div ${debugLabelCss}>
-        <input type='checkbox' name='checkbox' id='physics_debugger_checkbox_id' value='1'${this.currentWorld.physicsWorld.physicsDebugViewActive ? ' checked' : ''}>
-        <label for='physics_debugger_checkbox_id' style='user-select: none;'>Show physics bodies in scene</label>
+            this.snapshot = this.makeSnapshot();
+            this.performanceStatsSnapshot = this.makePerformanceStatsSnapshot();
+            this.renderControls(debugControlsContainer);
+            this.renderPerformanceStats();
+            of(undefined, animationFrameScheduler)
+                .pipe(repeat(), takeUntil(this.debugControlsRemoved$))
+                .subscribe(() => {
+                const newSnapshot = this.makeSnapshot();
+                if (!snapshotEqual(this.snapshot, newSnapshot)) {
+                    this.snapshot = newSnapshot;
+                    this.renderControls(debugControlsContainer);
+                }
+                const newPerformanceStats = this.makePerformanceStatsSnapshot();
+                if (!performanceStatsSnapshotEqual(this.performanceStatsSnapshot, newPerformanceStats)) {
+                    this.performanceStatsSnapshot = newPerformanceStats;
+                    this.renderPerformanceStats();
+                }
+            });
+        }
+        else {
+            this.debugControlsRemoved$.next();
+            document.body.removeChild(this.ui.debugControlsContainer);
+            this.ui.debugControlsContainer = null;
+        }
+    }
+    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: 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) {
+        let html = '';
+        for (const { entity, physicsDebugViewActive } of this.snapshot.renderers) {
+            html += `
+      <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>`;
-            // <div ${debugLabelCss}>
-            //   <input id="time_scale_slider" type="range" min="0" max="10" step="0.1" style="flex-grow:1" value="${
-            //      this.currentWorld.physicsWorld.timeScale
-            //   }"/>
-            //   <label for="time_scale_slider" style="user-select: none;">Time scale</label>
-            // </div>`;
-            document.body.appendChild(debugControlsContainer);
-            fromEvent(document.getElementById('physics_debugger_checkbox_id'), 'change')
-                .pipe(takeUntil(this.debugControlsRemoved$))
+        }
+        html += `
+      <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')
+                .pipe(takeUntil(this.debugControlsRemoved$), takeUntil(this.viewUpdated$))
                 .subscribe(e => {
                 try {
-                    this.currentWorld.physicsDebugViewActive = e.target.checked;
+                    entity.physicsDebugViewActive = e.target.checked;
                 }
                 catch (err) {
                     console.error(err);
                 }
-                e.target.checked = this.currentWorld.physicsDebugViewActive;
             });
-            // fromEvent(document.getElementById('time_scale_slider')! as HTMLInputElement, 'change')
-            //   .pipe(takeUntil(this.debugControlsRemoved$))
-            //   .subscribe(e => {
-            //     try {
-            //        this.currentWorld.physicsWorld.timeScale = +(e.target as HTMLInputElement).value;
-            //     } catch (err) {
-            //       console.error(err);
-            //     }
-            //     (e.target as HTMLInputElement).value = '' + ( this.currentWorld.physicsWorld.timeScale || 1);
-            //   });
         }
-        else {
-            this.debugControlsRemoved$.next();
-            document.body.removeChild(this.ui.debugControlsContainer);
-            this.ui.debugControlsContainer = null;
+        fromEvent(document.getElementById('time_scale_slider'), 'change')
+            .pipe(takeUntil(this.debugControlsRemoved$), takeUntil(this.viewUpdated$))
+            .subscribe(e => {
+            try {
+                this.currentWorld.worldClock.timeScale = +e.target.value;
+            }
+            catch (err) {
+                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.d.ts

@@ -1,6 +1,5 @@
 import { GgWorld } from '../base';
 export declare class GgStatic {
-    private static _instance;
     static get instance(): GgStatic;
     private readonly debuggerUI;
     private readonly consoleUI;

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,12 +49,20 @@ 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 (!GgStatic._instance) {
-            GgStatic._instance = new GgStatic();
+        if (!window.ggstatic) {
+            window.ggstatic = new GgStatic();
         }
-        return GgStatic._instance;
+        return window.ggstatic;
     }
     get devConsoleEnabled() {
         return this._devConsoleEnabled;
@@ -126,16 +134,15 @@ 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>`;
             }
         });
     }
 }
-window.ggstatic = GgStatic.instance;

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.38",
+  "version": "0.0.40",
   "description": "An attempt to create open source game engine for browser",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/dist/base/interfaces/i-debug-physics-drawer.d.ts

@@ -1,8 +0,0 @@
-import { IDisplayObjectComponent } from '../components/rendering/i-display-object.component';
-import { Point3 } from '../models/points';
-import { VisualTypeDocRepo } from '../gg-world';
-export interface IDebugPhysicsDrawer<D, R, TypeDoc extends VisualTypeDocRepo<D, R> = VisualTypeDocRepo<D, R>> extends IDisplayObjectComponent<D, R, TypeDoc> {
-    drawContactPoint(point: D, normal: D, color?: Point3): void;
-    drawLine(from: D, to: D, color?: Point3): void;
-    update(): void;
-}

package/dist/base/interfaces/i-debug-physics-drawer.js

@@ -1 +0,0 @@
-export {};