@configura/babylon-view 1.4.0 → 1.5.0-alpha.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.
Files changed (125) hide show
  1. package/LICENSE +201 -201
  2. package/README.md +1 -1
  3. package/dist/animation/AnimatableObject.d.ts +8 -8
  4. package/dist/animation/AnimatableObject.js +3 -3
  5. package/dist/animation/animator/Animator.d.ts +33 -33
  6. package/dist/animation/animator/Animator.js +58 -58
  7. package/dist/animation/animator/AnimatorEasing.d.ts +16 -16
  8. package/dist/animation/animator/AnimatorEasing.js +31 -31
  9. package/dist/animation/animator/AnimatorEasingMatrix.d.ts +14 -14
  10. package/dist/animation/animator/AnimatorEasingMatrix.js +16 -16
  11. package/dist/animation/animator/AnimatorHighlight.d.ts +16 -16
  12. package/dist/animation/animator/AnimatorHighlight.js +32 -32
  13. package/dist/animation/animator/AnimatorPointToPoint.d.ts +8 -8
  14. package/dist/animation/animator/AnimatorPointToPoint.js +14 -14
  15. package/dist/animation/animator/AnimatorQueue.d.ts +13 -13
  16. package/dist/animation/animator/AnimatorQueue.js +57 -57
  17. package/dist/animation/animator/AnimatorScale.d.ts +8 -8
  18. package/dist/animation/animator/AnimatorScale.js +13 -13
  19. package/dist/animation/animator/AnimatorSpin.d.ts +10 -10
  20. package/dist/animation/animator/AnimatorSpin.js +13 -13
  21. package/dist/animation/animator/EasingFunctions.d.ts +35 -35
  22. package/dist/animation/animator/EasingFunctions.js +137 -137
  23. package/dist/animation/coordinator/Coordinator.d.ts +28 -28
  24. package/dist/animation/coordinator/Coordinator.js +47 -47
  25. package/dist/animation/coordinator/CoordinatorDropAndSpin.d.ts +22 -22
  26. package/dist/animation/coordinator/CoordinatorDropAndSpin.js +133 -133
  27. package/dist/animation/coordinator/CoordinatorIdentity.d.ts +11 -11
  28. package/dist/animation/coordinator/CoordinatorIdentity.js +12 -12
  29. package/dist/animation/coordinator/CoordinatorNodeQueues.d.ts +18 -18
  30. package/dist/animation/coordinator/CoordinatorNodeQueues.js +50 -50
  31. package/dist/animation/coordinator/CoordinatorPulse.d.ts +21 -21
  32. package/dist/animation/coordinator/CoordinatorPulse.js +47 -47
  33. package/dist/animation/coordinator/CoordinatorPulseBounce.d.ts +14 -14
  34. package/dist/animation/coordinator/CoordinatorPulseBounce.js +40 -40
  35. package/dist/animation/coordinator/CoordinatorPulseHighlight.d.ts +13 -13
  36. package/dist/animation/coordinator/CoordinatorPulseHighlight.js +34 -34
  37. package/dist/animation/coordinator/CoordinatorPulseInflate.d.ts +14 -14
  38. package/dist/animation/coordinator/CoordinatorPulseInflate.js +30 -30
  39. package/dist/camera/CameraCreator.d.ts +5 -5
  40. package/dist/camera/CameraCreator.js +4 -4
  41. package/dist/camera/CfgArcRotateCameraPointersInput.d.ts +26 -26
  42. package/dist/camera/CfgArcRotateCameraPointersInput.js +264 -264
  43. package/dist/camera/CfgOrbitalCamera.d.ts +68 -68
  44. package/dist/camera/CfgOrbitalCamera.js +250 -250
  45. package/dist/camera/CfgOrbitalCameraControlProps.d.ts +6 -6
  46. package/dist/camera/CfgOrbitalCameraControlProps.js +3 -3
  47. package/dist/camera/GradingApplier.d.ts +3 -3
  48. package/dist/camera/GradingApplier.js +48 -48
  49. package/dist/engine/EngineCreator.d.ts +3 -3
  50. package/dist/engine/EngineCreator.js +10 -10
  51. package/dist/geometry/CfgGeometry.d.ts +29 -29
  52. package/dist/geometry/CfgGeometry.js +146 -146
  53. package/dist/geometry/CfgMesh.d.ts +10 -10
  54. package/dist/geometry/CfgMesh.js +38 -38
  55. package/dist/geometry/geoSplitter.d.ts +8 -8
  56. package/dist/geometry/geoSplitter.js +192 -192
  57. package/dist/geometry/stretch/CfgMorphTarget.d.ts +15 -15
  58. package/dist/geometry/stretch/CfgMorphTarget.js +65 -65
  59. package/dist/geometry/stretch/CfgStretchData.d.ts +114 -114
  60. package/dist/geometry/stretch/CfgStretchData.js +340 -340
  61. package/dist/geometry/stretch/CfgStretchMorphGeometry.d.ts +16 -16
  62. package/dist/geometry/stretch/CfgStretchMorphGeometry.js +95 -95
  63. package/dist/index.d.ts +13 -13
  64. package/dist/index.js +13 -13
  65. package/dist/light/CfgDirectionalLight.d.ts +8 -8
  66. package/dist/light/CfgDirectionalLight.js +18 -18
  67. package/dist/light/CfgHemisphericLight.d.ts +7 -7
  68. package/dist/light/CfgHemisphericLight.js +17 -17
  69. package/dist/light/CfgPointLight.d.ts +8 -8
  70. package/dist/light/CfgPointLight.js +18 -18
  71. package/dist/light/DefaultLightRig.d.ts +19 -19
  72. package/dist/light/DefaultLightRig.js +77 -77
  73. package/dist/light/LightRigCreator.d.ts +9 -9
  74. package/dist/light/LightRigCreator.js +3 -3
  75. package/dist/material/CfgMaterial.d.ts +68 -68
  76. package/dist/material/CfgMaterial.js +482 -482
  77. package/dist/material/DummyMaterialCreator.d.ts +4 -4
  78. package/dist/material/DummyMaterialCreator.js +15 -15
  79. package/dist/material/material.d.ts +18 -18
  80. package/dist/material/material.js +128 -128
  81. package/dist/material/texture.d.ts +14 -14
  82. package/dist/material/texture.js +306 -306
  83. package/dist/nodes/CfgContentRootNode.d.ts +19 -19
  84. package/dist/nodes/CfgContentRootNode.js +75 -75
  85. package/dist/nodes/CfgDeferredMeshNode.d.ts +55 -55
  86. package/dist/nodes/CfgDeferredMeshNode.js +377 -377
  87. package/dist/nodes/CfgProductNode.d.ts +126 -126
  88. package/dist/nodes/CfgProductNode.js +578 -578
  89. package/dist/nodes/CfgSymNode.d.ts +50 -50
  90. package/dist/nodes/CfgSymNode.js +249 -249
  91. package/dist/nodes/CfgSymRootNode.d.ts +45 -45
  92. package/dist/nodes/CfgSymRootNode.js +220 -220
  93. package/dist/nodes/CfgTransformNode.d.ts +33 -33
  94. package/dist/nodes/CfgTransformNode.js +83 -83
  95. package/dist/scene/SceneCreator.d.ts +6 -6
  96. package/dist/scene/SceneCreator.js +22 -22
  97. package/dist/utilities/CfgBoundingBox.d.ts +21 -21
  98. package/dist/utilities/CfgBoundingBox.js +81 -81
  99. package/dist/utilities/anchor/anchor.d.ts +51 -51
  100. package/dist/utilities/anchor/anchor.js +136 -136
  101. package/dist/utilities/anchor/anchorMap.d.ts +20 -20
  102. package/dist/utilities/anchor/anchorMap.js +111 -111
  103. package/dist/utilities/utilities3D.d.ts +70 -70
  104. package/dist/utilities/utilities3D.js +265 -265
  105. package/dist/utilities/utilitiesColor.d.ts +18 -18
  106. package/dist/utilities/utilitiesColor.js +48 -48
  107. package/dist/utilities/utilitiesImage.d.ts +6 -6
  108. package/dist/utilities/utilitiesImage.js +107 -107
  109. package/dist/utilities/utilitiesSymRootIdentifier.d.ts +7 -7
  110. package/dist/utilities/utilitiesSymRootIdentifier.js +26 -26
  111. package/dist/view/BaseView.d.ts +78 -78
  112. package/dist/view/BaseView.js +297 -297
  113. package/dist/view/BaseViewConfiguration.d.ts +32 -32
  114. package/dist/view/BaseViewConfiguration.js +10 -8
  115. package/dist/view/RenderEnv.d.ts +43 -43
  116. package/dist/view/RenderEnv.js +7 -7
  117. package/dist/view/SingleProductDefaultCameraView.d.ts +33 -33
  118. package/dist/view/SingleProductDefaultCameraView.js +141 -141
  119. package/dist/view/SingleProductDefaultCameraViewConfiguration.d.ts +46 -46
  120. package/dist/view/SingleProductDefaultCameraViewConfiguration.js +11 -11
  121. package/dist/view/SingleProductView.d.ts +42 -42
  122. package/dist/view/SingleProductView.js +206 -206
  123. package/dist/view/SingleProductViewConfiguration.d.ts +32 -32
  124. package/dist/view/SingleProductViewConfiguration.js +19 -19
  125. package/package.json +5 -5
