@benjos/create-boilerplate 1.5.2 → 1.5.9

package/template-vue/package.json

@@ -1,7 +1,7 @@
 {
     "name": "template-vue",
     "private": true,
-    "version": "1.4.7",
+    "version": "1.5.9",
     "type": "module",
     "scripts": {
         "dev": "vite",
@@ -13,31 +13,34 @@
         "format:check": "prettier --check ."
     },
     "devDependencies": {
-        "@eslint/js": "^9.39.2",
+        "@eslint/js": "^10.0.1",
         "@types/howler": "^2.2.12",
-        "@types/three": "^0.182.0",
+        "@types/three": "^0.183.1",
         "@vitejs/plugin-vue": "^6.0.5",
         "@vue/tsconfig": "^0.9.0",
-        "eslint": "^9.39.2",
+        "eslint": "^10.1.0",
         "eslint-config-prettier": "^10.1.8",
-        "eslint-plugin-prettier": "^5.5.4",
-        "prettier": "^3.7.4",
-        "sass-embedded": "^1.97.1",
+        "eslint-plugin-prettier": "^5.5.5",
+        "prettier": "^3.8.1",
+        "sass-embedded": "^1.98.0",
         "three-perf": "^1.0.11",
         "typescript": "~5.9.3",
-        "typescript-eslint": "^8.50.1",
-        "vite": "^7.3.0",
-        "vite-plugin-glsl": "^1.5.5",
-        "vue-tsc": "^3.2.5"
+        "typescript-eslint": "^8.57.1",
+        "vite": "^8.0.1",
+        "vite-plugin-glsl": "^1.5.6",
+        "vue-tsc": "^3.2.6"
     },
     "dependencies": {
         "@benjos/cookware": "^1.0.4",
         "@benjos/spices": "^1.0.1",
         "@dimforge/rapier3d": "^0.19.3",
+        "@types/stats.js": "^0.17.4",
         "gsap": "^3.14.2",
         "howler": "^2.2.4",
         "lil-gui": "^0.21.0",
-        "three": "^0.182.0",
+        "stats.js": "^0.17.0",
+        "three": "^0.183.2",
+        "three-custom-shader-material": "^6.4.0",
         "vue": "^3.5.30"
     }
 }

package/template-vue/src/experiences/Experience.ts

@@ -20,7 +20,7 @@ class Experience {
     }
 
     private readonly _onReady = async (): Promise<void> => {
-        await MainThreeApp.setCurrentView(ViewId.THREE_VIEW_WORLD_1);
+        await MainThreeApp.setCurrentView(ViewId.THREE_WORLD_1);
     };
 }
 

package/template-vue/src/experiences/cameras/threes/DebugThreeCameraController.ts

@@ -5,7 +5,7 @@ import { OrbitControls } from 'three/examples/jsm/Addons.js';
 import { CameraId } from '../../constants/experiences/CameraId';
 import MainThreeApp from '../../engines/threes/app/MainThreeApp';
 import ThreeRaycasterManager from '../../managers/threes/ThreeRaycasterManager';
