Skip to content
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

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

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

Expand Down
21 changes: 13 additions & 8 deletions src/plots/gl3d/scene.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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];
Expand All @@ -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;
Expand All @@ -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;
}
Expand Down Expand Up @@ -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]
Expand All @@ -791,7 +796,7 @@ proto.setCamera = function setCamera(cameraData) {

this.glplot.dispose();

initializeGLPlot(this, cameraData);
initializeGLPlot(this, cameraData, pixelRatio);
this.glplot.camera._ortho = newOrtho;
}
};
Expand Down
8 changes: 4 additions & 4 deletions src/traces/scatter3d/convert.js
Original file line number Diff line number Diff line change
Expand Up @@ -343,7 +343,7 @@ proto.update = function(data) {
this.dataPoints = options.position;

lineOptions = {
gl: gl,
gl: this.scene.glplot.gl,
etpinard marked this conversation as resolved.
Show resolved Hide resolved
position: options.position,
color: options.lineColor,
lineWidth: options.lineWidth || 1,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down
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