@benjos/create-boilerplate 1.0.0 → 1.0.3

package/template-vanilla/src/experiences/constants/doms/DomEvent.ts

@@ -0,0 +1,100 @@
+export const DomEvent = {
+    // Mouse Events
+    CLICK: 'click',
+    DOUBLE_CLICK: 'dblclick',
+    MOUSE_DOWN: 'mousedown',
+    MOUSE_UP: 'mouseup',
+    MOUSE_MOVE: 'mousemove',
+    MOUSE_ENTER: 'mouseenter',
+    MOUSE_LEAVE: 'mouseleave',
+    MOUSE_WHEEL: 'wheel',
+    CONTEXT_MENU: 'contextmenu',
+
+    // Pointer Events
+    POINTER_DOWN: 'pointerdown',
+    POINTER_MOVE: 'pointermove',
+    POINTER_UP: 'pointerup',
+    POINTER_ENTER: 'pointerenter',
+    POINTER_LEAVE: 'pointerleave',
+    POINTER_CANCEL: 'pointercancel',
+
+    // Touch Events
+    TOUCH_START: 'touchstart',
+    TOUCH_MOVE: 'touchmove',
+    TOUCH_END: 'touchend',
+    TOUCH_CANCEL: 'touchcancel',
+
+    // Keyboard Events
+    KEY_DOWN: 'keydown',
+    KEY_UP: 'keyup',
+    KEY_PRESS: 'keypress',
+
+    // Focus Events
+    FOCUS: 'focus',
+    BLUR: 'blur',
+    FOCUS_IN: 'focusin',
+    FOCUS_OUT: 'focusout',
+
+    // Form Events
+    CHANGE: 'change',
+    INPUT: 'input',
+    SUBMIT: 'submit',
+    RESET: 'reset',
+
+    // Document Events
+    FULLSCREEN_CHANGE: 'fullscreenchange',
+    FULLSCREEN_ERROR: 'fullscreenerror',
+    VISIBILITY_CHANGE: 'visibilitychange',
+
+    // Window Events
+    DOM_CONTENT_LOADED: 'DOMContentLoaded',
+    READY_STATE_CHANGE: 'readystatechange',
+    ERROR: 'error',
+    LOAD: 'load',
+    UNLOAD: 'unload',
+    BEFORE_UNLOAD: 'beforeunload',
+    RESIZE: 'resize',
+    SCROLL: 'scroll',
+
+    // Clipboard Events
+    CUT: 'cut',
+    COPY: 'copy',
+    PASTE: 'paste',
+
+    // Drag and Drop Events
+    DRAG: 'drag',
+    DRAG_START: 'dragstart',
+    DRAG_END: 'dragend',
+    DRAG_ENTER: 'dragenter',
+    DRAG_LEAVE: 'dragleave',
+    DRAG_OVER: 'dragover',
+    DROP: 'drop',
+
+    // Media Events
+    PLAY: 'play',
+    PAUSE: 'pause',
+    ENDED: 'ended',
+    CAN_PLAY: 'canplay',
+    TIME_UPDATE: 'timeupdate',
+
+    // Animation Events
+    ANIMATION_START: 'animationstart',
+    ANIMATION_END: 'animationend',
+    ANIMATION_ITERATION: 'animationiteration',
+
+    // Transition Events
+    TRANSITION_START: 'transitionstart',
+    TRANSITION_END: 'transitionend',
+    TRANSITION_CANCEL: 'transitioncancel',
+
+    // Other Events
+    BEFORE_PRINT: 'beforeprint',
+    AFTER_PRINT: 'afterprint',
+    HASH_CHANGE: 'hashchange',
+    POP_STATE: 'popstate',
+    STORAGE: 'storage',
+    ONLINE: 'online',
+    OFFLINE: 'offline',
+} as const;
+
+export type DomEvent = (typeof DomEvent)[keyof typeof DomEvent];

package/template-vanilla/src/experiences/constants/doms/KeyboardConstant.ts

