redhotmagma-visualization 1.44.10 → 1.45.0

package/src/Constants.js

@@ -8,6 +8,7 @@ export const EventTypes = {
   LoadStart: "Visualization/LoadStart",
   LoadFinished: "Visualization/LoadFinished",
   LoadError: "Visualization/LoadError",
+  EmptySceneError: "Visualization/EmptySceneError",
   Zoomed: "Visualization/Zoomed",
   HoverIn: "Visualization/HoverIn",
   HoverOut: "Visualization/HoverOut",

package/src/DevApp.js

@@ -332,6 +332,18 @@ const modelData = {
         },
       },
     },
+    BrokenModel: {
+      designAreaList: [],
+      configuration: {
+        visualizationData: {
+          sceneData: [
+            { model: "models/3d/BrokenModel/MissingBuffer.gltf" },
+            { model: "models/3d/BrokenModel/MissingImages.gltf" },
+            { model: "models/3d/BrokenModel/WorkingPart.gltf" },
+          ],
+        },
+      },
+    },
   },
 };
 

package/src/Three/Three2D.js

@@ -16,8 +16,8 @@ import {
   WebGLRenderer,
   BufferGeometry,
   Float32BufferAttribute,
-  DoubleSide,
-} from "three";
+  DoubleSide, LinearSRGBColorSpace,
+} from 'three';
 import TWEEN from "@tweenjs/tween.js";
 import get from "lodash/get";
 import first from "lodash/first";
@@ -118,6 +118,7 @@ export class Three2D extends ThreeBase {
       depth: true, // needed only for the admin area, consider to make it configurable
     });
     renderer.setPixelRatio(window.devicePixelRatio ? window.devicePixelRatio : 1);
+    renderer.outputColorSpace = LinearSRGBColorSpace;
     return renderer;
   }
 
@@ -856,7 +857,7 @@ export class Three2D extends ThreeBase {
     };
   }
 
