@benjos/create-boilerplate 1.4.0 → 1.5.0

package/template-vanilla/src/experiences/engines/threes/app/LoaderThreeApp.ts

@@ -0,0 +1,49 @@
+import { DomUtils } from '@benjos/cookware';
+import { Scene } from 'three';
+import LoaderThreeCameraController from '../../../cameras/threes/LoaderThreeCameraController';
+import { CameraId } from '../../../constants/experiences/CameraId';
+import LoaderManager from '../../../managers/LoaderManager';
+import ThreeCameraControllerManager from '../../../managers/threes/ThreeCameraControllerManager';
+import LoaderRenderer from '../../../renderers/threes/LoaderRenderer';
+import LoaderThreeView from '../../../views/threes/loaders/LoaderThreeView';
+import ThreeAppBase from './bases/ThreeAppBase';
+
+class LoaderThreeApp extends ThreeAppBase {
+    constructor() {
+        super();
+    }
+
+    protected override _setDomElementContainer(): void {
+        this._domElementContainer = DomUtils.GetLoader();
+    }
+
+    protected override _generateScenes(): void {
+        this._scene = new Scene();
+    }
+
+    protected override _generateCameras(): void {
+        ThreeCameraControllerManager.add(new LoaderThreeCameraController());
+        this._cameraController = ThreeCameraControllerManager.get(CameraId.THREE_LOADER);
+    }
+
+    protected override _generateRenderers(): void {
+        this._renderer = new LoaderRenderer(
+            this._scene,
+            ThreeCameraControllerManager.get(CameraId.THREE_LOADER).camera
+        );
+        this._domElementContainer.appendChild(this._renderer.domElement);
+    }
+
+    protected override _declareViews(): void {
+        const loaderThreeView = new LoaderThreeView();
+        this._views.push(loaderThreeView);
+        this._currentView = loaderThreeView;
+        loaderThreeView.init();
+        this._scene.add(loaderThreeView);
+
+        LoaderManager.setShowTransition(loaderThreeView.show);
+        LoaderManager.setHideTransition(loaderThreeView.hide);
+    }
+}
+
+export default new LoaderThreeApp();

package/template-vanilla/src/experiences/engines/threes/app/MainThreeApp.ts

