Skip to content

Revised pixelRatio in 3D plots to address multiple bugs #3573

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Feb 26, 2019
50 changes: 25 additions & 25 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

14 changes: 7 additions & 7 deletions package.json
Original file line number Diff line number Diff line change
@@ -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",
4 changes: 1 addition & 3 deletions src/plot_api/subroutines.js
Original file line number Diff line number Diff line change
@@ -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);
}
};

21 changes: 13 additions & 8 deletions src/plots/gl3d/scene.js
Original file line number Diff line number Diff line change
@@ -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;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This may break graphs where users set config option plotGlPixelRatio:

plotGlPixelRatio: {
valType: 'number',
dflt: 2,
min: 1,
max: 4,
description: [
'Set the pixel ratio during WebGL image export.',
'This config option was formerly named `plot3dPixelRatio`',
'which is now deprecated.'
].join(' ')
},

Orca does it here:

https://github.com/plotly/orca/blob/776d5c3f1faf7272f7eb6e1c11ba8d7fb0057734/src/component/plotly-graph/render.js#L30

using (a strange) value:

https://github.com/plotly/orca/blob/776d5c3f1faf7272f7eb6e1c11ba8d7fb0057734/src/component/plotly-graph/constants.js#L35

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh wait nevermind, this.pixelRatio isn't set by default (correct?) so options.plotGlPixelRatio is honoured.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes I think so.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok great. Can you try generating the gl3d_* baseline using orca with a few different plotGlPixelRatio values?

You may want to modify:

test_image () {
$root/../orca/bin/orca.js graph \
$root/test/image/mocks/mapbox_* \
$root/test/image/mocks/gl3d_cone* \
--plotly $root/build/plotly.js \
--mapbox-access-token "pk.eyJ1IjoiZXRwaW5hcmQiLCJhIjoiY2luMHIzdHE0MGFxNXVubTRxczZ2YmUxaCJ9.hwWZful0U2CQxit4ItNsiQ" \
--output-dir $root/test/image/baselines/ \
--verbose || EXIT_STATE=$?
}

to get orca started easily and you might have to tweak the orca src files e.g. here:

https://github.com/plotly/orca/blob/776d5c3f1faf7272f7eb6e1c11ba8d7fb0057734/src/component/plotly-graph/constants.js#L35

or

https://github.com/plotly/orca/blob/776d5c3f1faf7272f7eb6e1c11ba8d7fb0057734/src/component/plotly-graph/render.js#L30

to pass the different plotGlPixelRatio values down to plotly.js

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@etpinard Thank you so much for the links. Using orca I was able to produce gl3d_* images from this branch and compared them against the master branch. I also tweaked the pixelRatio of orca module and the configuration has an impact.


// 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;
}
};
8 changes: 4 additions & 4 deletions src/traces/scatter3d/convert.js
Original file line number Diff line number Diff line change
@@ -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,
Binary file modified test/image/baselines/gl3d_annotations.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/gl3d_annotations_orthographic.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/gl3d_autocolorscale.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/gl3d_autorange-zero.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/gl3d_bunny-hull.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/gl3d_bunny.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/gl3d_chrisp-nan-1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/gl3d_contour-lines.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/gl3d_contour-lines2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/gl3d_convex-hull.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/gl3d_cube.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/gl3d_cufflinks.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/gl3d_error_bars_log.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/gl3d_error_bars_log_2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/gl3d_errorbars_sqrt.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/gl3d_errorbars_xy.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/gl3d_errorbars_zx.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/gl3d_errorbars_zy.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/gl3d_ibm-plot.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/gl3d_isosurface_math.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/gl3d_isosurface_multiple-traces.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/gl3d_isosurface_thin_caps_different_dims.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/gl3d_isosurface_xycaps_volume_slices.png
Binary file modified test/image/baselines/gl3d_log-axis.png
Binary file modified test/image/baselines/gl3d_marker-arrays.png
Binary file modified test/image/baselines/gl3d_marker-color.png
Binary file modified test/image/baselines/gl3d_marker_symbols.png
Binary file modified test/image/baselines/gl3d_mirror-ticks.png
Binary file modified test/image/baselines/gl3d_nan-holes.png
Binary file modified test/image/baselines/gl3d_opacity-scaling-spikes.png
Binary file modified test/image/baselines/gl3d_opacity-surface.png
Binary file modified test/image/baselines/gl3d_parametric_surface_data_precision.png
Binary file modified test/image/baselines/gl3d_perspective_tick_distances.png
Binary file modified test/image/baselines/gl3d_projection-traces.png
Binary file modified test/image/baselines/gl3d_scatter-color-array.png
Binary file modified test/image/baselines/gl3d_scatter-color-line-gradient.png
Binary file modified test/image/baselines/gl3d_scatter-color-mono-and-palette.png
Binary file modified test/image/baselines/gl3d_scatter3d-colorscale.png
Binary file modified test/image/baselines/gl3d_scatter3d_errorbars_inherit_color.png
Binary file modified test/image/baselines/gl3d_streamtube-first.png
Binary file modified test/image/baselines/gl3d_streamtube-thin.png
Binary file modified test/image/baselines/gl3d_streamtube-wind.png
Binary file modified test/image/baselines/gl3d_surface-circular-colorscale.png
Binary file modified test/image/baselines/gl3d_surface-lighting.png
Binary file modified test/image/baselines/gl3d_surface_contour_precision.png
Binary file modified test/image/baselines/gl3d_surface_intensity.png
Binary file modified test/image/baselines/gl3d_wire-surface.png
Binary file modified test/image/baselines/gl3d_xy-defined-ticks.png
Binary file modified test/image/baselines/gl3d_z-range.png
Binary file modified test/image/baselines/grid_subplot_types.png
Loading