@@ -0,0 +1,250 @@
+export const KeyboardConstant = {
+    Keys: {
+        Backspace: 'Backspace',
+        Tab: 'Tab',
+        Enter: 'Enter',
+        Shift: 'Shift',
+        Control: 'Control',
+        Alt: 'Alt',
+        Pause: 'Pause',
+        CapsLock: 'CapsLock',
+        Escape: 'Escape',
+        Space: '',
+        PageUp: 'PageUp',
+        PageDown: 'PageDown',
+        End: 'End',
+        Home: 'Home',
+        ArrowLeft: 'ArrowLeft',
+        ArrowUp: 'ArrowUp',
+        ArrowRight: 'ArrowRight',
+        ArrowDown: 'ArrowDown',
+        PrintScreen: 'PrintScreen',
+        Insert: 'Insert',
+        Delete: 'Delete',
+        Digit0: '0',
+        Digit1: '1',
+        Digit2: '2',
+        Digit3: '3',
+        Digit4: '4',
+        Digit5: '5',
+        Digit6: '6',
+        Digit7: '7',
+        Digit8: '8',
+        Digit9: '9',
+        A: 'A',
+        B: 'B',
+        C: 'C',
+        D: 'D',
+        E: 'E',
+        F: 'F',
+        G: 'G',
+        H: 'H',
+        I: 'I',
+        J: 'J',
+        K: 'K',
+        L: 'L',
+        M: 'M',
+        N: 'N',
+        O: 'O',
+        P: 'P',
+        Q: 'Q',
+        R: 'R',
+        S: 'S',
+        T: 'T',
+        U: 'U',
+        V: 'V',
+        W: 'W',
+        X: 'X',
+        Y: 'Y',
+        Z: 'Z',
+        a: 'a',
+        b: 'b',
+        c: 'c',
+        d: 'd',
+        e: 'e',
+        f: 'f',
+        g: 'g',
+        h: 'h',
+        i: 'i',
+        j: 'j',
+        k: 'k',
+        l: 'l',
+        m: 'm',
+        n: 'n',
+        o: 'o',
+        p: 'p',
+        q: 'q',
+        r: 'r',
+        s: 's',
+        t: 't',
+        u: 'u',
+        v: 'v',
+        w: 'w',
+        x: 'x',
+        y: 'y',
+        z: 'z',
+        Meta: 'Meta',
+        ContextMenu: 'ContextMenu',
+        AudioVolumeMute: 'AudioVolumeMute',
+        AudioVolumeDown: 'AudioVolumeDown',
+        AudioVolumeUp: 'AudioVolumeUp',
+        F1: 'F1',
+        F2: 'F2',
+        F3: 'F3',
+        F4: 'F4',
+        F5: 'F5',
+        F6: 'F6',
+        F7: 'F7',
+        F8: 'F8',
+        F9: 'F9',
+        F10: 'F10',
+        F11: 'F11',
+        F12: 'F12',
+        NumLock: 'NumLock',
+        ScrollLock: 'ScrollLock',
+        Semicolon: ';',
+        Equal: ':',
+        Comma: ',',
+        Minus: '-',
+        Period: '.',
+        Slash: '/',
+        Backquote: '`',
+        BracketLeft: '[',
+        Backslash: '\\',
+        BracketRight: ']',
+        Quote: "'",
+        Tilde: '~',
+        Exclamation: '!',
+        At: '@',
+        Sharp: '#',
+        Dollar: '$',
+        Percent: '%',
+        Caret: '^',
+        Ampersand: '&',
+        Asterisk: '*',
+        ParenthesisLeft: '(',
+        ParenthesisRight: ')',
+        Underscore: '_',
+        Plus: '+',
+        OpenBrace: '{',
+        CloseBrace: '}',
+        Pipe: '|',
+        Colon: ':',
+        Quote2: '"',
+        AngleBracketLeft: '<',
+        AngleBracketRight: '>',
+        QuestionMark: '?',
+    },
+
+    Codes: {
+        Backspace: 'Backspace',
+        Tab: 'Tab',
+        Enter: 'Enter',
+        ShiftLeft: 'ShiftLeft',
+        ShiftRight: 'ShiftRight',
+        ControlLeft: 'ControlLeft',
+        ControlRight: 'ControlRight',
+        AltLeft: 'AltLeft',
+        AltRight: 'AltRight',
+        Pause: 'Pause',
+        CapsLock: 'CapsLock',
+        Escape: 'Escape',
+        Space: 'Space',
+        PageUp: 'PageUp',
+        PageDown: 'PageDown',
+        End: 'End',
+        Home: 'Home',
+        ArrowLeft: 'ArrowLeft',
+        ArrowUp: 'ArrowUp',
+        ArrowRight: 'ArrowRight',
+        ArrowDown: 'ArrowDown',
+        PrintScreen: 'PrintScreen',
+        Insert: 'Insert',
+        Delete: 'Delete',
+        Digit0: 'Digit0',
+        Digit1: 'Digit1',
+        Digit2: 'Digit2',
+        Digit3: 'Digit3',
+        Digit4: 'Digit4',
+        Digit5: 'Digit5',
+        Digit6: 'Digit6',
+        Digit7: 'Digit7',
+        Digit8: 'Digit8',
+        Digit9: 'Digit9',
+        AudioVolumeMute: 'AudioVolumeMute',
+        AudioVolumeDown: 'AudioVolumeDown',
+        AudioVolumeUp: 'AudioVolumeUp',
+        KeyA: 'KeyA',
+        KeyB: 'KeyB',
+        KeyC: 'KeyC',
+        KeyD: 'KeyD',
+        KeyE: 'KeyE',
+        KeyF: 'KeyF',
+        KeyG: 'KeyG',
+        KeyH: 'KeyH',
+        KeyI: 'KeyI',
+        KeyJ: 'KeyJ',
+        KeyK: 'KeyK',
+        KeyL: 'KeyL',
+        KeyM: 'KeyM',
+        KeyN: 'KeyN',
+        KeyO: 'KeyO',
+        KeyP: 'KeyP',
+        KeyQ: 'KeyQ',
+        KeyR: 'KeyR',
+        KeyS: 'KeyS',
+        KeyT: 'KeyT',
+        KeyU: 'KeyU',
+        KeyV: 'KeyV',
+        KeyW: 'KeyW',
+        KeyX: 'KeyX',
+        KeyY: 'KeyY',
+        KeyZ: 'KeyZ',
+        MetaLeft: 'MetaLeft',
+        MetaRight: 'MetaRight',
+        ContextMenu: 'ContextMenu',
+        Numpad0: 'Numpad0',
+        Numpad1: 'Numpad1',
+        Numpad2: 'Numpad2',
+        Numpad3: 'Numpad3',
+        Numpad4: 'Numpad4',
+        Numpad5: 'Numpad5',
+        Numpad6: 'Numpad6',
+        Numpad7: 'Numpad7',
+        Numpad8: 'Numpad8',
+        Numpad9: 'Numpad9',
+        NumpadMultiply: 'NumpadMultiply',
+        NumpadAdd: 'NumpadAdd',
+        NumpadSubtract: 'NumpadSubtract',
+        NumpadDecimal: 'NumpadDecimal',
+        NumpadDivide: 'NumpadDivide',
+        NumpadEnter: 'NumpadEnter',
+        F1: 'F1',
+        F2: 'F2',
+        F3: 'F3',
+        F4: 'F4',
+        F5: 'F5',
+        F6: 'F6',
+        F7: 'F7',
+        F8: 'F8',
+        F9: 'F9',
+        F10: 'F10',
+        F11: 'F11',
+        F12: 'F12',
+        NumLock: 'NumLock',
+        ScrollLock: 'ScrollLock',
+        Semicolon: 'Semicolon',
+        Equal: 'Equal',
+        Comma: 'Comma',
+        Minus: 'Minus',
+        Period: 'Period',
+        Slash: 'Slash',
+        Backquote: 'Backquote',
+        BracketLeft: 'BracketLeft',
+        Backslash: 'Backslash',
+        BracketRight: 'BracketRight',
+        Quote: 'Quote',
+    },
+} as const;
+
+export type KeyboardConstant = (typeof KeyboardConstant)[keyof typeof KeyboardConstant];

