react-globe.gl 2.27.3 → 2.27.4

package/dist/react-globe.gl.js

@@ -1,4 +1,4 @@
-// Version 2.27.3 react-globe.gl - https://github.com/vasturiano/react-globe.gl
+// Version 2.27.4 react-globe.gl - https://github.com/vasturiano/react-globe.gl
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react')) :
   typeof define === 'function' && define.amd ? define(['react'], factory) :
@@ -68368,6 +68368,43 @@ void main() {
     }
   });
 
+  var dashedLineShaders = function dashedLineShaders() {
+    return {
+      uniforms: {
+        // dash param defaults, all relative to full length
+        dashOffset: {
+          value: 0
+        },
+        dashSize: {
+          value: 1
+        },
+        gapSize: {
+          value: 0
+        },
+        dashTranslate: {
+          value: 0
+        } // used for animating the dash
+      },
+      vertexShader: "\n    uniform float dashTranslate; \n\n    attribute vec4 color;\n    varying vec4 vColor;\n    \n    attribute float relDistance;\n    varying float vRelDistance;\n\n    void main() {\n      // pass through colors and distances\n      vColor = color;\n      vRelDistance = relDistance + dashTranslate;\n      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n    }\n  ",
+      fragmentShader: "\n    uniform float dashOffset; \n    uniform float dashSize;\n    uniform float gapSize; \n    \n    varying vec4 vColor;\n    varying float vRelDistance;\n    \n    void main() {\n      // ignore pixels in the gap\n      if (vRelDistance < dashOffset) discard;\n      if (mod(vRelDistance - dashOffset, dashSize + gapSize) > dashSize) discard;\n    \n      // set px color: [r, g, b, a], interpolated between vertices \n      gl_FragColor = vColor; \n    }\n  "
+    };
+  };
+  var invisibleUndergroundShaderExtend = function invisibleUndergroundShaderExtend(shader) {
+    shader.uniforms.surfaceRadius = {
+      type: 'float',
+      value: 0
+    };
+    shader.vertexShader = ('attribute float surfaceRadius;\nvarying float vSurfaceRadius;\nvarying vec3 vPos;\n' + shader.vertexShader).replace('void main() {', ['void main() {', 'vSurfaceRadius = surfaceRadius;', 'vPos = position;'].join('\n'));
+    shader.fragmentShader = ('uniform float surfaceRadius;\nvarying float vSurfaceRadius;\nvarying vec3 vPos;\n' + shader.fragmentShader).replace('void main() {', ['void main() {', 'if (length(vPos) < max(surfaceRadius, vSurfaceRadius)) discard;'].join('\n'));
+    return shader;
+  };
+  var applyShaderExtensionToMaterial = function applyShaderExtensionToMaterial(material, extensionFn) {
+    material.onBeforeCompile = function (shader) {
+      material.userData.shader = extensionFn(shader);
+    };
+    return material;
+  };
+
   var _excluded$1 = ["stroke"];
   var THREE$d = window.THREE ? window.THREE // Prefer consumption from global THREE, if exists
   : {
@@ -68387,25 +68424,6 @@ void main() {
 
   //
 
-  var gradientShaders$1 = {
-    uniforms: {
-      // dash param defaults, all relative to full length
-      dashOffset: {
-        value: 0
-      },
-      dashSize: {
-        value: 1
-      },
-      gapSize: {
-        value: 0
-      },
-      dashTranslate: {
-        value: 0
-      } // used for animating the dash
-    },
-    vertexShader: "\n    uniform float dashTranslate; \n\n    attribute vec4 vertexColor;\n    varying vec4 vColor;\n    \n    attribute float vertexRelDistance;\n    varying float vRelDistance;\n\n    void main() {\n      // pass through colors and distances\n      vColor = vertexColor;\n      vRelDistance = vertexRelDistance + dashTranslate;\n      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n    }\n  ",
-    fragmentShader: "\n    uniform float dashOffset; \n    uniform float dashSize;\n    uniform float gapSize; \n    \n    varying vec4 vColor;\n    varying float vRelDistance;\n    \n    void main() {\n      // ignore pixels in the gap\n      if (vRelDistance < dashOffset) discard;\n      if (mod(vRelDistance - dashOffset, dashSize + gapSize) > dashSize) discard;\n    \n      // set px color: [r, g, b, a], interpolated between vertices \n      gl_FragColor = vColor; \n    }\n  "
-  };
   var ArcsLayerKapsule = index$2({
     props: {
       arcsData: {
@@ -68516,7 +68534,7 @@ void main() {
       var dashGapAccessor = index$1(state.arcDashGap);
       var dashInitialGapAccessor = index$1(state.arcDashInitialGap);
       var dashAnimateTimeAccessor = index$1(state.arcDashAnimateTime);
-      var sharedMaterial = new THREE$d.ShaderMaterial(_objectSpread2$1(_objectSpread2$1({}, gradientShaders$1), {}, {
+      var sharedMaterial = new THREE$d.ShaderMaterial(_objectSpread2$1(_objectSpread2$1({}, dashedLineShaders()), {}, {
         transparent: true,
         blending: THREE$d.NormalBlending
       }));
@@ -68572,8 +68590,8 @@ void main() {
           // num vertices per segment
           true // run from end to start, to animate in the correct direction
           );
-          obj.geometry.setAttribute('vertexColor', vertexColorArray);
-          obj.geometry.setAttribute('vertexRelDistance', vertexRelDistanceArray);
+          obj.geometry.setAttribute('color', vertexColorArray);
+          obj.geometry.setAttribute('relDistance', vertexRelDistanceArray);
           var applyUpdate = function applyUpdate(td) {
             var _arc$__currentTargetD = arc.__currentTargetD = td,
               stroke = _arc$__currentTargetD.stroke,
@@ -68582,8 +68600,8 @@ void main() {
             if (useTube) {
               obj.geometry && obj.geometry.dispose();
               obj.geometry = new THREE$d.TubeGeometry(curve, state.arcCurveResolution, stroke / 2, state.arcCircularResolution);
-              obj.geometry.setAttribute('vertexColor', vertexColorArray);
-              obj.geometry.setAttribute('vertexRelDistance', vertexRelDistanceArray);
+              obj.geometry.setAttribute('color', vertexColorArray);
+              obj.geometry.setAttribute('relDistance', vertexRelDistanceArray);
             } else {
               obj.geometry.setFromPoints(curve.getPoints(state.arcCurveResolution));
             }
@@ -68861,12 +68879,12 @@ void main() {
           }), 4));
           return geom;
         }));
-        var hexPoints = new THREE$c.Mesh(hexPointsGeometry, new THREE$c.MeshLambertMaterial({
+        var hexPoints = new THREE$c.Mesh(hexPointsGeometry, applyShaderExtensionToMaterial(new THREE$c.MeshLambertMaterial({
           color: 0xffffff,
           transparent: true,
           vertexColors: true,
           side: THREE$c.DoubleSide
-        }));
+        }), invisibleUndergroundShaderExtend));
         hexPoints.__globeObjType = 'hexBinPoints'; // Add object type
         hexPoints.__data = hexBins; // Attach obj data
 
@@ -68923,6 +68941,12 @@ void main() {
           var _obj$__currentTargetD = obj.__currentTargetD = td,
             alt = _obj$__currentTargetD.alt;
           obj.scale.x = obj.scale.y = obj.scale.z = 1 + alt; // scale according to altitude
+
+          // update surfaceRadius per vertex
+          var vertexSurfaceRadius = GLOBE_RADIUS / (alt + 1);
+          obj.geometry.setAttribute('surfaceRadius', array2BufferAttr(_toConsumableArray$2(new Array(obj.geometry.getAttribute('position').count)).map(function () {
+            return vertexSurfaceRadius;
+          }), 1));
         };
         var currentTargetD = obj.__currentTargetD || Object.assign({}, targetD, {
           alt: -1e-3
@@ -68945,12 +68969,12 @@ void main() {
           [sideColor, topColor].forEach(function (color) {
             if (!hexMaterials.hasOwnProperty(color)) {
               var opacity = colorAlpha(color);
-              hexMaterials[color] = new THREE$c.MeshLambertMaterial({
+              hexMaterials[color] = applyShaderExtensionToMaterial(new THREE$c.MeshLambertMaterial({
                 color: colorStr2Hex(color),
                 transparent: opacity < 1,
                 opacity: opacity,
                 side: THREE$c.DoubleSide
-              });
+              }), invisibleUndergroundShaderExtend);
             }
           });
           obj.material = [sideColor, topColor].map(function (color) {
@@ -69367,10 +69391,10 @@ void main() {
         },
         createObj: function createObj() {
           var obj = new THREE$a.Group();
-          obj.__defaultSideMaterial = new THREE$a.MeshBasicMaterial({
+          obj.__defaultSideMaterial = applyShaderExtensionToMaterial(new THREE$a.MeshBasicMaterial({
             side: THREE$a.DoubleSide,
             depthWrite: true
-          });
+          }), invisibleUndergroundShaderExtend);
           obj.__defaultCapMaterial = new THREE$a.MeshBasicMaterial({
             side: THREE$a.DoubleSide,
             depthWrite: true
@@ -69452,6 +69476,7 @@ void main() {
               alt = _obj$__currentTargetD.alt;
             conicObj.scale.x = conicObj.scale.y = conicObj.scale.z = 1 + alt;
             addStroke && (strokeObj.scale.x = strokeObj.scale.y = strokeObj.scale.z = 1 + alt + 1e-4); // stroke slightly above the conic mesh
+            obj.__defaultSideMaterial.userData.shader && (obj.__defaultSideMaterial.userData.shader.uniforms.surfaceRadius.value = GLOBE_RADIUS / (alt + 1)); // update side material scale uniform
           };
           var currentTargetD = obj.__currentTargetD || Object.assign({}, targetD, {
             alt: -1e-3
@@ -69736,25 +69761,6 @@ void main() {
 
   //
 
-  var gradientShaders = {
-    uniforms: {
-      // dash param defaults, all relative to full length
-      dashOffset: {
-        value: 0
-      },
-      dashSize: {
-        value: 1
-      },
-      gapSize: {
-        value: 0
-      },
-      dashTranslate: {
-        value: 0
-      } // used for animating the dash
-    },
-    vertexShader: "\n    uniform float dashTranslate;\n\n    attribute vec4 vertexColor;\n    varying vec4 vColor;\n\n    attribute float vertexRelDistance;\n    varying float vRelDistance;\n\n    void main() {\n      // pass through colors and distances\n      vColor = vertexColor;\n      vRelDistance = vertexRelDistance + dashTranslate;\n      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n    }\n  ",
-    fragmentShader: "\n    uniform float dashOffset;\n    uniform float dashSize;\n    uniform float gapSize;\n\n    varying vec4 vColor;\n    varying float vRelDistance;\n\n    void main() {\n      // ignore pixels in the gap\n      if (vRelDistance < dashOffset) discard;\n      if (mod(vRelDistance - dashOffset, dashSize + gapSize) > dashSize) discard;\n\n      // set px color: [r, g, b, a], interpolated between vertices\n      gl_FragColor = vColor;\n    }\n  "
-  };
   var PathsLayerKapsule = index$2({
     props: {
       pathsData: {
@@ -69867,7 +69873,7 @@ void main() {
       var dashGapAccessor = index$1(state.pathDashGap);
       var dashInitialGapAccessor = index$1(state.pathDashInitialGap);
       var dashAnimateTimeAccessor = index$1(state.pathDashAnimateTime);
-      var sharedShaderMaterial = new THREE$7.ShaderMaterial(_objectSpread2$1(_objectSpread2$1({}, gradientShaders), {}, {
+      var sharedShaderMaterial = new THREE$7.ShaderMaterial(_objectSpread2$1(_objectSpread2$1({}, dashedLineShaders()), {}, {
         transparent: true,
         blending: THREE$7.NormalBlending
       }));
@@ -69922,8 +69928,8 @@ void main() {
             // num vertices per segment
             true // run from end to start, to animate in the correct direction
             );
-            obj.geometry.setAttribute('vertexColor', vertexColorArray);
-            obj.geometry.setAttribute('vertexRelDistance', vertexRelDistanceArray);
+            obj.geometry.setAttribute('color', vertexColorArray);
+            obj.geometry.setAttribute('relDistance', vertexRelDistanceArray);
           } else {
             // fat lines
             obj.material.resolution = state.rendererSize;