@benjos/create-boilerplate 1.5.6 → 1.5.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (62) hide show
  1. package/package.json +1 -1
  2. package/template-vanilla/package-lock.json +124 -93
  3. package/template-vanilla/package.json +5 -2
  4. package/template-vanilla/src/experiences/cameras/threes/DebugThreeCameraController.ts +1 -1
  5. package/template-vanilla/src/experiences/cameras/threes/LoaderThreeCameraController.ts +1 -1
  6. package/template-vanilla/src/experiences/cameras/threes/MainThreeCameraController.ts +1 -1
  7. package/template-vanilla/src/experiences/cameras/threes/bases/ThreeCameraControllerBase.ts +2 -2
  8. package/template-vanilla/src/experiences/composers/threes/MainThreeEffectComposer.ts +20 -0
  9. package/template-vanilla/src/experiences/composers/threes/bases/ThreeEffectComposerBase.ts +54 -0
  10. package/template-vanilla/src/experiences/composers/threes/bases/passes/ThreePassBase.ts +11 -0
  11. package/template-vanilla/src/experiences/composers/threes/passes/TemplateThreePass.ts +22 -0
  12. package/template-vanilla/src/experiences/engines/threes/app/LoaderThreeApp.ts +2 -2
  13. package/template-vanilla/src/experiences/engines/threes/app/MainThreeApp.ts +2 -2
  14. package/template-vanilla/src/experiences/engines/threes/app/bases/ThreeAppBase.ts +7 -7
  15. package/template-vanilla/src/experiences/managers/DebugManager.ts +19 -5
  16. package/template-vanilla/src/experiences/managers/threes/ThreeAssetsManager.ts +3 -3
  17. package/template-vanilla/src/experiences/managers/threes/ThreeRaycasterManager.ts +1 -1
  18. package/template-vanilla/src/experiences/materials/threes/loaders/{LoaderMaterial.ts → LoaderThreeMaterial.ts} +6 -6
  19. package/template-vanilla/src/experiences/renderers/threes/LoaderThreeWebGLRenderer.ts +18 -0
  20. package/template-vanilla/src/experiences/renderers/threes/{Renderer.ts → MainThreeWebGLRenderer.ts} +24 -14
  21. package/template-vanilla/src/experiences/renderers/threes/bases/ThreeWebGLRendererBase.ts +60 -0
  22. package/template-vanilla/src/experiences/shaders/threes/composers/templates/TemplatePassFragmentShader.glsl +10 -0
  23. package/template-vanilla/src/experiences/shaders/threes/composers/templates/TemplatePassVertexShader.glsl +6 -0
  24. package/template-vanilla/src/experiences/types/global.d.ts +1 -1
  25. package/template-vanilla/src/experiences/types/styles.d.ts +2 -0
  26. package/template-vanilla/src/experiences/views/threes/bases/ThreeViewBase.ts +2 -2
  27. package/template-vanilla/src/experiences/views/threes/bases/components/ThreeAnimatedModelBase.ts +1 -1
  28. package/template-vanilla/src/experiences/views/threes/bases/components/ThreeModelBase.ts +1 -1
  29. package/template-vanilla/src/experiences/views/threes/loaders/components/TemplateLoaderThreeActor.ts +4 -4
  30. package/template-vanilla/src/experiences/views/threes/worlds/components/Environment.ts +1 -1
  31. package/template-vue/package-lock.json +123 -92
  32. package/template-vue/package.json +4 -1
  33. package/template-vue/src/experiences/cameras/threes/DebugThreeCameraController.ts +1 -1
  34. package/template-vue/src/experiences/cameras/threes/LoaderThreeCameraController.ts +1 -1
  35. package/template-vue/src/experiences/cameras/threes/MainThreeCameraController.ts +1 -1
  36. package/template-vue/src/experiences/cameras/threes/bases/ThreeCameraControllerBase.ts +2 -2
  37. package/template-vue/src/experiences/composers/threes/MainThreeEffectComposer.ts +20 -0
  38. package/template-vue/src/experiences/composers/threes/bases/ThreeEffectComposerBase.ts +54 -0
  39. package/template-vue/src/experiences/composers/threes/bases/passes/ThreePassBase.ts +11 -0
  40. package/template-vue/src/experiences/composers/threes/passes/TemplateThreePass.ts +22 -0
  41. package/template-vue/src/experiences/engines/threes/app/LoaderThreeApp.ts +2 -2
  42. package/template-vue/src/experiences/engines/threes/app/MainThreeApp.ts +2 -2
  43. package/template-vue/src/experiences/engines/threes/app/bases/ThreeAppBase.ts +7 -7
  44. package/template-vue/src/experiences/managers/DebugManager.ts +19 -5
  45. package/template-vue/src/experiences/managers/threes/ThreeAssetsManager.ts +3 -3
  46. package/template-vue/src/experiences/managers/threes/ThreeRaycasterManager.ts +1 -1
  47. package/template-vue/src/experiences/materials/threes/loaders/{LoaderMaterial.ts → LoaderThreeMaterial.ts} +6 -6
  48. package/template-vue/src/experiences/renderers/threes/LoaderThreeWebGLRenderer.ts +18 -0
  49. package/template-vue/src/experiences/renderers/threes/{Renderer.ts → MainThreeWebGLRenderer.ts} +24 -14
  50. package/template-vue/src/experiences/renderers/threes/bases/ThreeWebGLRendererBase.ts +60 -0
  51. package/template-vue/src/experiences/shaders/threes/composers/templates/TemplatePassFragmentShader.glsl +10 -0
  52. package/template-vue/src/experiences/shaders/threes/composers/templates/TemplatePassVertexShader.glsl +6 -0
  53. package/template-vue/src/experiences/types/styles.d.ts +2 -0
  54. package/template-vue/src/experiences/views/threes/bases/ThreeViewBase.ts +1 -1
  55. package/template-vue/src/experiences/views/threes/bases/components/ThreeAnimatedModelBase.ts +1 -1
  56. package/template-vue/src/experiences/views/threes/bases/components/ThreeModelBase.ts +1 -1
  57. package/template-vue/src/experiences/views/threes/loaders/components/TemplateLoaderThreeActor.ts +4 -4
  58. package/template-vue/src/experiences/views/threes/worlds/components/Environment.ts +1 -1
  59. package/template-vanilla/src/experiences/renderers/threes/LoaderRenderer.ts +0 -18
  60. package/template-vanilla/src/experiences/renderers/threes/bases/WebGLRendererBase.ts +0 -29
  61. package/template-vue/src/experiences/renderers/threes/LoaderRenderer.ts +0 -18
  62. package/template-vue/src/experiences/renderers/threes/bases/WebGLRendererBase.ts +0 -29
