redhotmagma-visualization 1.38.6 → 1.39.0

package/Three/Three3DScene.js

@@ -15,6 +15,8 @@ var _GLTFLoader = require("three/examples/jsm/loaders/GLTFLoader");
 
 var _DRACOLoader = require("three/examples/jsm/loaders/DRACOLoader");
 
+var _RGBELoader = require("three/examples/jsm/loaders/RGBELoader");
+
 var _get = _interopRequireDefault(require("lodash/get"));
 
 var _size = _interopRequireDefault(require("lodash/size"));
@@ -25,6 +27,12 @@ var _glTFExporter = require("./Exporters/glTFExporter");
 
 var _findIndex = _interopRequireDefault(require("lodash/findIndex"));
 
+var _merge = _interopRequireDefault(require("lodash/merge"));
+
+var _createBakedShadow = _interopRequireDefault(require("../Utils/createBakedShadow"));
+
+var _setLightShadow2 = _interopRequireDefault(require("../Utils/setLightShadow"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
@@ -182,24 +190,6 @@ function findImageBySrc(tree, src) {
   return result;
 }
 
-function setLightShadow(light) {
-  var d = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 50;
-
-  // directional light has orthographic camera (due to the parallel ray direction)
-  if (light.isDirectionalLight) {
-    light.castShadow = true;
-    light.shadow.mapSize.width = 1024;
-    light.shadow.mapSize.height = 1024;
-    light.shadow.camera.top = d;
-    light.shadow.camera.bottom = -d;
-    light.shadow.camera.left = -d;
-    light.shadow.camera.right = d;
-    light.shadow.camera.near = 0.0001;
-    light.shadow.camera.far = 10000;
-    light.shadow.camera.updateProjectionMatrix();
-  }
-}
-
 function createIndexCounter() {
   var counters = {};
 
@@ -397,7 +387,21 @@ var Three3DScene = /*#__PURE__*/function (_Three3D) {
 
     _defineProperty(_assertThisInitialized(_this), "config", {
       useShadowGround: true,
-      removeGroundForScreenshot: true
+      removeGroundForScreenshot: true,
+      useEnvironmentMap: true,
+      useBakedShadows: false,
+      bakedShadow: {
+        lightPositionOffset: {
+          x: 0,
+          y: 0,
+          z: 0
+        },
+        shadowMapSize: 512,
+        groundScaling: 2,
+        shadowTextureScaling: 0.96,
+        blurRadius: 6,
+        shadowOpacity: 0.8
+      }
     });
 
     _defineProperty(_assertThisInitialized(_this), "animate", function () {
@@ -457,7 +461,7 @@ var Three3DScene = /*#__PURE__*/function (_Three3D) {
   _createClass(Three3DScene, [{
     key: "setOptions3D",
     value: function setOptions3D(options) {
-      Object.assign(this.config, options);
+      (0, _merge["default"])(this.config, options);
     }
   }, {
     key: "createLoadingManager",
@@ -519,8 +523,35 @@ var Three3DScene = /*#__PURE__*/function (_Three3D) {
         renderer.setPixelRatio(window.devicePixelRatio);
       }
 
+      this.config.useEnvironmentMap && this.loadEnvMap(renderer);
       return renderer;
     }
+  }, {
+    key: "getDefaultEnvMapURL",
+    value: function getDefaultEnvMapURL() {
+      return "hdr/envmap.hdr";
+    }
+  }, {
+    key: "loadEnvMap",
+    value: function loadEnvMap(renderer) {
+      var _this2 = this;
+
+      var envMapURL = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.getDefaultEnvMapURL();
+
+      if (this.config.useEnvironmentMap) {
+        var pmremGenerator = new _three.PMREMGenerator(renderer);
+        pmremGenerator.compileEquirectangularShader();
+        this.envMapPromise = new Promise(function (resolve, reject) {
+          new _RGBELoader.RGBELoader().setDataType(_three.UnsignedByteType).load(envMapURL, function (texture) {
+            _this2.envMap = pmremGenerator.fromEquirectangular(texture).texture;
+            _this2.scene.environment = _this2.envMap;
+            texture.dispose();
+            pmremGenerator.dispose();
+            resolve(_this2.envMap);
+          }, undefined, reject);
+        });
+      }
+    }
   }, {
     key: "createCamera",
     value: function createCamera() {
@@ -538,17 +569,33 @@ var Three3DScene = /*#__PURE__*/function (_Three3D) {
     key: "createScene",
     value: function createScene() {
       var scene = new _three.Scene();
-      scene.add(this.createHemiLight());
       scene.add(this.createDirLight());
       scene.add(this.sceneContainer);
+
+      if (this.config.useEnvironmentMap && this.envMap) {
+        scene.environment = this.envMap;
+      }
+
       return scene;
     }
   }, {
     key: "createGround",
     value: function createGround() {
-      var mesh = new _three.Mesh(new _three.PlaneBufferGeometry(1, 1), new _three.MeshPhongMaterial({
-        color: 0xffffff
-      }));
+      this.ground && this.scene.remove(this.ground);
+      var shadowMaterial;
+
+      if (this.config.useBakedShadows) {
+        shadowMaterial = (0, _createBakedShadow["default"])(this.scene, {
+          withMaterial: true,
+          config: this.config.bakedShadow
+        });
+      } else {
+        shadowMaterial = new _three.ShadowMaterial({
+          color: 0x202020
+        });
+      }
+
+      var mesh = new _three.Mesh(new _three.PlaneBufferGeometry(1, 1), shadowMaterial);
       mesh.name = "ground";
       mesh.rotation.x = -Math.PI / 2;
       mesh.receiveShadow = true;
@@ -556,13 +603,16 @@ var Three3DScene = /*#__PURE__*/function (_Three3D) {
       return mesh;
     }
   }, {
-    key: "createHemiLight",
-    value: function createHemiLight() {
-      var hemiLight = new _three.HemisphereLight(0xffffff, 0x666666, 0.7);
-      hemiLight.name = "hemiLight";
-      hemiLight.position.set(0, 100, 0);
-      this.hemiLight = hemiLight;
-      return hemiLight;
+    key: "setLightShadow",
+    value: function setLightShadow(light) {
+      var d = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 50;
+      var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+      (0, _setLightShadow2["default"])(light, d, (0, _merge["default"])({}, {
+        shadowMapSize: 1024,
+        cameraProps: {
+          far: 10000
+        }
+      }, options));
     }
   }, {
     key: "createDirLight",
@@ -570,7 +620,7 @@ var Three3DScene = /*#__PURE__*/function (_Three3D) {
       var dirLight = new _three.DirectionalLight(0xffffff, 1);
       dirLight.name = "dirLight";
       dirLight.position.set(1, 1, 1).normalize();
-      setLightShadow(dirLight);
+      this.setLightShadow(dirLight);
       this.dirLight = dirLight;
       return dirLight;
     }
@@ -590,16 +640,17 @@ var Three3DScene = /*#__PURE__*/function (_Three3D) {
   }, {
     key: "fixImportedScene",
     value: function fixImportedScene(scene) {
-      var _this2 = this;
+      var _this3 = this;
 
       scene.traverse(function (object) {
         if (object.isMesh) {
           object.castShadow = true;
         }
 
-        if (object.isLight && object.target && _this2.ground) {
-          object.target = _this2.ground;
-          setLightShadow(object);
+        if (object.isLight && object.target && _this3.ground) {
+          object.target = _this3.ground;
+
+          _this3.setLightShadow(object);
         }
       });
     }
@@ -607,7 +658,7 @@ var Three3DScene = /*#__PURE__*/function (_Three3D) {
     key: "applyCustomizations",
     value: function () {
       var _applyCustomizations = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3(model, item, imageLoader) {
-        var _this3 = this;
+        var _this4 = this;
 
         var options,
             _options$saveAndResto,
@@ -772,7 +823,7 @@ var Three3DScene = /*#__PURE__*/function (_Three3D) {
 
                                       case 5:
                                         texture = material[p] || material.map && material.map.clone() || new _three.Texture();
-                                        _context.t1 = findImageBySrc(_this3.sceneContainer, "".concat(_this3._modelBasePath).concat(_params[p]));
+                                        _context.t1 = findImageBySrc(_this4.sceneContainer, "".concat(_this4._modelBasePath).concat(_params[p]));
 
                                         if (_context.t1) {
                                           _context.next = 11;
@@ -853,7 +904,7 @@ var Three3DScene = /*#__PURE__*/function (_Three3D) {
   }, {
     key: "loadSceneContainer",
     value: function loadSceneContainer(item) {
-      var _this4 = this;
+      var _this5 = this;
 
       var path;
 
@@ -890,7 +941,7 @@ var Three3DScene = /*#__PURE__*/function (_Three3D) {
                       model.userData.index = item.index;
                     }
 
-                    _this4.fixImportedScene(model);
+                    _this5.fixImportedScene(model);
 
                     if (!("object" === itemType)) {
                       _context4.next = 7;
@@ -898,7 +949,7 @@ var Three3DScene = /*#__PURE__*/function (_Three3D) {
                     }
 
                     _context4.next = 7;
-                    return _this4.applyCustomizations(model, item, imageLoader);
+                    return _this5.applyCustomizations(model, item, imageLoader);
 
                   case 7:
                     resolve(gltf);
@@ -1003,34 +1054,66 @@ var Three3DScene = /*#__PURE__*/function (_Three3D) {
     key: "loadSceneSync",
     value: function () {
       var _loadSceneSync = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6(resourceList) {
-        var _disableRender, result;
-
+        var result;
         return regeneratorRuntime.wrap(function _callee6$(_context6) {
           while (1) {
             switch (_context6.prev = _context6.next) {
               case 0:
-                _context6.next = 2;
+                _context6.prev = 0;
+                _context6.next = 3;
                 return this._loadScenePromise;
 
-              case 2:
-                _disableRender = this._disableRender;
-                this._disableRender = true;
-                this._loadScenePromise = this.loadScene(resourceList);
+              case 3:
                 _context6.next = 7;
-                return this._loadScenePromise;
+                break;
+
+              case 5:
+                _context6.prev = 5;
+                _context6.t0 = _context6["catch"](0);
 
               case 7:
+                _context6.prev = 7;
+                this._loadScenePromise = this.loadScene(resourceList);
+                _context6.next = 11;
+                return this._loadScenePromise;
+
+              case 11:
                 result = _context6.sent;
-                this._disableRender = _disableRender;
-                this.render();
+                _context6.next = 17;
+                break;
+
+              case 14:
+                _context6.prev = 14;
+                _context6.t1 = _context6["catch"](7);
+                // remove promise if it is failed
+                delete this._loadScenePromise;
+
+              case 17:
+                _context6.prev = 17;
+                _context6.next = 20;
+                return this.envMapPromise;
+
+              case 20:
+                _context6.next = 24;
+                break;
+
+              case 22:
+                _context6.prev = 22;
+                _context6.t2 = _context6["catch"](17);
+
+              case 24:
+                if (!this.isAnimating()) {
+                  this.render();
+                }
+
                 return _context6.abrupt("return", result);
 
-              case 11:
+              case 26:
               case "end":
                 return _context6.stop();
             }
           }
-        }, _callee6, this);
+        }, _callee6, this, [[0, 5], [7, 14], [17, 22]]);
       }));
 
       function loadSceneSync(_x8) {
@@ -1043,7 +1126,7 @@ var Three3DScene = /*#__PURE__*/function (_Three3D) {
     key: "loadScene",
     value: function () {
       var _loadScene = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee7(resourceList) {
-        var _this5 = this;
+        var _this6 = this;
 
         var sceneContainer, _diffResourceLists, toBeRemoved, toBeAdded, toBeUpdated, toBeApplied, shouldResetScene, toBeDisposed, triggerLoadEvent, sceneParts, imageLoader, mixer, animations;
 
@@ -1077,7 +1160,7 @@ var Three3DScene = /*#__PURE__*/function (_Three3D) {
                 triggerLoadEvent && this.onLoadStart();
                 _context7.next = 13;
                 return Promise.all(toBeAdded.map(function (item) {
-                  return _this5.loadSceneContainer(item);
+                  return _this6.loadSceneContainer(item);
                 }));
 
               case 13:
@@ -1088,11 +1171,11 @@ var Three3DScene = /*#__PURE__*/function (_Three3D) {
                   sceneContainer.add(scene); // collect animations
 
                   if (animations.length) {
-                    var _this5$animations;
+                    var _this6$animations;
 
-                    (_this5$animations = _this5.animations).push.apply(_this5$animations, _toConsumableArray(animations.filter(function (_ref11) {
+                    (_this6$animations = _this6.animations).push.apply(_this6$animations, _toConsumableArray(animations.filter(function (_ref11) {
                       var name = _ref11.name;
-                      return !_this5.animations.find(function (_ref12) {
+                      return !_this6.animations.find(function (_ref12) {
                         var existingName = _ref12.name;
                         return name !== existingName;
                       });
@@ -1109,17 +1192,17 @@ var Three3DScene = /*#__PURE__*/function (_Three3D) {
                   });
                   var path = getSrc(item);
 
-                  var _this5$parseModelPath = _this5.parseModelPath(path),
-                      resourcePath = _this5$parseModelPath.resourcePath;
+                  var _this6$parseModelPath = _this6.parseModelPath(path),
+                      resourcePath = _this6$parseModelPath.resourcePath;
 
                   var loaderOptions = {
-                    basePath: _this5._modelBasePath,
+                    basePath: _this6._modelBasePath,
                     resourcePath: resourcePath
                   };
 
-                  var imageLoader = _this5.createImageLoader(loaderOptions);
+                  var imageLoader = _this6.createImageLoader(loaderOptions);
 
-                  return object && _this5.applyCustomizations(object, item, imageLoader);
+                  return object && _this6.applyCustomizations(object, item, imageLoader);
                 }));
 
               case 18:
@@ -1148,7 +1231,7 @@ var Three3DScene = /*#__PURE__*/function (_Three3D) {
                     })
                   };
                   return Promise.all(objects.map(function (object) {
-                    return _this5.applyCustomizations(object, item, imageLoader, {
+                    return _this6.applyCustomizations(object, item, imageLoader, {
                       saveAndRestore: false
                     });
                   }));
@@ -1173,11 +1256,7 @@ var Three3DScene = /*#__PURE__*/function (_Three3D) {
                   this.startAnimation("builtin");
                 }
 
-                if (!this.isAnimating()) {
-                  this.render();
-                }
-
-              case 30:
+              case 29:
               case "end":
                 return _context7.stop();
             }
@@ -1469,14 +1548,15 @@ var Three3DScene = /*#__PURE__*/function (_Three3D) {
         ground.position.y = box.min.y;
         ground.position.x = sphere.center.x;
         ground.position.z = sphere.center.z;
-        ground.scale.set(1, 1, 1).multiplyScalar(maxDistance * 2);
+        var groundScaling = this.config.useBakedShadows ? sphere.radius * 4 : maxDistance * 2;
+        ground.scale.set(1, 1, 1).multiplyScalar(groundScaling);
       }
 
       if (dirLight) {
         dirLight.position.copy(this.dirLightPosition).multiplyScalar(maxDistance).add(sphere.center);
         this.scene.add(dirLight.target);
         dirLight.target.position.copy(sphere.center);
-        setLightShadow(dirLight, minDistance);
+        this.setLightShadow(dirLight, minDistance);
       }
 
       if (hemiLight) {

package/Utils/canvasBlur.js

@@ -0,0 +1,148 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.blur = void 0;
+
+// source: https://github.com/davidenke/context-filter-polyfill/blob/master/src/filters/blur.filter.ts
+var blur = function blur(context) {
+  var radius = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 5;
+  var amount = radius; // do not manipulate without proper amount
+
+  if (amount <= 0) {
+    return context;
+  }
+
+  var _context$canvas = context.canvas,
+      height = _context$canvas.height,
+      width = _context$canvas.width;
+  var imageData = context.getImageData(0, 0, width, height);
+  var data = imageData.data; // http://www.quasimondo.com/BoxBlurForCanvas/FastBlur.js
+
+  var wm = width - 1;
+  var hm = height - 1;
+  var rad1 = amount + 1;
+  var mulTable = [1, 57, 41, 21, 203, 34, 97, 73, 227, 91, 149, 62, 105, 45, 39, 137, 241, 107, 3, 173, 39, 71, 65, 238, 219, 101, 187, 87, 81, 151, 141, 133, 249, 117, 221, 209, 197, 187, 177, 169, 5, 153, 73, 139, 133, 127, 243, 233, 223, 107, 103, 99, 191, 23, 177, 171, 165, 159, 77, 149, 9, 139, 135, 131, 253, 245, 119, 231, 224, 109, 211, 103, 25, 195, 189, 23, 45, 175, 171, 83, 81, 79, 155, 151, 147, 9, 141, 137, 67, 131, 129, 251, 123, 30, 235, 115, 113, 221, 217, 53, 13, 51, 50, 49, 193, 189, 185, 91, 179, 175, 43, 169, 83, 163, 5, 79, 155, 19, 75, 147, 145, 143, 35, 69, 17, 67, 33, 65, 255, 251, 247, 243, 239, 59, 29, 229, 113, 111, 219, 27, 213, 105, 207, 51, 201, 199, 49, 193, 191, 47, 93, 183, 181, 179, 11, 87, 43, 85, 167, 165, 163, 161, 159, 157, 155, 77, 19, 75, 37, 73, 145, 143, 141, 35, 138, 137, 135, 67, 33, 131, 129, 255, 63, 250, 247, 61, 121, 239, 237, 117, 29, 229, 227, 225, 111, 55, 109, 216, 213, 211, 209, 207, 205, 203, 201, 199, 197, 195, 193, 48, 190, 47, 93, 185, 183, 181, 179, 178, 176, 175, 173, 171, 85, 21, 167, 165, 41, 163, 161, 5, 79, 157, 78, 154, 153, 19, 75, 149, 74, 147, 73, 144, 143, 71, 141, 140, 139, 137, 17, 135, 134, 133, 66, 131, 65, 129, 1];
+  var mulSum = mulTable[amount];
+  var shgTable = [0, 9, 10, 10, 14, 12, 14, 14, 16, 15, 16, 15, 16, 15, 15, 17, 18, 17, 12, 18, 16, 17, 17, 19, 19, 18, 19, 18, 18, 19, 19, 19, 20, 19, 20, 20, 20, 20, 20, 20, 15, 20, 19, 20, 20, 20, 21, 21, 21, 20, 20, 20, 21, 18, 21, 21, 21, 21, 20, 21, 17, 21, 21, 21, 22, 22, 21, 22, 22, 21, 22, 21, 19, 22, 22, 19, 20, 22, 22, 21, 21, 21, 22, 22, 22, 18, 22, 22, 21, 22, 22, 23, 22, 20, 23, 22, 22, 23, 23, 21, 19, 21, 21, 21, 23, 23, 23, 22, 23, 23, 21, 23, 22, 23, 18, 22, 23, 20, 22, 23, 23, 23, 21, 22, 20, 22, 21, 22, 24, 24, 24, 24, 24, 22, 21, 24, 23, 23, 24, 21, 24, 23, 24, 22, 24, 24, 22, 24, 24, 22, 23, 24, 24, 24, 20, 23, 22, 23, 24, 24, 24, 24, 24, 24, 24, 23, 21, 23, 22, 23, 24, 24, 24, 22, 24, 24, 24, 23, 22, 24, 24, 25, 23, 25, 25, 23, 24, 25, 25, 24, 22, 25, 25, 25, 24, 23, 24, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 23, 25, 23, 24, 25, 25, 25, 25, 25, 25, 25, 25, 25, 24, 22, 25, 25, 23, 25, 25, 20, 24, 25, 24, 25, 25, 22, 24, 25, 24, 25, 24, 25, 25, 24, 25, 25, 25, 25, 22, 25, 25, 25, 24, 25, 24, 25, 18];
+  var shgSum = shgTable[amount];
+  var r = [];
+  var g = [];
+  var b = [];
+  var a = [];
+  var vmin = [];
+  var vmax = [];
+  var iterations = 3; // 1 - 3
+
+  var p, p1, p2, pa;
+
+  while (iterations-- > 0) {
+    var yw = 0;
+    var yi = 0;
+
+    for (var y = 0; y < height; y++) {
+      var rsum = data[yw] * rad1;
+      var gsum = data[yw + 1] * rad1;
+      var bsum = data[yw + 2] * rad1;
+      var asum = data[yw + 3] * rad1;
+
+      for (var i = 1; i <= amount; i++) {
+        // tslint:disable-next-line no-bitwise
+        p = yw + ((i > wm ? wm : i) << 2);
+        rsum += data[p++];
+        gsum += data[p++];
+        bsum += data[p++];
+        asum += data[p];
+      }
+
+      for (var x = 0; x < width; x++) {
+        r[yi] = rsum;
+        g[yi] = gsum;
+        b[yi] = bsum;
+        a[yi] = asum;
+
+        if (y === 0) {
+          // tslint:disable-next-line no-bitwise
+          vmin[x] = ((p = x + rad1) < wm ? p : wm) << 2; // tslint:disable-next-line no-bitwise
+
+          vmax[x] = (p = x - amount) > 0 ? p << 2 : 0;
+        }
+
+        p1 = yw + vmin[x];
+        p2 = yw + vmax[x];
+        rsum += data[p1++] - data[p2++];
+        gsum += data[p1++] - data[p2++];
+        bsum += data[p1++] - data[p2++];
+        asum += data[p1] - data[p2];
+        yi++;
+      } // tslint:disable-next-line no-bitwise
+
+
+      yw += width << 2;
+    }
+
+    for (var _x = 0; _x < width; _x++) {
+      var yp = _x;
+
+      var _rsum = r[yp] * rad1;
+
+      var _gsum = g[yp] * rad1;
+
+      var _bsum = b[yp] * rad1;
+
+      var _asum = a[yp] * rad1;
+
+      for (var _i = 1; _i <= amount; _i++) {
+        yp += _i > hm ? 0 : width;
+        _rsum += r[yp];
+        _gsum += g[yp];
+        _bsum += b[yp];
+        _asum += a[yp];
+      } // tslint:disable-next-line no-bitwise
+
+
+      yi = _x << 2;
+
+      for (var _y = 0; _y < height; _y++) {
+        // tslint:disable-next-line no-bitwise
+        data[yi + 3] = pa = _asum * mulSum >>> shgSum;
+
+        if (pa > 0) {
+          pa = 255 / pa; // tslint:disable-next-line no-bitwise
+
+          data[yi] = (_rsum * mulSum >>> shgSum) * pa; // tslint:disable-next-line no-bitwise
+
+          data[yi + 1] = (_gsum * mulSum >>> shgSum) * pa; // tslint:disable-next-line no-bitwise
+
+          data[yi + 2] = (_bsum * mulSum >>> shgSum) * pa;
+        } else {
+          data[yi] = data[yi + 1] = data[yi + 2] = 0;
+        }
+
+        if (_x === 0) {
+          vmin[_y] = ((p = _y + rad1) < hm ? p : hm) * width;
+          vmax[_y] = (p = _y - amount) > 0 ? p * width : 0;
+        }
+
+        p1 = _x + vmin[_y];
+        p2 = _x + vmax[_y];
+        _rsum += r[p1] - r[p2];
+        _gsum += g[p1] - g[p2];
+        _bsum += b[p1] - b[p2];
+        _asum += a[p1] - a[p2]; // tslint:disable-next-line no-bitwise
+
+        yi += width << 2;
+      }
+    }
+  } // set back image data to context
+
+
+  context.putImageData(imageData, 0, 0); // return the context itself
+
+  return context;
+};
+
+exports.blur = blur;
+var _default = blur;
+exports["default"] = _default;