Merge pull request #4480 from plotly/surface-opacityscale

Implement surface opacityscale & correct display of transparent surfaces

Author: archmoj

package-lock.json

@@ -88,7 +88,7 @@
     "gl-select-box": "^1.0.3",
     "gl-spikes2d": "^1.0.2",
     "gl-streamtube3d": "^1.4.0",
-    "gl-surface3d": "^1.4.6",
+    "gl-surface3d": "^1.5.0",
     "gl-text": "^1.1.8",
     "glslify": "^7.0.0",
     "has-hover": "^1.0.1",

package.json

@@ -298,6 +298,24 @@ colorScaleAttrs('', {
         ].join(' ')
     },
 
+    opacityscale: {
+        valType: 'any',
+        role: 'style',
+        editType: 'calc',
+        description: [
+            'Sets the opacityscale.',
+            ' The opacityscale must be an array containing',
+            ' arrays mapping a normalized value to an opacity value.',
+            ' At minimum, a mapping for the lowest (0) and highest (1)',
+            ' values are required. For example,',
+            ' `[[0, 1], [0.5, 0.2], [1, 1]]` means that higher/lower values would have',
+            ' higher opacity values and those in the middle would be more transparent',
+            ' Alternatively, `opacityscale` may be a palette name string',
+            ' of the following list: \'min\', \'max\', \'extremes\' and \'uniform\'.',
+            ' The default is \'uniform\'.'
+        ].join('')
+    },
+
     _deprecated: {
         zauto: extendFlat({}, colorScaleAttrs.zauto, {
             description: 'Obsolete. Use `cauto` instead.'

src/traces/surface/attributes.js

@@ -532,6 +532,7 @@ proto.update = function(data) {
         dynamicColor: [[1, 1, 1, 1], [1, 1, 1, 1], [1, 1, 1, 1]],
         dynamicWidth: [1, 1, 1],
         dynamicTint: [1, 1, 1],
+        opacityscale: data.opacityscale,
         opacity: data.opacity
     };
 

src/traces/surface/convert.js

@@ -14,7 +14,45 @@ var Lib = require('../../lib');
 var colorscaleDefaults = require('../../components/colorscale/defaults');
 var attributes = require('./attributes');
 
-module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
+var MIN = 0.1; // Note: often we don't want the data cube to be disappeared
+
+function createWave(n, minOpacity) {
+    var arr = [];
+    var steps = 32; // Max: 256
+    for(var i = 0; i < steps; i++) {
+        var u = i / (steps - 1);
+        var v = minOpacity + (1 - minOpacity) * (1 - Math.pow(Math.sin(n * u * Math.PI), 2));
+        arr.push([
+            u,
+            Math.max(1, Math.min(0, v))
+        ]);
+    }
+    return arr;
+}
+
+function isValidScaleArray(scl) {
+    var highestVal = 0;
+
+    if(!Array.isArray(scl) || scl.length < 2) return false;
+
+    if(!scl[0] || !scl[scl.length - 1]) return false;
+
+    if(+scl[0][0] !== 0 || +scl[scl.length - 1][0] !== 1) return false;
+
+    for(var i = 0; i < scl.length; i++) {
+        var si = scl[i];
+
+        if(si.length !== 2 || +si[0] < highestVal) {
+            return false;
+        }
+
+        highestVal = +si[0];
+    }
+
+    return true;
+}
+
+function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
     var i, j;
 
     function coerce(attr, dflt) {
@@ -102,13 +140,33 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
         traceIn, traceOut, layout, coerce, {prefix: '', cLetter: 'c'}
     );
 
+    opacityscaleDefaults(traceIn, traceOut, layout, coerce);
+
     // disable 1D transforms - currently surface does NOT support column data like heatmap does
     // you can use mesh3d for this use case, but not surface
     traceOut._length = null;
-};
+}
+
+function opacityscaleDefaults(traceIn, traceOut, layout, coerce) {
+    var opacityscale = coerce('opacityscale');
+    if(opacityscale === 'max') {
+        traceOut.opacityscale = [[0, MIN], [1, 1]];
+    } else if(opacityscale === 'min') {
+        traceOut.opacityscale = [[0, 1], [1, MIN]];
+    } else if(opacityscale === 'extremes') {
+        traceOut.opacityscale = createWave(1, MIN);
+    } else if(!isValidScaleArray(opacityscale)) {
+        traceOut.opacityscale = undefined;
+    }
+}
 
 function mapLegacy(traceIn, oldAttr, newAttr) {
     if(oldAttr in traceIn && !(newAttr in traceIn)) {
         traceIn[newAttr] = traceIn[oldAttr];
     }
 }
+
+module.exports = {
+    supplyDefaults: supplyDefaults,
+    opacityscaleDefaults: opacityscaleDefaults
+};

src/traces/surface/defaults.js

@@ -10,7 +10,7 @@
 
 module.exports = {
     attributes: require('./attributes'),
-    supplyDefaults: require('./defaults'),
+    supplyDefaults: require('./defaults').supplyDefaults,
     colorbar: {
         min: 'cmin',
         max: 'cmax'

src/traces/surface/index.js

@@ -10,6 +10,7 @@
 
 var colorScaleAttrs = require('../../components/colorscale/attributes');
 var isosurfaceAttrs = require('../isosurface/attributes');
+var surfaceAttrs = require('../surface/attributes');
 var baseAttrs = require('../../plots/attributes');
 
 var extendFlat = require('../../lib/extend').extendFlat;
@@ -63,23 +64,7 @@ colorScaleAttrs('', {
 
     colorbar: isosurfaceAttrs.colorbar,
     opacity: isosurfaceAttrs.opacity,
-    opacityscale: {
-        valType: 'any',
-        role: 'style',
-        editType: 'calc',
-        description: [
-            'Sets the opacityscale.',
-            ' The opacityscale must be an array containing',
-            ' arrays mapping a normalized value to an opacity value.',
-            ' At minimum, a mapping for the lowest (0) and highest (1)',
-            ' values are required. For example,',
-            ' `[[0, 1], [0.5, 0.2], [1, 1]]` means that higher/lower values would have',
-            ' higher opacity values and those in the middle would be more transparent',
-            ' Alternatively, `opacityscale` may be a palette name string',
-            ' of the following list: \'min\', \'max\', \'extremes\' and \'uniform\'.',
-            ' The default is \'uniform\'.'
-        ].join('')
-    },
+    opacityscale: surfaceAttrs.opacityscale,
 
     lightposition: isosurfaceAttrs.lightposition,
     lighting: isosurfaceAttrs.lighting,

src/traces/volume/attributes.js

@@ -11,22 +11,7 @@
 var Lib = require('../../lib');
 var attributes = require('./attributes');
 var supplyIsoDefaults = require('../isosurface/defaults').supplyIsoDefaults;
-
-var MIN = 0.1; // Note: often we don't want the data cube to be disappeared
-
-function createWave(n, minOpacity) {
-    var arr = [];
-    var steps = 32; // Max: 256
-    for(var i = 0; i < steps; i++) {
-        var u = i / (steps - 1);
-        var v = minOpacity + (1 - minOpacity) * (1 - Math.pow(Math.sin(n * u * Math.PI), 2));
-        arr.push([
-            u,
-            Math.max(1, Math.min(0, v))
-        ]);
-    }
-    return arr;
-}
+var opacityscaleDefaults = require('../surface/defaults').opacityscaleDefaults;
 
 module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
     function coerce(attr, dflt) {
@@ -35,36 +20,5 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
 
     supplyIsoDefaults(traceIn, traceOut, defaultColor, layout, coerce);
 
-    var opacityscale = coerce('opacityscale');
-    if(opacityscale === 'max') {
-        traceOut.opacityscale = [[0, MIN], [1, 1]];
-    } else if(opacityscale === 'min') {
-        traceOut.opacityscale = [[0, 1], [1, MIN]];
-    } else if(opacityscale === 'extremes') {
-        traceOut.opacityscale = createWave(1, MIN);
-    } else if(!isValidScaleArray(opacityscale)) {
-        traceOut.opacityscale = undefined;
-    }
+    opacityscaleDefaults(traceIn, traceOut, layout, coerce);
 };
-
-function isValidScaleArray(scl) {
-    var highestVal = 0;
-
-    if(!Array.isArray(scl) || scl.length < 2) return false;
-
-    if(!scl[0] || !scl[scl.length - 1]) return false;
-
-    if(+scl[0][0] !== 0 || +scl[scl.length - 1][0] !== 1) return false;
-
-    for(var i = 0; i < scl.length; i++) {
-        var si = scl[i];
-
-        if(si.length !== 2 || +si[0] < highestVal) {
-            return false;
-        }
-
-        highestVal = +si[0];
-    }
-
-    return true;
-}