package/template-vanilla/src/experiences/constants/experiences/AnimationId.ts

@@ -0,0 +1,3 @@
+export const AnimationId = {} as const;
+
+export type AnimationId = (typeof AnimationId)[keyof typeof AnimationId];

package/template-vanilla/src/experiences/constants/experiences/AssetId.ts

@@ -0,0 +1,8 @@
+export const AssetId = {
+    THREE_TEXTURE_TEMPLATE: 'THREE_TEXTURE_TEMPLATE',
+    THREE_HDR_TEMPLATE: 'THREE_HDR_TEMPLATE',
+    THREE_GLTF_TEMPLATE: 'THREE_GLTF_TEMPLATE',
+    THREE_FONT_TEMPLATE: 'THREE_FONT_TEMPLATE',
+} as const;
+
+export type AssetId = (typeof AssetId)[keyof typeof AssetId];

package/template-vanilla/src/experiences/constants/experiences/AssetType.ts

@@ -0,0 +1,8 @@
+export const AssetType = {
+    TEXTURE: 'TEXTURE',
+    HDR: 'HDR',
+    MODEL: 'MODEL',
+    FONT: 'FONT',
+} as const;
+
+export type AssetType = (typeof AssetType)[keyof typeof AssetType];

package/template-vanilla/src/experiences/constants/experiences/CameraId.ts

