Merge pull request #3573 from plotly/fixup-pixelratio-3d

Revised pixelRatio in 3D plots to address multiple bugs

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": "^1.2.3",
     "gl-contour2d": "^1.1.5",
-    "gl-error3d": "^1.0.13",
+    "gl-error3d": "^1.0.14",
     "gl-heatmap2d": "^1.0.5",
     "gl-line3d": "^1.1.10",
     "gl-mat4": "^1.2.0",
-    "gl-mesh3d": "^2.0.7",
+    "gl-mesh3d": "^2.0.8",
     "gl-plot2d": "^1.4.2",
-    "gl-plot3d": "^2.0.0",
+    "gl-plot3d": "^2.1.1",
     "gl-pointcloud2d": "^1.0.2",
-    "gl-scatter3d": "^1.1.6",
+    "gl-scatter3d": "^1.2.0",
     "gl-select-box": "^1.0.3",
     "gl-spikes2d": "^1.0.2",
-    "gl-streamtube3d": "^1.1.2",
-    "gl-surface3d": "^1.4.1",
+    "gl-streamtube3d": "^1.1.3",
+    "gl-surface3d": "^1.4.2",
     "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,