-import { ThreeCameraOptions, ThreeCameraType } from '../../types/cameraTypes';
+import { ThreeCameraType, type ThreeCameraOptions } from '../../types/cameraTypes';
 import ThreeCameraControllerBase from './bases/ThreeCameraControllerBase';
 
 export default class DebugThreeCameraController extends ThreeCameraControllerBase<OrbitControls> {

package/template-vue/src/experiences/cameras/threes/LoaderThreeCameraController.ts

@@ -1,7 +1,7 @@
 import { Vector3 } from 'three';
 import { CameraId } from '../../constants/experiences/CameraId';
 import LoaderThreeApp from '../../engines/threes/app/LoaderThreeApp';
-import { ThreeCameraOptions, ThreeCameraType } from '../../types/cameraTypes';
+import { ThreeCameraType, type ThreeCameraOptions } from '../../types/cameraTypes';
 import ThreeCameraControllerBase from './bases/ThreeCameraControllerBase';
 
 export default class LoaderThreeCameraController extends ThreeCameraControllerBase {

package/template-vue/src/experiences/cameras/threes/MainThreeCameraController.ts

@@ -1,6 +1,6 @@
 import { Vector3 } from 'three';
 import { CameraId } from '../../constants/experiences/CameraId';
-import { ThreeCameraOptions, ThreeCameraType } from '../../types/cameraTypes';
+import { ThreeCameraType, type ThreeCameraOptions } from '../../types/cameraTypes';
 import ThreeCameraControllerBase from './bases/ThreeCameraControllerBase';
 
 export default class MainThreeCameraController extends ThreeCameraControllerBase {

package/template-vue/src/experiences/cameras/threes/bases/ThreeCameraControllerBase.ts

@@ -1,8 +1,8 @@
 import { DomResizeManager } from '@benjos/cookware';
-import { Object3D, OrthographicCamera, PerspectiveCamera, Scene } from 'three';
+import { Object3D, OrthographicCamera, PerspectiveCamera, type Scene } from 'three';
 import type { CameraId } from '../../../constants/experiences/CameraId';
 import MainThreeApp from '../../../engines/threes/app/MainThreeApp';
-import { ThreeCameraOptions, ThreeCameraType, ThreeControls } from '../../../types/cameraTypes';
+import { ThreeCameraType, type ThreeCameraOptions, type ThreeControls } from '../../../types/cameraTypes';
 
 export default abstract class ThreeCameraControllerBase<T extends ThreeControls = ThreeControls> extends Object3D {
     private static readonly _DEFAULT_CAMERA_OPTIONS: ThreeCameraOptions = {

package/template-vue/src/experiences/composers/threes/MainThreeEffectComposer.ts

@@ -0,0 +1,20 @@
+import type { Camera, Scene, WebGLRenderer } from "three";
+import { GlitchPass } from "three/examples/jsm/Addons.js";
+import ThreeEffectComposerBase from "./bases/ThreeEffectComposerBase";
+import TemplateThreePass from "./passes/TemplateThreePass";
+
+export default class MainThreeEffectComposer extends ThreeEffectComposerBase {
+    constructor(renderer: WebGLRenderer, scene: Scene, camera: Camera) {
+        super(renderer, scene, camera);
+    }
+
+    protected override _addPasses(): void {
+        super._addPasses();
+        this._addPass(new TemplateThreePass());
+        this._addPass(new GlitchPass());
+    }
+
+    public override update(dt: number): void {
+        super.update(dt);
+    }
+}

package/template-vue/src/experiences/composers/threes/bases/ThreeEffectComposerBase.ts

@@ -0,0 +1,54 @@
+import { DomResizeManager } from "@benjos/cookware";
+import { HalfFloatType, WebGLRenderTarget, type Camera, type Scene, type TextureDataType, type WebGLRenderer } from "three";
+import { EffectComposer, OutputPass, RenderPass, type Pass } from "three/examples/jsm/Addons.js";
+import ThreePassBase from "./passes/ThreePassBase";
+
+export default abstract class ThreeEffectComposerBase extends EffectComposer {
+    protected static readonly _DEFAULT_RENDER_TARGET_SAMPLES = 4;
+    protected static readonly _DEFAULT_RENDER_TARGET_TYPE = HalfFloatType;
+
+    protected readonly _passes: Pass[];
+    private declare _renderPass: RenderPass;
+
+    constructor(renderer: WebGLRenderer, scene: Scene, camera: Camera, options: { samples?: number, type?: TextureDataType } = {}) {
+        const samples = options.samples ?? ThreeEffectComposerBase._DEFAULT_RENDER_TARGET_SAMPLES;
+        const type = options.type ?? ThreeEffectComposerBase._DEFAULT_RENDER_TARGET_TYPE;
+        super(renderer, new WebGLRenderTarget(DomResizeManager.width, DomResizeManager.height, { samples, type }));
+
+        this._createRenderPass(scene, camera);
+        this._passes = [];
+        this._addPasses();
+        this._addPass(new OutputPass());
+        this.resize();
+    }
+
+    public setCamera(camera: Camera): void {
+        this._renderPass.camera = camera;
+    }
+
+    public resize(): void {
+        this.setSize(DomResizeManager.width, DomResizeManager.height);
+        this.setPixelRatio(DomResizeManager.pixelRatio);
+    }
+
+    private _createRenderPass(scene: Scene, camera: Camera): void {
+        this._renderPass = new RenderPass(scene, camera);
+        this.addPass(this._renderPass);
+    }
+
+    protected _addPasses(): void {
+        //
+    }
+
+    protected _addPass(pass: Pass): void {
+        this.addPass(pass);
+        this._passes.push(pass);
+    }
+
+    public update(dt: number): void {
+        for (const pass of this._passes) {
+            if (pass instanceof ThreePassBase) pass.update(dt);
+        }
+        this.render(dt);
+    }
+}

package/template-vue/src/experiences/composers/threes/bases/passes/ThreePassBase.ts

@@ -0,0 +1,11 @@
+import { ShaderPass } from "three/examples/jsm/Addons.js";
+
+export default abstract class ThreePassBase extends ShaderPass {
+    constructor(shader: any) {
+        super(shader);
+    }
+
+    public update(_dt: number): void {
+
+    }
+}

package/template-vue/src/experiences/composers/threes/passes/TemplateThreePass.ts

@@ -0,0 +1,22 @@
+import TemplatePassFragmentShader from '../../../shaders/threes/composers/templates/TemplatePassFragmentShader.glsl';
+import TemplatePassVertexShader from '../../../shaders/threes/composers/templates/TemplatePassVertexShader.glsl';
+import ThreePassBase from "../bases/passes/ThreePassBase";
+
+export default class TemplateThreePass extends ThreePassBase {
+    constructor() {
+        super({
+            uniforms: {
+                tDiffuse: { value: null },
+                uTime: { value: null },
+            },
+            vertexShader: TemplatePassVertexShader,
+            fragmentShader: TemplatePassFragmentShader,
+        });
+
+        this.uniforms.uTime.value = 0;
+    }
+
+    public update(dt: number): void {
+        this.uniforms.uTime.value += dt;
+    }
+}

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

@@ -1,15 +1,10 @@
-const HTMLViewId = {
-    HTML_LOADER: 'HTML_LOADER',
-} as const;
-
 const ThreeViewId = {
     THREE_LOADER: 'THREE_LOADER',
-    THREE_VIEW_WORLD_1: 'THREE_VIEW_WORLD_1',
-    THREE_VIEW_WORLD_2: 'THREE_VIEW_WORLD_2',
+    THREE_WORLD_1: 'THREE_WORLD_1',
+    THREE_WORLD_2: 'THREE_WORLD_2',
 } as const;
 
 export const ViewId = {
-    ...HTMLViewId,
     ...ThreeViewId,
 } as const;
 

package/template-vue/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-vue/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';
@@ -25,6 +25,7 @@ class MainThreeApp extends ThreeAppBase {
     ];
 
     declare private _debugWireframeMaterial: MeshStandardMaterial;
+    declare private _debugPreviousCameraId: CameraId;
 
     constructor() {
         super();
@@ -59,6 +60,7 @@ class MainThreeApp extends ThreeAppBase {
         this._cameraController = ThreeCameraControllerManager.get(CameraId.THREE_MAIN);
 
         if (DebugManager.isActive) {
+            this._debugPreviousCameraId = this._cameraController.cameraId;
             ThreeCameraControllerManager.add(new DebugThreeCameraController());
         }
 
@@ -66,19 +68,19 @@ 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);
     }
 
     protected override _declareViews(): void {
-        this._viewBuilder.set(ViewId.THREE_VIEW_WORLD_1, WorldThreeView);
-        this._viewBuilder.set(ViewId.THREE_VIEW_WORLD_2, World2ThreeView);
+        this._viewBuilder.set(ViewId.THREE_WORLD_1, WorldThreeView);
+        this._viewBuilder.set(ViewId.THREE_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');
+            viewsDebug.add({ createWorld1: () => this.setCurrentView(ViewId.THREE_WORLD_1) }, 'createWorld1');
+            viewsDebug.add({ createWorld2: () => this.setCurrentView(ViewId.THREE_WORLD_2) }, 'createWorld2');
         }
     }
 
@@ -91,8 +93,9 @@ class MainThreeApp extends ThreeAppBase {
     private readonly _onKeyDown = (_e: KeyboardEvent): void => {
         if (DebugManager.isActive) {
             if (DomKeyboardManager.areAllKeysDown(MainThreeApp._TOGGLE_SWITCH_TO_DEBUG_CAMERA_KEYS)) {
+                if (this._cameraController.cameraId !== CameraId.THREE_DEBUG) this._debugPreviousCameraId = this._cameraController.cameraId;
                 ThreeCameraControllerManager.setActiveCamera(
-                    this._cameraController.cameraId === CameraId.THREE_MAIN ? CameraId.THREE_DEBUG : CameraId.THREE_MAIN
+                    this._cameraController.cameraId === CameraId.THREE_DEBUG ? this._debugPreviousCameraId : CameraId.THREE_DEBUG
                 );
             } else if (DomKeyboardManager.areAllKeysDown(MainThreeApp._TOGGLE_WIREFRAME_KEYS)) {
                 if (this._scene.overrideMaterial === null) {

package/template-vue/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-vue/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-vue/src/experiences/managers/LoaderManager.ts

@@ -11,7 +11,7 @@ class LoaderManager {
     private _elapsed = 0;
     private _hasAssetsToLoad = false;
     private _assetsFinished = false;
-    private _transitionResolve: (() => void) | null = null;
+    private _transitionResolves: (() => void)[] = [];
     private _showTransition: (() => Promise<void>) | null = null;
     private _hideTransition: (() => Promise<void>) | null = null;
 
@@ -85,7 +85,8 @@ class LoaderManager {
             this._progress = 1;
             this.onProgress.execute();
             TickerManager.remove(this._onTransitionTick);
-            if (this._transitionResolve) this._transitionResolve();
+            this._transitionResolves.forEach((resolve) => resolve());
+            this._transitionResolves.length = 0;
         }
     };
 
@@ -110,11 +111,9 @@ class LoaderManager {
             }
 
             await new Promise<void>((resolve) => {
-                this._transitionResolve = resolve;
+                this._transitionResolves.push(resolve);
                 TickerManager.add(this._onTransitionTick);
             });
-
-            this._transitionResolve = null;
         }
 
         if (onReady) await onReady();

package/template-vue/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-vue/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-vue/src/experiences/materials/threes/loaders/{LoaderMaterial.ts → LoaderThreeMaterial.ts}

@@ -1,22 +1,23 @@
 import gsap from 'gsap';
-import { Color, ShaderMaterial } from 'three';
+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 {
-    private static readonly _DEFAULT_UNIFORMS_ALPHA: number = 1;
+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';
     private static readonly _GSAP_DURATION_FADE_OUT: number = 1.5;
     private static readonly _GSAP_EASE_FADE_OUT: string = 'power2.in';
 
+    private _isFirstLoad: boolean = true;
+
     constructor() {
         super({
             transparent: true,
             uniforms: {
-                uAlpha: { value: LoaderMaterial._DEFAULT_UNIFORMS_ALPHA },
-                uColor: { value: new Color(LoaderMaterial._DEFAULT_UNIFORMS_COLOR) },
+                uAlpha: new Uniform(1),
+                uColor: new Uniform(new Color(LoaderThreeMaterial._DEFAULT_UNIFORMS_COLOR)),
             },
             vertexShader: LoaderVertexShader,
             fragmentShader: LoaderFragmentShader,
@@ -25,11 +26,13 @@ export default class LoaderMaterial extends ShaderMaterial {
 
     public async show(): Promise<void> {
         gsap.killTweensOf(this.uniforms.uAlpha);
+        this.uniforms.uAlpha.value = this._isFirstLoad ? 1 : 0;
         await gsap.to(this.uniforms.uAlpha, {
             value: 1,
-            duration: 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;
     }
 
     public async hide(): Promise<void> {
@@ -37,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-vue/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 → template-vue/src/experiences/renderers/threes/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();
     }
 }