@benjos/create-boilerplate 1.4.1 → 1.5.0

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

@@ -2,6 +2,7 @@ import { DomKeyboardManager } from '@benjos/cookware';
 import { KeyboardConstant } from '@benjos/spices';
 import GUI from 'lil-gui';
 import { ThreePerf } from 'three-perf';
+import { DebugGuiTitle } from '../constants/experiences/DebugGuiTitle';
 import MainThreeApp from '../engines/threes/app/MainThreeApp';
 
 class DebugManager {
@@ -45,6 +46,16 @@ class DebugManager {
         });
     };
 
+    private _addGuiFolder(title: DebugGuiTitle): GUI {
+        return this._gui.addFolder(title);
+    }
+
+    public getGuiFolder(title: DebugGuiTitle): GUI {
+        let gui = this._gui.folders.find(gui => gui._title === title);
+        if (!gui) gui = this._addGuiFolder(title);
+        return gui;
+    }
+
     public beginThreePerf(): void {
         if (!this._threePerf) this._initThreePerf();
         this._threePerf.begin();

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

@@ -1,27 +1,47 @@
-import { Action } from '@benjos/cookware';
+import { Action, TickerManager } from '@benjos/cookware';
 import ThreeAssetsManager from './threes/ThreeAssetsManager';
 
 class LoaderManager {
+    private static readonly _MIN_LOAD_DURATION: number = 0.5;
+
     private _totalSize = 0;
     private _loadedSize = 0;
+    private _progress = 0;
+    private _isTransitioning = false;
+    private _elapsed = 0;
+    private _hasAssetsToLoad = false;
+    private _assetsFinished = false;
+    private _transitionResolve: (() => void) | null = null;
+    private _showTransition: (() => Promise<void>) | null = null;
+    private _hideTransition: (() => Promise<void>) | null = null;
 
     public readonly onBeginLoad = new Action();
     public readonly onProgress = new Action();
     public readonly onFinishLoad = new Action();
+    public readonly onShow = new Action();
+    public readonly onHide = new Action();
 
     public init(): void {
         this._addCallbacks();
     }
 
+    public setShowTransition(callback: () => Promise<void>): void {
+        this._showTransition = callback;
+    }
+
+    public setHideTransition(callback: () => Promise<void>): void {
+        this._hideTransition = callback;
+    }
+
     private _addCallbacks(): void {
         this._removeCallbacks();
         ThreeAssetsManager.onLoad.add(this._onLoad);
-        ThreeAssetsManager.onProgress.add(this._onProgress);
+        ThreeAssetsManager.onProgress.add(this._onAssetProgress);
     }
 
     private _removeCallbacks(): void {
         ThreeAssetsManager.onLoad.remove(this._onLoad);
-        ThreeAssetsManager.onProgress.remove(this._onProgress);
+        ThreeAssetsManager.onProgress.remove(this._onAssetProgress);
     }
 
     private _beginLoad = (): void => {
@@ -34,9 +54,75 @@ class LoaderManager {
         this.onFinishLoad.execute();
     };
 
-    public loadAllAssets(): void {
-        if (this._checkIsFinished()) return;
-        this._beginLoad();
+    private async _showLoader(): Promise<void> {
+        this.onShow.execute();
+        if (this._showTransition) await this._showTransition();
+    }
+
+    private async _hideLoader(): Promise<void> {
+        this.onHide.execute();
+        if (this._hideTransition) await this._hideTransition();
+    }
+
+    private readonly _onAssetsFinish = (): void => {
+        this._assetsFinished = true;
+        this.onFinishLoad.remove(this._onAssetsFinish);
+    };
+
+    private readonly _onTransitionTick = (dt: number): void => {
+        this._elapsed += dt;
+        const timerProgress = Math.min(this._elapsed / LoaderManager._MIN_LOAD_DURATION, 1);
+
+        let assetProgress = 1;
+        if (this._hasAssetsToLoad && !this._assetsFinished) {
+            assetProgress = this._totalSize > 0 ? Math.min(this._loadedSize / this._totalSize, 1) : 0;
+        }
+
+        this._progress = Math.min(timerProgress, assetProgress);
+        this.onProgress.execute();
+
+        if (timerProgress >= 1 && this._assetsFinished) {
+            this._progress = 1;
+            this.onProgress.execute();
+            TickerManager.remove(this._onTransitionTick);
+            if (this._transitionResolve) this._transitionResolve();
+        }
+    };
+
+    public async loadAssetsWithTransition(onReady?: () => void | Promise<void>): Promise<void> {
+        const isNested = this._isTransitioning;
+        if (!isNested) {
+            this._isTransitioning = true;
+            await this._showLoader();
+        }
+
+        this._hasAssetsToLoad = !this._checkIsFinished();
+
+        if (this._hasAssetsToLoad || !isNested) {
+            this._progress = 0;
+            this._elapsed = 0;
+            this._assetsFinished = !this._hasAssetsToLoad;
+            this.onProgress.execute();
+
+            if (this._hasAssetsToLoad) {
+                this.onFinishLoad.add(this._onAssetsFinish);
+                this._beginLoad();
+            }
+
+            await new Promise<void>((resolve) => {
+                this._transitionResolve = resolve;
+                TickerManager.add(this._onTransitionTick);
+            });
+
+            this._transitionResolve = null;
+        }
+
+        if (onReady) await onReady();
+
+        if (!isNested) {
+            this._isTransitioning = false;
+            await this._hideLoader();
+        }
     }
 
     private _onLoad = (): void => {
@@ -49,8 +135,9 @@ class LoaderManager {
         return true;
     };
 
-    private _onProgress = (): void => {
+    private _onAssetProgress = (): void => {
         this._refreshSizes();
+        this._progress = this._totalSize > 0 ? Math.min(this._loadedSize / this._totalSize, 1) : 0;
         this.onProgress.execute();
     };
 
@@ -74,6 +161,9 @@ class LoaderManager {
     public get isLoaded(): boolean {
         return this._checkIsFinished();
     }
+    public get progress(): number {
+        return this._progress;
+    }
     public get totalSize(): number {
         return this._totalSize;
     }

package/template-vanilla/src/experiences/materials/threes/loaders/LoaderMaterial.ts

@@ -23,19 +23,19 @@ export default class LoaderMaterial extends ShaderMaterial {
         });
     }
 
-    public show(): void {
+    public async show(): Promise<void> {
         gsap.killTweensOf(this.uniforms.uAlpha);
-        gsap.to(this.uniforms.uAlpha, {
+        await gsap.to(this.uniforms.uAlpha, {
             value: 1,
             duration: LoaderMaterial._GSAP_DURATION_FADE_IN,
             ease: LoaderMaterial._GSAP_EASE_FADE_IN,
         });
     }
 
-    public hide(): void {
+    public async hide(): Promise<void> {
         gsap.killTweensOf(this.uniforms.uAlpha);
         this.uniforms.uAlpha.value = 1;
-        gsap.to(this.uniforms.uAlpha, {
+        await gsap.to(this.uniforms.uAlpha, {
             value: 0,
             duration: LoaderMaterial._GSAP_DURATION_FADE_OUT,
             ease: LoaderMaterial._GSAP_EASE_FADE_OUT,

package/template-vanilla/src/experiences/renderers/threes/LoaderRenderer.ts

@@ -1,9 +1,9 @@
-import { Camera, LinearSRGBColorSpace, NoToneMapping, Scene, type WebGLRendererParameters } from 'three';
+import { Camera, NoToneMapping, Scene, SRGBColorSpace, type WebGLRendererParameters } from 'three';
 import WebGLRendererBase from './bases/WebGLRendererBase';
 
 export default class LoaderRenderer extends WebGLRendererBase {
     private static readonly _DEFAULT_TONE_MAPPING = NoToneMapping;
-    private static readonly _DEFAULT_OUTPUT_COLOR_SPACE = LinearSRGBColorSpace;
+    private static readonly _DEFAULT_OUTPUT_COLOR_SPACE = SRGBColorSpace;
     private static readonly _DEFAULT_TONE_MAPPING_EXPOSURE = 1;
     private static readonly _DEFAULT_CLEAR_COLOR = 0x000000;
     private static readonly _DEFAULT_CLEAR_ALPHA = 0;

package/template-vanilla/src/experiences/renderers/threes/Renderer.ts

@@ -16,6 +16,7 @@ import {
     type ToneMapping,
     type WebGLRendererParameters,
 } from 'three';
+import { DebugGuiTitle } from '../../constants/experiences/DebugGuiTitle';
 import DebugManager from '../../managers/DebugManager';
 import WebGLRendererBase from './bases/WebGLRendererBase';
 
@@ -37,7 +38,7 @@ export default class Renderer extends WebGLRendererBase {
         this.setClearColor(Renderer._DEFAULT_CLEAR_COLOR, Renderer._DEFAULT_CLEAR_ALPHA);
 
         if (DebugManager.isActive) {
-            const rendererFolder = DebugManager.gui.addFolder('Renderer');
+            const rendererFolder = DebugManager.getGuiFolder(DebugGuiTitle.THREE_RENDERER)
             rendererFolder
                 .add(this, 'toneMapping', {
                     NoToneMapping,

package/template-vanilla/src/experiences/shaders/threes/loaders/LoaderFragmentShader.glsl

@@ -3,4 +3,6 @@ uniform float uAlpha;
 
 void main() {
     gl_FragColor = vec4(uColor, uAlpha);
+    #include <tonemapping_fragment>
+    #include <colorspace_fragment>
 }

package/template-vanilla/src/experiences/styles/commons/main.scss

@@ -16,13 +16,13 @@ body {
     padding: 0;
     overflow: hidden;
 
-    >#app,
-    >#root {
+    > #app,
+    > #root {
         position: relative;
         width: 100%;
         height: 100%;
 
-        >#loader {
+        > #loader {
             position: absolute;
             top: 0;
             left: 0;
@@ -44,35 +44,10 @@ body {
             width: 100%;
             height: 100%;
             opacity: 0;
+            transition: opacity $viewTransition ease;
 
             &.show {
-                opacity: 0;
-                animation: showView $viewTransition ease forwards;
-
-                @keyframes showView {
-                    0% {
-                        opacity: 0;
-                    }
-
-                    100% {
-                        opacity: 1;
-                    }
-                }
-            }
-
-            &.hidden {
                 opacity: 1;
-                animation: hideView $viewTransition ease forwards;
-
-                @keyframes hideView {
-                    0% {
-                        opacity: 1;
-                    }
-
-                    100% {
-                        opacity: 0;
-                    }
-                }
             }
         }
     }
@@ -81,4 +56,4 @@ body {
     #three-perf-ui {
         z-index: 999999;
     }
-}
+}

package/template-vanilla/src/experiences/styles/style.scss

@@ -4,4 +4,4 @@
 @use './commons/texts.scss';
 @use './commons/fonts.scss';
 
-@use './views/loader.scss';
+@use './views/loader.scss';

package/template-vanilla/src/experiences/styles/views/loader.scss

@@ -8,9 +8,7 @@ body {
     >#root {
         >#loader {
             .html-view {
-                &.hidden {
-                    animation-duration: $outroFadeOutDuration;
-                }
+                transition: opacity $outroFadeOutDuration ease;
             }
         }
     }
@@ -39,7 +37,6 @@ body {
             display: flex;
             align-items: center;
             gap: 0.25rem;
-            color: $white;
         }
 
         .loading-bar {

package/template-vanilla/src/experiences/types/global.d.ts

@@ -6,5 +6,4 @@ declare global {
     }
 }
 
-export { };
-
+export {};

package/template-vanilla/src/experiences/views/htmls/bases/HTMLViewBase.ts

@@ -1,4 +1,3 @@
-
 export default abstract class HTMLViewBase {
     declare protected _htmlElement: HTMLDivElement;
 
@@ -12,11 +11,9 @@ export default abstract class HTMLViewBase {
 
     public show(): void {
         this._htmlElement.classList.add('show');
-        this._htmlElement.classList.remove('hidden');
     }
 
     public hide(): void {
-        this._htmlElement.classList.add('hidden');
         this._htmlElement.classList.remove('show');
     }
 }

package/template-vanilla/src/experiences/views/htmls/loaders/LoaderHTMLView.ts

@@ -9,9 +9,9 @@ export default class LoaderHTMLView extends HTMLViewBase {
 
     constructor() {
         super();
-        LoaderManager.onBeginLoad.add(this._onBeginLoad);
         LoaderManager.onProgress.add(this._onProgress);
-        LoaderManager.onFinishLoad.add(this._onFinishLoad);
+        LoaderManager.onShow.add(this._onShow);
+        LoaderManager.onHide.add(this._onHide);
     }
 
     protected override _getElement(): void {
@@ -21,20 +21,19 @@ export default class LoaderHTMLView extends HTMLViewBase {
         this._loadingBar = this._htmlElement.querySelector('.loading-bar')!;
     }
 
-    private readonly _onBeginLoad = (): void => {
+    private readonly _onShow = (): void => {
         this._loadingNumber.textContent = '0';
         this._loadingBar.style.transform = '';
         this._loadingBar.classList.remove('ended');
         this.show();
     };
-
-    private _onProgress = (): void => {
-        const progress = Math.min(LoaderManager.loadedSize / LoaderManager.totalSize, 1) * 100;
-        this._loadingBar.style.transform = `translateY(-50%) scaleX(${progress / 100})`;
+    private readonly _onProgress = (): void => {
+        const progress = LoaderManager.progress * 100;
+        this._loadingBar.style.transform = `translateY(-50%) scaleX(${LoaderManager.progress})`;
         this._loadingNumber.textContent = Math.round(progress).toString();
     };
 
-    private readonly _onFinishLoad = (): void => {
+    private readonly _onHide = (): void => {
         this._loadingNumber.textContent = '100';
         this._loadingBar.style.transform = '';
         this._loadingBar.classList.add('ended');

package/template-vanilla/src/experiences/views/threes/bases/ThreeViewBase.ts

@@ -1,16 +1,24 @@
 import { Object3D } from 'three';
-import ActorBase from '../worlds/components/actors/bases/ActorBase';
+import { ViewId } from '../../../constants/experiences/ViewId';
+import ThreeActorBase from '../worlds/components/actors/bases/ThreeActorBase';
 
 export default abstract class ThreeViewBase extends Object3D {
-    protected readonly _actors: ActorBase[];
+    private readonly _id: ViewId;
+    protected readonly _actors: ThreeActorBase[];
+    private _areActorsGenerated = false;
 
-    constructor() {
+    constructor(id: ViewId) {
         super();
-
+        this._id = id;
         this._actors = [];
     }
 
+    public declareAssets(): void {
+        //
+    }
+
     public init(): void {
+        if (!this._areActorsGenerated) this._generateActors();
         this.reset();
         for (const actor of this._actors) actor.init();
     }
@@ -20,7 +28,7 @@ export default abstract class ThreeViewBase extends Object3D {
     }
 
     protected _generateActors(): void {
-        //
+        this._areActorsGenerated = true;
     }
 
     public dispose(): void {
@@ -29,7 +37,13 @@ export default abstract class ThreeViewBase extends Object3D {
         }
     }
 
-    public update(dt: number): void {
+    public update(_dt: number): void {
         //
     }
+
+    //#region Getters
+    //
+    public get viewId(): ViewId { return this._id; }
+    //
+    //#endregion
 }

package/template-vanilla/src/experiences/views/threes/loaders/LoaderThreeView.ts

@@ -1,38 +1,28 @@
-import LoaderManager from '../../../managers/LoaderManager';
+import { ViewId } from '../../../constants/experiences/ViewId';
 import ThreeViewBase from '../bases/ThreeViewBase';
-import ThreeTemplateLoader from './components/ThreeTemplateLoader';
+import TemplateLoaderThreeActor from './components/TemplateLoaderThreeActor';
 
 export default class LoaderThreeView extends ThreeViewBase {
-    declare private _threeLoader: ThreeTemplateLoader;
+    declare private _threeLoader: TemplateLoaderThreeActor;
 
     constructor() {
-        super();
+        super(ViewId.THREE_LOADER);
         this._generateActors();
-        LoaderManager.onBeginLoad.add(this._onBeginLoad);
-        LoaderManager.onFinishLoad.add(this._onFinishLoad);
     }
 
     protected override _generateActors(): void {
         super._generateActors();
-        this._threeLoader = new ThreeTemplateLoader();
+        this._threeLoader = new TemplateLoaderThreeActor();
         this._actors.push(this._threeLoader);
 
         for (const actor of this._actors) this.add(actor);
     }
 
-    protected _show(): void {
-        this._threeLoader.material.show();
-    }
-
-    protected _hide(): void {
-        this._threeLoader.material.hide();
-    }
-
-    private readonly _onBeginLoad = (): void => {
-        this._show();
+    public readonly show = (): Promise<void> => {
+        return this._threeLoader.material.show();
     };
 
-    private readonly _onFinishLoad = (): void => {
-        this._hide();
+    public readonly hide = (): Promise<void> => {
+        return this._threeLoader.material.hide();
     };
 }

package/template-vanilla/src/experiences/views/threes/loaders/components/{ThreeTemplateLoader.ts → TemplateLoaderThreeActor.ts}

@@ -1,8 +1,8 @@
 import { Mesh, PlaneGeometry } from 'three';
 import LoaderMaterial from '../../../../materials/threes/loaders/LoaderMaterial';
-import ActorBase from '../../worlds/components/actors/bases/ActorBase';
+import ThreeActorBase from '../../worlds/components/actors/bases/ThreeActorBase';
 
-export default class ThreeTemplateLoader extends ActorBase {
+export default class TemplateLoaderThreeActor extends ThreeActorBase {
     private static readonly _DEFAULT_SIZE_WIDTH: number = 2;
     private static readonly _DEFAULT_SIZE_HEIGHT: number = 2;
     private static readonly _DEFAULT_SEGMENTS_WIDTH: number = 1;
@@ -24,10 +24,10 @@ export default class ThreeTemplateLoader extends ActorBase {
 
     private _generateGeometry(): void {
         this._geometry = new PlaneGeometry(
-            ThreeTemplateLoader._DEFAULT_SIZE_WIDTH,
-            ThreeTemplateLoader._DEFAULT_SIZE_HEIGHT,
-            ThreeTemplateLoader._DEFAULT_SEGMENTS_WIDTH,
-            ThreeTemplateLoader._DEFAULT_SEGMENTS_HEIGHT
+            TemplateLoaderThreeActor._DEFAULT_SIZE_WIDTH,
+            TemplateLoaderThreeActor._DEFAULT_SIZE_HEIGHT,
+            TemplateLoaderThreeActor._DEFAULT_SEGMENTS_WIDTH,
+            TemplateLoaderThreeActor._DEFAULT_SEGMENTS_HEIGHT
         );
     }
 
@@ -39,12 +39,6 @@ export default class ThreeTemplateLoader extends ActorBase {
         this._mesh = new Mesh(this._geometry, this._material);
     }
 
-    public override dispose(): void {
-        super.dispose();
-        this._geometry.dispose();
-        this._material.dispose();
-    }
-
     //#region Getters
     //
     public get material(): LoaderMaterial {

package/template-vanilla/src/experiences/views/threes/worlds/World2ThreeView.ts

@@ -0,0 +1,35 @@
+import { DebugGuiTitle } from '../../../constants/experiences/DebugGuiTitle';
+import { ViewId } from '../../../constants/experiences/ViewId';
+import MainThreeApp from '../../../engines/threes/app/MainThreeApp';
+import DebugManager from '../../../managers/DebugManager';
+import ThreeViewBase from '../bases/ThreeViewBase';
+import Environment from './components/Environment';
+import TemplateFont from './components/actors/TemplateFont';
+import TemplateMesh2 from './components/actors/TemplateMesh2';
+import TemplateModel from './components/actors/TemplateModel';
+
+export default class World2ThreeView extends ThreeViewBase {
+    constructor() {
+        super(ViewId.THREE_VIEW_WORLD_2);
+    }
+
+    protected override _generateActors(): void {
+        super._generateActors();
+
+        if (DebugManager.isActive) {
+            const viewsDebug = DebugManager.getGuiFolder(DebugGuiTitle.THREE_VIEWS)
+            viewsDebug.add({ switchToWorld2ThreeView: () => MainThreeApp.setCurrentView(ViewId.THREE_VIEW_WORLD_2) }, 'switchToWorld2ThreeView').name('SWITCH WORLD_2_VIEW');
+        }
+
+        this._actors.push(new Environment());
+        this._actors.push(new TemplateMesh2());
+        this._actors.push(new TemplateModel());
+        this._actors.push(new TemplateFont());
+
+        for (const actor of this._actors) this.add(actor);
+    }
+
+    public override update(dt: number): void {
+        for (const actor of this._actors) actor.update(dt);
+    }
+}

package/template-vanilla/src/experiences/views/threes/worlds/WorldThreeView.ts

@@ -1,4 +1,7 @@
-import LoaderManager from '../../../managers/LoaderManager';
+import { DebugGuiTitle } from '../../../constants/experiences/DebugGuiTitle';
+import { ViewId } from '../../../constants/experiences/ViewId';
+import MainThreeApp from '../../../engines/threes/app/MainThreeApp';
+import DebugManager from '../../../managers/DebugManager';
 import ThreeViewBase from '../bases/ThreeViewBase';
 import Environment from './components/Environment';
 import TemplateFont from './components/actors/TemplateFont';
@@ -6,27 +9,19 @@ import TemplateMesh from './components/actors/TemplateMesh';
 import TemplateModel from './components/actors/TemplateModel';
 
 export default class WorldThreeView extends ThreeViewBase {
-    declare private _environment: Environment;
-
     constructor() {
-        super();
-        LoaderManager.onFinishLoad.add(this._onFinishLoad);
-    }
-
-    private readonly _onFinishLoad = (): void => {
-        this._generateEnvironment();
-        this._generateActors();
-        LoaderManager.onFinishLoad.remove(this._onFinishLoad);
-    };
-
-    private _generateEnvironment(): void {
-        this._environment = new Environment();
-
-        this.add(this._environment);
+        super(ViewId.THREE_VIEW_WORLD_1);
     }
 
     protected override _generateActors(): void {
         super._generateActors();
+
+        if (DebugManager.isActive) {
+            const viewsDebug = DebugManager.getGuiFolder(DebugGuiTitle.THREE_VIEWS)
+            viewsDebug.add({ switchToWorldThreeView: () => MainThreeApp.setCurrentView(ViewId.THREE_VIEW_WORLD_1) }, 'switchToWorldThreeView').name('SWITCH WORLD_1_VIEW');
+        }
+
+        this._actors.push(new Environment());
         this._actors.push(new TemplateMesh());
         this._actors.push(new TemplateModel());
         this._actors.push(new TemplateFont());
@@ -35,9 +30,6 @@ export default class WorldThreeView extends ThreeViewBase {
     }
 
     public override update(dt: number): void {
-        if (!this._environment) return;
-
-        this._environment.update(dt);
         for (const actor of this._actors) actor.update(dt);
     }
 }