bug fix issue 3387 by fixing pixelratio in various 3d modules and plotly.js side to work fine on iOS and FireFox

bug fix issue 3572 to preserve line widths in save 3d plots as image button as well as CI
removed an unused ortho argument from plot_api subroutine
improved ticks distances in orthographic views using latest gl-axes3d

Author: archmoj

package-lock.json

@@ -72,21 +72,21 @@
     "es6-promise": "^3.0.2",
     "fast-isnumeric": "^1.1.2",
     "font-atlas-sdf": "^1.3.3",
-    "gl-cone3d": "^1.2.2",
+    "gl-cone3d": "git://github.com/gl-vis/gl-cone3d.git#ec71aa87233d04b543ae53854c9a1182d40fc8ac",
     "gl-contour2d": "^1.1.5",
-    "gl-error3d": "^1.0.13",
+    "gl-error3d": "git://github.com/gl-vis/gl-error3d.git#75ec29dd1dde51a697f718cdacf76e36a7bfd38c",
     "gl-heatmap2d": "^1.0.5",
     "gl-line3d": "^1.1.10",
     "gl-mat4": "^1.2.0",
-    "gl-mesh3d": "^2.0.7",
+    "gl-mesh3d": "git://github.com/gl-vis/gl-mesh3d.git#31d34ba3cec063697cc3891e141532cd80d95ba3",
     "gl-plot2d": "^1.4.2",
-    "gl-plot3d": "^2.0.0",
+    "gl-plot3d": "git://github.com/gl-vis/gl-plot3d.git#3580a0eedd81b9f212186caa8e7018d8016274fe",
     "gl-pointcloud2d": "^1.0.2",
-    "gl-scatter3d": "^1.1.6",
+    "gl-scatter3d": "git://github.com/gl-vis/gl-scatter3d.git#6292ada845bdcd44a8e2db2d3c5e18c96c9ac210",
     "gl-select-box": "^1.0.3",
     "gl-spikes2d": "^1.0.2",
-    "gl-streamtube3d": "^1.1.2",
-    "gl-surface3d": "^1.4.1",
+    "gl-streamtube3d": "git://github.com/gl-vis/gl-streamtube3d.git#ecdaa1dbbcd315ba06133aeccf870c98b993a8ae",
+    "gl-surface3d": "git://github.com/gl-vis/gl-surface3d.git#96e61eebac18e9b525f7f3e6b714291b5d1b4bad",
     "gl-text": "^1.1.6",
     "glslify": "^7.0.0",
     "has-hover": "^1.0.1",

package.json

@@ -601,9 +601,7 @@ exports.doCamera = function(gd) {
         var scene = sceneLayout._scene;
 
         var cameraData = sceneLayout.camera;
-        var isOrtho = !!(cameraData && cameraData.projection && cameraData.projection.type === 'orthographic');
-
-        scene.setCamera(cameraData, isOrtho);
+        scene.setCamera(cameraData);
     }
 };
 

src/plot_api/subroutines.js

@@ -192,7 +192,7 @@ function render(scene) {
     scene.drawAnnotations(scene);
 }
 