-  async getScreenshots(callback, { designViewList, areaList, variantList, size }) {
+  async getScreenshots(callback, { designViewList, areaList, variantList, size } = {}) {
     if (!this.renderer) {
       return callback({});
     }

package/src/Three/Three3D.js

@@ -15,9 +15,6 @@ import first from "lodash/first";
 import findIndex from "lodash/findIndex";
 
 import { ThreeBase, onProgress } from "./ThreeBase";
-import MTLLoader from "./Loaders/MTLLoader";
-import OBJLoader from "./Loaders/OBJLoader";
-import ColladaLoader from "./Loaders/ColladaLoader";
 
 import { initTextureCanvas } from "../Utils/initTextureCanvas";
 import { createWorkingCanvas } from "../Utils/createCanvas";
@@ -28,9 +25,12 @@ import { disposeMaterial } from "../Utils/disposeMaterial";
 import { rememberCameraViewOffset } from "../Utils/rememberCameraViewOffset";
 import { restrictOrbitControls } from "../Utils/restrictCameraMovement";
 import { isMobileDevice } from "../Utils/isMobileDevice";
-import OrbitControls from "./Controls/OrbitControls";
 import { createZoomHandler } from "../CommonUtils/pointerEvent";
 import { createTextureBuilder } from "../Utils/TextureBuilder/createTextureBuilder";
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
+import { ColladaLoader } from "three/examples/jsm/loaders/ColladaLoader";
+import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
+import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader";
 
 export const MAX_DISTANCE_MULTIPLIER = 1.1;
 export const MIN_DISTANCE_MULTIPLIER = 0.1;
@@ -580,10 +580,13 @@ export class Three3D extends ThreeBase {
     return () => {};
   }
 
-  async getScreenshots(callback, { viewList, variantList, size }) {
+  async getScreenshots(callback, { viewList, variantList, size } = {}) {
     if (!this.renderer) {
       return callback({});
     }
+    if (!variantList) {
+      variantList = ["default"];
+    }
     this._screenshottingInProgress = true;
     this.endAnimation();
     await this.animationRunning();
@@ -619,10 +622,12 @@ export class Three3D extends ThreeBase {
     const height = size?.height || 768;
 
     const screenshots = {};
-    const views = this.screenshotViews || this.cameraViews;
+    const views = { ...this.cameraViews, ...this.screenshotViews };
     // if the viewList option is provided, use it as keys instead of the list of all views
     const viewKeyList =
-      viewList instanceof Array && viewList.length > 0 ? viewList : Object.keys(views);
+      viewList instanceof Array && viewList.length > 0
+        ? viewList.filter(viewKey => views[viewKey])
+        : Object.keys(views);
 
     for (let variant of variantList) {
       if (this._abortScreenshotting) {
@@ -701,9 +706,11 @@ export class Three3D extends ThreeBase {
       ? this.findMaterialByName(materialName)
       : first(this._customizableMaterials);
     if (!material || !material.map || !material.map.image) {
-      throw new Error(
+      // eslint-disable-next-line no-console
+      console.error(
         `Cannot get drawing context for material: ${materialName}! Is it prepared already?`
       );
+      return;
     }
 
     const { ctx, canvas, originalImage, texture } = this.getCanvasContextForTexture(material.map);

package/src/Three/Three3DScene.js

@@ -6,6 +6,7 @@ import {
   Clock,
   Color,
   DirectionalLight,
+  DoubleSide,
   Group,
   ImageLoader,
   LoadingManager,
@@ -14,16 +15,13 @@ import {
   Object3D,
   PCFSoftShadowMap,
   PerspectiveCamera,
-  PlaneBufferGeometry,
+  PlaneGeometry,
   PMREMGenerator,
-  Quaternion,
   Scene,
   ShadowMaterial,
   Sphere,
   SphereGeometry,
-  sRGBEncoding,
   Texture,
-  UnsignedByteType,
   Vector3,
   WebGLRenderer,
 } from "three";
@@ -41,6 +39,9 @@ import findIndex from "lodash/findIndex";
 import merge from "lodash/merge";
 import createBakedShadow from "../Utils/createBakedShadow";
 import setLightShadow from "../Utils/setLightShadow";
+import { EventTypes } from "../Constants";
+import { createImageRepository } from "../Utils/createImageRepository";
+import { createCache } from "../Utils/createCache";
 
 const UNSET = Symbol("unset");
 
@@ -126,8 +127,9 @@ function findImageBySrc(tree, src) {
   tree.traverse(({ material }) => {
     if (!result && material) {
       for (const value of Object.values(material)) {
-        if (value && value.isTexture && value.image && value.image.src === src) {
-          result = value.image;
+        if (value && value.isTexture && (value.image?.src === src || value.userData?.src === src)) {
+          result = value.source;
+          return result;
         }
       }
     }
@@ -263,7 +265,7 @@ export class Three3DScene extends Three3D {
   dirLightPosition = new Vector3(1, 1, 1).normalize();
 
   defaultCameraPosition = new Vector3(0, 1, 2).normalize();
-  defaultScreenshotPosition = new Vector3(0, 0, 1).normalize();
+  defaultScreenshotPosition = new Vector3(0, 1, 2).normalize();
 
   relativeCameraViews = {};
   relativeScreenshotViews = {};
@@ -284,6 +286,7 @@ export class Three3DScene extends Three3D {
       blurRadius: 6,
       shadowOpacity: 0.8,
     },
+    textureImageCacheSize: 20,
   };
 
   constructor(cfg = {}) {
@@ -315,14 +318,40 @@ export class Three3DScene extends Three3D {
   createLoader(options = {}) {
     const loadingManager = this.createLoadingManager(options);
 
-    const dracoLoader = new DRACOLoader();
-    dracoLoader.setDecoderPath("libs/draco/gltf/");
+    if (!this.dracoLoader) {
+      const dracoLoader = new (class PatchedDRACOLoader extends DRACOLoader {
+        decodeGeometry(buffer, taskConfig) {
+          return super.decodeGeometry(buffer, taskConfig).catch(e => {
+            // eslint-disable-next-line no-console
+            console.error(e.message || e.error);
+            // make sure an empty geometry is returned to not break the app
+            return { attributes: {} };
+          });
+        }
+      })();
+      dracoLoader.setDecoderPath("libs/draco/gltf/");
+      this.dracoLoader = dracoLoader;
+    }
 
     const loader = new GLTFLoader(loadingManager);
-    loader.setDRACOLoader(dracoLoader);
+    loader.setDRACOLoader(this.dracoLoader);
     return loader;
   }
 
+  getImageCache() {
+    if (!this._imageCache) {
+      this._imageCache = createCache(this.config.textureImageCacheSize);
+    }
+    return this._imageCache;
+  }
+
+  useImageRepository(imageLoader) {
+    return createImageRepository(
+      this.getImageCache(),
+      src => new Promise((resolve, reject) => imageLoader.load(src, resolve, undefined, reject))
+    );
+  }
+
   createImageLoader(options = {}) {
     const loadingManager = this.createLoadingManager(options);
     const imageLoader = new ImageLoader(loadingManager);
@@ -334,7 +363,6 @@ export class Three3DScene extends Three3D {
       alpha: true,
       antialias: true,
     });
-    renderer.outputEncoding = sRGBEncoding;
     renderer.shadowMap.enabled = true;
     renderer.shadowMap.type = PCFSoftShadowMap;
     renderer.toneMapping = ACESFilmicToneMapping;
@@ -362,7 +390,7 @@ export class Three3DScene extends Three3D {
       pmremGenerator.compileEquirectangularShader();
 
       this.envMapPromise = new Promise((resolve, reject) => {
-        new RGBELoader().setDataType(UnsignedByteType).load(
+        new RGBELoader().load(
           envMapURL,
           texture => {
             this.envMap = pmremGenerator.fromEquirectangular(texture).texture;
@@ -415,7 +443,7 @@ export class Three3DScene extends Three3D {
       shadowMaterial = new ShadowMaterial({ color: 0x202020 });
     }
 
-    const mesh = new Mesh(new PlaneBufferGeometry(1, 1), shadowMaterial);
+    const mesh = new Mesh(new PlaneGeometry(1, 1), shadowMaterial);
     mesh.name = "ground";
     mesh.rotation.x = -Math.PI / 2;
     mesh.receiveShadow = true;
@@ -477,6 +505,7 @@ export class Three3DScene extends Three3D {
   }
 
   async applyMaterialParams(model, materialOptions, imageLoader) {
+    const imageRepository = this.useImageRepository(imageLoader);
     if (materialOptions) {
       const { params } = materialOptions;
       params &&
@@ -514,13 +543,16 @@ export class Three3DScene extends Three3D {
                   case "specularColorMap":
                   case "thicknessMap":
                   case "transmissionMap": {
-                    const texture =
-                      material[p] || (material.map && material.map.clone()) || new Texture();
-                    texture.image =
-                      findImageBySrc(this.sceneContainer, `${this._modelBasePath}${params[p]}`) ||
-                      (await new Promise((resolve, reject) =>
-                        imageLoader.load(params[p], resolve, undefined, reject)
-                      ));
+                    const texture = material[p]?.clone() || new Texture();
+                    texture.flipY = material.map?.flipY || false;
+                    const src = imageLoader.manager.resolveURL(params[p]);
+                    const textureSource = findImageBySrc(this.sceneContainer, src);
+                    if (textureSource) {
+                      texture.source = textureSource;
+                    } else {
+                      texture.image = await imageRepository.loadImage(params[p]);
+                    }
+                    texture.userData.src = src;
                     texture.needsUpdate = true;
                     material[p] = texture;
                     break;
@@ -560,7 +592,10 @@ export class Three3DScene extends Three3D {
                 }
               })
             );
-            material.transparent = !!material.alphaMap;
+            if (material.alphaMap) {
+              material.transparent = true;
+              material.side = DoubleSide;
+            }
             material.needsUpdate = true;
           })
         ));
@@ -614,7 +649,7 @@ export class Three3DScene extends Three3D {
         if (!mat.original) {
           mat.original = mat.clone();
           Object.values(mat)
-            .filter(value => value && value.isTexture)
+            .filter(value => value && value.clone)
             .forEach(texture => {
               if (!texture.original) {
                 texture.original = texture.clone();
@@ -624,7 +659,7 @@ export class Three3DScene extends Three3D {
           mat.copy(mat.original);
           Object.keys(mat).forEach(key => {
             const value = mat[key];
-            if (value && value.original) {
+            if (typeof value === "object" && value?.copy && value.original) {
               value.copy(value.original);
             }
           });
@@ -723,6 +758,18 @@ export class Three3DScene extends Three3D {
     };
   }
 
+  onLoadError = url => {
+    const errorMessage = `Could not load file: ${url}`;
+    // eslint-disable-next-line no-console
+    console.error(errorMessage);
+  };
+
+  checkEmptyScene() {
+    if (!this.sceneContainer.children.length) {
+      this.observable.dispatch(EventTypes.EmptySceneError);
+    }
+  }
+
   async loadSceneSync(resourceList) {
     // fix LoadFinished event by trapping the loadScene calls to finish the current one before starting the next one
     try {
@@ -787,9 +834,19 @@ export class Three3DScene extends Three3D {
 
     triggerLoadEvent && this.onLoadStart();
 
-    const sceneParts = await Promise.all(toBeAdded.map(item => this.loadSceneContainer(item)));
+    const sceneParts = await Promise.allSettled(
+      toBeAdded.map(item => this.loadSceneContainer(item))
+    );
+
+    sceneParts.forEach(({ value, reason }, index) => {
+      if (reason) {
+        // eslint-disable-next-line no-console
+        console.error(`Failed to load 3D model: ${toBeAdded[index].model}`);
+        return;
+      }
+
+      const { scene, animations } = value;
 
-    sceneParts.forEach(({ scene, animations }) => {
       sceneContainer.add(scene);
 
       // collect animations
@@ -802,6 +859,8 @@ export class Three3DScene extends Three3D {
       }
     });
 
+    this.checkEmptyScene();
+
     sceneContainer.updateWorldMatrix(true, true);
 
     await Promise.all(
@@ -896,10 +955,7 @@ export class Three3DScene extends Three3D {
       const distance = position.distanceTo(center);
       const lookat = dir.multiplyScalar(distance).add(position);
 
-      const rotation = new Quaternion();
-      camera.getWorldQuaternion(rotation);
-      const orientation = Object3D.DefaultUp.clone();
-
+      const orientation = Object3D.DEFAULT_UP;
       const fov = camera.fov || 45;
 
       const cameraView = {

package/src/Three/__tests__/Three3D.test.js

@@ -31,19 +31,6 @@ describe("Visualization/Three/Three3D", () => {
     });
   });
 
-  // FIXME this test fails since CI-423
-  test.skip("the loadModel function calls the loadMaterial and loadObject methods with the correct path", async () => {
-    three.loadMaterial = jest.fn(() => Promise.resolve(false));
-    three.loadObject = jest.fn(() => Promise.resolve(false));
-    await three.loadModel();
-    expect(three.loadMaterial.mock.calls[0][0]).toEqual(
-      "/path/to/3D/content/path_for_item_id/materials/path_for_variant_id/material.mtl"
-    );
-    expect(three.loadObject.mock.calls[0][0]).toEqual(
-      "/path/to/3D/content/path_for_item_id/model.obj"
-    );
-  });
-
   test("setCustomizableMaterialName and findCustomizableMaterials", () => {
     const matObj = {
       myMaterial: {
@@ -61,24 +48,4 @@ describe("Visualization/Three/Three3D", () => {
     ]);
     expect(three.prepareCustomCanvasForMaterial).toHaveBeenCalledWith(matObj.myMaterial);
   });
-
-  test("loads the camera views correctly", async () => {
-    // read the test obj file (cameraviews.obj) as a data url
-    const cameraViewsDataUrl =
-      "data:text/plain;base64," +
-      btoa(fs.readFileSync(path.resolve(__dirname, "cameraviews.obj"), "utf8"));
-    const three = new Three3D();
-
-    three.controls = { update: () => true };
-
-    const views = await three.loadCameraViews(cameraViewsDataUrl, false);
-
-    expect(views).toEqual({
-      default: {
-        lookat: { x: 0, y: 0, z: 0 },
-        position: { x: 3, y: 5, z: -12 },
-      },
-      sleeve: { lookat: { x: 0, y: 0, z: 0 } },
-    });
-  });
 });

package/src/Utils/createBakedShadow.js

@@ -2,13 +2,12 @@ import {
   Box3,
   DoubleSide,
   Sphere,
-  PlaneBufferGeometry,
+  PlaneGeometry,
   Mesh,
   ShadowMaterial,
   DirectionalLight,
   WebGLRenderTarget,
   WebGLRenderer,
-  sRGBEncoding,
   PCFSoftShadowMap,
   MeshStandardMaterial,
   CanvasTexture,
@@ -52,7 +51,7 @@ export default function createBakedShadow(scene, options) {
   const sphere = box.getBoundingSphere(new Sphere());
   const { radius } = sphere;
 
-  const shadowGeometry = new PlaneBufferGeometry(1, 1);
+  const shadowGeometry = new PlaneGeometry(1, 1);
   shadowGeometry.rotateX(-Math.PI * 0.5);
   shadowGeometry.rotateY(Math.PI);
   const shadowGround = new Mesh(
@@ -97,7 +96,6 @@ export default function createBakedShadow(scene, options) {
     alpha: true,
     antialias: true,
   });
-  renderer.outputEncoding = sRGBEncoding;
   renderer.shadowMap.enabled = true;
   renderer.shadowMap.type = PCFSoftShadowMap;
   renderer.setRenderTarget(renderTarget);

package/src/Utils/initTextureCanvas.js

@@ -14,7 +14,8 @@ export function initTextureCanvas(texture) {
   if (!texture.originalImage || texture.image.nodeName !== "CANVAS") {
     const originalImage = optimizeTextureImage(texture.image);
     // eslint-disable-next-line no-console
-    console.log(`Creating canvas from texture: ${originalImage.src}`);
+    texture.userData.src = texture.image?.src || texture.userData?.src;
+    console.log(`Creating canvas from texture: ${texture.userData.src}`);
     texture.image = createCanvasFromImage(originalImage);
     texture.originalImage = originalImage;
   } else {

package/src/Utils/optimizeTextureImage.js

@@ -9,7 +9,7 @@ import { createWorkingCanvas } from "./createCanvas";
  * @param {number} minTextureSize
  * @return {HTMLImageElement|HTMLCanvasElement}
  */
-export const optimizeTextureImage = (image, maxTextureSize = 2048, minTextureSize = 2048) => {
+export const optimizeTextureImage = (image, maxTextureSize = 4096, minTextureSize = 2048) => {
   let textureSize = Math.max(image.width, image.height);
   if (textureSize <= maxTextureSize && textureSize >= minTextureSize) {
     return image;

package/src/Utils/rememberCameraViewOffset.js

@@ -1,6 +1,8 @@
 export const rememberCameraViewOffset = camera => {
-  const {
-    view: { fullWidth, fullHeight, offsetX, offsetY, width, height },
-  } = camera;
+  const { view } = camera;
+  if (!view) {
+    return () => null;
+  }
+  const { fullWidth, fullHeight, offsetX, offsetY, width, height } = view;
   return () => camera.setViewOffset(fullWidth, fullHeight, offsetX, offsetY, width, height);
 };

package/src/Utils/restrictCameraMovement.js

@@ -1,5 +1,5 @@
 import pick from "lodash/pick";
-import OrbitControls from "../Three/Controls/OrbitControls";
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
 
 const stateMemo = (obj, props) => {
   const state = pick(obj, props);