@@ -8,7 +8,7 @@ import { DebugGuiTitle } from '../../../constants/experiences/DebugGuiTitle';
8
8
  import { ViewId } from '../../../constants/experiences/ViewId';
9
9
  import DebugManager from '../../../managers/DebugManager';
10
10
  import ThreeCameraControllerManager from '../../../managers/threes/ThreeCameraControllerManager';
11
- import Renderer from '../../../renderers/threes/Renderer';
11
+ import MainThreeWebGLRenderer from '../../../renderers/threes/MainThreeWebGLRenderer';
12
12
  import World2ThreeView from '../../../views/threes/worlds/World2ThreeView';
13
13
  import WorldThreeView from '../../../views/threes/worlds/WorldThreeView';
14
14
  import ThreeAppBase from './bases/ThreeAppBase';
@@ -68,7 +68,7 @@ class MainThreeApp extends ThreeAppBase {
68
68
  }
69
69
 
70
70
  protected override _generateRenderers(): void {
71
- this._renderer = new Renderer(this._scene, this._cameraController.camera, { antialias: true });
71
+ this._renderer = new MainThreeWebGLRenderer(this._scene, this._cameraController.camera, { antialias: true });
72
72
  this._domElementContainer.appendChild(this._renderer.domElement);
73
73
  }
74
74
 
@@ -1,16 +1,16 @@
1
1
  import { DomResizeManager, TickerManager } from '@benjos/cookware';
2
- import { Scene } from 'three';
3
- import ThreeCameraControllerBase from '../../../../cameras/threes/bases/ThreeCameraControllerBase';
4
- import { ViewId } from '../../../../constants/experiences/ViewId';
2
+ import type { Scene } from 'three';
3
+ import type ThreeCameraControllerBase from '../../../../cameras/threes/bases/ThreeCameraControllerBase';
4
+ import type { ViewId } from '../../../../constants/experiences/ViewId';
5
5
  import LoaderManager from '../../../../managers/LoaderManager';