@@ -0,0 +1,7 @@
+export const CameraId = {
+    THREE_DEBUG: 'THREE_DEBUG',
+    THREE_MAIN: 'THREE_MAIN',
+    THREE_LOADER: 'THREE_LOADER',
+} as const;
+
+export type CameraId = (typeof CameraId)[keyof typeof CameraId];

package/template-vanilla/src/experiences/constants/experiences/CameraType.ts

@@ -0,0 +1,6 @@
+export const CameraType = {
+    PERSPECTIVE: 'PERSPECTIVE',
+    ORTHOGRAPHIC: 'ORTHOGRAPHIC',
+} as const;
+
+export type CameraType = (typeof CameraType)[keyof typeof CameraType];

package/template-vanilla/src/experiences/constants/experiences/Object3dId.ts

@@ -0,0 +1,3 @@
+export const Object3DId = {} as const;
+
+export type Object3DId = (typeof Object3DId)[keyof typeof Object3DId];

package/template-vanilla/src/experiences/constants/experiences/ViewId.ts

@@ -0,0 +1,15 @@
+const HTMLViewId = {
+    HTML_LOADER: 'HTML_LOADER',
+} as const;
+
+const ThreeViewId = {
+    THREE_LOADER: 'THREE_LOADER',
+    THREE_WORLD: 'THREE_WORLD',
+} as const;
+
+export const ViewId = {
+    ...HTMLViewId,
+    ...ThreeViewId,
+} as const;
+
+export type ViewId = (typeof ViewId)[keyof typeof ViewId];

package/template-vanilla/src/experiences/engines/htmls/MainHTML.ts

@@ -0,0 +1,13 @@
+import { ViewId } from '../../constants/experiences/ViewId';
+import ViewProxy from '../../proxies/ViewProxy';
+import LoaderHTMLView from '../../views/htmls/loaders/LoaderHTMLView';
+
+export default class MainHTML {
+    public static Init(): void {
+        MainHTML._GenerateViews();
+    }
+
+    private static _GenerateViews(): void {
+        ViewProxy.Add(ViewId.HTML_LOADER, LoaderHTMLView);
+    }
+}

package/template-vanilla/src/experiences/engines/threes/MainThree.ts