@@ -0,0 +1,109 @@
+import { DomKeyboardManager, DomUtils } from '@benjos/cookware';
+import { KeyboardConstant } from '@benjos/spices';
+import { MeshStandardMaterial, Scene } from 'three';
+import DebugThreeCameraController from '../../../cameras/threes/DebugThreeCameraController';
+import MainThreeCameraController from '../../../cameras/threes/MainThreeCameraController';
+import { CameraId } from '../../../constants/experiences/CameraId';
+import { DebugGuiTitle } from '../../../constants/experiences/DebugGuiTitle';
+import { ViewId } from '../../../constants/experiences/ViewId';
+import DebugManager from '../../../managers/DebugManager';
+import ThreeCameraControllerManager from '../../../managers/threes/ThreeCameraControllerManager';
+import Renderer from '../../../renderers/threes/Renderer';
+import World2ThreeView from '../../../views/threes/worlds/World2ThreeView';
+import WorldThreeView from '../../../views/threes/worlds/WorldThreeView';
+import ThreeAppBase from './bases/ThreeAppBase';
+
+class MainThreeApp extends ThreeAppBase {
+    private static readonly _DEBUG_WIREFRAME_MATERIAL_COLOR: number = 0x3f79f3;
+    private static readonly _TOGGLE_SWITCH_TO_DEBUG_CAMERA_KEYS: string[] = [
+        KeyboardConstant.CODES.SHIFT_LEFT,
+        KeyboardConstant.CODES.KEY_C,
+    ];
+    private static readonly _TOGGLE_WIREFRAME_KEYS: string[] = [
+        KeyboardConstant.CODES.SHIFT_LEFT,
+        KeyboardConstant.CODES.KEY_W,
+    ];
+
+    declare private _debugWireframeMaterial: MeshStandardMaterial;
+
+    constructor() {
+        super();
+    }
+
+    public override init(): void {
+        super.init();
+
+        if (DebugManager.isActive) {
+            window.mainThreeApp = this;
+            DomKeyboardManager.onKeyDown.add(this._onKeyDown);
+        }
+    }
+
+    protected override _setDomElementContainer(): void {
+        this._domElementContainer = DomUtils.GetApp();
+    }
+
+    protected override _generateScenes(): void {
+        this._scene = new Scene();
+
+        if (DebugManager.isActive) {
+            this._debugWireframeMaterial = new MeshStandardMaterial({
+                wireframe: true,
+                color: MainThreeApp._DEBUG_WIREFRAME_MATERIAL_COLOR,
+            });
+        }
+    }
+
+    protected override _generateCameras(): void {
+        ThreeCameraControllerManager.add(new MainThreeCameraController(), true);
+        this._cameraController = ThreeCameraControllerManager.get(CameraId.THREE_MAIN);
+
+        if (DebugManager.isActive) {
+            ThreeCameraControllerManager.add(new DebugThreeCameraController());
+        }
+
+        ThreeCameraControllerManager.onActiveThreeCameraControllerChange.add(this._onActiveCameraControllerChange);
+    }
+
+    protected override _generateRenderers(): void {
+        this._renderer = new Renderer(this._scene, this._cameraController.camera, { antialias: true });
+        this._domElementContainer.appendChild(this._renderer.domElement);
+    }
+
+    protected override _declareViews(): void {
+        this._viewBuilder.set(ViewId.THREE_VIEW_WORLD_1, WorldThreeView);
+        this._viewBuilder.set(ViewId.THREE_VIEW_WORLD_2, World2ThreeView);
+
+        if (DebugManager.isActive) {
+            const viewsDebug = DebugManager.getGuiFolder(DebugGuiTitle.THREE_VIEWS)
+            viewsDebug.add({ resetCurrentView: () => this._currentView.reset() }, 'resetCurrentView');
+            viewsDebug.add({ createWorld1: () => this.setCurrentView(ViewId.THREE_VIEW_WORLD_1) }, 'createWorld1');
+            viewsDebug.add({ createWorld2: () => this.setCurrentView(ViewId.THREE_VIEW_WORLD_2) }, 'createWorld2');
+        }
+    }
+
+    private _onActiveCameraControllerChange = (): void => {
+        this._cameraController = ThreeCameraControllerManager.activeThreeCameraController;
+        this._renderer.setCamera(this._cameraController.camera);
+        this._onResize();
+    };
+
+    private readonly _onKeyDown = (_e: KeyboardEvent): void => {
+        if (DebugManager.isActive) {
+            if (DomKeyboardManager.areAllKeysDown(MainThreeApp._TOGGLE_SWITCH_TO_DEBUG_CAMERA_KEYS)) {
+                ThreeCameraControllerManager.setActiveCamera(
+                    this._cameraController.cameraId === CameraId.THREE_MAIN ? CameraId.THREE_DEBUG : CameraId.THREE_MAIN
+                );
+            } else if (DomKeyboardManager.areAllKeysDown(MainThreeApp._TOGGLE_WIREFRAME_KEYS)) {
+                if (this._scene.overrideMaterial === null) {
+                    this._scene.overrideMaterial = this._debugWireframeMaterial;
+                } else {
+                    this._scene.overrideMaterial = null;
+                }
+            }
+        }
+    };
+}
+
+export type { MainThreeApp };
+export default new MainThreeApp();

package/template-vanilla/src/experiences/engines/threes/{bases/ThreeBase.ts → app/bases/ThreeAppBase.ts}

@@ -1,34 +1,42 @@
 import { DomResizeManager, TickerManager } from '@benjos/cookware';
 import { Scene } from 'three';
-import ThreeCameraControllerBase from '../../../cameras/threes/bases/ThreeCameraControllerBase';
-import WebGLRendererBase from '../../../renderers/threes/bases/WebGLRendererBase';
-import ThreeViewBase from '../../../views/threes/bases/ThreeViewBase';
+import ThreeCameraControllerBase from '../../../../cameras/threes/bases/ThreeCameraControllerBase';
+import { ViewId } from '../../../../constants/experiences/ViewId';
+import LoaderManager from '../../../../managers/LoaderManager';
+import WebGLRendererBase from '../../../../renderers/threes/bases/WebGLRendererBase';
+import ThreeViewBase from '../../../../views/threes/bases/ThreeViewBase';
 
