Blending Implementation

master
parent f25ea1a37e
commit 7d33372640
  1. BIN
      __pycache__/run.cpython-38.pyc
  2. 36
      frontend/.babelrc
  3. 7
      frontend/config/dev.env.js
  4. 75
      frontend/config/index.js
  5. 4
      frontend/config/prod.env.js
  6. 12
      frontend/index.html
  7. 1
      frontend/node_modules/.bin/acorn
  8. 1
      frontend/node_modules/.bin/ansi-html
  9. 1
      frontend/node_modules/.bin/atob
  10. 1
      frontend/node_modules/.bin/autoprefixer
  11. 1
      frontend/node_modules/.bin/browserslist
  12. 1
      frontend/node_modules/.bin/buble
  13. 1
      frontend/node_modules/.bin/cdl
  14. 1
      frontend/node_modules/.bin/common-config
  15. 1
      frontend/node_modules/.bin/cssesc
  16. 1
      frontend/node_modules/.bin/csv2json
  17. 1
      frontend/node_modules/.bin/csv2tsv
  18. 1
      frontend/node_modules/.bin/dsv2dsv
  19. 1
      frontend/node_modules/.bin/dsv2json
  20. 1
      frontend/node_modules/.bin/errno
  21. 1
      frontend/node_modules/.bin/escodegen
  22. 1
      frontend/node_modules/.bin/esgenerate
  23. 1
      frontend/node_modules/.bin/eslint
  24. 1
      frontend/node_modules/.bin/esparse
  25. 1
      frontend/node_modules/.bin/esvalidate
  26. 1
      frontend/node_modules/.bin/expand-object
  27. 1
      frontend/node_modules/.bin/findup
  28. 1
      frontend/node_modules/.bin/geo2svg
  29. 1
      frontend/node_modules/.bin/geograticule
  30. 1
      frontend/node_modules/.bin/geojson-rewind
  31. 1
      frontend/node_modules/.bin/geoproject
  32. 1
      frontend/node_modules/.bin/geoquantize
  33. 1
      frontend/node_modules/.bin/geostitch
  34. 1
      frontend/node_modules/.bin/glslify
  35. 1
      frontend/node_modules/.bin/he
  36. 1
      frontend/node_modules/.bin/html-minifier
  37. 1
      frontend/node_modules/.bin/ignored
  38. 1
      frontend/node_modules/.bin/import-local-fixture
  39. 1
      frontend/node_modules/.bin/installed-package-contents
  40. 1
      frontend/node_modules/.bin/is-ci
  41. 1
      frontend/node_modules/.bin/js-yaml
  42. 1
      frontend/node_modules/.bin/jsesc
  43. 1
      frontend/node_modules/.bin/json2csv
  44. 1
      frontend/node_modules/.bin/json2dsv
  45. 1
      frontend/node_modules/.bin/json2tsv
  46. 1
      frontend/node_modules/.bin/json5
  47. 1
      frontend/node_modules/.bin/loose-envify
  48. 1
      frontend/node_modules/.bin/miller-rabin
  49. 1
      frontend/node_modules/.bin/mime
  50. 1
      frontend/node_modules/.bin/mkdirp
  51. 1
      frontend/node_modules/.bin/multicast-dns
  52. 1
      frontend/node_modules/.bin/ncu
  53. 1
      frontend/node_modules/.bin/normalize-pkg
  54. 1
      frontend/node_modules/.bin/npm-check-updates
  55. 1
      frontend/node_modules/.bin/npm-packlist
  56. 1
      frontend/node_modules/.bin/opencollective
  57. 1
      frontend/node_modules/.bin/opener
  58. 1
      frontend/node_modules/.bin/pacote
  59. 1
      frontend/node_modules/.bin/parser
  60. 1
      frontend/node_modules/.bin/pbf
  61. 1
      frontend/node_modules/.bin/prettier
  62. 1
      frontend/node_modules/.bin/project-name
  63. 1
      frontend/node_modules/.bin/rc
  64. 1
      frontend/node_modules/.bin/regjsparser
  65. 1
      frontend/node_modules/.bin/rimraf
  66. 1
      frontend/node_modules/.bin/sass
  67. 1
      frontend/node_modules/.bin/semver
  68. 1
      frontend/node_modules/.bin/sha.js
  69. 1
      frontend/node_modules/.bin/sharkdown
  70. 1
      frontend/node_modules/.bin/shjs
  71. 1
      frontend/node_modules/.bin/svgo
  72. 1
      frontend/node_modules/.bin/tape
  73. 1
      frontend/node_modules/.bin/terser
  74. 1
      frontend/node_modules/.bin/topo2geo
  75. 1
      frontend/node_modules/.bin/topomerge
  76. 1
      frontend/node_modules/.bin/topoquantize
  77. 1
      frontend/node_modules/.bin/tsv2csv
  78. 1
      frontend/node_modules/.bin/tsv2json
  79. 1
      frontend/node_modules/.bin/uglifyjs
  80. 1
      frontend/node_modules/.bin/update
  81. 1
      frontend/node_modules/.bin/uuid
  82. 1
      frontend/node_modules/.bin/webpack
  83. 1
      frontend/node_modules/.bin/webpack-bundle-analyzer
  84. 1
      frontend/node_modules/.bin/webpack-cli
  85. 1
      frontend/node_modules/.bin/webpack-dev-server
  86. 1
      frontend/node_modules/.bin/which
  87. 16
      frontend/node_modules/3d-view/.npmignore
  88. 22
      frontend/node_modules/3d-view/LICENSE
  89. 223
      frontend/node_modules/3d-view/README.md
  90. 225
      frontend/node_modules/3d-view/example/demo.js
  91. 115
      frontend/node_modules/3d-view/example/minimal.js
  92. 67
      frontend/node_modules/3d-view/package.json
  93. 100
      frontend/node_modules/3d-view/test/test.js
  94. 122
      frontend/node_modules/3d-view/view.js
  95. 22
      frontend/node_modules/@babel/code-frame/LICENSE
  96. 19
      frontend/node_modules/@babel/code-frame/README.md
  97. 173
      frontend/node_modules/@babel/code-frame/lib/index.js
  98. 52
      frontend/node_modules/@babel/code-frame/package.json
  99. 22
      frontend/node_modules/@babel/compat-data/LICENSE
  100. 4
      frontend/node_modules/@babel/compat-data/corejs2-built-ins.js
  101. Some files were not shown because too many files have changed in this diff Show More

