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

Orthographic projection for 3D plots - finalist #3550

Merged
merged 17 commits into from Feb 20, 2019

Conversation

Projects
None yet
2 participants
@archmoj
Copy link
Collaborator

commented Feb 18, 2019

Supersedes #3331.
Fixes #2611 by adding orthographic views to Plotly graphs.
A new attribute ortho is defined on the camera object (defaulted to false) and passed to gl-plot3d and gl-axes3d modules.
The scene initialisation now uses the camera initial vectors as well as ortho attribute.
The createCamera function needed in plot/gl3d/scene.js and gl-vis/gl-plot3d is centralised in a separate module (i.e. a fork of 3d-view-controls while applying Plotly.js camera.js latest changes).
Interactive demo.

TODO:

  • Fix relayout path to start new scene when switching between orthographic and perspective projections.
  • Fix orthographic scales for zoom and save image.
    plotly_orthographic_projection

@plotly/plotly_js
@jackparmer

orthographic view
adjust ortho camera dist in module and added orthographic mocks
adjust camera structure in jasmine test & corrected baselines
@@ -81,7 +81,7 @@
"gl-mat4": "^1.2.0",
"gl-mesh3d": "^2.0.7",
"gl-plot2d": "^1.4.2",
"gl-plot3d": "^1.6.3",
"gl-plot3d": "git://github.com/gl-vis/gl-plot3d.git#33d5169a62d9b903a8f3a4607f4dae726c4bb57b",

This comment has been minimized.

Copy link
@archmoj

This comment has been minimized.

Copy link
@archmoj

archmoj Feb 18, 2019

Author Collaborator

Also regarding gl-axes3d changes... https://github.com/gl-vis/gl-axes3d/compare/ortho-view1

Show resolved Hide resolved package.json Outdated
@etpinard

This comment has been minimized.

Copy link
Member

commented Feb 18, 2019

@archmoj this is starting to look good! Nice work!

About

  • Fix relayout path to start new scene when switching between orthographic and perspective projections.

First you'll need to change the scene.projection.type editType to 'calc' (we could eventually try 'plot' and even 'modebar', but we should start with 'calc'). Then maybe you could try adding some code to

proto.updateFx = function(dragmode, hovermode) {
var camera = this.camera;
if(camera) {
// rotate and orbital are synonymous
if(dragmode === 'orbit') {
camera.mode = 'orbit';
camera.keyBindingMode = 'rotate';
} else if(dragmode === 'turntable') {
camera.up = [0, 0, 1];
camera.mode = 'turntable';
camera.keyBindingMode = 'rotate';
// The setter for camera.mode animates the transition to z-up,
// but only if we *don't* explicitly set z-up earlier via the
// relayout. So push `up` back to layout & fullLayout manually now.
var gd = this.graphDiv;
var fullLayout = gd._fullLayout;
var fullCamera = this.fullSceneLayout.camera;
var x = fullCamera.up.x;
var y = fullCamera.up.y;
var z = fullCamera.up.z;
// only push `up` back to (full)layout if it's going to change
if(z / Math.sqrt(x * x + y * y + z * z) > 0.999) return;
var attr = this.id + '.camera.up';
var zUp = {x: 0, y: 0, z: 1};
var edits = {};
edits[attr] = zUp;
var layout = gd.layout;
Registry.call('_storeDirectGUIEdit', layout, fullLayout._preGUI, edits);
fullCamera.up = zUp;
Lib.nestedProperty(layout, attr).set(zUp);
} else {
// none rotation modes [pan or zoom]
camera.keyBindingMode = dragmode;
}
}
// to put dragmode and hovermode on the same grounds from relayout
this.fullSceneLayout.hovermode = hovermode;
};

to update the projection?

@etpinard etpinard added this to the v1.45.0 milestone Feb 20, 2019

@etpinard

This comment has been minimized.

Copy link
Member

commented Feb 20, 2019

Awesome work @archmoj !!

Adding this to v1.45.0 - might as well 😄 right?

💃 💃 💃

@archmoj archmoj merged commit 212a219 into master Feb 20, 2019

8 checks passed

ci/circleci: build Your tests passed on CircleCI!
Details
ci/circleci: publish Your tests passed on CircleCI!
Details
ci/circleci: test-image Your tests passed on CircleCI!
Details
ci/circleci: test-image2 Your tests passed on CircleCI!
Details
ci/circleci: test-jasmine Your tests passed on CircleCI!
Details
ci/circleci: test-jasmine2 Your tests passed on CircleCI!
Details
ci/circleci: test-syntax Your tests passed on CircleCI!
Details
continuous-integration/appveyor/branch AppVeyor build succeeded
Details

@archmoj archmoj deleted the ortho-view-finalist branch Feb 20, 2019

@archmoj archmoj referenced this pull request Feb 25, 2019

Merged

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

5 of 5 tasks complete
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.