Skip to content

Orthographic projection for 3D plots - finalist #3550

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.

Sign up for GitHub

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 17 commits into from
Feb 20, 2019
Merged

Orthographic projection for 3D plots - finalist #3550

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
b010a1c
orthographic view
archmoj Feb 18, 2019
e1dff30
removing 3d-view-controls dependency now loacted in gl-plot3d
archmoj Feb 18, 2019
43e4a04
camera.projection.type
archmoj Feb 18, 2019
e97fc78
handle cases without camera.projection
archmoj Feb 18, 2019
1843b1d
fixed save png orthographic plot
archmoj Feb 18, 2019
5c2186c
update gl-plot3d link
archmoj Feb 19, 2019
b674b21
switch cameras when projection type is changed
archmoj Feb 19, 2019
3a64174
fixup createCamera function and added jasmine tests
archmoj Feb 20, 2019
a9a2c6a
almost there
archmoj Feb 20, 2019
428bd1c
fixed relayout after first draw
archmoj Feb 20, 2019
48d9e11
fixed modebar resetdefault and setCamera call in plot_api
archmoj Feb 20, 2019
7c8cec3
double up padding for orthographic labels
archmoj Feb 20, 2019
9a24b69
new baselines with double padding for labels set in gl-axes3d
archmoj Feb 20, 2019
2ff6351
fixed orthographic scales
archmoj Feb 20, 2019
33adbbb
new baselines with corrected scales
archmoj Feb 20, 2019
74f839b
improve jasmine tests to cover interactions with orthographic scenes
archmoj Feb 20, 2019
9af35cc
bump gl-plot3d and gl-axes3d
archmoj Feb 20, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 13 additions & 16 deletions package-lock.json
View file
Open in desktop

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

