@mml-io/3d-web-client-core 0.6.1 → 0.7.0

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.
@@ -11,16 +11,17 @@ export declare class Composer {
11
11
  readonly renderer: WebGLRenderer;
12
12
  private readonly composer;
13
13
  private readonly renderPass;
14
+ private readonly normalPass;
15
+ private readonly normalTextureEffect;
16
+ private readonly ppssaoEffect;
17
+ private readonly ppssaoPass;
18
+ private readonly n8aopass;
14
19
  private readonly fxaaEffect;
15
20
  private readonly fxaaPass;
16
21
  private readonly bloomEffect;
17
22
  private readonly bloomPass;
18
23
  private readonly toneMappingEffect;
19
24
  private readonly smaaEffect;
20
- private readonly normalPass;
21
- private readonly normalTextureEffect;
22
- private readonly ssaoEffect;
23
- private readonly ssaoPass;
24
25
  private readonly toneMappingPass;
25
26
  private readonly smaaPass;
26
27
  private readonly bcs;
@@ -1,4 +1,4 @@
1
- import { BloomEffect, EffectComposer, EffectPass, SSAOEffect, ToneMappingEffect } from "postprocessing";
1
+ import { BloomEffect, EffectComposer, EffectPass, NormalPass, SSAOEffect, ToneMappingEffect } from "postprocessing";
2
2
  import { Scene, WebGLRenderer } from "three";
3
3
  import { GaussGrainEffect } from "../rendering/post-effects/gauss-grain";
4
4
  import { Sun } from "../sun/Sun";
@@ -8,29 +8,25 @@ export declare class TweakPane {
8
8
  private renderer;
9
9
  private scene;
10
10
  private composer;
11
- private guiStyle;
12
11
  private gui;
13
- private render;
14
- private stats;
15
- private renderOptions;
16
- private ssao;
17
- private toneMapping;
18
- private post;
19
- private export;
20
- private characterMaterial;
12
+ private renderStatsFolder;
13
+ private rendererFolder;
14
+ private toneMappingFolder;
15
+ private ssaoFolder;
16
+ private bcsFolder;
17
+ private postExtrasFolder;
18
+ private character;
21
19
  private environment;
22
- private sun;
23
- private sunButton;
24
- private ambient;
20
+ private export;
25
21
  private saveVisibilityInLocalStorage;
26
22
  guiVisible: boolean;
27
23
  constructor(renderer: WebGLRenderer, scene: Scene, composer: EffectComposer);
28
24
  private processKey;
29
25
  private setupGUIListeners;
30
- setupRenderPane(ssaoEffect: SSAOEffect, toneMappingEffect: ToneMappingEffect, toneMappingPass: EffectPass, brightnessContrastSaturation: typeof BrightnessContrastSaturation, bloomEffect: BloomEffect, gaussGrainEffect: typeof GaussGrainEffect, hasLighting: boolean, sun: Sun | null, setHDR: () => void, setAmbientLight: () => void, setFog: () => void): void;
26
+ setupRenderPane(composer: EffectComposer, normalPass: NormalPass, ppssaoEffect: SSAOEffect, ppssaoPass: EffectPass, n8aopass: any, toneMappingEffect: ToneMappingEffect, toneMappingPass: EffectPass, brightnessContrastSaturation: typeof BrightnessContrastSaturation, bloomEffect: BloomEffect, gaussGrainEffect: typeof GaussGrainEffect, hasLighting: boolean, sun: Sun | null, setHDR: () => void, setAmbientLight: () => void, setFog: () => void): void;
27
+ updateStats(timeManager: TimeManager): void;
31
28
  private formatDateForFilename;
32
29
  private downloadSettingsAsJSON;
33
30
  private importSettingsFromJSON;
34
- updateStats(timeManager: TimeManager): void;
35
31
  private toggleGUI;
36
32
  }
@@ -0,0 +1,12 @@
1
+ import { FolderApi } from "tweakpane";
2
+ import { BrightnessContrastSaturation } from "../../rendering/post-effects/bright-contrast-sat";
3
+ export declare const bcsValues: {
4
+ brightness: number;
5
+ contrast: number;
6
+ saturation: number;
7
+ };
8
+ export declare class BrightnessContrastSaturationFolder {
9
+ private folder;
10
+ constructor(parentFolder: FolderApi, expand?: boolean);
11
+ setupChangeEvent(brightnessContrastSaturation: typeof BrightnessContrastSaturation): void;
12
+ }
@@ -0,0 +1,34 @@
1
+ import { FolderApi } from "tweakpane";
2
+ export declare const characterValues: {
3
+ transmission: number;
4
+ metalness: number;
5
+ roughness: number;
6
+ ior: number;
7
+ thickness: number;
8
+ specularColor: {
9
+ r: number;
10
+ g: number;
11
+ b: number;
12
+ };
13
+ specularIntensity: number;
14
+ emissive: {
15
+ r: number;
16
+ g: number;
17
+ b: number;
18
+ };
19
+ emissiveIntensity: number;
20
+ envMapIntensity: number;
21
+ sheenColor: {
22
+ r: number;
23
+ g: number;
24
+ b: number;
25
+ };
26
+ sheen: number;
27
+ clearcoat: number;
28
+ clearcoatRoughness: number;
29
+ };
30
+ export declare class CharacterFolder {
31
+ private folder;
32
+ constructor(parentFolder: FolderApi, expand?: boolean);
33
+ setupChangeEvent(): void;
34
+ }
@@ -0,0 +1,41 @@
1
+ import { FolderApi } from "tweakpane";
2
+ import { Sun } from "../../sun/Sun";
3
+ export declare const sunValues: {
4
+ sunPosition: {
5
+ sunAzimuthalAngle: number;
6
+ sunPolarAngle: number;
7
+ };
8
+ sunIntensity: number;
9
+ sunColor: {
10
+ r: number;
11
+ g: number;
12
+ b: number;
13
+ };
14
+ };
15
+ export declare const envValues: {
16
+ ambientLight: {
17
+ ambientLightIntensity: number;
18
+ ambientLightColor: {
19
+ r: number;
20
+ g: number;
21
+ b: number;
22
+ };
23
+ };
24
+ fog: {
25
+ fogNear: number;
26
+ fogFar: number;
27
+ fogColor: {
28
+ r: number;
29
+ g: number;
30
+ b: number;
31
+ };
32
+ };
33
+ };
34
+ export declare class EnvironmentFolder {
35
+ folder: FolderApi;
36
+ private sun;
37
+ private sunButton;
38
+ private ambient;
39
+ constructor(parentFolder: FolderApi, expand?: boolean);
40
+ setupChangeEvent(setHDR: () => void, setAmbientLight: () => void, setFog: () => void, sun: Sun | null): void;
41
+ }
@@ -0,0 +1,12 @@
1
+ import { BloomEffect } from "postprocessing";
2
+ import { FolderApi } from "tweakpane";
3
+ import { GaussGrainEffect } from "../../rendering/post-effects/gauss-grain";
4
+ export declare const extrasValues: {
5
+ grain: number;
6
+ bloom: number;
7
+ };
8
+ export declare class PostExtrasFolder {
9
+ private folder;
10
+ constructor(parentFolder: FolderApi, expand?: boolean);
11
+ setupChangeEvent(bloomEffect: BloomEffect, gaussGrainEffect: typeof GaussGrainEffect): void;
12
+ }
@@ -0,0 +1,15 @@
1
+ import { EffectPass } from "postprocessing";
2
+ import { Scene, WebGLRenderer } from "three";
3
+ import { FolderApi } from "tweakpane";
4
+ export declare const rendererValues: {
5
+ shadowMap: number;
6
+ toneMapping: number;
7
+ exposure: number;
8
+ bgIntensity: number;
9
+ bgBlurriness: number;
10
+ };
11
+ export declare class RendererFolder {
12
+ private folder;
13
+ constructor(parentFolder: FolderApi, expand?: boolean);
14
+ setupChangeEvent(scene: Scene, renderer: WebGLRenderer, toneMappingFolder: FolderApi, toneMappingPass: EffectPass): void;
15
+ }
@@ -0,0 +1,12 @@
1
+ import { EffectComposer } from "postprocessing";
2
+ import { WebGLRenderer } from "three";
3
+ import { FolderApi } from "tweakpane";
4
+ import { TimeManager } from "../../time/TimeManager";
5
+ export declare class RendererStatsFolder {
6
+ private folder;
7
+ private performance;
8
+ private defails;
9
+ private statsData;
10
+ constructor(parentFolder: FolderApi, expanded?: boolean);
11
+ update(renderer: WebGLRenderer, composer: EffectComposer, timeManager: TimeManager): void;
12
+ }
@@ -0,0 +1,53 @@
1
+ import { BlendFunction, EffectComposer, EffectPass, NormalPass, SSAOEffect } from "postprocessing";
2
+ import { FolderApi } from "tweakpane";
3
+ export declare const ppssaoValues: {
4
+ enabled: boolean;
5
+ blendFunction: BlendFunction;
6
+ distanceScaling: boolean;
7
+ depthAwareUpsampling: boolean;
8
+ samples: number;
9
+ rings: number;
10
+ luminanceInfluence: number;
11
+ radius: number;
12
+ intensity: number;
13
+ bias: number;
14
+ fade: number;
15
+ resolutionScale: number;
16
+ color: {
17
+ r: number;
18
+ g: number;
19
+ b: number;
20
+ };
21
+ worldDistanceThreshold: number;
22
+ worldDistanceFalloff: number;
23
+ worldProximityThreshold: number;
24
+ worldProximityFalloff: number;
25
+ };
26
+ export declare const n8ssaoValues: {
27
+ enabled: boolean;
28
+ halfRes: boolean;
29
+ aoRadius: number;
30
+ distanceFalloff: number;
31
+ intensity: number;
32
+ color: {
33
+ r: number;
34
+ g: number;
35
+ b: number;
36
+ };
37
+ aoSamples: number;
38
+ denoiseSamples: number;
39
+ denoiseRadius: number;
40
+ viewMode: string;
41
+ };
42
+ export declare class SSAOFolder {
43
+ private folder;
44
+ private ppssao;
45
+ private n8ssao;
46
+ private aoSamples;
47
+ private denoiseSamples;
48
+ private denoiseRadius;
49
+ private aoDisplay;
50
+ private postProcessingSSAOIndex;
51
+ constructor(parentFolder: FolderApi, expand?: boolean);
52
+ setupChangeEvent(composer: EffectComposer, normalPass: NormalPass, ppssaoEffect: SSAOEffect, ppssaoPass: EffectPass, n8aopass: any): void;
53
+ }
@@ -0,0 +1,18 @@
1
+ import { ToneMappingEffect, ToneMappingMode } from "postprocessing";
2
+ import { FolderApi } from "tweakpane";
3
+ export declare const toneMappingValues: {
4
+ mode: ToneMappingMode;
5
+ resolution: number;
6
+ whitePoint: number;
7
+ middleGrey: number;
8
+ minLuminance: number;
9
+ averageLuminance: number;
10
+ adaptationRate: number;
11
+ };
12
+ export declare class ToneMappingFolder {
13
+ folder: FolderApi;
14
+ private minLuminance;
15
+ private avgLuminance;
16
+ constructor(parentFolder: FolderApi, expand?: boolean);
17
+ setupChangeEvent(toneMappingEffect: ToneMappingEffect): void;
18
+ }
@@ -0,0 +1 @@
1
+ export declare const tweakPaneStyle = "\n:root {\n --tp-base-background-color: rgba(0, 0, 0, 0.6);\n --tp-base-shadow-color: hsla(0, 0%, 0%, 0.2);\n --tp-button-background-color: hsla(0, 0%, 80%, 1);\n --tp-button-background-color-active: hsla(0, 0%, 100%, 1);\n --tp-button-background-color-focus: hsla(0, 0%, 95%, 1);\n --tp-button-background-color-hover: hsla(0, 0%, 85%, 1);\n --tp-button-foreground-color: hsla(0, 0%, 0%, 0.7);\n --tp-container-background-color: hsla(0, 0%, 0%, 0.3);\n --tp-container-background-color-active: hsla(0, 0%, 0%, 0.6);\n --tp-container-background-color-focus: hsla(0, 0%, 0%, 0.5);\n --tp-container-background-color-hover: hsla(0, 0%, 0%, 0.4);\n --tp-container-foreground-color: hsla(0, 0%, 90%, 0.6);\n --tp-groove-foreground-color: hsla(0, 0%, 0%, 0.2);\n --tp-input-background-color: hsla(0, 0%, 30%, 0.3);\n --tp-input-background-color-active: hsla(0, 0%, 0%, 0.6);\n --tp-input-background-color-focus: hsla(0, 0%, 0%, 0.5);\n --tp-input-background-color-hover: hsla(0, 0%, 0%, 0.4);\n --tp-input-foreground-color: hsla(0, 0%, 100%, 0.6);\n --tp-label-foreground-color: hsla(0, 0%, 100%, 0.6);\n --tp-monitor-background-color: hsla(0, 0%, 0%, 0.3);\n --tp-monitor-foreground-color: hsla(0, 0%, 100%, 0.3);\n}\n\n.tp-brkv {\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n.tp-dfwv {\n color: white;\n backdrop-filter: blur(12px);\n width: 360px !important;\n display: none;\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n.tp-fldv_t {\n font-size: 11px;\n background-color: rgba(0, 0, 0, 0.1);\n}\n\n.tp-lblv_l {\n font-size: 11px;\n padding-left: 0px !important;\n padding-right: 0px !important;\n}\n\n.tp-lblv_v {\n width: 180px;\n}\n\n.tp-sldtxtv_t {\n max-width: 50px;\n}\n\n.tp-sglv_i {\n font-size: 11px;\n color: rgba(255, 255, 255, 0.7);\n}\n";
package/package.json CHANGED
@@ -1,6 +1,9 @@
1
1
  {
2
2
  "name": "@mml-io/3d-web-client-core",
3
- "version": "0.6.1",
3
+ "version": "0.7.0",
4
+ "publishConfig": {
5
+ "access": "public"
6
+ },
4
7
  "main": "./build/index.js",
5
8
  "types": "./build/index.d.ts",
6
9
  "type": "module",
@@ -8,22 +11,26 @@
8
11
  "/build"
9
12
  ],
10
13
  "scripts": {
11
- "build": "rimraf ./build && node ./build.js --build",
12
- "iterate": "node ./build.js --watch",
14
+ "build": "tsx ./build.ts --build",
15
+ "iterate": "tsx ./build.ts --watch",
13
16
  "type-check": "tsc --noEmit",
14
- "lint": "eslint \"./src/**/*.{ts,}\" --max-warnings 0",
15
- "lint:fix": "eslint \"./src/**/*.{ts,}\" --fix"
17
+ "lint": "eslint \"./{src,test}/**/*.{js,jsx,ts,tsx}\" --max-warnings 0",
18
+ "lint-fix": "eslint \"./{src,test}/**/*.{js,jsx,ts,tsx}\" --fix"
16
19
  },
17
20
  "dependencies": {
18
- "mml-web": "0.6.1",
19
- "postprocessing": "6.32.1",
20
- "three": "^0.153.0",
21
- "three-mesh-bvh": "0.6.0",
22
- "tweakpane": "3.1.10"
21
+ "@tweakpane/core": "2.0.0",
22
+ "@tweakpane/plugin-essentials": "0.2.0",
23
+ "mml-web": "0.7.0",
24
+ "n8ao": "^1.6.8",
25
+ "postprocessing": "6.33.0",
26
+ "three-mesh-bvh": "0.6.4",
27
+ "tweakpane": "4.0.0"
28
+ },
29
+ "peerDependencies": {
30
+ "three": ">= 0.153.0"
23
31
  },
24
32
  "devDependencies": {
25
- "@tweakpane/core": "1.1.9",
26
- "@types/three": "^0.152.1"
33
+ "@types/three": "0.153.0"
27
34
  },
28
- "gitHead": "a000246cbe624bc304dd21de766fbceb8c9e0d20"
35
+ "gitHead": "e298772ca5da974f3ef800c05d0e4dff0f52677b"
29
36
  }