6
- import WebGLRendererBase from '../../../../renderers/threes/bases/WebGLRendererBase';
7
- import ThreeViewBase from '../../../../views/threes/bases/ThreeViewBase';
6
+ import type ThreeWebGLRendererBase from '../../../../renderers/threes/bases/ThreeWebGLRendererBase';
7
+ import type ThreeViewBase from '../../../../views/threes/bases/ThreeViewBase';
8
8
 
9
9
  export default abstract class ThreeAppBase {
10
10
  declare protected _domElementContainer: HTMLElement;
11
11
  declare protected _scene: Scene;
12
12
  declare protected _cameraController: ThreeCameraControllerBase;
13
- declare protected _renderer: WebGLRendererBase;
13
+ declare protected _renderer: ThreeWebGLRendererBase;
14
14
  protected readonly _views: ThreeViewBase[];
15
15
  protected readonly _viewBuilder: Map<ViewId, new () => ThreeViewBase>;
16
16
  declare protected _currentView: ThreeViewBase;
@@ -117,7 +117,7 @@ export default abstract class ThreeAppBase {
117
117
  public get scene(): Scene {
118
118
  return this._scene;
119
119
  }
120
- public get renderer(): WebGLRendererBase {
120
+ public get renderer(): ThreeWebGLRendererBase {
121
121
  return this._renderer;
122
122
  }
123
123
  public get cameraController(): ThreeCameraControllerBase {
@@ -1,8 +1,9 @@
1
1
  import { DomKeyboardManager } from '@benjos/cookware';
2
2
  import { KeyboardConstant } from '@benjos/spices';
3
3
  import GUI from 'lil-gui';
4
+ import Stats from 'stats.js';
4
5
  import { ThreePerf } from 'three-perf';
5
- import { DebugGuiTitle } from '../constants/experiences/DebugGuiTitle';
6
+ import type { DebugGuiTitle } from '../constants/experiences/DebugGuiTitle';
6
7
  import MainThreeApp from '../engines/threes/app/MainThreeApp';
7
8
 
8
9
  class DebugManager {
@@ -16,8 +17,10 @@ class DebugManager {
16
17
  KeyboardConstant.CODES.KEY_H,
17
18
  ];
18
19
 
20
+ private _isDebugVisible: boolean = true;
19
21
  declare private _gui: GUI;
20
22
  declare private _threePerf: ThreePerf;
23
+ declare private _stats: Stats;
21
24
 
22
25
  public init(): void {
23
26
  if (this.isActive) {
@@ -46,6 +49,12 @@ class DebugManager {
46
49
  });
47
50
  };
48
51
 
52
+ private _initStats = (): void => {
53
+ this._stats = new Stats();
54
+ this._stats.showPanel(0);
55
+ document.body.appendChild(this._stats.dom);
56
+ };
57
+
49
58
  private _addGuiFolder(title: DebugGuiTitle): GUI {
50
59
  return this._gui.addFolder(title);
51
60
  }
@@ -56,19 +65,24 @@ class DebugManager {
56
65
  return gui;
57
66
  }
58
67
 
59
- public beginThreePerf(): void {
68
+ public beginPerf(): void {
60
69
  if (!this._threePerf) this._initThreePerf();
70
+ if (!this._stats) this._initStats();
71
+ this._stats.begin();
61
72
  this._threePerf.begin();
62
73
  }
63
74
 
64
- public endThreePerf(): void {
75
+ public endPerf(): void {
76
+ this._stats.end();
65
77
  this._threePerf.end();
66
78
  }
67
79
 
68
80
  private readonly _onKeyDown = (_e: KeyboardEvent): void => {
69
81
  if (DomKeyboardManager.areAllKeysDown(DebugManager._TOGGLE_HIDDEN_KEYS)) {
70
- this._gui.show(this._gui._hidden);
71
- this._threePerf.visible = !this._threePerf.visible;
82
+ this._isDebugVisible = !this._isDebugVisible;
83
+ this._gui.show(this._isDebugVisible);
84
+ if (this._threePerf) this._threePerf.visible = this._isDebugVisible;
85
+ if (this._stats) this._stats.dom.style.display = this._isDebugVisible ? 'block' : 'none';
72
86
  }
73
87
  };
74
88
 
@@ -1,16 +1,16 @@
1
1
  import { Action, AssetUtils } from '@benjos/cookware';
2
2
  import {
3
- DataTexture,
4
3
  EquirectangularRefractionMapping,
5
4
  LinearSRGBColorSpace,
6
5
  RepeatWrapping,
7
- Texture,
8
6
  TextureLoader,
9
7
  type ColorSpace,
8
+ type DataTexture,
10
9
  type Mapping,
10
+ type Texture,
11
11
  type Wrapping,
12
12
  } from 'three';
13
- import { DRACOLoader, Font, FontLoader, GLTFLoader, HDRLoader, type GLTF } from 'three/examples/jsm/Addons.js';
13
+ import { DRACOLoader, FontLoader, GLTFLoader, HDRLoader, type Font, type GLTF } from 'three/examples/jsm/Addons.js';
14
14
  import type { AssetId } from '../../constants/experiences/AssetId';
15
15
  import { AssetType } from '../../types/assetTypes';
16
16
 
@@ -1,5 +1,5 @@
1
1
  import { DomPointerManager } from '@benjos/cookware';
2
- import { Object3D, Raycaster, Vector2, type Intersection, type Object3DEventMap } from 'three';
2
+ import { Raycaster, Vector2, type Intersection, type Object3D, type Object3DEventMap } from 'three';
3
3
  import MainThreeApp from '../../engines/threes/app/MainThreeApp';
4
4
 
5
5
  class ThreeRaycasterManager {
@@ -3,7 +3,7 @@ import { Color, ShaderMaterial, Uniform } from 'three';
3
3
  import LoaderFragmentShader from '../../../shaders/threes/loaders/LoaderFragmentShader.glsl';
4
4
  import LoaderVertexShader from '../../../shaders/threes/loaders/LoaderVertexShader.glsl';
5
5
 
6
- export default class LoaderMaterial extends ShaderMaterial {
6
+ export default class LoaderThreeMaterial extends ShaderMaterial {
7
7
  private static readonly _DEFAULT_UNIFORMS_COLOR: number = 0x3f79f3;
8
8
  private static readonly _GSAP_DURATION_FADE_IN: number = 0.5;
9
9
  private static readonly _GSAP_EASE_FADE_IN: string = 'power2.out';
@@ -17,7 +17,7 @@ export default class LoaderMaterial extends ShaderMaterial {
17
17
  transparent: true,
18
18
  uniforms: {
19
19
  uAlpha: new Uniform(1),
20
- uColor: new Uniform(new Color(LoaderMaterial._DEFAULT_UNIFORMS_COLOR)),
20
+ uColor: new Uniform(new Color(LoaderThreeMaterial._DEFAULT_UNIFORMS_COLOR)),
21
21
  },
22
22
  vertexShader: LoaderVertexShader,
23
23
  fragmentShader: LoaderFragmentShader,
@@ -29,8 +29,8 @@ export default class LoaderMaterial extends ShaderMaterial {
29
29
  this.uniforms.uAlpha.value = this._isFirstLoad ? 1 : 0;
30
30
  await gsap.to(this.uniforms.uAlpha, {
31
31
  value: 1,
32
- duration: this._isFirstLoad ? 0 : LoaderMaterial._GSAP_DURATION_FADE_IN,
33
- ease: LoaderMaterial._GSAP_EASE_FADE_IN,
32
+ duration: this._isFirstLoad ? 0 : LoaderThreeMaterial._GSAP_DURATION_FADE_IN,
33
+ ease: LoaderThreeMaterial._GSAP_EASE_FADE_IN,
34
34
  });
35
35
  this._isFirstLoad = false;
36
36
  }
@@ -40,8 +40,8 @@ export default class LoaderMaterial extends ShaderMaterial {
40
40
  this.uniforms.uAlpha.value = 1;
41
41
  await gsap.to(this.uniforms.uAlpha, {
42
42
  value: 0,
43
- duration: LoaderMaterial._GSAP_DURATION_FADE_OUT,
44
- ease: LoaderMaterial._GSAP_EASE_FADE_OUT,
43
+ duration: LoaderThreeMaterial._GSAP_DURATION_FADE_OUT,
44
+ ease: LoaderThreeMaterial._GSAP_EASE_FADE_OUT,
45
45
  });
46
46
  }
47
47
  }
@@ -0,0 +1,18 @@
1
+ import { NoToneMapping, SRGBColorSpace, type Camera, type Scene, type WebGLRendererParameters } from 'three';
2
+ import ThreeWebGLRendererBase from './bases/ThreeWebGLRendererBase';
3
+
4
+ export default class LoaderThreeWebGLRenderer extends ThreeWebGLRendererBase {
5
+ private static readonly _DEFAULT_TONE_MAPPING = NoToneMapping;
6
+ private static readonly _DEFAULT_OUTPUT_COLOR_SPACE = SRGBColorSpace;
7
+ private static readonly _DEFAULT_TONE_MAPPING_EXPOSURE = 1;
8
+ private static readonly _DEFAULT_CLEAR_COLOR = 0x000000;
9
+ private static readonly _DEFAULT_CLEAR_ALPHA = 0;
10
+
11
+ constructor(scene: Scene, camera: Camera, parameters: WebGLRendererParameters = {}) {
12
+ super(scene, camera, parameters);
13
+ this.toneMapping = LoaderThreeWebGLRenderer._DEFAULT_TONE_MAPPING;
14
+ this.toneMappingExposure = LoaderThreeWebGLRenderer._DEFAULT_TONE_MAPPING_EXPOSURE;
15
+ this.outputColorSpace = LoaderThreeWebGLRenderer._DEFAULT_OUTPUT_COLOR_SPACE;
16
+ this.setClearColor(LoaderThreeWebGLRenderer._DEFAULT_CLEAR_COLOR, LoaderThreeWebGLRenderer._DEFAULT_CLEAR_ALPHA);
17
+ }
18
+ }
@@ -1,41 +1,42 @@
1
1
  import {
2
2
  ACESFilmicToneMapping,
3
3
  AgXToneMapping,
4
- Camera,
5
4
  CineonToneMapping,
6
5
  CustomToneMapping,
7
6
  LinearSRGBColorSpace,
8
7
  LinearToneMapping,
9
8
  NeutralToneMapping,
10
9
  NoToneMapping,
11
- PCFSoftShadowMap,
10
+ PCFShadowMap,
12
11
  ReinhardToneMapping,
13
- Scene,
14
12
  SRGBColorSpace,
13
+ type Camera,
15
14
  type ColorSpace,
15
+ type Scene,
16
16
  type ToneMapping,
17
- type WebGLRendererParameters,
17
+ type WebGLRendererParameters
18
18
  } from 'three';
19
+ import MainThreeEffectComposer from '../../composers/threes/MainThreeEffectComposer';
19
20
  import { DebugGuiTitle } from '../../constants/experiences/DebugGuiTitle';
20
21
  import DebugManager from '../../managers/DebugManager';
21
- import WebGLRendererBase from './bases/WebGLRendererBase';
22
+ import ThreeWebGLRendererBase from './bases/ThreeWebGLRendererBase';
22
23
 
23
- export default class Renderer extends WebGLRendererBase {
24
+ export default class MainThreeWebGLRenderer extends ThreeWebGLRendererBase {
24
25
  private static readonly _DEFAULT_TONE_MAPPING = CineonToneMapping;
25
26
  private static readonly _DEFAULT_OUTPUT_COLOR_SPACE = SRGBColorSpace;
26
- private static readonly _DEFAULT_SHADOW_MAP_TYPE = PCFSoftShadowMap;
27
+ private static readonly _DEFAULT_SHADOW_MAP_TYPE = PCFShadowMap;
27
28
  private static readonly _DEFAULT_TONE_MAPPING_EXPOSURE = 1;
28
29
  private static readonly _DEFAULT_CLEAR_COLOR = 0xfafafa;
29
30
  private static readonly _DEFAULT_CLEAR_ALPHA = 0;
30
31
 
31
32
  constructor(scene: Scene, camera: Camera, parameters: WebGLRendererParameters = {}) {
32
33
  super(scene, camera, parameters);
33
- this.toneMapping = Renderer._DEFAULT_TONE_MAPPING;
34
- this.toneMappingExposure = Renderer._DEFAULT_TONE_MAPPING_EXPOSURE;
35
- this.outputColorSpace = Renderer._DEFAULT_OUTPUT_COLOR_SPACE;
34
+ this.toneMapping = MainThreeWebGLRenderer._DEFAULT_TONE_MAPPING;
35
+ this.toneMappingExposure = MainThreeWebGLRenderer._DEFAULT_TONE_MAPPING_EXPOSURE;
36
+ this.outputColorSpace = MainThreeWebGLRenderer._DEFAULT_OUTPUT_COLOR_SPACE;
36
37
  this.shadowMap.enabled = true;
37
- this.shadowMap.type = Renderer._DEFAULT_SHADOW_MAP_TYPE;
38
- this.setClearColor(Renderer._DEFAULT_CLEAR_COLOR, Renderer._DEFAULT_CLEAR_ALPHA);
38
+ this.shadowMap.type = MainThreeWebGLRenderer._DEFAULT_SHADOW_MAP_TYPE;
39
+ this.setClearColor(MainThreeWebGLRenderer._DEFAULT_CLEAR_COLOR, MainThreeWebGLRenderer._DEFAULT_CLEAR_ALPHA);
39
40
 
40
41
  if (DebugManager.isActive) {
41
42
  const rendererFolder = DebugManager.getGuiFolder(DebugGuiTitle.THREE_RENDERER)
@@ -59,13 +60,22 @@ export default class Renderer extends WebGLRendererBase {
59
60
  .onChange((value: ColorSpace) => {
60
61
  this.outputColorSpace = value;
61
62
  });
63
+ const postProcProxy = { active: this._isPostProcessingActive };
64
+ rendererFolder
65
+ .add(postProcProxy, 'active')
66
+ .name('post-processing')
67
+ .onChange((value: boolean) => this.setIsPostProcessingActive(value));
62
68
  }
63
69
  }
64
70
 
71
+ protected override _generateComposers(): void {
72
+ this._composer = new MainThreeEffectComposer(this, this._scene, this._camera);
73
+ }
74
+
65
75
  public override update(dt: number): void {
66
76
  const isDebug = DebugManager.isActive;
67
- if (isDebug) DebugManager.beginThreePerf();
77
+ if (isDebug) DebugManager.beginPerf();
68
78
  super.update(dt);
69
- if (isDebug) DebugManager.endThreePerf();
79
+ if (isDebug) DebugManager.endPerf();
70
80
  }
71
81
  }
@@ -0,0 +1,60 @@
1
+ import { DomResizeManager } from '@benjos/cookware';
2
+ import { WebGLRenderer, type Camera, type Scene, type WebGLRendererParameters } from 'three';
3
+ import ThreeEffectComposerBase from '../../../composers/threes/bases/ThreeEffectComposerBase';
4
+
5
+ export default abstract class ThreeWebGLRendererBase extends WebGLRenderer {
6
+ protected _composer?: ThreeEffectComposerBase;
7
+ protected _isPostProcessingActive: boolean = false;
8
+ protected readonly _scene: Scene;
9
+ protected _camera: Camera;
10
+
11
+ constructor(scene: Scene, camera: Camera, parameters: WebGLRendererParameters = {}) {
12
+ super(parameters);
13
+
14
+ this._scene = scene;
15
+ this._camera = camera;
16
+
17
+ this._generateComposers();
18
+ this.resize();
19
+ }
20
+
21
+ protected _generateComposers(): void {
22
+ //
23
+ }
24
+
25
+ public setCamera(camera: Camera): void {
26
+ this._camera = camera;
27
+ if (this._composer) {
28
+ this._composer.setCamera(camera);
29
+ }
30
+ }
31
+
32
+ public setIsPostProcessingActive(enabled: boolean): void {
33
+ this._isPostProcessingActive = enabled && !!this._composer;
34
+ }
35
+
36
+ public resize(): void {
37
+ this.setSize(DomResizeManager.width, DomResizeManager.height);
38
+ this.setPixelRatio(DomResizeManager.pixelRatio);
39
+ if (this._composer) this._composer.resize();
40
+ }
41
+
42
+ public update(dt: number): void {
43
+ if (this._composer && this._isPostProcessingActive) {
44
+ this._composer.update(dt);
45
+ } else {
46
+ this.render(this._scene, this._camera);
47
+ }
48
+ }
49
+
50
+ //#region Getters
51
+ //
52
+ public get composer(): ThreeEffectComposerBase {
53
+ return this._composer!;
54
+ }
55
+ public get isPostProcessingActive(): boolean {
56
+ return this._isPostProcessingActive;
57
+ }
58
+ //
59
+ //#endregion
60
+ }
@@ -0,0 +1,10 @@
1
+ uniform sampler2D tDiffuse;
2
+ uniform float uTime;
3
+
4
+ varying vec2 vUv;
5
+
6
+ void main() {
7
+ vec2 newUv = vec2(vUv.x, vUv.y + sin(vUv.x * 10.0 + uTime) * 0.1);
8
+ vec4 color = texture2D(tDiffuse, newUv);
9
+ gl_FragColor = color;
10
+ }
@@ -0,0 +1,6 @@
1
+ varying vec2 vUv;
2
+
3
+ void main() {
4
+ gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
5
+ vUv = uv;
6
+ }
@@ -0,0 +1,2 @@
1
+ declare module '*.scss';
2
+ declare module '*.css';
@@ -1,5 +1,5 @@
1
1
  import { Object3D } from 'three';
2
- import { ViewId } from '../../../constants/experiences/ViewId';
2
+ import type { ViewId } from '../../../constants/experiences/ViewId';
3
3
  import type ThreeActorBase from './components/ThreeActorBase';
4
4
 
5
5
  export default abstract class ThreeViewBase extends Object3D {
@@ -1,4 +1,4 @@
1
- import { AnimationAction, AnimationMixer } from 'three';
1
+ import { AnimationMixer, type AnimationAction } from 'three';
2
2
  import type { AnimationId } from '../../../../constants/experiences/AnimationId';
3
3
  import type { AssetId } from '../../../../constants/experiences/AssetId';
4
4
  import ThreeAssetsManager from '../../../../managers/threes/ThreeAssetsManager';
@@ -1,4 +1,4 @@
1
- import { Mesh, Object3D, type Group } from 'three';
1
+ import { Mesh, type Group, type Object3D } from 'three';
2
2
  import { SkeletonUtils } from 'three/examples/jsm/Addons.js';
3
3
  import type { AssetId } from '../../../../constants/experiences/AssetId';
4
4
  import type { Object3DId } from '../../../../constants/experiences/Object3dId';
@@ -1,5 +1,5 @@
1
1
  import { Mesh, PlaneGeometry } from 'three';
2
- import LoaderMaterial from '../../../../materials/threes/loaders/LoaderMaterial';
2
+ import LoaderThreeMaterial from '../../../../materials/threes/loaders/LoaderThreeMaterial';
3
3
  import ThreeActorBase from '../../bases/components/ThreeActorBase';
4
4
 
5
5
  export default class TemplateLoaderThreeActor extends ThreeActorBase {
@@ -9,7 +9,7 @@ export default class TemplateLoaderThreeActor extends ThreeActorBase {
9
9
  private static readonly _DEFAULT_SEGMENTS_HEIGHT: number = 1;
10
10
 
11
11
  declare private _geometry: PlaneGeometry;
12
- declare private _material: LoaderMaterial;
12
+ declare private _material: LoaderThreeMaterial;
13
13
  declare private _mesh: Mesh;
14
14
 
15
15
  constructor() {
@@ -32,7 +32,7 @@ export default class TemplateLoaderThreeActor extends ThreeActorBase {
32
32
  }
33
33
 
34
34
  private _generateMaterial(): void {
35
- this._material = new LoaderMaterial();
35
+ this._material = new LoaderThreeMaterial();
36
36
  }
37
37
 
38
38
  private _generateMesh(): void {
@@ -41,7 +41,7 @@ export default class TemplateLoaderThreeActor extends ThreeActorBase {
41
41
 
42
42
  //#region Getters
43
43
  //
44
- public get material(): LoaderMaterial {
44
+ public get material(): LoaderThreeMaterial {
45
45
  return this._material;
46
46
  }
47
47
  //
@@ -1,4 +1,4 @@
1
- import { DataTexture, DirectionalLight, Vector3 } from 'three';
1
+ import { DirectionalLight, Vector3, type DataTexture } from 'three';
2
2
  import { AssetId } from '../../../../constants/experiences/AssetId';
3
3
  import { DebugGuiTitle } from '../../../../constants/experiences/DebugGuiTitle';
4
4
  import MainThreeApp from '../../../../engines/threes/app/MainThreeApp';
@@ -1,18 +0,0 @@
1
- import { Camera, NoToneMapping, Scene, SRGBColorSpace, type WebGLRendererParameters } from 'three';
2
- import WebGLRendererBase from './bases/WebGLRendererBase';
3
-
4
- export default class LoaderRenderer extends WebGLRendererBase {
5
- private static readonly _DEFAULT_TONE_MAPPING = NoToneMapping;
6
- private static readonly _DEFAULT_OUTPUT_COLOR_SPACE = SRGBColorSpace;
7
- private static readonly _DEFAULT_TONE_MAPPING_EXPOSURE = 1;
8
- private static readonly _DEFAULT_CLEAR_COLOR = 0x000000;
9
- private static readonly _DEFAULT_CLEAR_ALPHA = 0;
10
-
11
- constructor(scene: Scene, camera: Camera, parameters: WebGLRendererParameters = {}) {
12
- super(scene, camera, parameters);
13
- this.toneMapping = LoaderRenderer._DEFAULT_TONE_MAPPING;
14
- this.toneMappingExposure = LoaderRenderer._DEFAULT_TONE_MAPPING_EXPOSURE;
15
- this.outputColorSpace = LoaderRenderer._DEFAULT_OUTPUT_COLOR_SPACE;
16
- this.setClearColor(LoaderRenderer._DEFAULT_CLEAR_COLOR, LoaderRenderer._DEFAULT_CLEAR_ALPHA);
17
- }
18
- }
@@ -1,29 +0,0 @@
1
- import { DomResizeManager } from '@benjos/cookware';
2
- import { Camera, Scene, WebGLRenderer, type WebGLRendererParameters } from 'three';
3
-
4
- export default abstract class WebGLRendererBase extends WebGLRenderer {
5
- private readonly _scene: Scene;
6
- private _camera: Camera;
7
-
8
- constructor(scene: Scene, camera: Camera, parameters: WebGLRendererParameters = {}) {
9
- super(parameters);
10
-
11
- this._scene = scene;
12
- this._camera = camera;
13
-
14
- this.resize();
15
- }
16
-
17
- public setCamera(camera: Camera): void {
18
- this._camera = camera;
19
- }
20
-
21
- public resize(): void {
22
- this.setSize(DomResizeManager.width, DomResizeManager.height);
23
- this.setPixelRatio(DomResizeManager.pixelRatio);
24
- }
25
-
26
- public update(_dt: number): void {
27
- this.render(this._scene, this._camera);
28
- }
29
- }
@@ -1,18 +0,0 @@
1
- import { Camera, NoToneMapping, Scene, SRGBColorSpace, type WebGLRendererParameters } from 'three';
2
- import WebGLRendererBase from './bases/WebGLRendererBase';
3
-
4
- export default class LoaderRenderer extends WebGLRendererBase {
5
- private static readonly _DEFAULT_TONE_MAPPING = NoToneMapping;
6
- private static readonly _DEFAULT_OUTPUT_COLOR_SPACE = SRGBColorSpace;
7
- private static readonly _DEFAULT_TONE_MAPPING_EXPOSURE = 1;
8
- private static readonly _DEFAULT_CLEAR_COLOR = 0x000000;
9
- private static readonly _DEFAULT_CLEAR_ALPHA = 0;
10
-
11
- constructor(scene: Scene, camera: Camera, parameters: WebGLRendererParameters = {}) {
12
- super(scene, camera, parameters);
13
- this.toneMapping = LoaderRenderer._DEFAULT_TONE_MAPPING;
14
- this.toneMappingExposure = LoaderRenderer._DEFAULT_TONE_MAPPING_EXPOSURE;
15
- this.outputColorSpace = LoaderRenderer._DEFAULT_OUTPUT_COLOR_SPACE;
16
- this.setClearColor(LoaderRenderer._DEFAULT_CLEAR_COLOR, LoaderRenderer._DEFAULT_CLEAR_ALPHA);
17
- }
18
- }
@@ -1,29 +0,0 @@
1
- import { DomResizeManager } from '@benjos/cookware';
2
- import { Camera, Scene, WebGLRenderer, type WebGLRendererParameters } from 'three';
3
-
4
- export default abstract class WebGLRendererBase extends WebGLRenderer {
5
- private readonly _scene: Scene;
6
- private _camera: Camera;
7
-
8
- constructor(scene: Scene, camera: Camera, parameters: WebGLRendererParameters = {}) {
9
- super(parameters);
10
-
11
- this._scene = scene;
12
- this._camera = camera;
13
-
14
- this.resize();
15
- }
16
-
17
- public setCamera(camera: Camera): void {
18
- this._camera = camera;
19
- }
20
-
21
- public resize(): void {
22
- this.setSize(DomResizeManager.width, DomResizeManager.height);
23
- this.setPixelRatio(DomResizeManager.pixelRatio);
24
- }
25
-
26
- public update(_dt: number): void {
27
- this.render(this._scene, this._camera);
28
- }
29
- }