@benjos/create-boilerplate 1.5.6 → 1.5.9

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

@@ -4,7 +4,7 @@ import LoaderThreeCameraController from '../../../cameras/threes/LoaderThreeCame
 import { CameraId } from '../../../constants/experiences/CameraId';
 import LoaderManager from '../../../managers/LoaderManager';
 import ThreeCameraControllerManager from '../../../managers/threes/ThreeCameraControllerManager';
-import LoaderRenderer from '../../../renderers/threes/LoaderRenderer';
+import LoaderThreeWebGLRenderer from '../../../renderers/threes/LoaderThreeWebGLRenderer';
 import LoaderThreeView from '../../../views/threes/loaders/LoaderThreeView';
 import ThreeAppBase from './bases/ThreeAppBase';
 
@@ -27,7 +27,7 @@ class LoaderThreeApp extends ThreeAppBase {
     }
 
     protected override _generateRenderers(): void {
-        this._renderer = new LoaderRenderer(
+        this._renderer = new LoaderThreeWebGLRenderer(
             this._scene,
             ThreeCameraControllerManager.get(CameraId.THREE_LOADER).camera
         );

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

@@ -8,7 +8,7 @@ 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 MainThreeWebGLRenderer from '../../../renderers/threes/MainThreeWebGLRenderer';
 import World2ThreeView from '../../../views/threes/worlds/World2ThreeView';
 import WorldThreeView from '../../../views/threes/worlds/WorldThreeView';
 import ThreeAppBase from './bases/ThreeAppBase';
@@ -68,7 +68,7 @@ class MainThreeApp extends ThreeAppBase {
     }
 
     protected override _generateRenderers(): void {
-        this._renderer = new Renderer(this._scene, this._cameraController.camera, { antialias: true });
+        this._renderer = new MainThreeWebGLRenderer(this._scene, this._cameraController.camera, { antialias: true });
         this._domElementContainer.appendChild(this._renderer.domElement);
     }
 

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

@@ -1,16 +1,16 @@
 import { DomResizeManager, TickerManager } from '@benjos/cookware';
-import { Scene } from 'three';
-import ThreeCameraControllerBase from '../../../../cameras/threes/bases/ThreeCameraControllerBase';
-import { ViewId } from '../../../../constants/experiences/ViewId';
+import type { Scene } from 'three';
+import type ThreeCameraControllerBase from '../../../../cameras/threes/bases/ThreeCameraControllerBase';
+import type { ViewId } from '../../../../constants/experiences/ViewId';
 import LoaderManager from '../../../../managers/LoaderManager';
-import WebGLRendererBase from '../../../../renderers/threes/bases/WebGLRendererBase';
-import ThreeViewBase from '../../../../views/threes/bases/ThreeViewBase';
+import type ThreeWebGLRendererBase from '../../../../renderers/threes/bases/ThreeWebGLRendererBase';
+import type ThreeViewBase from '../../../../views/threes/bases/ThreeViewBase';
 
 export default abstract class ThreeAppBase {
     declare protected _domElementContainer: HTMLElement;
     declare protected _scene: Scene;
     declare protected _cameraController: ThreeCameraControllerBase;
-    declare protected _renderer: WebGLRendererBase;
+    declare protected _renderer: ThreeWebGLRendererBase;
     protected readonly _views: ThreeViewBase[];
     protected readonly _viewBuilder: Map<ViewId, new () => ThreeViewBase>;
     declare protected _currentView: ThreeViewBase;
@@ -117,7 +117,7 @@ export default abstract class ThreeAppBase {
     public get scene(): Scene {
         return this._scene;
     }
-    public get renderer(): WebGLRendererBase {
+    public get renderer(): ThreeWebGLRendererBase {
         return this._renderer;
     }
     public get cameraController(): ThreeCameraControllerBase {

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

@@ -1,8 +1,9 @@
 import { DomKeyboardManager } from '@benjos/cookware';
 import { KeyboardConstant } from '@benjos/spices';
 import GUI from 'lil-gui';
+import Stats from 'stats.js';
 import { ThreePerf } from 'three-perf';
-import { DebugGuiTitle } from '../constants/experiences/DebugGuiTitle';
+import type { DebugGuiTitle } from '../constants/experiences/DebugGuiTitle';
 import MainThreeApp from '../engines/threes/app/MainThreeApp';
 
 class DebugManager {
@@ -16,8 +17,10 @@ class DebugManager {
         KeyboardConstant.CODES.KEY_H,
     ];
 
+    private _isDebugVisible: boolean = true;
     declare private _gui: GUI;
     declare private _threePerf: ThreePerf;
+    declare private _stats: Stats;
 
     public init(): void {
         if (this.isActive) {
@@ -46,6 +49,12 @@ class DebugManager {
         });
     };
 
+    private _initStats = (): void => {
+        this._stats = new Stats();
+        this._stats.showPanel(0);
+        document.body.appendChild(this._stats.dom);
+    };
+
     private _addGuiFolder(title: DebugGuiTitle): GUI {
         return this._gui.addFolder(title);
     }
@@ -56,19 +65,24 @@ class DebugManager {
         return gui;
     }
 
-    public beginThreePerf(): void {
+    public beginPerf(): void {
         if (!this._threePerf) this._initThreePerf();
+        if (!this._stats) this._initStats();
+        this._stats.begin();
         this._threePerf.begin();
     }
 
-    public endThreePerf(): void {
+    public endPerf(): void {
+        this._stats.end();
         this._threePerf.end();
     }
 
     private readonly _onKeyDown = (_e: KeyboardEvent): void => {
         if (DomKeyboardManager.areAllKeysDown(DebugManager._TOGGLE_HIDDEN_KEYS)) {
-            this._gui.show(this._gui._hidden);
-            this._threePerf.visible = !this._threePerf.visible;
+            this._isDebugVisible = !this._isDebugVisible;
+            this._gui.show(this._isDebugVisible);
+            if (this._threePerf) this._threePerf.visible = this._isDebugVisible;
+            if (this._stats) this._stats.dom.style.display = this._isDebugVisible ? 'block' : 'none';
         }
     };
 

package/template-vanilla/src/experiences/managers/threes/ThreeAssetsManager.ts

@@ -1,16 +1,16 @@
 import { Action, AssetUtils } from '@benjos/cookware';
 import {
-    DataTexture,
     EquirectangularRefractionMapping,
     LinearSRGBColorSpace,
     RepeatWrapping,
-    Texture,
     TextureLoader,
     type ColorSpace,
+    type DataTexture,
     type Mapping,
+    type Texture,
     type Wrapping,
 } from 'three';
-import { DRACOLoader, Font, FontLoader, GLTFLoader, HDRLoader, type GLTF } from 'three/examples/jsm/Addons.js';
+import { DRACOLoader, FontLoader, GLTFLoader, HDRLoader, type Font, type GLTF } from 'three/examples/jsm/Addons.js';
 import type { AssetId } from '../../constants/experiences/AssetId';
 import { AssetType } from '../../types/assetTypes';
 

package/template-vanilla/src/experiences/managers/threes/ThreeRaycasterManager.ts

@@ -1,5 +1,5 @@
 import { DomPointerManager } from '@benjos/cookware';
-import { Object3D, Raycaster, Vector2, type Intersection, type Object3DEventMap } from 'three';
+import { Raycaster, Vector2, type Intersection, type Object3D, type Object3DEventMap } from 'three';
 import MainThreeApp from '../../engines/threes/app/MainThreeApp';
 
 class ThreeRaycasterManager {

package/template-vanilla/src/experiences/materials/threes/loaders/{LoaderMaterial.ts → LoaderThreeMaterial.ts}

@@ -3,7 +3,7 @@ import { Color, ShaderMaterial, Uniform } from 'three';
 import LoaderFragmentShader from '../../../shaders/threes/loaders/LoaderFragmentShader.glsl';
 import LoaderVertexShader from '../../../shaders/threes/loaders/LoaderVertexShader.glsl';
 
-export default class LoaderMaterial extends ShaderMaterial {
+export default class LoaderThreeMaterial extends ShaderMaterial {
     private static readonly _DEFAULT_UNIFORMS_COLOR: number = 0x3f79f3;
     private static readonly _GSAP_DURATION_FADE_IN: number = 0.5;
     private static readonly _GSAP_EASE_FADE_IN: string = 'power2.out';
@@ -17,7 +17,7 @@ export default class LoaderMaterial extends ShaderMaterial {
             transparent: true,
             uniforms: {
                 uAlpha: new Uniform(1),
-                uColor: new Uniform(new Color(LoaderMaterial._DEFAULT_UNIFORMS_COLOR)),
+                uColor: new Uniform(new Color(LoaderThreeMaterial._DEFAULT_UNIFORMS_COLOR)),
             },
             vertexShader: LoaderVertexShader,
             fragmentShader: LoaderFragmentShader,
@@ -29,8 +29,8 @@ export default class LoaderMaterial extends ShaderMaterial {
         this.uniforms.uAlpha.value = this._isFirstLoad ? 1 : 0;
         await gsap.to(this.uniforms.uAlpha, {
             value: 1,
-            duration: this._isFirstLoad ? 0 : LoaderMaterial._GSAP_DURATION_FADE_IN,
-            ease: LoaderMaterial._GSAP_EASE_FADE_IN,
+            duration: this._isFirstLoad ? 0 : LoaderThreeMaterial._GSAP_DURATION_FADE_IN,
+            ease: LoaderThreeMaterial._GSAP_EASE_FADE_IN,
         });
         this._isFirstLoad = false;
     }
@@ -40,8 +40,8 @@ export default class LoaderMaterial extends ShaderMaterial {
         this.uniforms.uAlpha.value = 1;
         await gsap.to(this.uniforms.uAlpha, {
             value: 0,
-            duration: LoaderMaterial._GSAP_DURATION_FADE_OUT,
-            ease: LoaderMaterial._GSAP_EASE_FADE_OUT,
+            duration: LoaderThreeMaterial._GSAP_DURATION_FADE_OUT,
+            ease: LoaderThreeMaterial._GSAP_EASE_FADE_OUT,
         });
     }
 }

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

@@ -0,0 +1,18 @@
+import { NoToneMapping, SRGBColorSpace, type Camera, type Scene, type WebGLRendererParameters } from 'three';
+import ThreeWebGLRendererBase from './bases/ThreeWebGLRendererBase';
+
+export default class LoaderThreeWebGLRenderer extends ThreeWebGLRendererBase {
+    private static readonly _DEFAULT_TONE_MAPPING = NoToneMapping;
+    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;
+
+    constructor(scene: Scene, camera: Camera, parameters: WebGLRendererParameters = {}) {
+        super(scene, camera, parameters);
+        this.toneMapping = LoaderThreeWebGLRenderer._DEFAULT_TONE_MAPPING;
+        this.toneMappingExposure = LoaderThreeWebGLRenderer._DEFAULT_TONE_MAPPING_EXPOSURE;
+        this.outputColorSpace = LoaderThreeWebGLRenderer._DEFAULT_OUTPUT_COLOR_SPACE;
+        this.setClearColor(LoaderThreeWebGLRenderer._DEFAULT_CLEAR_COLOR, LoaderThreeWebGLRenderer._DEFAULT_CLEAR_ALPHA);
+    }
+}

package/template-vanilla/src/experiences/renderers/threes/{Renderer.ts → MainThreeWebGLRenderer.ts}

@@ -1,41 +1,42 @@
 import {
     ACESFilmicToneMapping,
     AgXToneMapping,
-    Camera,
     CineonToneMapping,
     CustomToneMapping,
     LinearSRGBColorSpace,
     LinearToneMapping,
     NeutralToneMapping,
     NoToneMapping,
-    PCFSoftShadowMap,
+    PCFShadowMap,
     ReinhardToneMapping,
-    Scene,
     SRGBColorSpace,
+    type Camera,
     type ColorSpace,
+    type Scene,
     type ToneMapping,
-    type WebGLRendererParameters,
+    type WebGLRendererParameters
 } from 'three';
+import MainThreeEffectComposer from '../../composers/threes/MainThreeEffectComposer';
 import { DebugGuiTitle } from '../../constants/experiences/DebugGuiTitle';
 import DebugManager from '../../managers/DebugManager';
-import WebGLRendererBase from './bases/WebGLRendererBase';
+import ThreeWebGLRendererBase from './bases/ThreeWebGLRendererBase';
 
-export default class Renderer extends WebGLRendererBase {
+export default class MainThreeWebGLRenderer extends ThreeWebGLRendererBase {
     private static readonly _DEFAULT_TONE_MAPPING = CineonToneMapping;
     private static readonly _DEFAULT_OUTPUT_COLOR_SPACE = SRGBColorSpace;
-    private static readonly _DEFAULT_SHADOW_MAP_TYPE = PCFSoftShadowMap;
+    private static readonly _DEFAULT_SHADOW_MAP_TYPE = PCFShadowMap;
     private static readonly _DEFAULT_TONE_MAPPING_EXPOSURE = 1;
     private static readonly _DEFAULT_CLEAR_COLOR = 0xfafafa;
     private static readonly _DEFAULT_CLEAR_ALPHA = 0;
 
     constructor(scene: Scene, camera: Camera, parameters: WebGLRendererParameters = {}) {
         super(scene, camera, parameters);
-        this.toneMapping = Renderer._DEFAULT_TONE_MAPPING;
-        this.toneMappingExposure = Renderer._DEFAULT_TONE_MAPPING_EXPOSURE;
-        this.outputColorSpace = Renderer._DEFAULT_OUTPUT_COLOR_SPACE;
+        this.toneMapping = MainThreeWebGLRenderer._DEFAULT_TONE_MAPPING;
+        this.toneMappingExposure = MainThreeWebGLRenderer._DEFAULT_TONE_MAPPING_EXPOSURE;
+        this.outputColorSpace = MainThreeWebGLRenderer._DEFAULT_OUTPUT_COLOR_SPACE;
         this.shadowMap.enabled = true;
-        this.shadowMap.type = Renderer._DEFAULT_SHADOW_MAP_TYPE;
-        this.setClearColor(Renderer._DEFAULT_CLEAR_COLOR, Renderer._DEFAULT_CLEAR_ALPHA);
+        this.shadowMap.type = MainThreeWebGLRenderer._DEFAULT_SHADOW_MAP_TYPE;
+        this.setClearColor(MainThreeWebGLRenderer._DEFAULT_CLEAR_COLOR, MainThreeWebGLRenderer._DEFAULT_CLEAR_ALPHA);
 
         if (DebugManager.isActive) {
             const rendererFolder = DebugManager.getGuiFolder(DebugGuiTitle.THREE_RENDERER)
@@ -59,13 +60,22 @@ export default class Renderer extends WebGLRendererBase {
                 .onChange((value: ColorSpace) => {
                     this.outputColorSpace = value;
                 });
+            const postProcProxy = { active: this._isPostProcessingActive };
+            rendererFolder
+                .add(postProcProxy, 'active')
+                .name('post-processing')
+                .onChange((value: boolean) => this.setIsPostProcessingActive(value));
         }
     }
 
+    protected override _generateComposers(): void {
+        this._composer = new MainThreeEffectComposer(this, this._scene, this._camera);
+    }
+
     public override update(dt: number): void {
         const isDebug = DebugManager.isActive;
-        if (isDebug) DebugManager.beginThreePerf();
+        if (isDebug) DebugManager.beginPerf();
         super.update(dt);
-        if (isDebug) DebugManager.endThreePerf();
+        if (isDebug) DebugManager.endPerf();
     }
 }

package/template-vanilla/src/experiences/renderers/threes/bases/ThreeWebGLRendererBase.ts

@@ -0,0 +1,60 @@
+import { DomResizeManager } from '@benjos/cookware';
+import { WebGLRenderer, type Camera, type Scene, type WebGLRendererParameters } from 'three';
+import ThreeEffectComposerBase from '../../../composers/threes/bases/ThreeEffectComposerBase';
+
+export default abstract class ThreeWebGLRendererBase extends WebGLRenderer {
+    protected _composer?: ThreeEffectComposerBase;
+    protected _isPostProcessingActive: boolean = false;
+    protected readonly _scene: Scene;
+    protected _camera: Camera;
+
+    constructor(scene: Scene, camera: Camera, parameters: WebGLRendererParameters = {}) {
+        super(parameters);
+
+        this._scene = scene;
+        this._camera = camera;
+
+        this._generateComposers();
+        this.resize();
+    }
+
+    protected _generateComposers(): void {
+        //
+    }
+
+    public setCamera(camera: Camera): void {
+        this._camera = camera;
+        if (this._composer) {
+            this._composer.setCamera(camera);
+        }
+    }
+
+    public setIsPostProcessingActive(enabled: boolean): void {
+        this._isPostProcessingActive = enabled && !!this._composer;
+    }
+
+    public resize(): void {
+        this.setSize(DomResizeManager.width, DomResizeManager.height);
+        this.setPixelRatio(DomResizeManager.pixelRatio);
+        if (this._composer) this._composer.resize();
+    }
+
+    public update(dt: number): void {
+        if (this._composer && this._isPostProcessingActive) {
+            this._composer.update(dt);
+        } else {
+            this.render(this._scene, this._camera);
+        }
+    }
+
+    //#region Getters
+    //
+    public get composer(): ThreeEffectComposerBase {
+        return this._composer!;
+    }
+    public get isPostProcessingActive(): boolean {
+        return this._isPostProcessingActive;
+    }
+    //
+    //#endregion
+}

package/template-vanilla/src/experiences/shaders/threes/composers/templates/TemplatePassFragmentShader.glsl

@@ -0,0 +1,10 @@
+uniform sampler2D tDiffuse;
+uniform float uTime;
+
+varying vec2 vUv;
+
+void main() {
+    vec2 newUv = vec2(vUv.x, vUv.y + sin(vUv.x * 10.0 + uTime) * 0.1);
+    vec4 color = texture2D(tDiffuse, newUv);
+    gl_FragColor = color;
+}

package/template-vanilla/src/experiences/shaders/threes/composers/templates/TemplatePassVertexShader.glsl

@@ -0,0 +1,6 @@
+varying vec2 vUv;
+
+void main() {
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+    vUv = uv;
+}

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

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

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

@@ -0,0 +1,2 @@
+declare module '*.scss';
+declare module '*.css';

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

@@ -1,6 +1,6 @@
 import { Object3D } from 'three';
-import { ViewId } from '../../../constants/experiences/ViewId';
-import ThreeActorBase from './components/ThreeActorBase';
+import type { ViewId } from '../../../constants/experiences/ViewId';
+import type ThreeActorBase from './components/ThreeActorBase';
 
 export default abstract class ThreeViewBase extends Object3D {
     private readonly _id: ViewId;

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

@@ -1,4 +1,4 @@
-import { AnimationAction, AnimationMixer } from 'three';
+import { AnimationMixer, type AnimationAction } from 'three';
 import type { AnimationId } from '../../../../constants/experiences/AnimationId';
 import type { AssetId } from '../../../../constants/experiences/AssetId';
 import ThreeAssetsManager from '../../../../managers/threes/ThreeAssetsManager';

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

@@ -1,4 +1,4 @@
-import { Mesh, Object3D, type Group } from 'three';
+import { Mesh, type Group, type Object3D } from 'three';
 import { SkeletonUtils } from 'three/examples/jsm/Addons.js';
 import type { AssetId } from '../../../../constants/experiences/AssetId';
 import type { Object3DId } from '../../../../constants/experiences/Object3dId';

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

@@ -1,5 +1,5 @@
 import { Mesh, PlaneGeometry } from 'three';
-import LoaderMaterial from '../../../../materials/threes/loaders/LoaderMaterial';
+import LoaderThreeMaterial from '../../../../materials/threes/loaders/LoaderThreeMaterial';
 import ThreeActorBase from '../../bases/components/ThreeActorBase';
 
 export default class TemplateLoaderThreeActor extends ThreeActorBase {
@@ -9,7 +9,7 @@ export default class TemplateLoaderThreeActor extends ThreeActorBase {
     private static readonly _DEFAULT_SEGMENTS_HEIGHT: number = 1;
 
     declare private _geometry: PlaneGeometry;
-    declare private _material: LoaderMaterial;
+    declare private _material: LoaderThreeMaterial;
     declare private _mesh: Mesh;
 
     constructor() {
@@ -32,7 +32,7 @@ export default class TemplateLoaderThreeActor extends ThreeActorBase {
     }
 
     private _generateMaterial(): void {
-        this._material = new LoaderMaterial();
+        this._material = new LoaderThreeMaterial();
     }
 
     private _generateMesh(): void {
@@ -41,7 +41,7 @@ export default class TemplateLoaderThreeActor extends ThreeActorBase {
 
     //#region Getters
     //
-    public get material(): LoaderMaterial {
+    public get material(): LoaderThreeMaterial {
         return this._material;
     }
     //

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

@@ -1,4 +1,4 @@
-import { DataTexture, DirectionalLight, Vector3 } from 'three';
+import { DirectionalLight, Vector3, type DataTexture } from 'three';
 import { AssetId } from '../../../../constants/experiences/AssetId';
 import { DebugGuiTitle } from '../../../../constants/experiences/DebugGuiTitle';
 import MainThreeApp from '../../../../engines/threes/app/MainThreeApp';