Merge pull request #959 from plotly/surface-colormap-discontinuity

Fix surface colormap discontinuity for circular colorscales

Author: etpinard

package.json

@@ -74,7 +74,7 @@
     "gl-select-box": "^1.0.1",
     "gl-shader": "4.2.0",
     "gl-spikes2d": "^1.0.1",
-    "gl-surface3d": "^1.2.3",
+    "gl-surface3d": "^1.3.0",
     "mapbox-gl": "^0.22.0",
     "mouse-change": "^1.1.1",
     "mouse-wheel": "^1.0.2",

src/traces/surface/convert.js

@@ -97,6 +97,18 @@ function parseColorScale(colorscale, alpha) {
     });
 }
 
+function isColormapCircular(colormap) {
+    var first = colormap[0].rgb,
+        last = colormap[colormap.length - 1].rgb;
+
+    return (
+        first[0] === last[0] &&
+        first[1] === last[1] &&
+        first[2] === last[2] &&
+        first[3] === last[3]
+    );
+}
+
 // Pad coords by +1
 function padField(field) {
     var shape = field.shape;
@@ -317,6 +329,11 @@ proto.update = function(data) {
         }
     }
 
+    // see https://github.com/plotly/plotly.js/issues/940
+    if(isColormapCircular(colormap)) {
+        params.vertexColor = true;
+    }
+
     params.coords = coords;
 
     surface.update(params);
@@ -343,7 +360,6 @@ proto.update = function(data) {
     }
 };
 
-
 proto.dispose = function() {
     this.scene.glplot.remove(this.surface);
     this.surface.dispose();