[for bug report] add Rossler attractor example

Author: etpinard

example/cone_rossler.js

@@ -0,0 +1,101 @@
+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');
+
+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()