@@ -0,0 +1,171 @@
+import { MeshStandardMaterial, Scene } from 'three';
+import type ThreeCameraControllerBase from '../../cameras/threes/bases/ThreeCameraControllerBase';
+import DebugThreeCameraController from '../../cameras/threes/DebugThreeCameraController';
+import LoaderThreeCameraController from '../../cameras/threes/LoaderThreeCameraController';
+import MainThreeCameraController from '../../cameras/threes/MainThreeCameraController';
+import { KeyboardConstant } from '../../constants/doms/KeyboardConstant';
+import { CameraId } from '../../constants/experiences/CameraId';
+import { ViewId } from '../../constants/experiences/ViewId';
+import DebugManager from '../../managers/DebugManager';
+import { KeyboardManager } from '../../managers/KeyboardManager';
+import { ResizeManager } from '../../managers/ResizeManager';
+import ThreeCameraControllerManager from '../../managers/threes/ThreeCameraControllerManager';
+import TickerManager from '../../managers/TickerManager';
+import ViewProxy from '../../proxies/ViewProxy';
+import WebGLRendererBase from '../../renderers/threes/bases/WebGLRendererBase';
+import LoaderRenderer from '../../renderers/threes/LoaderRenderer';
+import Renderer from '../../renderers/threes/Renderer';
+import DomUtils from '../../utils/DomUtils';
+import LoaderThreeView from '../../views/threes/loaders/LoaderThreeView';
+import WorldThreeView from '../../views/threes/worlds/WorldThreeView';
+
+export default class MainThree {
+    private static _DomElementContainer: HTMLElement;
+    private static _LoaderDomElementContainer: HTMLElement;
+    private static _Scene: Scene;
+    private static _LoaderScene: Scene;
+    private static _CameraController: ThreeCameraControllerBase;
+    private static _Renderer: Renderer;
+    private static _LoaderRenderer: WebGLRendererBase;
+    private static _DebugWireframeMaterial: MeshStandardMaterial;
+
+    //#region Constants
+    //
+    private static readonly _DEBUG_WIREFRAME_MATERIAL_COLOR: number = 0x3f79f3;
+    private static readonly _TOGGLE_SWITCH_TO_DEBUG_CAMERA_KEYS: string[] = [
+        KeyboardConstant.Codes.ShiftLeft,
+        KeyboardConstant.Codes.KeyC,
+    ];
+    private static readonly _TOGGLE_WIREFRAME_KEYS: string[] = [
+        KeyboardConstant.Codes.ShiftLeft,
+        KeyboardConstant.Codes.KeyW,
+    ];
+    //
+    //#endregion
+
+    public static Init(): void {
+        TickerManager.Add(MainThree.Update);
+
+        MainThree._DomElementContainer = DomUtils.GetApp();
+        MainThree._LoaderDomElementContainer = DomUtils.GetLoader();
+
+        MainThree._GenerateScenes();
+        MainThree._GenerateCameras();
+        MainThree._GenerateRenderers();
+
+        MainThree._OnResize();
+        ResizeManager.OnResize.add(MainThree._OnResize);
+
+        MainThree._GenerateViews();
+
+        if (DebugManager.IsActive) {
+            window.experience = MainThree;
+            KeyboardManager.OnKeyUp.add(MainThree._OnKeyUp);
+        }
+    }
+
+    private static _GenerateScenes(): void {
+        MainThree._Scene = new Scene();
+        MainThree._LoaderScene = new Scene();
+
+        if (DebugManager.IsActive) {
+            MainThree._DebugWireframeMaterial = new MeshStandardMaterial({
+                wireframe: true,
+                color: MainThree._DEBUG_WIREFRAME_MATERIAL_COLOR,
+            });
+        }
+    }
+
+    private static _GenerateViews(): void {
+        ViewProxy.Add(ViewId.THREE_LOADER, LoaderThreeView);
+        ViewProxy.Add(ViewId.THREE_WORLD, WorldThreeView);
+    }
+
+    private static _GenerateCameras(): void {
+        ThreeCameraControllerManager.Add(new MainThreeCameraController(), true);
+        ThreeCameraControllerManager.Add(new LoaderThreeCameraController());
+        MainThree._CameraController = ThreeCameraControllerManager.Get(CameraId.THREE_MAIN);
+
+        if (DebugManager.IsActive) {
+            ThreeCameraControllerManager.Add(new DebugThreeCameraController());
+        }
+
+        ThreeCameraControllerManager.OnActiveThreeCameraControllerChange.add(MainThree._OnActiveCameraControllerChange);
+    }
+
+    private static _GenerateRenderers(): void {
+        MainThree._Renderer = new Renderer(MainThree.Scene, MainThree._CameraController.camera, { antialias: true });
+        MainThree._DomElementContainer.appendChild(MainThree._Renderer.domElement);
+
+        MainThree._LoaderRenderer = new LoaderRenderer(
+            MainThree.LoaderScene,
+            ThreeCameraControllerManager.Get(CameraId.THREE_LOADER).camera
+        );
+        MainThree._LoaderDomElementContainer.appendChild(MainThree._LoaderRenderer.domElement);
+    }
+
+    private static _OnActiveCameraControllerChange = (): void => {
+        MainThree._CameraController = ThreeCameraControllerManager.ActiveThreeCameraController;
+        MainThree._Renderer.setCamera(MainThree._CameraController.camera);
+        MainThree._OnResize();
+    };
+
+    private static readonly _OnKeyUp = (_e: KeyboardEvent): void => {
+        if (DebugManager.IsActive) {
+            if (KeyboardManager.AreAllKeysDown(MainThree._TOGGLE_SWITCH_TO_DEBUG_CAMERA_KEYS)) {
+                ThreeCameraControllerManager.SetActiveCamera(
+                    MainThree._CameraController.cameraId === CameraId.THREE_MAIN
+                        ? CameraId.THREE_DEBUG
+                        : CameraId.THREE_MAIN
+                );
+            } else if (KeyboardManager.AreAllKeysDown(MainThree._TOGGLE_WIREFRAME_KEYS)) {
+                if (MainThree._Scene.overrideMaterial === null) {
+                    MainThree._Scene.overrideMaterial = MainThree._DebugWireframeMaterial;
+                    MainThree._LoaderScene.overrideMaterial = MainThree._DebugWireframeMaterial;
+                } else {
+                    MainThree._Scene.overrideMaterial = null;
+                    MainThree._LoaderScene.overrideMaterial = null;
+                }
+            }
+        }
+    };
+
+    private static _OnResize = (): void => {
+        MainThree._Renderer.domElement.width = window.innerWidth;
+        MainThree._Renderer.domElement.height = window.innerHeight;
+
+        MainThree._LoaderRenderer.domElement.width = window.innerWidth;
+        MainThree._LoaderRenderer.domElement.height = window.innerHeight;
+
+        MainThree._CameraController.resize();
+        MainThree._Renderer.resize();
+        MainThree._LoaderRenderer.resize();
+    };
+
+    public static Update = (dt: number): void => {
+        MainThree._CameraController.update(dt);
+        if (ViewProxy.Has(ViewId.THREE_WORLD)) ViewProxy.GetById<WorldThreeView>(ViewId.THREE_WORLD).update(dt);
+        MainThree._Renderer.update(dt);
+        MainThree._LoaderRenderer.update(dt);
+    };
+
+    //#region Getters
+    //
+    public static get DomElementContainer(): HTMLElement {
+        return this._DomElementContainer;
+    }
+    public static get Scene(): Scene {
+        return this._Scene;
+    }
+    public static get LoaderScene(): Scene {
+        return this._LoaderScene;
+    }
+    public static get Renderer(): WebGLRendererBase {
+        return this._Renderer;
+    }
+    public static get CameraController(): ThreeCameraControllerBase {
+        return this._CameraController;
+    }
+    //
+    //#endregion
+}