Binary file not shown.

@ -1,36 +0,0 @@
{
"presets": [
[
"vue"
],
[
"@babel/preset-env",
{
"modules": false,
"targets": {
"browsers": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
}
]
],
"plugins": [
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-syntax-import-meta",
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-json-strings",
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
"@babel/plugin-proposal-function-sent",
"@babel/plugin-proposal-export-namespace-from",
"@babel/plugin-proposal-numeric-separator",
"@babel/plugin-proposal-throw-expressions"
]
}

@ -1,7 +0,0 @@
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"'
})

@ -1,75 +0,0 @@
'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
// Use Eslint Loader?
// If true, your code will be linted during bundling and
// linting errors and warnings will be shown in the console.
useEslint: true,
// If true, eslint errors and warnings will also be shown in the error overlay
// in the browser.
showEslintErrorsInOverlay: false,
/**
* Source Maps
*/
// https://webpack.js.org/configuration/devtool/#development
devtool: 'cheap-module-eval-source-map',
// If you have problems debugging vue-files in devtools,
// set this to false - it *may* help
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: true,
cssSourceMap: true
},
build: {
// Template for index.html
index: path.resolve(__dirname, '../../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
/**
* Source Maps
*/
productionSourceMap: true,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
}

@ -1,4 +0,0 @@
'use strict'
module.exports = {
NODE_ENV: '"production"'
}

@ -1,12 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>StackGenVis</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

1
frontend/node_modules/.bin/acorn generated vendored

@ -1 +0,0 @@
../acorn/bin/acorn

@ -1 +0,0 @@
../ansi-html/bin/ansi-html

1
frontend/node_modules/.bin/atob generated vendored

@ -1 +0,0 @@
../atob/bin/atob.js

@ -1 +0,0 @@
../autoprefixer/bin/autoprefixer

@ -1 +0,0 @@
../browserslist/cli.js

1
frontend/node_modules/.bin/buble generated vendored

@ -1 +0,0 @@
../buble/bin/buble

1
frontend/node_modules/.bin/cdl generated vendored

@ -1 +0,0 @@
../cardinal/bin/cdl.js

@ -1 +0,0 @@
../common-config/cli.js

@ -1 +0,0 @@
../cssesc/bin/cssesc

@ -1 +0,0 @@
../d3-dsv/bin/dsv2json

@ -1 +0,0 @@
../d3-dsv/bin/dsv2dsv

@ -1 +0,0 @@
../d3-dsv/bin/dsv2dsv

@ -1 +0,0 @@
../d3-dsv/bin/dsv2json

1
frontend/node_modules/.bin/errno generated vendored

@ -1 +0,0 @@
../errno/cli.js

@ -1 +0,0 @@
../escodegen/bin/escodegen.js

@ -1 +0,0 @@
../escodegen/bin/esgenerate.js

@ -1 +0,0 @@
../eslint/bin/eslint.js

@ -1 +0,0 @@
../esprima/bin/esparse.js

@ -1 +0,0 @@
../esprima/bin/esvalidate.js

@ -1 +0,0 @@
../expand-object/cli.js

@ -1 +0,0 @@
../@choojs/findup/bin/findup.js

@ -1 +0,0 @@
../d3-geo-projection/bin/geo2svg

@ -1 +0,0 @@
../d3-geo-projection/bin/geograticule

@ -1 +0,0 @@
../@mapbox/geojson-rewind/geojson-rewind

@ -1 +0,0 @@
../d3-geo-projection/bin/geoproject

@ -1 +0,0 @@
../d3-geo-projection/bin/geoquantize

@ -1 +0,0 @@
../d3-geo-projection/bin/geostitch

@ -1 +0,0 @@
../glslify/bin.js

1
frontend/node_modules/.bin/he generated vendored

@ -1 +0,0 @@
../he/bin/he

@ -1 +0,0 @@
../html-minifier/cli.js

@ -1 +0,0 @@
../dotignore/bin/ignored

@ -1 +0,0 @@
../import-local/fixtures/cli.js

@ -1 +0,0 @@
../@npmcli/installed-package-contents/index.js

1
frontend/node_modules/.bin/is-ci generated vendored

@ -1 +0,0 @@
../is-ci/bin.js

@ -1 +0,0 @@
../js-yaml/bin/js-yaml.js

1
frontend/node_modules/.bin/jsesc generated vendored

@ -1 +0,0 @@
../jsesc/bin/jsesc

@ -1 +0,0 @@
../d3-dsv/bin/json2dsv

@ -1 +0,0 @@
../d3-dsv/bin/json2dsv

@ -1 +0,0 @@
../d3-dsv/bin/json2dsv

1
frontend/node_modules/.bin/json5 generated vendored

@ -1 +0,0 @@
../json5/lib/cli.js

@ -1 +0,0 @@
../loose-envify/cli.js

@ -1 +0,0 @@
../miller-rabin/bin/miller-rabin

1
frontend/node_modules/.bin/mime generated vendored

@ -1 +0,0 @@
../mime/cli.js

@ -1 +0,0 @@
../mkdirp/bin/cmd.js

@ -1 +0,0 @@
../multicast-dns/cli.js

1
frontend/node_modules/.bin/ncu generated vendored

@ -1 +0,0 @@
../npm-check-updates/bin/ncu

@ -1 +0,0 @@
../normalize-pkg/cli.js

@ -1 +0,0 @@
../npm-check-updates/bin/npm-check-updates

@ -1 +0,0 @@
../npm-packlist/bin/index.js

@ -1 +0,0 @@
../@nuxt/opencollective/bin/opencollective.js

@ -1 +0,0 @@
../opener/bin/opener-bin.js

@ -1 +0,0 @@
../pacote/lib/bin.js

@ -1 +0,0 @@
../@babel/parser/bin/babel-parser.js

1
frontend/node_modules/.bin/pbf generated vendored

@ -1 +0,0 @@
../pbf/bin/pbf

@ -1 +0,0 @@
../prettier/bin-prettier.js

@ -1 +0,0 @@
../project-name/cli.js

1
frontend/node_modules/.bin/rc generated vendored

@ -1 +0,0 @@
../rc/cli.js

@ -1 +0,0 @@
../regjsparser/bin/parser

@ -1 +0,0 @@
../rimraf/bin.js

1
frontend/node_modules/.bin/sass generated vendored

@ -1 +0,0 @@
../sass/sass.js

@ -1 +0,0 @@
../semver/bin/semver.js

@ -1 +0,0 @@
../sha.js/bin.js

@ -1 +0,0 @@
../sharkdown/sharkdown

1
frontend/node_modules/.bin/shjs generated vendored

@ -1 +0,0 @@
../shelljs/bin/shjs

1
frontend/node_modules/.bin/svgo generated vendored

@ -1 +0,0 @@
../svgo/bin/svgo

1
frontend/node_modules/.bin/tape generated vendored

@ -1 +0,0 @@
../tape/bin/tape

@ -1 +0,0 @@
../terser/bin/terser

@ -1 +0,0 @@
../topojson-client/bin/topo2geo

@ -1 +0,0 @@
../topojson-client/bin/topomerge

@ -1 +0,0 @@
../topojson-client/bin/topoquantize

@ -1 +0,0 @@
../d3-dsv/bin/dsv2dsv

@ -1 +0,0 @@
../d3-dsv/bin/dsv2json

@ -1 +0,0 @@
../uglify-js/bin/uglifyjs

@ -1 +0,0 @@
../update/bin/update.js

1
frontend/node_modules/.bin/uuid generated vendored

@ -1 +0,0 @@
../uuid/bin/uuid

@ -1 +0,0 @@
../webpack/bin/webpack.js

@ -1 +0,0 @@
../webpack-bundle-analyzer/lib/bin/analyzer.js

@ -1 +0,0 @@
../webpack-cli/bin/cli.js

@ -1 +0,0 @@
../webpack-dev-server/bin/webpack-dev-server.js

1
frontend/node_modules/.bin/which generated vendored

@ -1 +0,0 @@
../which/bin/which

@ -1,16 +0,0 @@
lib-cov
*.seed
*.log
*.csv
*.dat
*.out
*.pid
*.gz
pids
logs
results
npm-debug.log
node_modules/*
*.DS_Store

@ -1,22 +0,0 @@
The MIT License (MIT)
Copyright (c) 2015 Mikola Lysenko
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

@ -1,223 +0,0 @@
3d-view
=======
This module is a generic interface which synchronizes several existing view interactions
* [turntable-camera-controller](https://github.com/mikolalysenko/turntable-camera-controller)
* [orbit-camera-controller](https://github.com/mikolalysenko/orbit-camera-controller)
* [matrix-camera-controller](https://github.com/mikolalysenko/orbit-camera-controller)
Each camera controller proceeds by appending events onto a log. The current camera state is obtained by interpolating between these events.
# API
[Try a more complete demo here](https://mikolalysenko.github.io/3d-view)
```javascript
var now = require('right-now')
var bunny = require('bunny')
var perspective = require('gl-mat4/perspective')
var fit = require('canvas-fit')
var createContext = require('gl-context')
var createAxes = require('gl-axes')
var createMesh = require('gl-simplicial-complex')
var createCamera = require('3d-view')
//Set up WebGL
var canvas = document.createElement('canvas')
document.body.appendChild(canvas)
window.addEventListener('resize', fit(canvas), false)
var gl = createContext(canvas, {}, render)
//Create objects for rendering
var bounds = [[-10,-10,-10], [10,10,10]]
var mesh = createMesh(gl, {
cells: bunny.cells,
positions: bunny.positions,
colormap: 'jet'
})
var axes = createAxes(gl, {
bounds: bounds,
tickSpacing: [1,1,1],
textSize: 0.05
})
//Set up camera
var projectionMatrix = new Array(16)
var camera = createCamera({
center: [
0.5*(bounds[0][0]+bounds[1][0]),
0.5*(bounds[0][1]+bounds[1][1]),
0.5*(bounds[0][2]+bounds[1][2]) ],
eye: [0, 0, bounds[1][2]],
distanceLimits: [1, 1000]
})
//Create mode drop down
var modeSelect = document.createElement('select')
camera.modes.forEach(function(mode) {
modeSelect.add(new Option(mode, mode))
})
modeSelect.style.position = 'absolute'
modeSelect.style.left = '10px'
modeSelect.style.top = '10px'
modeSelect.style['z-index'] = 10
document.body.appendChild(modeSelect)
//Hook event listeners
var lastX = 0, lastY = 0
document.oncontextmenu = function(e) {
e.preventDefault()
e.stopPropagation()
return false
}
modeSelect.addEventListener('change', function(ev) {
camera.setMode(modeSelect.value)
})
canvas.addEventListener('mousemove', function(ev) {
var dx = (ev.clientX - lastX) / gl.drawingBufferWidth
var dy = -(ev.clientY - lastY) / gl.drawingBufferHeight
if(ev.which === 1) {
if(ev.shiftKey) {
//zoom
camera.rotate(now(), 0, 0, dx)
} else {
//rotate
camera.rotate(now(), dx, dy)
}
} else if(ev.which === 3) {
//pan
camera.pan(now(), dx, dy)
}
lastX = ev.clientX
lastY = ev.clientY
})
canvas.addEventListener('wheel', function(e) {
camera.pan(now(), 0, 0, e.deltaY)
})
//Redraw frame
function render() {
//Update camera parameters
var t = now()
camera.idle(t - 20)
camera.flush(t - 100)
camera.recalcMatrix(t-25)
//Compute parameters
var cameraParams = {
view: camera.computedMatrix,
projection: perspective(
[],
Math.PI/4.0,
gl.drawingBufferWidth/gl.drawingBufferHeight,
0.1,
1000.0)
}
//Draw everything
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight)
gl.enable(gl.DEPTH_TEST)
axes.draw(cameraParams)
mesh.draw(cameraParams)
}
```
## Constructor
#### `var camera = require('3d-view')([options])`
## Methods
#### `camera.idle(t)`
Idles the camera at time `t`
* `t` is the time to idle at
#### `camera.flush(t)`
Flush all events in camera state before time `t`
* `t` is the cut off time for the flush
#### `camera.modes`
An array of modes supported by the camera
#### `camera.setMode(mode)`
Sets the camera mode
* `mode` is the new mode. Must be either `turntable`, `orbit` or `matrix`
#### `camera.getMode()`
Retrieves the current camera mode
#### `camera.lookAt(t, eye, center, up)`
Reset camera position to focus on a specified target
* `t` is the time of the event
* `eye` is the position of the camera
* `center` is the target of the camera
* `up` is a vector pointing up
#### `camera.rotate(t, yaw, pitch, roll)`
Rotates the camera incrementally by some amount
* `t` is the time of the input event
* `yaw` is the amount to rotate by along y-axis in radians
* `pitch` is the amount to rotate by along x-axis in radians
* `roll` is the amount to rotate by along z-axis in radians
#### `camera.pan(t, dx, dy, dz)`
Pans the camera in local (view relative) coordinates
* `t` is the time of the event
* `dx,dy,dz` is the amount to move
#### `camera.translate(t, dx, dy, dz)`
Translates the camera in world (absolute global) coordinates
* `t` is the time of the event
* `dx,dy,dz` is the amount to move
#### `camera.setMatrix(t, matrix)`
Sets the camera matrix to some fixed 4x4 matrix
* `t` is the time of the event
* `matrix` is the new camera matrix
#### `camera.setDistance(t, r)`
Sets camera distance at time `t`
* `t` is the time of the event
* `r` is the new camera distance
#### `camera.setDistanceLimits(lo, hi)`
Sets bounds on the camera distance
#### `camera.getDistanceLimits([out])`
Retrieves the camera limits
#### `camera.recalcMatrix(t)`
Recomputes all matrix properties at time `t`
#### `camera.computedMatrix`
The computed 4x4 matrix of the camera
#### `camera.computedEye`
The computed 3d eye vector for the camera
#### `camera.computedUp`
Computed up vector (initialized when calling recalcMatrix)
#### `camera.computedCenter`
Computed camera center point
#### `camera.computedRadius`
Computed log(radius)
# License
(c) 2015 Mikola Lysenko. MIT License

@ -1,225 +0,0 @@
'use strict'
var now = require('right-now')
var bunny = require('bunny')
var perspective = require('gl-mat4/perspective')
var fit = require('canvas-fit')
var createContext = require('gl-context')
var createAxes = require('gl-axes')
var createMesh = require('gl-simplicial-complex')
var createCamera = require('../view')
//Set up WebGL
var canvas = document.createElement('canvas')
document.body.appendChild(canvas)
window.addEventListener('resize', fit(canvas), false)
var gl = createContext(canvas, {}, render)
var controlDiv = document.createElement('div')
controlDiv.style.position = 'absolute'
controlDiv.style['z-index'] = 10
controlDiv.style.left = '10px'
controlDiv.style.top = '10px'
document.body.appendChild(controlDiv)
var commandList = [
'Rotate - Hold left mouse',
'Roll - Hold shift + left mouse',
'Pan - Hold right mouse',
'Zoom - Mouse wheel',
'Translate - Hold control + left mouse'
]
var commandContainer = document.createElement('div')
commandContainer.style['font-size'] = '75%'
controlDiv.appendChild(commandContainer)
commandList.forEach(function(str) {
var container = document.createElement('p')
container.appendChild(document.createTextNode(str))
commandContainer.appendChild(container)
})
function appendItem(label, item) {
var container = document.createElement('p')
container.appendChild(document.createTextNode(label))
container.appendChild(item)
controlDiv.appendChild(container)
}
var delayControl = document.createElement('input')
delayControl.type = 'range'
delayControl.min = 0
delayControl.max = 200
delayControl.value = 30
appendItem('Delay:', delayControl)
var zoomControl = document.createElement('input')
zoomControl.type = 'range'
zoomControl.min = 1
zoomControl.max = 1000
zoomControl.value = 50
appendItem('Distance:', zoomControl)
var rotateSensitivity = document.createElement('input')
rotateSensitivity.type = 'range'
rotateSensitivity.min = -10
rotateSensitivity.max = 10
rotateSensitivity.value = 0
appendItem('Rotation Sensitivity:', rotateSensitivity)
var zoomSensitivity = document.createElement('input')
zoomSensitivity.type = 'range'
zoomSensitivity.min = -10
zoomSensitivity.max = 10
zoomSensitivity.value = 0
appendItem('Zoom Sensitivity:', zoomSensitivity)
var flipXControl = document.createElement('input')
flipXControl.type = 'checkbox'
appendItem('Flip X:', flipXControl)
var flipYControl = document.createElement('input')
flipYControl.type = 'checkbox'
appendItem('Flip Y:', flipYControl)
var modes = ['turntable', 'orbit', 'matrix']
var modeSelect = document.createElement('select')
for(var i=0; i<modes.length; ++i) {
var option = document.createElement('option')
option.text = modes[i]
option.value = modes[i]
modeSelect.add(option)
}
appendItem('Mode:', modeSelect)
var lookAtButton = document.createElement('input')
lookAtButton.type = 'submit'
lookAtButton.value = 'Reset'
controlDiv.appendChild(lookAtButton)
var statusElement = document.createElement('p')
statusElement.style['font-size'] = '30%'
controlDiv.appendChild(statusElement)
//Create objects for rendering
var bounds = [[-10,-10,-10], [10,10,10]]
var mesh = createMesh(gl, {
cells: bunny.cells,
positions: bunny.positions,
colormap: 'jet'
})
var axes = createAxes(gl, {
bounds: bounds,
tickSpacing: [1,1,1],
textSize: 0.05
})
//Set up camera
var projectionMatrix = new Array(16)
var camera = createCamera({
center: [
0.5*(bounds[0][0]+bounds[1][0]),
0.5*(bounds[0][1]+bounds[1][1]),
0.5*(bounds[0][2]+bounds[1][2]) ],
eye: [0, 0, bounds[1][2]],
distanceLimits: [1, 1000]
})
//Hook event listeners
var lastX = 0, lastY = 0
document.oncontextmenu = function(e) {
e.preventDefault()
e.stopPropagation()
return false
}
modeSelect.addEventListener('change', function(ev) {
camera.setMode(modeSelect.value)
})
canvas.addEventListener('mousemove', function(ev) {
var dx = (ev.clientX - lastX) / gl.drawingBufferWidth
var dy = -(ev.clientY - lastY) / gl.drawingBufferHeight
var w = Math.exp(+rotateSensitivity.value)
var flipX = flipXControl.checked
var flipY = flipYControl.checked
if(ev.which === 1) {
if(ev.shiftKey) {
camera.rotate(now(), 0, 0, w*dx)
} else if(ev.ctrlKey) {
camera.translate(now(), dx, dy, 0)
} else {
if(flipX) { dx = -dx }
if(flipY) { dy = -dy }
camera.rotate(now(), w*dx, w*dy)
}
}
if(ev.which === 3) {
camera.pan(now(), dx, dy)
}
lastX = ev.clientX
lastY = ev.clientY
})
canvas.addEventListener('wheel', function(e) {
var w = +zoomSensitivity.value
camera.pan(now(), 0, 0, Math.exp(w) * e.deltaY)
})
lookAtButton.addEventListener('click', function() {
camera.lookAt(now(),
[ 0, 0, -50 ],
[ 0.5*(bounds[0][0]+bounds[1][0]),
0.5*(bounds[0][1]+bounds[1][1]),
0.5*(bounds[0][2]+bounds[1][2]) ],
[ 0, 1, 0 ])
})
zoomControl.addEventListener('change', function() {
camera.setDistance(now(), +zoomControl.value)
})
//Redraw frame
function render() {
//Update camera parameters
var t = now()
var delay = +delayControl.value
camera.idle(t - delay)
camera.flush(t - 100 * (delay + 1))
//Compute parameters
var cameraParams = {
view: camera.getMatrix(t - 2*delay),
projection: perspective(
[],
Math.PI/4.0,
gl.drawingBufferWidth/gl.drawingBufferHeight,
0.1,
1000.0)
}
//Draw everything
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight)
gl.enable(gl.DEPTH_TEST)
axes.draw(cameraParams)
mesh.draw(cameraParams)
var d = camera.getDistance(t)
if(d !== +zoomControl.value) {
zoomControl.value = d
}
//Write out status stuff
statusElement.innerHTML =
'<p>Distance=' + camera.getDistance(t-2*delay) +
'</p><p>Up=[' + camera.getUp(t-2*delay).join() +
']</p><p>Eye=[' + camera.getEye(t-2*delay).join() +
']</p><p>Matrix=</p><table><tr><td>' + cameraParams.view.slice(0,4).join('</td><td>') +
'</td></tr><tr><td>' + cameraParams.view.slice(4,8).join('</td><td>') +
'</td></tr><tr><td>' + cameraParams.view.slice(8,12).join('</td><td>') +
'</td></tr><tr><td>' + cameraParams.view.slice(12,16).join('</td><td>') +
'</td></tr></table><p>Rotate sensitivity:' + Math.exp(rotateSensitivity.value) +
'</p><p>Zoom sensitivity:' + Math.exp(zoomSensitivity.value) + '</p>'
}

@ -1,115 +0,0 @@
'use strict'
var now = require('right-now')
var bunny = require('bunny')
var perspective = require('gl-mat4/perspective')
var fit = require('canvas-fit')
var createContext = require('gl-context')
var createAxes = require('gl-axes')
var createMesh = require('gl-simplicial-complex')
var createCamera = require('../view')
//Set up WebGL
var canvas = document.createElement('canvas')
document.body.appendChild(canvas)
window.addEventListener('resize', fit(canvas), false)
var gl = createContext(canvas, {}, render)
//Create objects for rendering
var bounds = [[-10,-10,-10], [10,10,10]]
var mesh = createMesh(gl, {
cells: bunny.cells,
positions: bunny.positions,
colormap: 'jet'
})
var axes = createAxes(gl, {
bounds: bounds,
tickSpacing: [1,1,1],
textSize: 0.05
})
//Set up camera
var projectionMatrix = new Array(16)
var camera = createCamera({
center: [
0.5*(bounds[0][0]+bounds[1][0]),
0.5*(bounds[0][1]+bounds[1][1]),
0.5*(bounds[0][2]+bounds[1][2]) ],
eye: [0, 0, bounds[1][2]],
distanceLimits: [1, 1000]
})
//Create mode drop down
var modeSelect = document.createElement('select')
camera.modes.forEach(function(mode) {
modeSelect.add(new Option(mode, mode))
})
modeSelect.style.position = 'absolute'
modeSelect.style.left = '10px'
modeSelect.style.top = '10px'
modeSelect.style['z-index'] = 10
document.body.appendChild(modeSelect)
//Hook event listeners
var lastX = 0, lastY = 0
document.oncontextmenu = function(e) {
e.preventDefault()
e.stopPropagation()
return false
}
modeSelect.addEventListener('change', function(ev) {
camera.setMode(modeSelect.value)
})
canvas.addEventListener('mousemove', function(ev) {
var dx = (ev.clientX - lastX) / gl.drawingBufferWidth
var dy = -(ev.clientY - lastY) / gl.drawingBufferHeight
if(ev.which === 1) {
if(ev.shiftKey) {
//zoom
camera.rotate(now(), 0, 0, dx)
} else {
//rotate
camera.rotate(now(), dx, dy)
}
} else if(ev.which === 3) {
//pan
camera.pan(now(), dx, dy)
}
lastX = ev.clientX
lastY = ev.clientY
})
canvas.addEventListener('wheel', function(e) {
camera.pan(now(), 0, 0, e.deltaY)
})
//Redraw frame
function render() {
//Update camera parameters
var t = now()
camera.idle(t - 20)
camera.flush(t - 100)
//Compute parameters
camera.recalcMatrix(t - 25)
var cameraParams = {
view: camera.computedMatrix,
projection: perspective(
[],
Math.PI/4.0,
gl.drawingBufferWidth/gl.drawingBufferHeight,
0.1,
1000.0)
}
//Draw everything
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight)
gl.enable(gl.DEPTH_TEST)
axes.draw(cameraParams)
mesh.draw(cameraParams)
}

@ -1,67 +0,0 @@
{
"_from": "3d-view@^2.0.0",
"_id": "3d-view@2.0.0",
"_inBundle": false,
"_integrity": "sha1-gxrpQtdQjFCAHj4G+v4ejFdOF74=",
"_location": "/3d-view",
"_phantomChildren": {},
"_requested": {
"type": "range",
"registry": true,
"raw": "3d-view@^2.0.0",
"name": "3d-view",
"escapedName": "3d-view",
"rawSpec": "^2.0.0",
"saveSpec": null,
"fetchSpec": "^2.0.0"
},
"_requiredBy": [
"/gl-plot3d"
],
"_resolved": "https://registry.npmjs.org/3d-view/-/3d-view-2.0.0.tgz",
"_shasum": "831ae942d7508c50801e3e06fafe1e8c574e17be",
"_spec": "3d-view@^2.0.0",
"_where": "/Users/anchaa/Documents/Research/iStacking_code/istacking/frontend/node_modules/gl-plot3d",
"author": {
"name": "Mikola Lysenko"
},
"bugs": {
"url": "https://github.com/mikolalysenko/3d-view/issues"
},
"bundleDependencies": false,
"dependencies": {
"matrix-camera-controller": "^2.1.1",
"orbit-camera-controller": "^4.0.0",
"turntable-camera-controller": "^3.0.0"
},
"deprecated": false,
"description": "3D camera view controller",
"devDependencies": {
"bunny": "^1.0.1",
"canvas-fit": "^1.2.0",
"gl-axes": "^6.0.2",
"gl-context": "^0.1.1",
"gl-mat4": "^1.1.2",
"gl-simplicial-complex": "^3.0.2",
"right-now": "^1.0.0",
"tape": "^4.0.0"
},
"homepage": "https://github.com/mikolalysenko/3d-view",
"keywords": [
"3d",
"view",
"camera",
"controller"
],
"license": "MIT",
"main": "view.js",
"name": "3d-view",
"repository": {
"type": "git",
"url": "git+https://github.com/mikolalysenko/3d-view.git"
},
"scripts": {
"test": "tape test/*.js"
},
"version": "2.0.0"
}

@ -1,100 +0,0 @@
'use strict'
var tape = require('tape')
var createOrbit = require('../view')
var lookAt = require('gl-mat4/lookAt')
var modes = [ 'orbit', 'turntable', 'matrix' ]
function arrayApproxEquals(a, b) {
for(var i=0; i<a.length; ++i) {
if(!(Math.abs(a[i] - b[i]) < 1e-4)) {
return false
}
}
return true
}
function matrixApproxEquals(a, b) {
var x = a[15]
var y = b[15]
for(var i=0; i<15; ++i) {
if(!(Math.abs(a[i] * y - b[i] * x) < 1e-4)) {
return false
}
}
return true
}
tape('orbit camera', function(t) {
for(var i=0; i<100; ++i) {
var center = [Math.random()-0.5, Math.random()-0.5, Math.random()-0.5]
var eye = [Math.random()-0.5, Math.random()-0.5, Math.random()-0.5]
var up = [Math.random()-0.5, Math.random()-0.5, Math.random()-0.5]
var mat = lookAt([], eye, center, up)
var smat = mat[15]
modes.forEach(function(initMode) {
var controller = createOrbit()
controller.setMode(initMode)
controller.lookAt(1, eye, center, up)
modes.forEach(function(curMode) {
controller.setMode(curMode)
controller.recalcMatrix(10)
var orbitMat = controller.computedMatrix
t.ok(matrixApproxEquals(mat, orbitMat), 'compare mat: ' + mat + ' : ' + orbitMat + '(initMode=' + initMode + ',curMode=' + curMode + ')')
var oeye = controller.computedEye
t.ok(arrayApproxEquals(eye, oeye), 'compare eye: ' + eye + ':' + oeye)
if(curMode === 'matrix') {
return
}
var ocenter = controller.computedCenter
t.ok(arrayApproxEquals(center, ocenter), 'compare center: ' + center + ':' + ocenter)
var dist = 0.0
for(var j=0; j<3; ++j) {
dist += Math.pow(eye[j] - center[j], 2)
}
dist = Math.sqrt(dist)
t.ok(Math.abs(dist - Math.exp(controller.computedRadius[0])) < 1e-4, 'distance:' + controller.computedRadius + " expect " + dist)
})
})
}
for(var i=0; i<100; ++i) {
var center = [Math.random()-0.5, Math.random()-0.5, Math.random()-0.5]
var eye = [Math.random()-0.5, Math.random()-0.5, Math.random()-0.5]
var up = [Math.random()-0.5, Math.random()-0.5, Math.random()-0.5]
var mat = lookAt([], eye, center, up)
modes.forEach(function(initMode) {
var controller = createOrbit()
controller.setMode(initMode)
controller.setMatrix(1, mat)
controller.recalcMatrix(10)
modes.forEach(function(curMode) {
controller.setMode(curMode)
controller.recalcMatrix(10)
var orbitMat = controller.computedMatrix
t.ok(matrixApproxEquals(mat, orbitMat), 'compare mat: ' + mat + ' : ' + orbitMat)
var oeye = controller.computedEye
t.ok(arrayApproxEquals(eye, oeye), 'compare eye: ' + eye + ':' + oeye)
})
})
}
t.end()
})

@ -1,122 +0,0 @@
'use strict'
module.exports = createViewController
var createTurntable = require('turntable-camera-controller')
var createOrbit = require('orbit-camera-controller')
var createMatrix = require('matrix-camera-controller')
function ViewController(controllers, mode) {
this._controllerNames = Object.keys(controllers)
this._controllerList = this._controllerNames.map(function(n) {
return controllers[n]
})
this._mode = mode
this._active = controllers[mode]
if(!this._active) {
this._mode = 'turntable'
this._active = controllers.turntable
}
this.modes = this._controllerNames
this.computedMatrix = this._active.computedMatrix
this.computedEye = this._active.computedEye
this.computedUp = this._active.computedUp
this.computedCenter = this._active.computedCenter
this.computedRadius = this._active.computedRadius
}
var proto = ViewController.prototype
var COMMON_METHODS = [
['flush', 1],
['idle', 1],
['lookAt', 4],
['rotate', 4],
['pan', 4],
['translate', 4],
['setMatrix', 2],
['setDistanceLimits', 2],
['setDistance', 2]
]
COMMON_METHODS.forEach(function(method) {
var name = method[0]
var argNames = []
for(var i=0; i<method[1]; ++i) {
argNames.push('a'+i)
}
var code = 'var cc=this._controllerList;for(var i=0;i<cc.length;++i){cc[i].'+method[0]+'('+argNames.join()+')}'
proto[name] = Function.apply(null, argNames.concat(code))
})
proto.recalcMatrix = function(t) {
this._active.recalcMatrix(t)
}
proto.getDistance = function(t) {
return this._active.getDistance(t)
}
proto.getDistanceLimits = function(out) {
return this._active.getDistanceLimits(out)
}
proto.lastT = function() {
return this._active.lastT()
}
proto.setMode = function(mode) {
if(mode === this._mode) {
return
}
var idx = this._controllerNames.indexOf(mode)
if(idx < 0) {
return
}
var prev = this._active
var next = this._controllerList[idx]
var lastT = Math.max(prev.lastT(), next.lastT())
prev.recalcMatrix(lastT)
next.setMatrix(lastT, prev.computedMatrix)
this._active = next
this._mode = mode
//Update matrix properties