StackGenVis: Alignment of Data, Algorithms, and Models for Stacking Ensemble Learning Using Performance Metrics https://doi.org/10.1109/TVCG.2020.3030352
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
StackGenVis/frontend/node_modules/gl-cone3d/example/cone_rossler.js

102 lines
2.7 KiB

4 years ago
var createCamera = require('3d-view-controls')
var getBounds = require('bound-points')
var perspective = require('gl-mat4/perspective')
var createAxes = require('gl-axes3d')
var createSpikes = require('gl-spikes3d')
var createSelect = require('gl-select-static')
var getBounds = require('bound-points')
var mouseChange = require('mouse-change')
var createConePlot = require('../cone')
var createMesh = createConePlot.createConeMesh;
var data = require('./dataset-rossler.json');
var bounds = []
var conePlot = createConePlot({
positions: data.positions,
vectors: data.vectors,
// uncomment to see visible cones
//coneSize: 40,
colormap: 'portland'
}, bounds)
var canvas = document.createElement('canvas')
document.body.appendChild(canvas)
window.addEventListener('resize', require('canvas-fit')(canvas))
var gl = canvas.getContext('webgl')
var camera = createCamera(canvas, {
eye: [3,3,3],
center: [0,0,0],
zoomMax: 500,
mode: 'turntable'
})
var mesh = createMesh(gl, conePlot)
var select = createSelect(gl, [canvas.width, canvas.height])
var tickSpacing = 1;
var ticks = bounds[0].map(function(v,i) {
var arr = [];
var firstTick = 0; //Math.ceil(bounds[0][i] / tickSpacing) * tickSpacing;
var lastTick = 3; //Math.floor(bounds[1][i] / tickSpacing) * tickSpacing;
for (var tick = firstTick; tick <= lastTick; tick += tickSpacing) {
if (tick === -0) tick = 0;
arr.push({x: tick, text: tick.toString()});
}
return arr;
});
var axes = createAxes(gl, { bounds: bounds, ticks: ticks })
var spikes = createSpikes(gl, {
bounds: bounds
})
var spikeChanged = false
mouseChange(canvas, function(buttons, x, y) {
var pickData = select.query(x, canvas.height - y, 10)
var pickResult = mesh.pick(pickData)
if(pickResult) {
spikes.update({
position: pickResult.position,
enabled: [true, true, true]
})
spikeChanged = true
} else {
spikeChanged = spikes.enabled[0]
spikes.update({
enabled: [false, false, false]
})
}
})
function render() {
requestAnimationFrame(render)
gl.enable(gl.DEPTH_TEST)
var needsUpdate = camera.tick()
var cameraParams = {
projection: perspective([], Math.PI/4, canvas.width/canvas.height, 0.1, 300),
view: camera.matrix
}
if(needsUpdate || spikeChanged) {
gl.bindFramebuffer(gl.FRAMEBUFFER, null)
gl.viewport(0, 0, canvas.width, canvas.height)
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
axes.draw(cameraParams)
spikes.draw(cameraParams)
mesh.draw(cameraParams)
spikeChanged = false
}
if(needsUpdate) {
select.shape = [canvas.width, canvas.height]
select.begin()
mesh.drawPick(cameraParams)
select.end()
}
}
render()