@@ -1,89 +0,0 @@
1
- export declare const characterValues: {
2
- material: {
3
- transmission: number;
4
- metalness: number;
5
- roughness: number;
6
- ior: number;
7
- thickness: number;
8
- specularColor: {
9
- r: number;
10
- g: number;
11
- b: number;
12
- };
13
- specularIntensity: number;
14
- emissive: {
15
- r: number;
16
- g: number;
17
- b: number;
18
- };
19
- emissiveIntensity: number;
20
- envMapIntensity: number;
21
- sheenColor: {
22
- r: number;
23
- g: number;
24
- b: number;
25
- };
26
- sheen: number;
27
- clearcoat: number;
28
- clearcoatRoughness: number;
29
- };
30
- };
31
- export declare const characterOptions: {
32
- material: {
33
- transmission: {
34
- min: number;
35
- max: number;
36
- step: number;
37
- };
38
- metalness: {
39
- min: number;
40
- max: number;
41
- step: number;
42
- };
43
- roughness: {
44
- min: number;
45
- max: number;
46
- step: number;
47
- };
48
- ior: {
49
- min: number;
50
- max: number;
51
- step: number;
52
- };
53
- thickness: {
54
- min: number;
55
- max: number;
56
- step: number;
57
- };
58
- specularIntensity: {
59
- min: number;
60
- max: number;
61
- step: number;
62
- };
63
- emissiveIntensity: {
64
- min: number;
65
- max: number;
66
- step: number;
67
- };
68
- envMapIntensity: {
69
- min: number;
70
- max: number;
71
- step: number;
72
- };
73
- sheen: {
74
- min: number;
75
- max: number;
76
- step: number;
77
- };
78
- clearcoat: {
79
- min: number;
80
- max: number;
81
- step: number;
82
- };
83
- clearcoatRoughness: {
84
- min: number;
85
- max: number;
86
- step: number;
87
- };
88
- };
89
- };
@@ -1,234 +0,0 @@
1
- import { BlendFunction, ToneMappingMode } from "postprocessing";
2
- export declare const composerValues: {
3
- renderer: {
4
- shadowMap: number;
5
- toneMapping: number;
6
- exposure: number;
7
- bgIntensity: number;
8
- bgBlurriness: number;
9
- };
10
- ssao: {
11
- blendFunction: BlendFunction;
12
- distanceScaling: boolean;
13
- depthAwareUpsampling: boolean;
14
- samples: number;
15
- rings: number;
16
- luminanceInfluence: number;
17
- radius: number;
18
- intensity: number;
19
- bias: number;
20
- fade: number;
21
- resolutionScale: number;
22
- color: {
23
- r: number;
24
- g: number;
25
- b: number;
26
- };
27
- worldDistanceThreshold: number;
28
- worldDistanceFalloff: number;
29
- worldProximityThreshold: number;
30
- worldProximityFalloff: number;
31
- };
32
- toneMapping: {
33
- mode: ToneMappingMode;
34
- resolution: number;
35
- whitePoint: number;
36
- middleGrey: number;
37
- minLuminance: number;
38
- averageLuminance: number;
39
- adaptationRate: number;
40
- };
41
- brightness: number;
42
- contrast: number;
43
- saturation: number;
44
- grain: number;
45
- bloom: number;
46
- };
47
- export declare const composerOptions: {
48
- renderer: {
49
- shadowMap: {
50
- min: number;
51
- max: number;
52
- step: number;
53
- };
54
- toneMapping: {
55
- min: number;
56
- max: number;
57
- step: number;
58
- };
59
- exposure: {
60
- min: number;
61
- max: number;
62
- step: number;
63
- };
64
- bgIntensity: {
65
- min: number;
66
- max: number;
67
- step: number;
68
- };
69
- bgBlurriness: {
70
- min: number;
71
- max: number;
72
- step: number;
73
- };
74
- };
75
- ssao: {
76
- samples: {
77
- min: number;
78
- max: number;
79
- step: number;
80
- };
81
- rings: {
82
- min: number;
83
- max: number;
84
- step: number;
85
- };
86
- luminanceInfluence: {
87
- min: number;
88
- max: number;
89
- step: number;
90
- };
91
- radius: {
92
- min: number;
93
- max: number;
94
- step: number;
95
- };
96
- intensity: {
97
- min: number;
98
- max: number;
99
- step: number;
100
- };
101
- bias: {
102
- min: number;
103
- max: number;
104
- step: number;
105
- };
106
- fade: {
107
- min: number;
108
- max: number;
109
- step: number;
110
- };
111
- resolutionScale: {
112
- min: number;
113
- max: number;
114
- step: number;
115
- };
116
- worldDistanceThreshold: {
117
- min: number;
118
- max: number;
119
- step: number;
120
- };
121
- worldDistanceFalloff: {
122
- min: number;
123
- max: number;
124
- step: number;
125
- };
126
- worldProximityThreshold: {
127
- min: number;
128
- max: number;
129
- step: number;
130
- };
131
- worldProximityFalloff: {
132
- min: number;
133
- max: number;
134
- step: number;
135
- };
136
- };
137
- toneMapping: {
138
- mode: {
139
- min: number;
140
- max: number;
141
- step: number;
142
- };
143
- resolution: {
144
- min: number;
145
- max: number;
146
- step: number;
147
- };
148
- whitePoint: {
149
- min: number;
150
- max: number;
151
- step: number;
152
- };
153
- middleGrey: {
154
- min: number;
155
- max: number;
156
- step: number;
157
- };
158
- minLuminance: {
159
- min: number;
160
- max: number;
161
- step: number;
162
- };
163
- averageLuminance: {
164
- min: number;
165
- max: number;
166
- step: number;
167
- };
168
- adaptationRate: {
169
- min: number;
170
- max: number;
171
- step: number;
172
- };
173
- };
174
- brightness: {
175
- amount: {
176
- min: number;
177
- max: number;
178
- step: number;
179
- };
180
- };
181
- contrast: {
182
- amount: {
183
- min: number;
184
- max: number;
185
- step: number;
186
- };
187
- };
188
- saturation: {
189
- amount: {
190
- min: number;
191
- max: number;
192
- step: number;
193
- };
194
- };
195
- grain: {
196
- amount: {
197
- min: number;
198
- max: number;
199
- step: number;
200
- };
201
- };
202
- bloom: {
203
- amount: {
204
- min: number;
205
- max: number;
206
- step: number;
207
- };
208
- };
209
- };
210
- export declare const shadowMapTypes: Record<number, string>;
211
- export declare const rendererToneMappingTypes: Record<number, string>;
212
- export declare const customToneMappingTypes: Record<number, string>;
213
- export declare const rendererBlades: {
214
- shadowMapType: string;
215
- toneMappingType: string;
216
- };
217
- export declare const setShadowMapType: (value: number) => void;
218
- export declare const setToneMappingType: (value: number) => void;
219
- export declare const customToneMappingBlade: {
220
- customToneMappingType: string;
221
- };
222
- export declare const setCustomToneMappingType: (value: number) => void;
223
- export declare const ssaoMaterialParams: string[];
224
- export declare const statsData: {
225
- triangles: string;
226
- geometries: string;
227
- textures: string;
228
- shaders: string;
229
- postPasses: string;
230
- drawCalls: string;
231
- rawDeltaTime: string;
232
- deltaTime: string;
233
- FPS: string;
234
- };
@@ -1,40 +0,0 @@
1
- export declare const envValues: {
2
- ambientLight: {
3
- ambientLightIntensity: number;
4
- ambientLightColor: {
5
- r: number;
6
- g: number;
7
- b: number;
8
- };
9
- };
10
- fog: {
11
- fogNear: number;
12
- fogFar: number;
13
- fogColor: {
14
- r: number;
15
- g: number;
16
- b: number;
17
- };
18
- };
19
- };
20
- export declare const envOptions: {
21
- ambientLight: {
22
- ambientLightIntensity: {
23
- min: number;
24
- max: number;
25
- step: number;
26
- };
27
- };
28
- fog: {
29
- fogNear: {
30
- min: number;
31
- max: number;
32
- step: number;
33
- };
34
- fogFar: {
35
- min: number;
36
- max: number;
37
- step: number;
38
- };
39
- };
40
- };