-function tryCreatePlot(scene, camera, canvas, gl) {
+function tryCreatePlot(scene, camera, pixelRatio, canvas, gl) {
 
     var glplotOptions = {
         canvas: canvas,
@@ -204,7 +204,8 @@ function tryCreatePlot(scene, camera, canvas, gl) {
         snapToData: true,
         autoScale: true,
         autoBounds: false,
-        camera: camera
+        camera: camera,
+        pixelRatio: pixelRatio
     };
 
     // for static plots, we reuse the WebGL context
@@ -237,9 +238,9 @@ function tryCreatePlot(scene, camera, canvas, gl) {
     return true;
 }
 
-function initializeGLPlot(scene, camera, canvas, gl) {
+function initializeGLPlot(scene, camera, pixelRatio, canvas, gl) {
 
-    var success = tryCreatePlot(scene, camera, canvas, gl);
+    var success = tryCreatePlot(scene, camera, pixelRatio, canvas, gl);
     /*
     * createPlot will throw when webgl is not enabled in the client.
     * Lets return an instance of the module with all functions noop'd.
@@ -340,7 +341,7 @@ function Scene(options, fullLayout) {
     this.spikeOptions = createSpikeOptions(fullLayout[this.id]);
     this.container = sceneContainer;
     this.staticMode = !!options.staticPlot;
-    this.pixelRatio = options.plotGlPixelRatio || 2;
+    this.pixelRatio = this.pixelRatio || options.plotGlPixelRatio || 2;
 
     // Coordinate rescaling
     this.dataScale = [1, 1, 1];
@@ -351,7 +352,8 @@ function Scene(options, fullLayout) {
     this.drawAnnotations = Registry.getComponentMethod('annotations3d', 'draw');
 
     var camera = fullLayout.scene.camera;
-    initializeGLPlot(this, camera);
+
+    initializeGLPlot(this, camera, this.pixelRatio);
 }
 
 var proto = Scene.prototype;
@@ -377,14 +379,15 @@ proto.recoverContext = function() {
     var gl = this.glplot.gl;
     var canvas = this.glplot.canvas;
     var camera = this.glplot.camera;
+    var pixelRatio = this.glplot.pixelRatio;
     this.glplot.dispose();
 
     function tryRecover() {
         if(gl.isContextLost()) {
             requestAnimationFrame(tryRecover);
             return;
         }
-        if(!initializeGLPlot(scene, camera, canvas, gl)) {
+        if(!initializeGLPlot(scene, camera, pixelRatio, canvas, gl)) {
             Lib.error('Catastrophic and unrecoverable WebGL error. Context lost.');
             return;
         }
@@ -780,6 +783,8 @@ proto.setCamera = function setCamera(cameraData) {
     if(newOrtho !== oldOrtho) {
         this.glplot.redraw();
 
+        var pixelRatio = this.glplot.pixelRatio;
+
         var RGBA = this.glplot.clearColor;
         this.glplot.gl.clearColor(
             RGBA[0], RGBA[1], RGBA[2], RGBA[3]
@@ -791,7 +796,7 @@ proto.setCamera = function setCamera(cameraData) {
 
         this.glplot.dispose();
 
-        initializeGLPlot(this, cameraData);
+        initializeGLPlot(this, cameraData, pixelRatio);
         this.glplot.camera._ortho = newOrtho;
     }
 };

src/plots/gl3d/scene.js

@@ -343,7 +343,7 @@ proto.update = function(data) {
     this.dataPoints = options.position;
 
     lineOptions = {
-        gl: gl,
+        gl: this.scene.glplot.gl,
         position: options.position,
         color: options.lineColor,
         lineWidth: options.lineWidth || 1,
@@ -371,7 +371,7 @@ proto.update = function(data) {
     if(data.marker && data.marker.opacity) scatterOpacity *= data.marker.opacity;
 
     scatterOptions = {
-        gl: gl,
+        gl: this.scene.glplot.gl,
         position: options.position,
         color: options.scatterColor,
         size: options.scatterSize,
@@ -400,7 +400,7 @@ proto.update = function(data) {
     }
 
     textOptions = {
-        gl: gl,
+        gl: this.scene.glplot.gl,
         position: options.position,
         glyph: options.text,
         color: options.textColor,
@@ -431,7 +431,7 @@ proto.update = function(data) {
     }
 
     errorOptions = {
-        gl: gl,
+        gl: this.scene.glplot.gl,
         position: options.position,
         color: options.errorColor,
         error: options.errorBounds,

src/traces/scatter3d/convert.js

@@ -12,7 +12,7 @@
   ],
   "layout": {
     "title":"Now texts could be displayed in 3D on multiple lines.",
-    "width": 1200,
+    "width": 900,
     "height": 900,
     "scene":{
       "xaxis":{

test/image/baselines/gl3d_annotations.png

@@ -95,7 +95,7 @@
   ],
   "layout": {
     "height": 758,
-    "width": 1310,
+    "width": 1000,
     "title": "X-axis using autorange:'reversed',Y-axis using range:[30,-5] & Z-axis using range:'reversed' & type:log",
     "scene": {
       "xaxis": {

test/image/baselines/gl3d_annotations_orthographic.png

@@ -95,7 +95,7 @@
   ],
   "layout": {
     "height": 758,
-    "width": 1310,
+    "width": 1000,
     "title": "X-axis using autorange:'reversed',Y-axis using range:[30,-5] & Z-axis using range:'reversed' & type:log",
     "scene": {
       "xaxis": {

test/image/baselines/gl3d_autocolorscale.png

@@ -1013,7 +1013,7 @@
         }
       }
     },
-    "width": 1745,
+    "width": 878,
     "height": 878
   }
 }

test/image/baselines/gl3d_autorange-zero.png

@@ -384,7 +384,7 @@ describe('Test gl3d plots', function() {
         .then(done);
     });
 
-    it('@gl should display correct hover labels (mesh3d case)', function(done) {
+    it('@noCI @gl should display correct hover labels (mesh3d case)', function(done) {
         var x = [1, 1, 2, 3, 4, 2];
         var y = [2, 1, 3, 4, 5, 3];
         var z = [3, 7, 4, 5, 3.5, 2];