@gg-web-engine/core 0.0.39 → 0.0.48

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

@@ -88,6 +88,12 @@ export declare class Qtrn {
      * @returns a quaternion representing the rotation
      */
     static fromMatrix4(m: number[]): Point4;
+    /**
+     * Converts a 3x3 rotation matrix into a quaternion
+     * @param m the matrix representing the rotation
+     * @returns a quaternion representing the rotation
+     */
+    static fromMatrix3(m: number[][]): Point4;
     /**
      * Creates a quaternion from euler
      * @param e the euler vector

package/dist/base/math/quaternion.js

@@ -178,6 +178,44 @@ export class Qtrn {
             };
         }
     }
+    /**
+     * Converts a 3x3 rotation matrix into a quaternion
+     * @param m the matrix representing the rotation
+     * @returns a quaternion representing the rotation
+     */
+    static fromMatrix3(m) {
+        const trace = m[0][0] + m[1][1] + m[2][2];
+        let w, x, y, z;
+        if (trace > 0) {
+            const s = 0.5 / Math.sqrt(trace + 1);
+            w = 0.25 / s;
+            x = (m[2][1] - m[1][2]) * s;
+            y = (m[0][2] - m[2][0]) * s;
+            z = (m[1][0] - m[0][1]) * s;
+        }
+        else if (m[0][0] > m[1][1] && m[0][0] > m[2][2]) {
+            const s = 2 * Math.sqrt(1 + m[0][0] - m[1][1] - m[2][2]);
+            w = (m[2][1] - m[1][2]) / s;
+            x = 0.25 * s;
+            y = (m[0][1] + m[1][0]) / s;
+            z = (m[0][2] + m[2][0]) / s;
+        }
+        else if (m[1][1] > m[2][2]) {
+            const s = 2 * Math.sqrt(1 + m[1][1] - m[0][0] - m[2][2]);
+            w = (m[0][2] - m[2][0]) / s;
+            x = (m[0][1] + m[1][0]) / s;
+            y = 0.25 * s;
+            z = (m[1][2] + m[2][1]) / s;
+        }
+        else {
+            const s = 2 * Math.sqrt(1 + m[2][2] - m[0][0] - m[1][1]);
+            w = (m[1][0] - m[0][1]) / s;
+            x = (m[0][2] + m[2][0]) / s;
+            y = (m[1][2] + m[2][1]) / s;
+            z = 0.25 * s;
+        }
+        return { w, x, y, z };
+    }
     /**
      * Creates a quaternion from euler
      * @param e the euler vector

package/dist/base/models/axis-directions.d.ts

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

package/dist/base/models/body-options.d.ts

@@ -1,4 +1,4 @@
-export declare type CollisionGroup = number;
+export type CollisionGroup = number;
 export interface BodyOptions {
     dynamic: boolean;
     mass: number;
@@ -7,7 +7,7 @@ export interface BodyOptions {
     ownCollisionGroups: CollisionGroup[] | 'all';
     interactWithCollisionGroups: CollisionGroup[] | 'all';
 }
-export declare type DebugBodySettings = {
+export type DebugBodySettings = {
     shape: any;
     ignoreTransform?: boolean;
 } & ({

package/dist/base/models/geometry-nodes.d.ts

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

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

@@ -1,24 +1,24 @@
-export declare type Point2 = {
+export type Point2 = {
     readonly x: number;
     readonly y: number;
 };
-export declare type Point3 = {
+export type Point3 = {
     readonly x: number;
     readonly y: number;
     readonly z: number;
 };
-export declare type Point4 = {
+export type Point4 = {
     readonly x: number;
     readonly y: number;
     readonly z: number;
     readonly w: number;
 };
-export declare type Spherical = {
+export type Spherical = {
     readonly radius: number;
     readonly phi: number;
     readonly theta: number;
 };
-export declare type MutableSpherical = {
+export type MutableSpherical = {
     radius: number;
     phi: number;
     theta: number;

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

@@ -11,45 +11,6 @@ import { GgWorld } from '../base';
 import { GgConsoleUI } from './gg-console.ui';
 import { GgDebuggerUI } from './gg-debugger.ui';
 export class GgStatic {
-    constructor() {
-        this.debuggerUI = new GgDebuggerUI();
-        this.consoleUI = new GgConsoleUI();
-        this._devConsoleEnabled = false;
-        this.consoleKeyPressEventListener = (event) => {
-            if (event.code === 'Backquote') {
-                event.preventDefault();
-                if (this.consoleUI.isUIShown) {
-                    this.consoleUI.destroyUI();
-                }
-                else {
-                    this.consoleUI.createUI();
-                }
-            }
-        };
-        this._selectedWorld = null;
-        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>' : ''}`)
-                .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}`))
-                .join('\n');
-        }), 'no args; print all available worlds');
-        this.registerConsoleCommand(null, 'select_world', (...args) => __awaiter(this, void 0, void 0, function* () {
-            var _a;
-            for (const w of GgWorld.documentWorlds) {
-                if (w.name === args[0]) {
-                    this._selectedWorld = w;
-                    break;
-                }
-            }
-            return ((_a = this.selectedWorld) === null || _a === void 0 ? void 0 : _a.name) || 'null';
-        }), 'args: [string]; select world by name');
-    }
     static get instance() {
         if (!window.ggstatic) {
             window.ggstatic = new GgStatic();
@@ -96,6 +57,53 @@ export class GgStatic {
         }
         return Object.entries(commands);
     }
+    constructor() {
+        this.debuggerUI = new GgDebuggerUI();
+        this.consoleUI = new GgConsoleUI();
+        this._devConsoleEnabled = false;
+        this.consoleKeyPressEventListener = (event) => {
+            if (event.code === 'Backquote') {
+                event.preventDefault();
+                if (this.consoleUI.isUIShown) {
+                    this.consoleUI.destroyUI();
+                }
+                else {
+                    this.consoleUI.createUI();
+                }
+            }
+        };
+        this._selectedWorld = null;
+        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>' : ''}`)
+                .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: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* () {
+            var _a;
+            for (const w of GgWorld.documentWorlds) {
+                if (w.name === args[0]) {
+                    this._selectedWorld = w;
+                    break;
+                }
+            }
+            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');
+    }
     registerConsoleCommand(world, command, handler, doc) {
         let commands = {};
         if (!this.consoleCommands.has(world)) {
@@ -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;
+}