@@ -1,297 +1,297 @@
1
- import "@babylonjs/core/Debug/debugLayer.js";
2
- import { Matrix } from "@babylonjs/core/Maths/math.vector.js";
3
- import { AssetsManager } from "@babylonjs/core/Misc/assetsManager.js";
4
- import { SymGetMeshEnv } from "@configura/web-core/dist/cm/format/cmsym/components/SymGetMeshEnv.js";
5
- import { DexManager } from "@configura/web-core/dist/cm/format/dex/DexManager.js";
6
- import { AggregatedLoadingObservable, isAbortError, Observable, PromiseCache, toError, } from "@configura/web-utilities";
7
- import { getDefaultGradingApplier } from "../camera/GradingApplier.js";
8
- import { getDefaultEngine } from "../engine/EngineCreator.js";
9
- import { getDefaultLightRigCreator } from "../light/DefaultLightRig.js";
10
- import { defaultDummyMaterialCreator, } from "../material/DummyMaterialCreator.js";
11
- import { CfgContentRootNode } from "../nodes/CfgContentRootNode.js";
12
- import { getDefaultScene } from "../scene/SceneCreator.js";
13
- import { CfgBoundingBox } from "../utilities/CfgBoundingBox.js";
14
- import { cameraConfigurationPropsEquals, DetailLevel, } from "./BaseViewConfiguration.js";
15
- // CET coordinate system is Z-up, Babylon is Y-up, both are right handed
16
- // CET coordinates are used in the CfgProductNode and all its children.
17
- export const CET_TO_BABYLON_MATRIX = Matrix.RotationX(-Math.PI / 2);
18
- export const BABYLON_TO_CET_MATRIX = Matrix.RotationX(Math.PI / 2);
19
- const ENABLE_CONTINUOUS_RENDER = false;
20
- const CULL_EMPTY_NODES = true;
21
- /**
22
- * Load the highest quality meshes by default.
23
- *
24
- * @remarks We only use "base" as a last fallback. The reason is that even though this LOD level
25
- * could theoretically include a better version than "super" it is not normally included in CmSym
26
- * files and never used by CET, which makes it unpredictable. See WRD-387 for a case where it
27
- * caused problems when it was the first choice.
28
- */
29
- export const DEFAULT_DETAIL_LEVELS = [
30
- DetailLevel.super,
31
- DetailLevel.high,
32
- DetailLevel.medium,
33
- DetailLevel.low,
34
- DetailLevel.base,
35
- ];
36
- /**
37
- * @remarks As this cache contains items read from a another resource undefined is an acceptable
38
- * cache value representing a value that will not be anything but undefined no mather how many
39
- * times you try.
40
- */
41
- const geometryCache = new PromiseCache((i1, i2) => i1.component === i2.component &&
42
- i1.stretchDatasHash === i2.stretchDatasHash &&
43
- i1.uvMapperHash === i2.uvMapperHash);
44
- const symNodeCache = new PromiseCache();
45
- const materialCache = new PromiseCache();
46
- const textureImageCache = new PromiseCache();
47
- const derivedNormalMapCache = new PromiseCache();
48
- // Singletons
49
- const SYM_MESH_ENV = new SymGetMeshEnv();
50
- const DEX_MANAGER = new DexManager("BabylonCanvas");
51
- function getAssetManager(scene) {
52
- const assetsManager = new AssetsManager(scene);
53
- assetsManager.useDefaultLoadingScreen = false;
54
- return assetsManager;
55
- }
56
- export class BaseView {
57
- constructor(options) {
58
- this._destroyed = false;
59
- this._inspectorActive = false;
60
- this._needsRenderFrame = false;
61
- this._dumpNextFrameToImage = [];
62
- this._enginePauseSemaphore = 0;
63
- this._errorObservable = new Observable();
64
- this._loadingObservable = new AggregatedLoadingObservable();
65
- this._renderEnvironmentObservable = new Observable();
66
- // To be able to add/remove event listeners without binding them
67
- this._boundNotifyCameraListeners = () => {
68
- this.notifyCameraListeners();
69
- this.scheduleRerender();
70
- };
71
- this.notifyError = (e) => {
72
- if (isAbortError(e)) {
73
- return;
74
- }
75
- this._errorObservable.notifyAll(toError(e));
76
- };
77
- const { canvas, cameraCreator, engineCreator, lightRigCreator, sceneCreator, gradingApplier, dummyMaterialCreator, } = options;
78
- this._canvas = canvas;
79
- // This workaround prevents canvas long taps to select text near the canvas on iOS
80
- for (const eventName of [
81
- "click",
82
- "dblclick",
83
- "mousedown",
84
- "mouseup",
85
- "mousemove",
86
- "touchstart",
87
- "touchend",
88
- "touchmove",
89
- ]) {
90
- canvas.addEventListener(eventName, (event) => {
91
- event.preventDefault();
92
- });
93
- }
94
- const { width, height } = canvas.getBoundingClientRect();
95
- this._viewportSize = [width, height];
96
- const engine = (engineCreator || getDefaultEngine)(canvas, width, height);
97
- const scene = (sceneCreator || getDefaultScene)(engine);
98
- scene.useRightHandedSystem = true;
99
- const camera = cameraCreator(scene, canvas);
100
- (gradingApplier || getDefaultGradingApplier())(camera);
101
- this._scene = scene;
102
- this._engine = engine;
103
- this._camera = camera;
104
- const lightRig = (lightRigCreator || getDefaultLightRigCreator(true))(scene, camera);
105
- this._lightRig = lightRig;
106
- this._dummyMaterialCreator = dummyMaterialCreator || defaultDummyMaterialCreator;
107
- this._renderEnvironment = {
108
- scene,
109
- assetsManager: getAssetManager(scene),
110
- geometryCache,
111
- symNodeCache,
112
- materialCache,
113
- textureImageCache,
114
- derivedNormalMapCache,
115
- lightRig,
116
- dummyMaterial: this._dummyMaterialCreator(scene, lightRig.lightCount),
117
- scheduleRerender: this.scheduleRerender.bind(this),
118
- notifyError: this.notifyError.bind(this),
119
- symMeshEnv: SYM_MESH_ENV,
120
- dexManager: DEX_MANAGER,
121
- cullEmptyNodes: CULL_EMPTY_NODES,
122
- allowedDetailLevels: DEFAULT_DETAIL_LEVELS,
123
- };
124
- this._contentRoot = new CfgContentRootNode(this._renderEnvironment);
125
- this.setConfiguration({}); // Init the RenderEnv
126
- requestAnimationFrame(this.browserTick.bind(this));
127
- // NOTE: As of now we mix view and projection-related properties when we notify, so let's subscribe to both
128
- this._camera.onViewMatrixChangedObservable.add(this._boundNotifyCameraListeners);
129
- this._camera.onProjectionMatrixChangedObservable.add(this._boundNotifyCameraListeners);
130
- }
131
- destroy() {
132
- this._destroyed = true;
133
- this._camera.onViewMatrixChangedObservable.removeCallback(this._boundNotifyCameraListeners);
134
- this._camera.onProjectionMatrixChangedObservable.removeCallback(this._boundNotifyCameraListeners);
135
- this._hideInspector();
136
- this._camera.dispose();
137
- geometryCache.clear();
138
- materialCache.clear();
139
- }
140
- pauseRendering() {
141
- this._enginePauseSemaphore += 1;
142
- }
143
- resumeRendering() {
144
- this._enginePauseSemaphore = Math.max(0, this._enginePauseSemaphore - 1);
145
- }
146
- _hideInspector() {
147
- // The debugLayer getter initializes the backing field _debugLayer, but if we do that before
148
- // "@babylonjs/inspector" is loaded it will not work properly.
149
- if (this._scene._debugLayer === undefined) {
150
- return;
151
- }
152
- this._scene.debugLayer.hide();
153
- }
154
- showInspector(target) {
155
- if (target === undefined) {
156
- this._hideInspector();
157
- }
158
- else {
159
- if (!this._scene.debugLayer.BJSINSPECTOR) {
160
- console.warn("@babylonjs/inspector has to be loaded before the Inspector can be shown.");
161
- return;
162
- }
163
- this._scene.debugLayer.show({
164
- globalRoot: target,
165
- enableClose: false,
166
- });
167
- }
168
- this._inspectorActive = target !== undefined;
169
- }
170
- setConfiguration(configuration) {
171
- if (configuration.allowedDetailLevels !== undefined) {
172
- this._renderEnvironment.allowedDetailLevels = configuration.allowedDetailLevels;
173
- }
174
- this._renderEnvironmentObservable.notifyAll(this._renderEnvironment);
175
- }
176
- get cameraConfiguration() {
177
- return {
178
- nearClipping: this._camera.minZ,
179
- farClipping: this._camera.maxZ,
180
- position: this._camera.position.clone(),
181
- contentPosition: this.contentCenter,
182
- fov: this._camera.fov,
183
- aspect: this._engine.getScreenAspectRatio(),
184
- };
185
- }
186
- get contentCenter() {
187
- const { min, max } = this._contentRoot.getHierarchyBoundingVectors();
188
- return new CfgBoundingBox(min, max).center;
189
- }
190
- notifyCameraListeners() {
191
- if (this._cameraConfigurationObservable === undefined) {
192
- return;
193
- }
194
- const cameraConf = this.cameraConfiguration;
195
- if (this._previousCameraConf !== undefined &&
196
- cameraConfigurationPropsEquals(this._previousCameraConf, cameraConf)) {
197
- return;
198
- }
199
- this._cameraConfigurationObservable.notifyAll(cameraConf, this._cameraConfigurationObservable);
200
- this._previousCameraConf = cameraConf;
201
- }
202
- addEventListener(event, listener) {
203
- switch (event) {
204
- case "cameraConfiguration":
205
- if (this._cameraConfigurationObservable === undefined) {
206
- this._cameraConfigurationObservable =
207
- new Observable();
208
- }
209
- this._cameraConfigurationObservable.listen(listener);
210
- break;
211
- case "renderEnv":
212
- const l = listener;
213
- this._renderEnvironmentObservable.listen(l);
214
- l(this._renderEnvironment);
215
- break;
216
- case "error":
217
- this._errorObservable.listen(listener);
218
- break;
219
- case "loading":
220
- this._loadingObservable.listen(listener);
221
- break;
222
- default:
223
- throw Error(`Unknown event-type ${event}`);
224
- }
225
- }
226
- removeEventListener(event, listener) {
227
- switch (event) {
228
- case "cameraConfiguration":
229
- if (this._cameraConfigurationObservable === undefined) {
230
- return;
231
- }
232
- this._cameraConfigurationObservable.stopListen(listener);
233
- break;
234
- case "renderEnv":
235
- this._renderEnvironmentObservable.stopListen(listener);
236
- break;
237
- case "error":
238
- this._errorObservable.stopListen(listener);
239
- break;
240
- case "loading":
241
- this._loadingObservable.stopListen(listener);
242
- break;
243
- default:
244
- throw Error(`Unknown event-type ${event}`);
245
- }
246
- }
247
- scheduleRerender(dumpNextFrameToImage) {
248
- this._needsRenderFrame = true;
249
- if (dumpNextFrameToImage !== undefined) {
250
- this._dumpNextFrameToImage.push(dumpNextFrameToImage);
251
- }
252
- }
253
- isContinuousRender() {
254
- return ENABLE_CONTINUOUS_RENDER || this._inspectorActive;
255
- }
256
- getNeededFrameRender(time) {
257
- return this._needsRenderFrame || this.isContinuousRender();
258
- }
259
- browserTick(time) {
260
- if (this._destroyed) {
261
- return;
262
- }
263
- this._camera.update();
264
- if (this._enginePauseSemaphore === 0 && this.getNeededFrameRender(time)) {
265
- this.renderFrame(time);
266
- }
267
- requestAnimationFrame(this.browserTick.bind(this));
268
- }
269
- renderFrame(time) {
270
- if (this._viewportSize === undefined) {
271
- console.warn("Size not inited");
272
- return;
273
- }
274
- this._needsRenderFrame = false;
275
- this.refreshCameraNearFar();
276
- this._engine.beginFrame();
277
- this._scene.render();
278
- this._engine.endFrame();
279
- if (0 < this._dumpNextFrameToImage.length) {
280
- const dataUrl = this._canvas.toDataURL("image/png");
281
- this._dumpNextFrameToImage.forEach((c) => c(dataUrl));
282
- this._dumpNextFrameToImage.length = 0;
283
- }
284
- }
285
- resizeViewport(width, height) {
286
- this._viewportSize = [width, height];
287
- this._canvas.style.width = Math.floor(width) + "px";
288
- this._canvas.style.height = Math.floor(height) + "px";
289
- this._engine.resize();
290
- this.handleSizing(false);
291
- this.scheduleRerender();
292
- }
293
- // Exists to be overridden
294
- handleSizing(_force) { }
295
- // Exists to be overridden
296
- refreshCameraNearFar() { }
297
- }
1
+ import "@babylonjs/core/Debug/debugLayer.js";
2
+ import { Matrix } from "@babylonjs/core/Maths/math.vector.js";
3
+ import { AssetsManager } from "@babylonjs/core/Misc/assetsManager.js";
4
+ import { SymGetMeshEnv } from "@configura/web-core/dist/cm/format/cmsym/components/SymGetMeshEnv.js";
5
+ import { DexManager } from "@configura/web-core/dist/cm/format/dex/DexManager.js";
6
+ import { AggregatedLoadingObservable, isAbortError, Observable, PromiseCache, toError, } from "@configura/web-utilities";
7
+ import { getDefaultGradingApplier } from "../camera/GradingApplier.js";
8
+ import { getDefaultEngine } from "../engine/EngineCreator.js";
9
+ import { getDefaultLightRigCreator } from "../light/DefaultLightRig.js";
10
+ import { defaultDummyMaterialCreator, } from "../material/DummyMaterialCreator.js";
11
+ import { CfgContentRootNode } from "../nodes/CfgContentRootNode.js";
12
+ import { getDefaultScene } from "../scene/SceneCreator.js";
13
+ import { CfgBoundingBox } from "../utilities/CfgBoundingBox.js";
14
+ import { cameraConfigurationPropsEquals, DetailLevel, } from "./BaseViewConfiguration.js";
15
+ // CET coordinate system is Z-up, Babylon is Y-up, both are right handed
16
+ // CET coordinates are used in the CfgProductNode and all its children.
17
+ export const CET_TO_BABYLON_MATRIX = Matrix.RotationX(-Math.PI / 2);
18
+ export const BABYLON_TO_CET_MATRIX = Matrix.RotationX(Math.PI / 2);
19
+ const ENABLE_CONTINUOUS_RENDER = false;
20
+ const CULL_EMPTY_NODES = true;
21
+ /**
22
+ * Load the highest quality meshes by default.
23
+ *
24
+ * @remarks We only use "base" as a last fallback. The reason is that even though this LOD level
25
+ * could theoretically include a better version than "super" it is not normally included in CmSym
26
+ * files and never used by CET, which makes it unpredictable. See WRD-387 for a case where it
27
+ * caused problems when it was the first choice.
28
+ */
29
+ export const DEFAULT_DETAIL_LEVELS = [
30
+ DetailLevel.super,
31
+ DetailLevel.high,
32
+ DetailLevel.medium,
33
+ DetailLevel.low,
34
+ DetailLevel.base,
35
+ ];
36
+ /**
37
+ * @remarks As this cache contains items read from a another resource undefined is an acceptable
38
+ * cache value representing a value that will not be anything but undefined no mather how many
39
+ * times you try.
40
+ */
41
+ const geometryCache = new PromiseCache((i1, i2) => i1.component === i2.component &&
42
+ i1.stretchDatasHash === i2.stretchDatasHash &&
43
+ i1.uvMapperHash === i2.uvMapperHash);
44
+ const symNodeCache = new PromiseCache();
45
+ const materialCache = new PromiseCache();
46
+ const textureImageCache = new PromiseCache();
47
+ const derivedNormalMapCache = new PromiseCache();
48
+ // Singletons
49
+ const SYM_MESH_ENV = new SymGetMeshEnv();
50
+ const DEX_MANAGER = new DexManager("BabylonCanvas");
51
+ function getAssetManager(scene) {
52
+ const assetsManager = new AssetsManager(scene);
53
+ assetsManager.useDefaultLoadingScreen = false;
54
+ return assetsManager;
55
+ }
56
+ export class BaseView {
57
+ constructor(options) {
58
+ this._destroyed = false;
59
+ this._inspectorActive = false;
60
+ this._needsRenderFrame = false;
61
+ this._dumpNextFrameToImage = [];
62
+ this._enginePauseSemaphore = 0;
63
+ this._errorObservable = new Observable();
64
+ this._loadingObservable = new AggregatedLoadingObservable();
65
+ this._renderEnvironmentObservable = new Observable();
66
+ // To be able to add/remove event listeners without binding them
67
+ this._boundNotifyCameraListeners = () => {
68
+ this.notifyCameraListeners();
69
+ this.scheduleRerender();
70
+ };
71
+ this.notifyError = (e) => {
72
+ if (isAbortError(e)) {
73
+ return;
74
+ }
75
+ this._errorObservable.notifyAll(toError(e));
76
+ };
77
+ const { canvas, cameraCreator, engineCreator, lightRigCreator, sceneCreator, gradingApplier, dummyMaterialCreator, } = options;
78
+ this._canvas = canvas;
79
+ // This workaround prevents canvas long taps to select text near the canvas on iOS
80
+ for (const eventName of [
81
+ "click",
82
+ "dblclick",
83
+ "mousedown",
84
+ "mouseup",
85
+ "mousemove",
86
+ "touchstart",
87
+ "touchend",
88
+ "touchmove",
89
+ ]) {
90
+ canvas.addEventListener(eventName, (event) => {
91
+ event.preventDefault();
92
+ });
93
+ }
94
+ const { width, height } = canvas.getBoundingClientRect();
95
+ this._viewportSize = [width, height];
96
+ const engine = (engineCreator || getDefaultEngine)(canvas, width, height);
97
+ const scene = (sceneCreator || getDefaultScene)(engine);
98
+ scene.useRightHandedSystem = true;
99
+ const camera = cameraCreator(scene, canvas);
100
+ (gradingApplier || getDefaultGradingApplier())(camera);
101
+ this._scene = scene;
102
+ this._engine = engine;
103
+ this._camera = camera;
104
+ const lightRig = (lightRigCreator || getDefaultLightRigCreator(true))(scene, camera);
105
+ this._lightRig = lightRig;
106
+ this._dummyMaterialCreator = dummyMaterialCreator || defaultDummyMaterialCreator;
107
+ this._renderEnvironment = {
108
+ scene,
109
+ assetsManager: getAssetManager(scene),
110
+ geometryCache,
111
+ symNodeCache,
112
+ materialCache,
113
+ textureImageCache,
114
+ derivedNormalMapCache,
115
+ lightRig,
116
+ dummyMaterial: this._dummyMaterialCreator(scene, lightRig.lightCount),
117
+ scheduleRerender: this.scheduleRerender.bind(this),
118
+ notifyError: this.notifyError.bind(this),
119
+ symMeshEnv: SYM_MESH_ENV,
120
+ dexManager: DEX_MANAGER,
121
+ cullEmptyNodes: CULL_EMPTY_NODES,
122
+ allowedDetailLevels: DEFAULT_DETAIL_LEVELS,
123
+ };
124
+ this._contentRoot = new CfgContentRootNode(this._renderEnvironment);
125
+ this.setConfiguration({}); // Init the RenderEnv
126
+ requestAnimationFrame(this.browserTick.bind(this));
127
+ // NOTE: As of now we mix view and projection-related properties when we notify, so let's subscribe to both
128
+ this._camera.onViewMatrixChangedObservable.add(this._boundNotifyCameraListeners);
129
+ this._camera.onProjectionMatrixChangedObservable.add(this._boundNotifyCameraListeners);
130
+ }
131
+ destroy() {
132
+ this._destroyed = true;
133
+ this._camera.onViewMatrixChangedObservable.removeCallback(this._boundNotifyCameraListeners);
134
+ this._camera.onProjectionMatrixChangedObservable.removeCallback(this._boundNotifyCameraListeners);
135
+ this._hideInspector();
136
+ this._camera.dispose();
137
+ geometryCache.clear();
138
+ materialCache.clear();
139
+ }
140
+ pauseRendering() {
141
+ this._enginePauseSemaphore += 1;
142
+ }
143
+ resumeRendering() {
144
+ this._enginePauseSemaphore = Math.max(0, this._enginePauseSemaphore - 1);
145
+ }
146
+ _hideInspector() {
147
+ // The debugLayer getter initializes the backing field _debugLayer, but if we do that before
148
+ // "@babylonjs/inspector" is loaded it will not work properly.
149
+ if (this._scene._debugLayer === undefined) {
150
+ return;
151
+ }
152
+ this._scene.debugLayer.hide();
153
+ }
154
+ showInspector(target) {
155
+ if (target === undefined) {
156
+ this._hideInspector();
157
+ }
158
+ else {
159
+ if (!this._scene.debugLayer.BJSINSPECTOR) {
160
+ console.warn("@babylonjs/inspector has to be loaded before the Inspector can be shown.");
161
+ return;
162
+ }
163
+ this._scene.debugLayer.show({
164
+ globalRoot: target,
165
+ enableClose: false,
166
+ });
167
+ }
168
+ this._inspectorActive = target !== undefined;
169
+ }
170
+ setConfiguration(configuration) {
171
+ if (configuration.allowedDetailLevels !== undefined) {
172
+ this._renderEnvironment.allowedDetailLevels = configuration.allowedDetailLevels;
173
+ }
174
+ this._renderEnvironmentObservable.notifyAll(this._renderEnvironment);
175
+ }
176
+ get cameraConfiguration() {
177
+ return {
178
+ nearClipping: this._camera.minZ,
179
+ farClipping: this._camera.maxZ,
180
+ position: this._camera.position.clone(),
181
+ contentPosition: this.contentCenter,
182
+ fov: this._camera.fov,
183
+ aspect: this._engine.getScreenAspectRatio(),
184
+ };
185
+ }
186
+ get contentCenter() {
187
+ const { min, max } = this._contentRoot.getHierarchyBoundingVectors();
188
+ return new CfgBoundingBox(min, max).center;
189
+ }
190
+ notifyCameraListeners() {
191
+ if (this._cameraConfigurationObservable === undefined) {
192
+ return;
193
+ }
194
+ const cameraConf = this.cameraConfiguration;
195
+ if (this._previousCameraConf !== undefined &&
196
+ cameraConfigurationPropsEquals(this._previousCameraConf, cameraConf)) {
197
+ return;
198
+ }
199
+ this._cameraConfigurationObservable.notifyAll(cameraConf, this._cameraConfigurationObservable);
200
+ this._previousCameraConf = cameraConf;
201
+ }
202
+ addEventListener(event, listener) {
203
+ switch (event) {
204
+ case "cameraConfiguration":
205
+ if (this._cameraConfigurationObservable === undefined) {
206
+ this._cameraConfigurationObservable =
207
+ new Observable();
208
+ }
209
+ this._cameraConfigurationObservable.listen(listener);
210
+ break;
211
+ case "renderEnv":
212
+ const l = listener;
213
+ this._renderEnvironmentObservable.listen(l);
214
+ l(this._renderEnvironment);
215
+ break;
216
+ case "error":
217
+ this._errorObservable.listen(listener);
218
+ break;
219
+ case "loading":
220
+ this._loadingObservable.listen(listener);
221
+ break;
222
+ default:
223
+ throw Error(`Unknown event-type ${event}`);
224
+ }
225
+ }
226
+ removeEventListener(event, listener) {
227
+ switch (event) {
228
+ case "cameraConfiguration":
229
+ if (this._cameraConfigurationObservable === undefined) {
230
+ return;
231
+ }
232
+ this._cameraConfigurationObservable.stopListen(listener);
233
+ break;
234
+ case "renderEnv":
235
+ this._renderEnvironmentObservable.stopListen(listener);
236
+ break;
237
+ case "error":
238
+ this._errorObservable.stopListen(listener);
239
+ break;
240
+ case "loading":
241
+ this._loadingObservable.stopListen(listener);
242
+ break;
243
+ default:
244
+ throw Error(`Unknown event-type ${event}`);
245
+ }
246
+ }
247
+ scheduleRerender(dumpNextFrameToImage) {
248
+ this._needsRenderFrame = true;
249
+ if (dumpNextFrameToImage !== undefined) {
250
+ this._dumpNextFrameToImage.push(dumpNextFrameToImage);
251
+ }
252
+ }
253
+ isContinuousRender() {
254
+ return ENABLE_CONTINUOUS_RENDER || this._inspectorActive;
255
+ }
256
+ getNeededFrameRender(time) {
257
+ return this._needsRenderFrame || this.isContinuousRender();
258
+ }
259
+ browserTick(time) {
260
+ if (this._destroyed) {
261
+ return;
262
+ }
263
+ this._camera.update();
264
+ if (this._enginePauseSemaphore === 0 && this.getNeededFrameRender(time)) {
265
+ this.renderFrame(time);
266
+ }
267
+ requestAnimationFrame(this.browserTick.bind(this));
268
+ }
269
+ renderFrame(time) {
270
+ if (this._viewportSize === undefined) {
271
+ console.warn("Size not inited");
272
+ return;
273
+ }
274
+ this._needsRenderFrame = false;
275
+ this.refreshCameraNearFar();
276
+ this._engine.beginFrame();
277
+ this._scene.render();
278
+ this._engine.endFrame();
279
+ if (0 < this._dumpNextFrameToImage.length) {
280
+ const dataUrl = this._canvas.toDataURL("image/png");
281
+ this._dumpNextFrameToImage.forEach((c) => c(dataUrl));
282
+ this._dumpNextFrameToImage.length = 0;
283
+ }
284
+ }
285
+ resizeViewport(width, height) {
286
+ this._viewportSize = [width, height];
287
+ this._canvas.style.width = Math.floor(width) + "px";
288
+ this._canvas.style.height = Math.floor(height) + "px";
289
+ this._engine.resize();
290
+ this.handleSizing(false);
291
+ this.scheduleRerender();
292
+ }
293
+ // Exists to be overridden
294
+ handleSizing(_force) { }
295
+ // Exists to be overridden
296
+ refreshCameraNearFar() { }
297
+ }
@@ -1,33 +1,33 @@
1
- import { Vector3 } from "@babylonjs/core/Maths/math.vector.js";
2
- import { DetailLevel } from "@configura/web-core/dist/cm/geometry/DetailMask.js";
3
- import { EventListener } from "@configura/web-utilities";
4
- import { RenderEnv } from "./RenderEnv.js";
5
- export { DetailLevel } from "@configura/web-core/dist/cm/geometry/DetailMask.js";
6
- /**
7
- * @param allowedDetailLevels Optionally controls the detail level (LOD, level of detail) allowed
8
- * when loading the 3D models. Provide a single DetailLevel or an array of them if you want to
9
- * override the default selection and/or order. The order of the array defines the priority since
10
- * models are not guaranteed to have all DetailLevels available.
11
- */
12
- export interface BaseViewConfiguration {
13
- allowedDetailLevels?: DetailLevel | DetailLevel[];
14
- }
15
- export declare type BaseViewEventListener<K extends keyof BaseViewEventMap> = EventListener<BaseViewEventMap, K>;
16
- export declare type ScheduleRerender = (dumpNextFrameToImage?: ImageDumpCallback) => void;
17
- export declare type ImageDumpCallback = (imageDataUrl: string) => void;
18
- export interface BaseViewEventMap {
19
- renderEnv: RenderEnv;
20
- error: Error;
21
- loading: boolean;
22
- cameraConfiguration: CameraConfigurationProps;
23
- }
24
- export interface CameraConfigurationProps {
25
- nearClipping: number;
26
- farClipping: number;
27
- position: Vector3;
28
- contentPosition: Vector3;
29
- fov: number;
30
- aspect: number;
31
- }
32
- export declare function cameraConfigurationPropsEquals(left: CameraConfigurationProps, right: CameraConfigurationProps): boolean;
1
+ import { Vector3 } from "@babylonjs/core/Maths/math.vector.js";
2
+ import { DetailLevel } from "@configura/web-core/dist/cm/geometry/DetailMask.js";
3
+ import { EventListener } from "@configura/web-utilities";
4
+ import { RenderEnv } from "./RenderEnv.js";
5
+ export { DetailLevel } from "@configura/web-core/dist/cm/geometry/DetailMask.js";
6
+ /**
7
+ * @param allowedDetailLevels Optionally controls the detail level (LOD, level of detail) allowed
8
+ * when loading the 3D models. Provide a single DetailLevel or an array of them if you want to
9
+ * override the default selection and/or order. The order of the array defines the priority since
10
+ * models are not guaranteed to have all DetailLevels available.
11
+ */
12
+ export interface BaseViewConfiguration {
13
+ allowedDetailLevels?: DetailLevel | DetailLevel[];
14
+ }
15
+ export declare type BaseViewEventListener<K extends keyof BaseViewEventMap> = EventListener<BaseViewEventMap, K>;
16
+ export declare type ScheduleRerender = (dumpNextFrameToImage?: ImageDumpCallback) => void;
17
+ export declare type ImageDumpCallback = (imageDataUrl: string) => void;
18
+ export interface BaseViewEventMap {
19
+ renderEnv: RenderEnv;
20
+ error: Error;
21
+ loading: boolean;
22
+ cameraConfiguration: CameraConfigurationProps;
23
+ }
24
+ export interface CameraConfigurationProps {
25
+ nearClipping: number;
26
+ farClipping: number;
27
+ position: Vector3;
28
+ contentPosition: Vector3;
29
+ fov: number;
30
+ aspect: number;
31
+ }
32
+ export declare function cameraConfigurationPropsEquals(left: CameraConfigurationProps, right: CameraConfigurationProps): boolean;
33
33
  //# sourceMappingURL=BaseViewConfiguration.d.ts.map