@benjos/create-boilerplate 1.5.2 → 1.5.9

package/template-vue/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-vue/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-vue/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-vue/src/experiences/types/styles.d.ts

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

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

@@ -1,6 +1,6 @@
 import { Object3D } from 'three';
-import { ViewId } from '../../../constants/experiences/ViewId';
-import ThreeActorBase from '../worlds/components/actors/bases/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/worlds/components/actors/bases → template-vue/src/experiences/views/threes/bases/components}/ThreeAnimatedModelBase.ts

@@ -1,7 +1,7 @@
-import { AnimationAction, AnimationMixer } from 'three';
-import type { AnimationId } from '../../../../../../constants/experiences/AnimationId';
-import type { AssetId } from '../../../../../../constants/experiences/AssetId';
-import ThreeAssetsManager from '../../../../../../managers/threes/ThreeAssetsManager';
+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';
 import ThreeModelBase, { type ModelBaseParams } from './ThreeModelBase';
 
 export default abstract class ThreeAnimatedModelBase extends ThreeModelBase {

package/{template-vanilla/src/experiences/views/threes/worlds/components/actors/bases → template-vue/src/experiences/views/threes/bases/components}/ThreeModelBase.ts

@@ -1,8 +1,8 @@
-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';
-import ThreeAssetsManager from '../../../../../../managers/threes/ThreeAssetsManager';
+import type { AssetId } from '../../../../constants/experiences/AssetId';
+import type { Object3DId } from '../../../../constants/experiences/Object3dId';
+import ThreeAssetsManager from '../../../../managers/threes/ThreeAssetsManager';
 import ThreeActorBase from './ThreeActorBase';
 
 export interface ModelBaseParams {

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

@@ -1,6 +1,6 @@
 import { Mesh, PlaneGeometry } from 'three';
-import LoaderMaterial from '../../../../materials/threes/loaders/LoaderMaterial';
-import ThreeActorBase from '../../worlds/components/actors/bases/ThreeActorBase';
+import LoaderThreeMaterial from '../../../../materials/threes/loaders/LoaderThreeMaterial';
+import ThreeActorBase from '../../bases/components/ThreeActorBase';
 
 export default class TemplateLoaderThreeActor extends ThreeActorBase {
     private static readonly _DEFAULT_SIZE_WIDTH: number = 2;
@@ -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-vue/src/experiences/views/threes/worlds/World2ThreeView.ts

@@ -4,13 +4,13 @@ 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';
+import TemplateFont from './components/TemplateFont';
+import TemplateMesh2 from './components/TemplateMesh2';
+import TemplateModel from './components/TemplateModel';
 
 export default class World2ThreeView extends ThreeViewBase {
     constructor() {
-        super(ViewId.THREE_VIEW_WORLD_2);
+        super(ViewId.THREE_WORLD_2);
     }
 
     protected override _generateActors(): void {
@@ -18,7 +18,7 @@ export default class World2ThreeView extends ThreeViewBase {
 
         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');
+            viewsDebug.add({ switchToWorld2ThreeView: () => MainThreeApp.setCurrentView(ViewId.THREE_WORLD_2) }, 'switchToWorld2ThreeView').name('SWITCH WORLD_2_VIEW');
         }
 
         this._actors.push(new Environment());

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

@@ -4,13 +4,13 @@ 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 TemplateMesh from './components/actors/TemplateMesh';
-import TemplateModel from './components/actors/TemplateModel';
+import TemplateFont from './components/TemplateFont';
+import TemplateMesh from './components/TemplateMesh';
+import TemplateModel from './components/TemplateModel';
 
 export default class WorldThreeView extends ThreeViewBase {
     constructor() {
-        super(ViewId.THREE_VIEW_WORLD_1);
+        super(ViewId.THREE_WORLD_1);
     }
 
     protected override _generateActors(): void {
@@ -18,7 +18,7 @@ export default class WorldThreeView extends ThreeViewBase {
 
         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');
+            viewsDebug.add({ switchToWorldThreeView: () => MainThreeApp.setCurrentView(ViewId.THREE_WORLD_1) }, 'switchToWorldThreeView').name('SWITCH WORLD_1_VIEW');
         }
 
         this._actors.push(new Environment());

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

@@ -1,10 +1,10 @@
-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';
 import DebugManager from '../../../../managers/DebugManager';
 import ThreeAssetsManager from '../../../../managers/threes/ThreeAssetsManager';
-import ThreeActorBase from './actors/bases/ThreeActorBase';
+import ThreeActorBase from '../../bases/components/ThreeActorBase';
 
 interface EnvironmentMap {
     intensity?: number;

package/template-vue/src/experiences/views/threes/worlds/components/{actors/TemplateFont.ts → TemplateFont.ts}

@@ -1,8 +1,8 @@
 import { Mesh, MeshStandardMaterial, type MeshStandardMaterialParameters } from 'three';
 import { TextGeometry, type TextGeometryParameters } from 'three/examples/jsm/Addons.js';
-import { AssetId } from '../../../../../constants/experiences/AssetId';
-import ThreeAssetsManager from '../../../../../managers/threes/ThreeAssetsManager';
-import ThreeActorBase from './bases/ThreeActorBase';
+import { AssetId } from '../../../../constants/experiences/AssetId';
+import ThreeAssetsManager from '../../../../managers/threes/ThreeAssetsManager';
+import ThreeActorBase from '../../bases/components/ThreeActorBase';
 
 export default class TemplateFont extends ThreeActorBase {
     private static readonly _DEFAULT_TEXT: string = 'Hello boilerplate!';

package/{template-vanilla/src/experiences/views/threes/worlds/components/actors → template-vue/src/experiences/views/threes/worlds/components}/TemplateMesh.ts

@@ -1,7 +1,7 @@
 import { Mesh, MeshStandardMaterial, RepeatWrapping, SphereGeometry, type MeshStandardMaterialParameters } from 'three';
-import { AssetId } from '../../../../../constants/experiences/AssetId';
-import ThreeAssetsManager from '../../../../../managers/threes/ThreeAssetsManager';
-import ThreeActorBase from './bases/ThreeActorBase';
+import { AssetId } from '../../../../constants/experiences/AssetId';
+import ThreeAssetsManager from '../../../../managers/threes/ThreeAssetsManager';
+import ThreeActorBase from '../../bases/components/ThreeActorBase';
 
 export default class TemplateMesh extends ThreeActorBase {
     private static readonly _DEFAULT_GEOMETRY_RADIUS = 1;

package/template-vue/src/experiences/views/threes/worlds/components/{actors/TemplateMesh2.ts → TemplateMesh2.ts}

@@ -1,7 +1,7 @@
 import { BoxGeometry, Mesh, MeshStandardMaterial, RepeatWrapping, type MeshStandardMaterialParameters } from 'three';
-import { AssetId } from '../../../../../constants/experiences/AssetId';
-import ThreeAssetsManager from '../../../../../managers/threes/ThreeAssetsManager';
-import ThreeActorBase from './bases/ThreeActorBase';
+import { AssetId } from '../../../../constants/experiences/AssetId';
+import ThreeAssetsManager from '../../../../managers/threes/ThreeAssetsManager';
+import ThreeActorBase from '../../bases/components/ThreeActorBase';
 
 export default class TemplateMesh2 extends ThreeActorBase {
     private static readonly _DEFAULT_GEOMETRY_WIDTH = 2;

package/{template-vanilla/src/experiences/views/threes/worlds/components/actors → template-vue/src/experiences/views/threes/worlds/components}/TemplateModel.ts

@@ -1,8 +1,8 @@
 import { Vector3 } from 'three';
-import { AssetId } from '../../../../../constants/experiences/AssetId';
-import { DebugGuiTitle } from '../../../../../constants/experiences/DebugGuiTitle';
-import DebugManager from '../../../../../managers/DebugManager';
-import ThreeModelBase from './bases/ThreeModelBase';
+import { AssetId } from '../../../../constants/experiences/AssetId';
+import { DebugGuiTitle } from '../../../../constants/experiences/DebugGuiTitle';
+import DebugManager from '../../../../managers/DebugManager';
+import ThreeModelBase from '../../bases/components/ThreeModelBase';
 
 export default class TemplateModel extends ThreeModelBase {
     private static readonly _DEFAULT_POSITION: Vector3 = new Vector3(0, 1, 0);

package/template-vue/tsconfig.app.json

@@ -1,13 +1,7 @@
 {
     "extends": "@vue/tsconfig/tsconfig.dom.json",
     "compilerOptions": {
-        "target": "ES2020",
-        "module": "ESNext",
-        "moduleResolution": "bundler",
-        "strict": true,
-        "skipLibCheck": true,
-        "noEmit": true,
-        "verbatimModuleSyntax": false,
+        "target": "ES2022",
         "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo"
     },
     "include": ["src/**/*.ts", "src/**/*.vue"]

package/template-vue/tsconfig.node.json

@@ -4,7 +4,6 @@
         "target": "ES2023",
         "lib": ["ES2023"],
         "module": "ESNext",
-        "types": ["node"],
         "skipLibCheck": true,
         "moduleResolution": "bundler",
         "allowImportingTsExtensions": true,

package/template-react/.prettierignore

@@ -1,6 +0,0 @@
-dist
-node_modules
-*.min.js
-*.min.css
-public/assets
-package-lock.json

package/template-react/.prettierrc

@@ -1,10 +0,0 @@
-{
-    "semi": true,
-    "trailingComma": "es5",
-    "singleQuote": true,
-    "printWidth": 120,
-    "tabWidth": 4,
-    "useTabs": false,
-    "arrowParens": "always",
-    "endOfLine": "lf"
-}

package/template-react/eslint.config.js

@@ -1,23 +0,0 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
-import { defineConfig, globalIgnores } from 'eslint/config'
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      js.configs.recommended,
-      tseslint.configs.recommended,
-      reactHooks.configs.flat.recommended,
-      reactRefresh.configs.vite,
-    ],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-    },
-  },
-])

package/template-react/index.html

@@ -1,17 +0,0 @@
-<!doctype html>
-<html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <link rel="icon" type="image/svg+xml" href="./assets/icons/benjosLogoBlack.svg" />
-        <meta
-            name="viewport"
-            content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, height=device-height, user-scalable=no, viewport-fit=cover, shrink-to-fit=no, minimal-ui"
-        />
-        <title>Boilerplate</title>
-    </head>
-
-    <body>
-        <div id="root"></div>
-        <script type="module" src="/src/main.tsx"></script>
-    </body>
-</html>