-export default abstract class ThreeBase {
+export default abstract class ThreeAppBase {
     declare protected _domElementContainer: HTMLElement;
     declare protected _scene: Scene;
     declare protected _cameraController: ThreeCameraControllerBase;
     declare protected _renderer: WebGLRendererBase;
     protected readonly _views: ThreeViewBase[];
+    protected readonly _viewBuilder: Map<ViewId, new () => ThreeViewBase>;
     declare protected _currentView: ThreeViewBase;
 
-    constructor(domElementContainer: HTMLElement) {
-        this._domElementContainer = domElementContainer;
+    constructor() {
         this._views = [];
+        this._viewBuilder = new Map();
     }
 
     public init(): void {
         TickerManager.add(this._update);
 
+        this._setDomElementContainer();
         this._generateScenes();
         this._generateCameras();
         this._generateRenderers();
-        this._generateViews();
+        this._declareViews();
 
         this._onResize();
         DomResizeManager.onResize.add(this._onResize);
     }
 
+    protected _setDomElementContainer(): void {
+        //
+    }
+
     protected _generateScenes(): void {
         //
     }
@@ -41,20 +49,50 @@ export default abstract class ThreeBase {
         //
     }
 
-    protected _generateViews(): void {
+    protected _declareViews(): void {
         //
     }
 
-    protected _setCurrentView(view: ThreeViewBase): void {
-        if (this._currentView === view) return;
+    protected _generateView(viewId: ViewId): ThreeViewBase {
+        const ViewConstructor = this._viewBuilder.get(viewId);
+        if (!ViewConstructor) {
+            throw new Error(`View constructor for ID '${viewId}' not found.`);
+        }
+        const view = new ViewConstructor();
+        this._views.push(view);
+        return view;
+    }
+
+    public async setCurrentView(viewId: ViewId): Promise<void> {
+        if (this._currentView?.viewId === viewId) return;
+
+        let view = this._getViewById(viewId);
+        if (!view) view = this._generateView(viewId);
+
+        view.declareAssets();
+
+        await LoaderManager.loadAssetsWithTransition(this._swapView.bind(this, view));
+    }
+
+    private readonly _swapView = (view: ThreeViewBase): void => {
         if (this._currentView) this._removeOldView(this._currentView);
         this._currentView = view;
+        view.init();
         this.scene.add(this._currentView);
     }
 
+    private _getViewById(viewId: ViewId): ThreeViewBase | null {
+        let view;
+        for (const v of this._views) {
+            if (v.viewId === viewId) view = v;
+        }
+        return view || null;
+    }
+
     private _removeOldView(view: ThreeViewBase): void {
         this.scene.remove(view);
         view.dispose();
+        view.reset();
     }
 
     protected _onResize = (): void => {
@@ -67,7 +105,7 @@ export default abstract class ThreeBase {
 
     private _update = (dt: number): void => {
         this._cameraController.update(dt);
-        this._currentView.update(dt);
+        this._currentView?.update(dt);
         this._renderer.update(dt);
     };
 

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

@@ -2,7 +2,8 @@ import { DomKeyboardManager } from '@benjos/cookware';
 import { KeyboardConstant } from '@benjos/spices';
 import GUI from 'lil-gui';
 import { ThreePerf } from 'three-perf';
-import MainThree from '../engines/threes/MainThree';
+import { DebugGuiTitle } from '../constants/experiences/DebugGuiTitle';
+import MainThreeApp from '../engines/threes/app/MainThreeApp';
 
 class DebugManager {
     private static readonly _IS_ACTIVE_STRING: string = '#debug';
@@ -40,11 +41,21 @@ class DebugManager {
             anchorX: DebugManager._THREE_PERF_ANCHOR_X,
             anchorY: DebugManager._THREE_PERF_ANCHOR_Y,
             domElement: document.body,
-            renderer: MainThree.renderer,
+            renderer: MainThreeApp.renderer,
             showGraph: false,
         });
     };
 
+    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/managers/threes/ThreeRaycasterManager.ts

@@ -1,6 +1,6 @@
 import { DomPointerManager } from '@benjos/cookware';
 import { Object3D, Raycaster, Vector2, type Intersection, type Object3DEventMap } from 'three';
-import MainThree from '../../engines/threes/MainThree';
+import MainThreeApp from '../../engines/threes/app/MainThreeApp';
 
 class ThreeRaycasterManager {
     private readonly _raycaster = new Raycaster();
@@ -12,7 +12,7 @@ class ThreeRaycasterManager {
 
     public castFromCameraToPointer(objects: Object3D[], recursive = true): Intersection<Object3D<Object3DEventMap>>[] {
         this._pointerPosition.set(DomPointerManager.ndcX, DomPointerManager.ndcY);
-        this._raycaster.setFromCamera(this._pointerPosition, MainThree.cameraController.camera);
+        this._raycaster.setFromCamera(this._pointerPosition, MainThreeApp.cameraController.camera);
         const intersects = this._raycaster.intersectObjects(objects, recursive);
         return intersects;
     }

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

@@ -1,8 +1,8 @@
-import { MainThree } from '../engines/threes/MainThree';
+import { MainThreeApp } from '../engines/threes/app/MainThreeApp';
 
 declare global {
     interface Window {
-        mainThree: MainThree;
+        mainThreeApp: MainThreeApp;
     }
 }
 

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');
     }
 }