update to new API

Author: mikolalysenko

README.md

@@ -1,107 +1,66 @@
-gl-error-bars
+gl-error3d
 =============
-
-Draws error bars around scatter points.
+Draws error bars around data points
 
 # Example
 
 ```javascript
-var shell           = require('gl-now')({ clearColor: [0,0,0,0] })
-var camera          = require('game-shell-orbit-camera')(shell)
-var createAxes      = require('gl-axes')
-var createErrorBars = require('gl-error-bars')
-var mat4            = require('gl-mat4')
-
-var bounds = [[-5,-5,-5], [5,5,5]]
-var errorbars, axes
-
-shell.on('gl-init', function() {
-  var gl = shell.gl
-
-  camera.lookAt(bounds[1], [0,0,0], [0, 1, 0])
-
-  axes = createAxes(gl, {
-    bounds: bounds
-  })
-
-  errorbars = createErrorBars(gl, {
-    position: [
-      [0,0,0],
-      [0,2,0],
-      [-2,-3,0]
-    ],
-
-    error: [
-      [[-0.5,-0.5,-0.1], [0.5,0.5,0.5]],
-      [[0,0,0], [0.5,0.5,0.5]],
-      [[-0.5,-0.5,0], [0,0,0]]
-    ],
-
-    color: [
-      [1,0,0],
-      [0,1,0],
-      [0,0,1]
-    ]
-  })
+var createScene = require('gl-plot3d')
+var createScatter = require('gl-scatter3d')
+var createErrorBars = require('gl-error3d')
+
+var points = [ [0,0,0], [1,1,1], [-1, 2, -3] ]
+var errors = [ 
+  [[-0.5,-0.5,-0.5],[0.5,0.5,0.5]], 
+  [[-0.1,-1,-2],[0,0,0]], 
+  [[-0.1,-0.1,-0.1],[0.1,0.1,0.1]] 
+]
+
+var scene = createScene()
+
+var scatter = createScatter({
+  gl:           scene.gl,
+  position:     points,
+  size:         20,
+  orthographic: true,
+  lineColor:    [0,0,0],
+  color:        [0.7,0.8,0.4],
+  lineWidth:    1
 })
+scene.add(scatter)
 
-shell.on('gl-render', function() {
-  var gl = shell.gl
-  gl.enable(gl.DEPTH_TEST)
-
-  var cameraParameters = {
-    view: camera.view(),
-    projection: mat4.perspective(
-        mat4.create(),
-        Math.PI/4.0,
-        shell.width/shell.height,
-        0.1,
-        1000.0)
-  }
 
-  axes.draw(cameraParameters)
-  errorbars.draw(cameraParameters)
+var errorBars = createErrorBars({
+  gl:       scene.gl,
+  position: points,
+  error:    errors,
+  color:    [0.9, 0.3, 0.3]
 })
+scene.add(errorBars)
 ```
 
 # API
 
 ## Constructor
 
-#### `var errorBars = require('gl-error-bars')(gl, options)`
+#### `var errorBars = require('gl-error3d')(options)`
 Creates a new error bar object.
 
 * `gl` is a WebGL context
-* `object` is a collection of properties which are used to initialize the object
-
-**Returns** A new error bar object
-
-## Methods
-
-#### `errorBars.draw(camera)`
-Draws the error bars
-
-* `camera` is an object storing the parameters to draw
-
-    + `camera.model` is the model matrix
-    + `camera.view` is the view matrix
-    + `camera.projection` is the projection matrix
-
-#### `errorBars.update(options)`
-Updates the error bar object
-
 * `position` is the position of each point in the plot
 * `error` is an array of error bounds represented as `[lo,hi]` for each point
 * `color` a length 3 array of arrays giving the color of the error bars along each axis.
 * `lineWidth` is the width of the error bar lines in pixels
 * `capSize` is the size of the cap for error bars
 * `clipBounds` is a box to which all error bars will be clipped
 
+**Returns** A new error bar object
+
+#### `errorBars.update(options)`
+Updates the error bar object
+
 #### `errorBars.dispose()`
 Destroy the error bars and release all associated resources
 
-#### `errorBars.bounds`
-Bounds on the error bar object for display purposes
-
 # Credits
-(c) 2014 Mikola Lysenko. MIT License
+(c) 2014-2015 Mikola Lysenko. MIT License

errorbars.js

@@ -24,14 +24,23 @@ function ErrorBars(gl, buffer, vao, shader) {
   this.bounds       = [[ Infinity, Infinity, Infinity], [-Infinity,-Infinity,-Infinity]]
   this.clipBounds   = [[-Infinity,-Infinity,-Infinity], [ Infinity, Infinity, Infinity]]
   this.lineWidth    = [1,1,1]
-  this.capSize      = [0.1,0.1,0.1]
+  this.capSize      = [0.01,0.01,0.01]
   this.lineCount    = [0,0,0]
   this.lineOffset   = [0,0,0]
+  this.opacity      = 1
 }
 
 var proto = ErrorBars.prototype
 
-proto.draw = function(cameraParams) {
+proto.isOpaque = function() {
+  return this.opacity >= 1
+}
+
+proto.isTransparent = function() {
+  return this.opacity < 1
+}
+
+proto.drawTransparent = proto.draw = function(cameraParams) {
   var gl = this.gl
   var uniforms        = this.shader.uniforms
 
@@ -40,6 +49,7 @@ proto.draw = function(cameraParams) {
   uniforms.view       = cameraParams.view       || IDENTITY
   uniforms.projection = cameraParams.projection || IDENTITY
   uniforms.clipBounds = this.clipBounds
+  uniforms.opacity    = this.opacity
 
   this.vao.bind()
   for(var i=0; i<3; ++i) {
@@ -89,9 +99,6 @@ function emitFace(verts, x, c, d) {
 proto.update = function(options) {
   options = options || {}
 
-  if('clipBounds' in options) {
-    this.clipBounds = options.clipBounds
-  }
   if('lineWidth' in options) {
     this.lineWidth = options.lineWidth
     if(!Array.isArray(this.lineWidth)) {
@@ -104,6 +111,9 @@ proto.update = function(options) {
       this.capSize = [this.capSize, this.capSize, this.capSize]
     }
   }
+  if('opacity' in options) {
+    this.opacity = opacity
+  }
 
   var color    = options.color || [[0,0,0],[0,0,0],[0,0,0]]
   var position = options.position
@@ -175,6 +185,8 @@ i_loop:
     }
 
     this.buffer.update(verts)
+
+    console.log(this.bounds)
   }
 }
 
@@ -184,7 +196,8 @@ proto.dispose = function() {
   this.vao.dispose()
 }
 
-function createErrorBars(gl, options) {
+function createErrorBars(options) {
+  var gl = options.gl
   var buffer = createBuffer(gl) 
   var vao = createVAO(gl, [
       {

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "gl-error-bars",
-  "version": "2.2.2",
+  "name": "gl-error3d",
+  "version": "1.0.0",
   "description": "Draws error bars around points",
   "main": "errorbars.js",
   "directories": {

shaders/fragment.glsl

@@ -1,11 +1,12 @@
 precision mediump float;
 uniform vec3 clipBounds[2];
+uniform float opacity;
 varying vec3 fragPosition;
 varying vec4 fragColor;
 
 void main() {
   if(any(lessThan(fragPosition, clipBounds[0])) || any(greaterThan(fragPosition, clipBounds[1]))) {
     discard;
   }
-  gl_FragColor = fragColor;
+  gl_FragColor = opacity * fragColor;
 }