package/template-vanilla/src/experiences/managers/DebugManager.ts

@@ -0,0 +1,78 @@
+import GUI from 'lil-gui';
+import { ThreePerf } from 'three-perf';
+import { KeyboardConstant } from '../constants/doms/KeyboardConstant';
+import MainThree from '../engines/threes/MainThree';
+import { KeyboardManager } from './KeyboardManager';
+
+export default class DebugManager {
+    private static _Gui: GUI;
+    private static _ThreePerf: ThreePerf;
+
+    //#region Constants
+    //
+    private static readonly _IS_ACTIVE_STRING: string = '#debug';
+    private static readonly _GUI_WIDTH: number = 300;
+    private static readonly _GUI_TITLE: string = 'Debug Panel';
+    private static readonly _THREE_PERF_ANCHOR_X: 'left' | 'right' = 'left';
+    private static readonly _THREE_PERF_ANCHOR_Y: 'top' | 'bottom' = 'bottom';
+    private static readonly _TOGGLE_HIDDEN_KEYS: string[] = [
+        KeyboardConstant.Codes.ShiftLeft,
+        KeyboardConstant.Codes.KeyH,
+    ];
+    //
+    //#endregion
+
+    public static Init(): void {
+        if (DebugManager.IsActive) {
+            DebugManager._InitGui();
+        }
+    }
+
+    private static _InitGui(): void {
+        DebugManager._Gui = new GUI({
+            width: DebugManager._GUI_WIDTH,
+            title: DebugManager._GUI_TITLE,
+            closeFolders: true,
+        });
+        DebugManager._Gui.close();
+        KeyboardManager.OnKeyUp.remove(DebugManager._OnKeyUp);
+        KeyboardManager.OnKeyUp.add(DebugManager._OnKeyUp);
+    }
+
+    private static _InitThreePerf = (): void => {
+        DebugManager._ThreePerf = new ThreePerf({
+            anchorX: DebugManager._THREE_PERF_ANCHOR_X,
+            anchorY: DebugManager._THREE_PERF_ANCHOR_Y,
+            domElement: document.body,
+            renderer: MainThree.Renderer,
+            showGraph: false,
+        });
+    };
+
+    public static BeginThreePerf(): void {
+        if (!DebugManager._ThreePerf) DebugManager._InitThreePerf();
+        DebugManager._ThreePerf.begin();
+    }
+
+    public static EndThreePerf(): void {
+        DebugManager._ThreePerf.end();
+    }
+
+    private static readonly _OnKeyUp = (_e: KeyboardEvent): void => {
+        if (KeyboardManager.AreAllKeysDown(DebugManager._TOGGLE_HIDDEN_KEYS)) {
+            DebugManager._Gui.show(DebugManager._Gui._hidden);
+            DebugManager._ThreePerf.visible = !DebugManager._ThreePerf.visible;
+        }
+    };
+
+    //#region Getters
+    //
+    public static get IsActive(): boolean {
+        return window.location.hash === DebugManager._IS_ACTIVE_STRING;
+    }
+    public static get Gui(): GUI {
+        return DebugManager._Gui;
+    }
+    //
+    //#endregion
+}