4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@
]
},
"dependencies": {
"3d-view": "^2.0.0",
"3d-view-controls": "git://github.com/archmoj/3d-view-controls.git#fe3c77b807618c0d51f4c50a691e2af0486bfda9",
"alpha-shape": "^1.0.0",
"array-range": "^1.0.1",
"canvas-fit": "^1.5.0",
Expand All @@ -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",
Copy link
Contributor Author

Choose a reason for hiding this comment

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

https://github.com/gl-vis/gl-plot3d/compare/ortho-view1

Copy link
Contributor Author

Choose a reason for hiding this comment

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

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

"gl-pointcloud2d": "^1.0.2",
"gl-scatter3d": "^1.1.6",
"gl-select-box": "^1.0.3",
Expand Down
270 changes: 0 additions & 270 deletions src/plots/gl3d/camera.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,273 +5,3 @@
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/

'use strict';

module.exports = createCamera;

var now = require('right-now');
var createView = require('3d-view');
var mouseChange = require('mouse-change');
var mouseWheel = require('mouse-wheel');
var mouseOffset = require('mouse-event-offset');
var supportsPassive = require('has-passive-events');

function createCamera(element, options) {
element = element || document.body;
options = options || {};

var limits = [ 0.01, Infinity ];
if('distanceLimits' in options) {
limits[0] = options.distanceLimits[0];
limits[1] = options.distanceLimits[1];
}
if('zoomMin' in options) {
limits[0] = options.zoomMin;
}
if('zoomMax' in options) {
limits[1] = options.zoomMax;
}

var view = createView({
center: options.center || [0, 0, 0],
up: options.up || [0, 1, 0],
eye: options.eye || [0, 0, 10],
mode: options.mode || 'orbit',
distanceLimits: limits
});

var pmatrix = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
var distance = 0.0;
var width = element.clientWidth;
var height = element.clientHeight;

var camera = {
keyBindingMode: 'rotate',
enableWheel: true,
view: view,
element: element,
delay: options.delay || 16,
rotateSpeed: options.rotateSpeed || 1,
zoomSpeed: options.zoomSpeed || 1,
translateSpeed: options.translateSpeed || 1,
flipX: !!options.flipX,
flipY: !!options.flipY,
modes: view.modes,
tick: function() {
var t = now();
var delay = this.delay;
var ctime = t - 2 * delay;
view.idle(t - delay);
view.recalcMatrix(ctime);
view.flush(t - (100 + delay * 2));
var allEqual = true;
var matrix = view.computedMatrix;
for(var i = 0; i < 16; ++i) {
allEqual = allEqual && (pmatrix[i] === matrix[i]);
pmatrix[i] = matrix[i];
}
var sizeChanged =
element.clientWidth === width &&
element.clientHeight === height;
width = element.clientWidth;
height = element.clientHeight;
if(allEqual) return !sizeChanged;
distance = Math.exp(view.computedRadius[0]);
return true;
},
lookAt: function(center, eye, up) {
view.lookAt(view.lastT(), center, eye, up);
},
rotate: function(pitch, yaw, roll) {
view.rotate(view.lastT(), pitch, yaw, roll);
},
pan: function(dx, dy, dz) {
view.pan(view.lastT(), dx, dy, dz);
},
translate: function(dx, dy, dz) {
view.translate(view.lastT(), dx, dy, dz);
}
};

Object.defineProperties(camera, {
matrix: {
get: function() {
return view.computedMatrix;
},
set: function(mat) {
view.setMatrix(view.lastT(), mat);
return view.computedMatrix;
},
enumerable: true
},
mode: {
get: function() {
return view.getMode();
},
set: function(mode) {
var curUp = view.computedUp.slice();
var curEye = view.computedEye.slice();
var curCenter = view.computedCenter.slice();
view.setMode(mode);
if(mode === 'turntable') {
// Hacky time warping stuff to generate smooth animation
var t0 = now();
view._active.lookAt(t0, curEye, curCenter, curUp);
view._active.lookAt(t0 + 500, curEye, curCenter, [0, 0, 1]);
view._active.flush(t0);
}
return view.getMode();
},
enumerable: true
},
center: {
get: function() {
return view.computedCenter;
},
set: function(ncenter) {
view.lookAt(view.lastT(), null, ncenter);
return view.computedCenter;
},
enumerable: true
},
eye: {
get: function() {
return view.computedEye;
},
set: function(neye) {
view.lookAt(view.lastT(), neye);
return view.computedEye;
},
enumerable: true
},
up: {
get: function() {
return view.computedUp;
},
set: function(nup) {
view.lookAt(view.lastT(), null, null, nup);
return view.computedUp;
},
enumerable: true
},
distance: {
get: function() {
return distance;
},
set: function(d) {
view.setDistance(view.lastT(), d);
return d;
},
enumerable: true
},
distanceLimits: {
get: function() {
return view.getDistanceLimits(limits);
},
set: function(v) {
view.setDistanceLimits(v);
return v;
},
enumerable: true
}
});

element.addEventListener('contextmenu', function(ev) {
ev.preventDefault();
return false;
});

var lastX = 0;
var lastY = 0;
var lastMods = {shift: false, control: false, alt: false, meta: false};
camera.mouseListener = mouseChange(element, handleInteraction);

// enable simple touch interactions
element.addEventListener('touchstart', function(ev) {
var xy = mouseOffset(ev.changedTouches[0], element);
handleInteraction(0, xy[0], xy[1], lastMods);
handleInteraction(1, xy[0], xy[1], lastMods);

ev.preventDefault();
}, supportsPassive ? {passive: false} : false);
element.addEventListener('touchmove', function(ev) {
var xy = mouseOffset(ev.changedTouches[0], element);
handleInteraction(1, xy[0], xy[1], lastMods);

ev.preventDefault();
}, supportsPassive ? {passive: false} : false);
element.addEventListener('touchend', function(ev) {
handleInteraction(0, lastX, lastY, lastMods);

ev.preventDefault();
}, supportsPassive ? {passive: false} : false);

function handleInteraction(buttons, x, y, mods) {
var keyBindingMode = camera.keyBindingMode;

if(keyBindingMode === false) return;

var rotate = keyBindingMode === 'rotate';
var pan = keyBindingMode === 'pan';
var zoom = keyBindingMode === 'zoom';

var ctrl = !!mods.control;
var alt = !!mods.alt;
var shift = !!mods.shift;
var left = !!(buttons & 1);
var right = !!(buttons & 2);
var middle = !!(buttons & 4);

var scale = 1.0 / element.clientHeight;
var dx = scale * (x - lastX);
var dy = scale * (y - lastY);

var flipX = camera.flipX ? 1 : -1;
var flipY = camera.flipY ? 1 : -1;

var t = now();

var drot = Math.PI * camera.rotateSpeed;

if((rotate && left && !ctrl && !alt && !shift) || (left && !ctrl && !alt && shift)) {
// Rotate
view.rotate(t, flipX * drot * dx, -flipY * drot * dy, 0);
}

if((pan && left && !ctrl && !alt && !shift) || right || (left && ctrl && !alt && !shift)) {
// Pan
view.pan(t, -camera.translateSpeed * dx * distance, camera.translateSpeed * dy * distance, 0);
}

if((zoom && left && !ctrl && !alt && !shift) || middle || (left && !ctrl && alt && !shift)) {
// Zoom
var kzoom = -camera.zoomSpeed * dy / window.innerHeight * (t - view.lastT()) * 100;
view.pan(t, 0, 0, distance * (Math.exp(kzoom) - 1));
}

lastX = x;
lastY = y;
lastMods = mods;

return true;
}

camera.wheelListener = mouseWheel(element, function(dx, dy) {
// TODO remove now that we can disable scroll via scrollZoom?
if(camera.keyBindingMode === false) return;
if(!camera.enableWheel) return;

var flipX = camera.flipX ? 1 : -1;
var flipY = camera.flipY ? 1 : -1;
var t = now();
if(Math.abs(dx) > Math.abs(dy)) {
view.rotate(t, 0, 0, -dx * flipX * Math.PI * camera.rotateSpeed / window.innerWidth);
} else {
var kzoom = -camera.zoomSpeed * flipY * dy / window.innerHeight * (t - view.lastT()) / 20.0;
view.pan(t, 0, 0, distance * (Math.exp(kzoom) - 1));
}
}, true);

return camera;
}
4 changes: 3 additions & 1 deletion src/plots/gl3d/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ exports.plot = function plotGl3d(gd) {
var sceneId = sceneIds[i];
var fullSceneData = getSubplotData(fullData, GL3D, sceneId);
var sceneLayout = fullLayout[sceneId];
var camera = sceneLayout.camera;
var scene = sceneLayout._scene;

if(!scene) {
Expand All @@ -56,7 +57,8 @@ exports.plot = function plotGl3d(gd) {
graphDiv: gd,
container: gd.querySelector('.gl-container'),
staticPlot: gd._context.staticPlot,
plotGlPixelRatio: gd._context.plotGlPixelRatio
plotGlPixelRatio: gd._context.plotGlPixelRatio,
camera: camera
},
fullLayout
);
Expand Down
1 change: 1 addition & 0 deletions src/plots/gl3d/layout/defaults.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@ function handleGl3dDefaults(sceneLayoutIn, sceneLayoutOut, coerce, opts) {
coerce('camera.' + cameraKeys[j] + '.y');
coerce('camera.' + cameraKeys[j] + '.z');
}
coerce('camera.ortho');

/*
* coerce to positive number (min 0) but also do not accept 0 (>0 not >=0)
Expand Down
10 changes: 10 additions & 0 deletions src/plots/gl3d/layout/layout_attributes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,16 @@ module.exports = {
'of this scene.'
].join(' ')
}),
ortho: extendFlat({
valType: 'boolean',
role: 'info',
dflt: false,
editType: 'camera',
description: [
'Enable/disable orthographic camera.',
'Default is perspective.'
].join(' ')
}),
editType: 'camera'
},
domain: domainAttrs({name: 'scene', editType: 'plot'}),
Expand Down
Loading