diff --git a/bower.json b/bower.json
new file mode 100644
index 0000000..228315e
--- /dev/null
+++ b/bower.json
@@ -0,0 +1,22 @@
+{
+  "name": "webgl-heatmap",
+  "main": "webgl-heatmap.js",
+  "version": "0.0.1",
+  "homepage": "https://github.com/pyalot/webgl-heatmap",
+  "description": "webgl-heatmap.js is a JavaScript library for high performance heatmap display.",
+  "keywords": [
+    "webgl",
+    "heatmap"
+  ],
+  "authors": [
+    "Florian Bösch"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ]
+}
diff --git a/deep-sea-gradient.png b/deep-sea-gradient.png
new file mode 100644
index 0000000..dfb8f3f
Binary files /dev/null and b/deep-sea-gradient.png differ
diff --git a/example.html b/example.html
index 5d71d93..a1317ae 100644
--- a/example.html
+++ b/example.html
@@ -1,21 +1,21 @@
 <!DOCTYPE html>
 <html>
     <head>
+        <!-- script src="https://www.khronos.org/registry/webgl/sdk/debug/webgl-debug.js"></script -->
         <script src="webgl-heatmap.js"></script>
         <script type="text/javascript">
             window.onload = function(){
                 var canvas = document.getElementsByTagName('canvas')[0];
-                var heatmap = createWebGLHeatmap({canvas: canvas});
+                var heatmap = createWebGLHeatmap({canvas: canvas, intensityToAlpha:true});
+                //var heatmap = createWebGLHeatmap({canvas: canvas, intensityToAlpha:true, alphaRange: [1, 0]}); // inverse transparency
+                //var heatmap = createWebGLHeatmap({canvas: canvas, intensityToAlpha:true, alphaRange: [0, 0.05]}); // steep transparency
+                //var heatmap = createWebGLHeatmap({canvas: canvas, intensityToAlpha:true, gradientTexture:'deep-sea-gradient.png'});
+                //var heatmap = createWebGLHeatmap({canvas: canvas, intensityToAlpha:false, gradientTexture:'skyline-gradient.png'});
                 //var heatmap = createWebGLHeatmap({width: 500, height: 500}); // statically sized heatmap
 
-                // just feeding some mouse coords
                 document.body.appendChild(heatmap.canvas);
-                canvas.onmousemove = function(event){
-                    var x = event.offsetX || event.clientX;
-                    var y = event.offsetY || event.clientY;
-                        
-                    //heatmap.addPoint(x, y, 100, 10/255);
-                    
+
+                var paintAtCoord = function(x, y){
                     var count = 0;
                     while(count < 200){
                         var xoff = Math.random()*2-1;
@@ -28,16 +28,37 @@
                         xoff/=ls; yoff/=ls;
                         xoff*=1-l; yoff*=1-l;
                         count += 1;
-                        heatmap.addPoint(x+xoff*50, y+yoff*50, 20, 1/300);
+                        heatmap.addPoint(x+xoff*50, y+yoff*50, 30, 2/300);
+                    }
+                }
+
+                // event handling
+                var onTouchMove = function(evt){
+                    evt.preventDefault();
+                    var touches = evt.changedTouches;
+                    for(var i=0; i<touches.length; i++){
+                        var touch = touches[i];
+                        paintAtCoord(touch.pageX, touch.pageY);
                     }
+                };
+                canvas.addEventListener("touchmove", onTouchMove, false);
+
+                canvas.onmousemove = function(event){
+                    var x = event.offsetX || event.clientX;
+                    var y = event.offsetY || event.clientY;
+
+                    paintAtCoord(x, y);
+                        
                 }
                 canvas.onclick = function(){
                     heatmap.clear();
                 }
 
-                var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame;
+                var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
+                                         window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
 
                 var update = function(){
+                    //heatmap.addPoint(100, 100, 100, 10/255);
                     heatmap.adjustSize(); // can be commented out for statically sized heatmaps, resize clears the map
                     heatmap.update(); // adds the buffered points
                     heatmap.display(); // adds the buffered points
diff --git a/readme.md b/readme.md
index a80b9bc..f4171ef 100644
--- a/readme.md
+++ b/readme.md
@@ -28,6 +28,14 @@ catch(error){
 }
 ```
 
+creation arguments
+
+ * canvas: the canvas you wish to draw on
+ * width: explicit width
+ * height: explicit height
+ * intensityToAlpha: defaults to true
+ * gradientTexture: texture used instead of color calculation, can be path or an image
+
 Add a data point.
 
  * x and y relative to the canvas in pixels
@@ -38,6 +46,16 @@ Add a data point.
 heatmap.addPoint(x, y, size, intensity);
 ```
 
+Add a list of data points.
+
+ * x and y relative to the canvas in pixels
+ * size in pixels (radius)
+ * intensity between 0 and 1
+
+```javascript
+heatmap.addPoints([{x:x, y:y, size:size, intensity:intensity}]);
+```
+
 Draw queued data points:
 
 ```javascript
diff --git a/skyline-gradient.png b/skyline-gradient.png
new file mode 100644
index 0000000..9e046da
Binary files /dev/null and b/skyline-gradient.png differ
diff --git a/webgl-heatmap.coffee b/webgl-heatmap.coffee
index eacdcfa..3b2eb50 100644
--- a/webgl-heatmap.coffee
+++ b/webgl-heatmap.coffee
@@ -1,3 +1,459 @@
+nukeVendorPrefix = ->
+    if window.WebGLRenderingContext?
+        vendors = ['WEBKIT', 'MOZ', 'MS', 'O']
+        vendorRe = /^WEBKIT_(.*)|MOZ_(.*)|MS_(.*)|O_(.*)/
+
+        getExtension = WebGLRenderingContext.prototype.getExtension
+        WebGLRenderingContext.prototype.getExtension = (name) ->
+            match = name.match vendorRe
+            if match != null
+                name = match[1]
+
+            extobj = getExtension.call @, name
+            if extobj == null
+                for vendor in vendors
+                    extobj = getExtension.call @, vendor + '_' + name
+                    if extobj != null
+                        return extobj
+                return null
+            else
+                return extobj
+
+        getSupportedExtensions = WebGLRenderingContext.prototype.getSupportedExtensions
+        WebGLRenderingContext.prototype.getSupportedExtensions = ->
+            supported = getSupportedExtensions.call @
+            result = []
+
+            for extension in supported
+                match = extension.match vendorRe
+                if match != null
+                    extension = match[1]
+
+                if extension not in result
+                    result.push extension
+
+            return result
+
+textureFloatShims = ->
+    createSourceCanvas = ->
+        canvas = document.createElement 'canvas'
+        canvas.width = 2
+        canvas.height = 2
+        ctx = canvas.getContext '2d'
+        imageData = ctx.getImageData(0, 0, 2, 2)
+        imageData.data.set(new Uint8ClampedArray([
+            0,0,0,0,
+            255,255,255,255,
+            0,0,0,0,
+            255,255,255,255,
+        ]))
+        ctx.putImageData(imageData, 0, 0)
+        return canvas
+
+    createSourceCanvas()
+
+    checkFloatLinear = (gl, sourceType) ->
+        ## drawing program ##
+        program = gl.createProgram()
+        vertexShader = gl.createShader(gl.VERTEX_SHADER)
+        gl.attachShader(program, vertexShader)
+        gl.shaderSource(vertexShader, '''
+            attribute vec2 position;
+            void main(){
+                gl_Position = vec4(position, 0.0, 1.0);
+            }
+        ''')
+
+        gl.compileShader(vertexShader)
+        if not gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)
+            throw gl.getShaderInfoLog(vertexShader)
+
+        fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)
+        gl.attachShader(program, fragmentShader)
+        gl.shaderSource(fragmentShader, '''
+            uniform sampler2D source;
+            void main(){
+                gl_FragColor = texture2D(source, vec2(1.0, 1.0));
+            }
+        ''')
+        gl.compileShader(fragmentShader)
+        if not gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)
+            throw gl.getShaderInfoLog(fragmentShader)
+
+        gl.linkProgram(program)
+        if not gl.getProgramParameter(program, gl.LINK_STATUS)
+            throw gl.getProgramInfoLog(program)
+        
+        gl.useProgram(program)
+        
+        cleanup = ->
+            gl.deleteShader(fragmentShader)
+            gl.deleteShader(vertexShader)
+            gl.deleteProgram(program)
+            gl.deleteBuffer(buffer)
+            gl.deleteTexture(source)
+            gl.deleteTexture(target)
+            gl.deleteFramebuffer(framebuffer)
+
+            gl.bindBuffer(gl.ARRAY_BUFFER, null)
+            gl.useProgram(null)
+            gl.bindTexture(gl.TEXTURE_2D, null)
+            gl.bindFramebuffer(gl.FRAMEBUFFER, null)
+
+        ## target FBO ##
+        target = gl.createTexture()
+        gl.bindTexture(gl.TEXTURE_2D, target)
+        gl.texImage2D(
+            gl.TEXTURE_2D,
+            0,
+            gl.RGBA,
+            2, 2,
+            0,
+            gl.RGBA,
+            gl.UNSIGNED_BYTE,
+            null,
+        )
+
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR)
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR)
+
+        framebuffer = gl.createFramebuffer()
+        gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer)
+        gl.framebufferTexture2D(
+            gl.FRAMEBUFFER,
+            gl.COLOR_ATTACHMENT0,
+            gl.TEXTURE_2D,
+            target,
+            0
+        )
+        
+        ## source texture ##
+        sourceCanvas = createSourceCanvas()
+        source = gl.createTexture()
+        gl.bindTexture(gl.TEXTURE_2D, source)
+        gl.texImage2D(
+            gl.TEXTURE_2D,
+            0,
+            gl.RGBA,
+            gl.RGBA,
+            sourceType,
+            sourceCanvas,
+        )
+
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR)
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR)
+                   
+        ## create VBO ## 
+        vertices = new Float32Array([
+             1,  1,
+            -1,  1,
+            -1, -1,
+
+             1,  1,
+            -1, -1,
+             1, -1,
+        ])
+        buffer = gl.createBuffer()
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
+        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)
+        positionLoc = gl.getAttribLocation(program, 'position')
+        sourceLoc = gl.getUniformLocation(program, 'source')
+        gl.enableVertexAttribArray(positionLoc)
+        gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0)
+        gl.uniform1i(sourceLoc, 0)
+        gl.drawArrays(gl.TRIANGLES, 0, 6)
+        
+        readBuffer = new Uint8Array(4*4)
+        gl.readPixels(0, 0, 2, 2, gl.RGBA, gl.UNSIGNED_BYTE, readBuffer)
+       
+        result = Math.abs(readBuffer[0] - 127) < 10
+
+        cleanup()
+        return result
+
+    checkTexture = (gl, targetType) ->
+        target = gl.createTexture()
+        gl.bindTexture(gl.TEXTURE_2D, target)
+        gl.texImage2D(
+            gl.TEXTURE_2D,
+            0,
+            gl.RGBA,
+            2, 2,
+            0,
+            gl.RGBA,
+            targetType,
+            null,
+        )
+
+        if gl.getError() == 0
+            gl.deleteTexture(target)
+            return true
+        else
+            gl.deleteTexture(target)
+            return false
+
+    checkColorBuffer = (gl, targetType) ->
+        target = gl.createTexture()
+        gl.bindTexture(gl.TEXTURE_2D, target)
+        gl.texImage2D(
+            gl.TEXTURE_2D,
+            0,
+            gl.RGBA,
+            2, 2,
+            0,
+            gl.RGBA,
+            targetType,
+            null,
+        )
+        
+        framebuffer = gl.createFramebuffer()
+        gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer)
+        gl.framebufferTexture2D(
+            gl.FRAMEBUFFER,
+            gl.COLOR_ATTACHMENT0,
+            gl.TEXTURE_2D,
+            target,
+            0
+        )
+        
+        check = gl.checkFramebufferStatus(gl.FRAMEBUFFER)
+
+        gl.deleteTexture(target)
+        gl.deleteFramebuffer(framebuffer)
+        gl.bindTexture(gl.TEXTURE_2D, null)
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null)
+
+        if check == gl.FRAMEBUFFER_COMPLETE
+            return true
+        else
+            return false
+
+    shimExtensions = []
+    shimLookup = {}
+    unshimExtensions = []
+
+    checkSupport = ->
+        canvas = document.createElement 'canvas'
+        gl = null
+        try
+            gl = canvas.getContext 'experimental-webgl'
+            if(gl == null)
+                gl = canvas.getContext 'webgl'
+
+        if gl?
+            singleFloatExt = gl.getExtension 'OES_texture_float'
+            if singleFloatExt == null
+                if checkTexture gl, gl.FLOAT
+                    singleFloatTexturing = true
+                    shimExtensions.push 'OES_texture_float'
+                    shimLookup.OES_texture_float = {shim:true}
+                else
+                    singleFloatTexturing = false
+                    unshimExtensions.push 'OES_texture_float'
+            else
+                if checkTexture gl, gl.FLOAT
+                    singleFloatTexturing = true
+                    shimExtensions.push 'OES_texture_float'
+                else
+                    singleFloatTexturing = false
+                    unshimExtensions.push 'OES_texture_float'
+
+            if singleFloatTexturing
+                extobj = gl.getExtension 'WEBGL_color_buffer_float'
+                if extobj == null
+                    if checkColorBuffer gl, gl.FLOAT
+                        shimExtensions.push 'WEBGL_color_buffer_float'
+                        shimLookup.WEBGL_color_buffer_float = {
+                            shim: true
+                            RGBA32F_EXT: 0x8814
+                            RGB32F_EXT: 0x8815
+                            FRAMEBUFFER_ATTACHMENT_COMPONENT_TYPE_EXT: 0x8211
+                            UNSIGNED_NORMALIZED_EXT: 0x8C17
+                        }
+                    else
+                        unshimExtensions.push 'WEBGL_color_buffer_float'
+                else
+                    if checkColorBuffer gl, gl.FLOAT
+                        shimExtensions.push 'WEBGL_color_buffer_float'
+                    else
+                        unshimExtensions.push 'WEBGL_color_buffer_float'
+
+                extobj = gl.getExtension 'OES_texture_float_linear'
+                if extobj == null
+                    if checkFloatLinear gl, gl.FLOAT
+                        shimExtensions.push 'OES_texture_float_linear'
+                        shimLookup.OES_texture_float_linear = {shim:true}
+                    else
+                        unshimExtensions.push 'OES_texture_float_linear'
+                else
+                    if checkFloatLinear gl, gl.FLOAT
+                        shimExtensions.push 'OES_texture_float_linear'
+                    else
+                        unshimExtensions.push 'OES_texture_float_linear'
+            
+            halfFloatExt = gl.getExtension 'OES_texture_half_float'
+            if halfFloatExt == null
+                if checkTexture(gl, 0x8D61)
+                    halfFloatTexturing = true
+                    shimExtensions.push 'OES_texture_half_float'
+                    halfFloatExt = shimLookup.OES_texture_half_float = {
+                        HALF_FLOAT_OES: 0x8D61
+                        shim:true
+                    }
+                else
+                    halfFloatTexturing = false
+                    unshimExtensions.push 'OES_texture_half_float'
+            else
+                if checkTexture(gl, halfFloatExt.HALF_FLOAT_OES)
+                    halfFloatTexturing = true
+                    shimExtensions.push 'OES_texture_half_float'
+                else
+                    halfFloatTexturing = false
+                    unshimExtensions.push 'OES_texture_half_float'
+
+            if halfFloatTexturing
+                extobj = gl.getExtension 'EXT_color_buffer_half_float'
+                if extobj == null
+                    if checkColorBuffer gl, halfFloatExt.HALF_FLOAT_OES
+                        shimExtensions.push 'EXT_color_buffer_half_float'
+                        shimLookup.EXT_color_buffer_half_float = {
+                            shim: true
+                            RGBA16F_EXT: 0x881A
+                            RGB16F_EXT: 0x881B
+                            FRAMEBUFFER_ATTACHMENT_COMPONENT_TYPE_EXT: 0x8211
+                            UNSIGNED_NORMALIZED_EXT: 0x8C17
+                        }
+                    else
+                        unshimExtensions.push 'EXT_color_buffer_half_float'
+                else
+                    if checkColorBuffer gl, halfFloatExt.HALF_FLOAT_OES
+                        shimExtensions.push 'EXT_color_buffer_half_float'
+                    else
+                        unshimExtensions.push 'EXT_color_buffer_half_float'
+                
+                extobj = gl.getExtension 'OES_texture_half_float_linear'
+                if extobj == null
+                    if checkFloatLinear gl, halfFloatExt.HALF_FLOAT_OES
+                        shimExtensions.push 'OES_texture_half_float_linear'
+                        shimLookup.OES_texture_half_float_linear = {shim:true}
+                    else
+                        unshimExtensions.push 'OES_texture_half_float_linear'
+                else
+                    if checkFloatLinear gl, halfFloatExt.HALF_FLOAT_OES
+                        shimExtensions.push 'OES_texture_half_float_linear'
+                    else
+                        unshimExtensions.push 'OES_texture_half_float_linear'
+       
+    if window.WebGLRenderingContext?
+        checkSupport()
+
+        unshimLookup = {}
+        for name in unshimExtensions
+            unshimLookup[name] = true
+
+        getExtension = WebGLRenderingContext.prototype.getExtension
+        WebGLRenderingContext.prototype.getExtension = (name) ->
+            extobj = shimLookup[name]
+            if extobj == undefined
+                if unshimLookup[name]
+                    return null
+                else
+                    return getExtension.call @, name
+            else
+                return extobj
+        
+        getSupportedExtensions = WebGLRenderingContext.prototype.getSupportedExtensions
+        WebGLRenderingContext.prototype.getSupportedExtensions = ->
+            supported = getSupportedExtensions.call(@)
+            result = []
+
+            for extension in supported
+                if unshimLookup[extension] == undefined
+                    result.push(extension)
+
+            for extension in shimExtensions
+                if extension not in result
+                    result.push extension
+
+            return result
+
+        WebGLRenderingContext.prototype.getFloatExtension = (spec) ->
+            spec.prefer ?= ['half']
+            spec.require ?= []
+            spec.throws ?= true
+
+            singleTexture = @getExtension 'OES_texture_float'
+            halfTexture = @getExtension 'OES_texture_half_float'
+            singleFramebuffer = @getExtension 'WEBGL_color_buffer_float'
+            halfFramebuffer = @getExtension 'EXT_color_buffer_half_float'
+            singleLinear = @getExtension 'OES_texture_float_linear'
+            halfLinear = @getExtension 'OES_texture_half_float_linear'
+
+            single = {
+                texture: singleTexture != null
+                filterable: singleLinear != null
+                renderable: singleFramebuffer != null
+                score: 0
+                precision: 'single'
+                half: false
+                single: true
+                type: @FLOAT
+            }
+            
+            half = {
+                texture: halfTexture != null
+                filterable: halfLinear != null
+                renderable: halfFramebuffer != null
+                score: 0
+                precision: 'half'
+                half: true
+                single: false
+                type: halfTexture?.HALF_FLOAT_OES ? null
+            }
+
+            candidates = []
+            if single.texture
+                candidates.push(single)
+            if half.texture
+                candidates.push(half)
+
+            result = []
+            for candidate in candidates
+                use = true
+                for name in spec.require
+                    if candidate[name] == false
+                        use = false
+                if use
+                    result.push candidate
+
+            for candidate in result
+                for preference, i in spec.prefer
+                    importance = Math.pow 2, spec.prefer.length - i - 1
+                    if candidate[preference]
+                        candidate.score += importance
+
+            result.sort (a, b) ->
+                if a.score == b.score then 0
+                else if a.score < b.score then 1
+                else if a.score > b.score then -1
+
+            if result.length == 0
+                if spec.throws
+                    throw 'No floating point texture support that is ' + spec.require.join(', ')
+                else
+                    return null
+            else
+                result = result[0]
+                return {
+                    filterable: result.filterable
+                    renderable: result.renderable
+                    type: result.type
+                    precision: result.precision
+                }
+
+nukeVendorPrefix()
+textureFloatShims()
+
 class Shader
     constructor: (@gl, {vertex, fragment}) ->
         @program    = @gl.createProgram()
@@ -106,8 +562,12 @@ class Framebuffer
 
 class Texture
     constructor: (@gl, params={}) ->
-        @channels = @gl[(params.channels ? 'rgb').toUpperCase()]
-        @type = @gl[(params.type ? 'unsigned_byte').toUpperCase()]
+        @channels = @gl[(params.channels ? 'rgba').toUpperCase()]
+
+        if typeof(params.type) == 'number'
+            @type = params.type
+        else
+            @type = @gl[(params.type ? 'unsigned_byte').toUpperCase()]
 
         switch @channels
             when @gl.RGBA then @chancount = 4
@@ -134,6 +594,13 @@ class Texture
         @gl.texImage2D @target, 0, @channels, @width, @height, 0, @channels, @type, null
         return @
     
+    upload: (data) ->
+        @width = data.width
+        @height = data.height
+
+        @gl.texImage2D @target, 0, @channels, @channels, @type, data
+        return @
+    
     linear: ->
         @gl.texParameteri @target, @gl.TEXTURE_MAG_FILTER, @gl.LINEAR
         @gl.texParameteri @target, @gl.TEXTURE_MIN_FILTER, @gl.LINEAR
@@ -156,11 +623,9 @@ class Texture
 
 class Node
     constructor: (@gl, @width, @height) ->
-        @texture = new Texture(@gl, type:'float').bind(0).setSize(@width, @height).nearest().clampToEdge()
-        try
-            @fbo = new Framebuffer(@gl).bind().color(@texture).unbind()
-        catch error
-            throw 'Floating point render target not supported'
+        floatExt = @gl.getFloatExtension require: ['renderable']
+        @texture = new Texture(@gl, type:floatExt.type).bind(0).setSize(@width, @height).nearest().clampToEdge()
+        @fbo = new Framebuffer(@gl).bind().color(@texture).unbind()
 
     use: -> @fbo.bind()
     bind: (unit) -> @texture.bind(unit)
@@ -179,11 +644,13 @@ vertexShaderBlit = '''
 '''
 
 fragmentShaderBlit = '''
-    precision highp int;
-    precision highp float;
-    precision highp vec2;
-    precision highp vec3;
-    precision highp vec4;
+    #ifdef GL_FRAGMENT_PRECISION_HIGH
+        precision highp int;
+        precision highp float;
+    #else
+        precision mediump int;
+        precision mediump float;
+    #endif
     uniform sampler2D source;
     varying vec2 texcoord;
 '''
@@ -206,11 +673,13 @@ class Heights
                 }
             '''
             fragment: '''
-                precision highp int;
-                precision highp float;
-                precision highp vec2;
-                precision highp vec3;
-                precision highp vec4;
+                #ifdef GL_FRAGMENT_PRECISION_HIGH
+                    precision highp int;
+                    precision highp float;
+                #else
+                    precision mediump int;
+                    precision mediump float;
+                #endif
                 varying vec2 off, dim;
                 varying float vIntensity;
                 void main(){
@@ -368,7 +837,7 @@ class Heights
         @pointCount += 1
 
 class WebGLHeatmap
-    constructor: ({@canvas, @width, @height}={}) ->
+    constructor: ({@canvas, @width, @height, intensityToAlpha, gradientTexture, alphaRange}={}) ->
         @canvas = document.createElement('canvas') unless @canvas
         try
             @gl = @canvas.getContext('experimental-webgl', depth:false, antialias:false)
@@ -379,28 +848,38 @@ class WebGLHeatmap
         catch error
             throw 'WebGL not supported'
 
-        if not @gl.getExtension('OES_texture_float')
-            throw 'No floating point texture support'
+        if window.WebGLDebugUtils?
+            console.log 'debugging mode'
+            @gl = WebGLDebugUtils.makeDebugContext @gl, (err, funcName, args) ->
+                throw WebGLDebugUtils.glEnumToString(err) + " was caused by call to: " + funcName
 
         @gl.enableVertexAttribArray 0
         @gl.blendFunc @gl.ONE, @gl.ONE
 
-        @shader = new Shader @gl,
-            vertex: vertexShaderBlit
-            fragment: fragmentShaderBlit + '''
-                float linstep(float low, float high, float value){
-                    return clamp((value-low)/(high-low), 0.0, 1.0);
+        if gradientTexture
+            textureGradient = @gradientTexture = new Texture(@gl, channels:'rgba').bind(0).setSize(2, 2).nearest().clampToEdge()
+            if typeof gradientTexture == 'string'
+                image = new Image()
+                image.onload = ->
+                    textureGradient.bind().upload(image)
+                image.src = gradientTexture
+            else
+                if gradientTexture.width > 0 and gradientTexture.height > 0
+                    textureGradient.upload(gradientTexture)
+                else
+                    gradientTexture.onload = ->
+                        textureGradient.upload(gradientTexture)
+
+            getColorFun = '''
+                uniform sampler2D gradientTexture;
+                vec3 getColor(float intensity){
+                    return texture2D(gradientTexture, vec2(intensity, 0.0)).rgb;
                 }
-
-                float fade(float low, float high, float value){
-                    float mid = (low+high)*0.5;
-                    float range = (high-low)*0.5;
-                    float x = 1.0 - clamp(abs(mid-value)/range, 0.0, 1.0);
-                    return smoothstep(0.0, 1.0, x);
-                }
-                void main(){
-                    float intensity = smoothstep(0.0, 1.0, texture2D(source, texcoord).r);
-
+            '''
+        else
+            textureGradient = null
+            getColorFun = '''
+                vec3 getColor(float intensity){
                     vec3 blue = vec3(0.0, 0.0, 1.0);
                     vec3 cyan = vec3(0.0, 1.0, 1.0);
                     vec3 green = vec3(0.0, 1.0, 0.0);
@@ -414,12 +893,51 @@ class WebGLHeatmap
                         fade(0.5, 1.0, intensity)*yellow +
                         smoothstep(0.75, 1.0, intensity)*red
                     );
+                    return color;
+                }
+            '''
 
-                    gl_FragColor = vec4(color*intensity, intensity);
-                    //gl_FragColor = vec4(1.0, 0.0, 1.0, 1.0);
+        intensityToAlpha ?= true
+
+        if intensityToAlpha
+            [alphaStart, alphaEnd] = alphaRange ? [0,1]
+            output = """
+                vec4 alphaFun(vec3 color, float intensity){
+                    float alpha = smoothstep(#{alphaStart.toFixed(8)}, #{alphaEnd.toFixed(8)}, intensity);
+                    return vec4(color*alpha, alpha);
+                }
+            """
+        else
+            output = '''
+                vec4 alphaFun(vec3 color, float intensity){
+                    return vec4(color, 1.0);
                 }
             '''
 
+        @shader = new Shader @gl,
+            vertex: vertexShaderBlit
+            fragment: fragmentShaderBlit + """
+                float linstep(float low, float high, float value){
+                    return clamp((value-low)/(high-low), 0.0, 1.0);
+                }
+
+                float fade(float low, float high, float value){
+                    float mid = (low+high)*0.5;
+                    float range = (high-low)*0.5;
+                    float x = 1.0 - clamp(abs(mid-value)/range, 0.0, 1.0);
+                    return smoothstep(0.0, 1.0, x);
+                }
+
+                #{getColorFun}
+                #{output}
+
+                void main(){
+                    float intensity = smoothstep(0.0, 1.0, texture2D(source, texcoord).r);
+                    vec3 color = getColor(intensity);
+                    gl_FragColor = alphaFun(color, intensity);
+                }
+            """
+
         @width ?= @canvas.offsetWidth or 2
         @height ?= @canvas.offsetHeight or 2
         @canvas.width = @width
@@ -458,7 +976,9 @@ class WebGLHeatmap
         @gl.bindBuffer @gl.ARRAY_BUFFER, @quad
         @gl.vertexAttribPointer(0, 4, @gl.FLOAT, false, 0, 0)
         @heights.nodeFront.bind(0)
-        @shader.use().int('source', 0)
+        if @gradientTexture
+            @gradientTexture.bind(1)
+        @shader.use().int('source', 0).int('gradientTexture', 1)
         @gl.drawArrays @gl.TRIANGLES, 0, 6
 
     update: ->
@@ -470,5 +990,6 @@ class WebGLHeatmap
     blur: -> @heights.blur()
 
     addPoint: (x, y, size, intensity) -> @heights.addPoint x, y, size, intensity
+    addPoints: (items) -> (@addPoint item.x, item.y, item.size, item.intensity for item in items)
 
 window.createWebGLHeatmap = (params) -> new WebGLHeatmap(params)
diff --git a/webgl-heatmap.js b/webgl-heatmap.js
index 180f1db..830d935 100644
--- a/webgl-heatmap.js
+++ b/webgl-heatmap.js
@@ -1,9 +1,447 @@
-// Generated by CoffeeScript 1.3.3
+// Generated by CoffeeScript 1.8.0
 (function() {
-  var Framebuffer, Heights, Node, Shader, Texture, WebGLHeatmap, fragmentShaderBlit, vertexShaderBlit;
+  var Framebuffer, Heights, Node, Shader, Texture, WebGLHeatmap, fragmentShaderBlit, nukeVendorPrefix, textureFloatShims, vertexShaderBlit,
+    __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
+
+  nukeVendorPrefix = function() {
+    var getExtension, getSupportedExtensions, vendorRe, vendors;
+    if (window.WebGLRenderingContext != null) {
+      vendors = ['WEBKIT', 'MOZ', 'MS', 'O'];
+      vendorRe = /^WEBKIT_(.*)|MOZ_(.*)|MS_(.*)|O_(.*)/;
+      getExtension = WebGLRenderingContext.prototype.getExtension;
+      WebGLRenderingContext.prototype.getExtension = function(name) {
+        var extobj, match, vendor, _i, _len;
+        match = name.match(vendorRe);
+        if (match !== null) {
+          name = match[1];
+        }
+        extobj = getExtension.call(this, name);
+        if (extobj === null) {
+          for (_i = 0, _len = vendors.length; _i < _len; _i++) {
+            vendor = vendors[_i];
+            extobj = getExtension.call(this, vendor + '_' + name);
+            if (extobj !== null) {
+              return extobj;
+            }
+          }
+          return null;
+        } else {
+          return extobj;
+        }
+      };
+      getSupportedExtensions = WebGLRenderingContext.prototype.getSupportedExtensions;
+      return WebGLRenderingContext.prototype.getSupportedExtensions = function() {
+        var extension, match, result, supported, _i, _len;
+        supported = getSupportedExtensions.call(this);
+        result = [];
+        for (_i = 0, _len = supported.length; _i < _len; _i++) {
+          extension = supported[_i];
+          match = extension.match(vendorRe);
+          if (match !== null) {
+            extension = match[1];
+          }
+          if (__indexOf.call(result, extension) < 0) {
+            result.push(extension);
+          }
+        }
+        return result;
+      };
+    }
+  };
 
-  Shader = (function() {
+  textureFloatShims = function() {
+    var checkColorBuffer, checkFloatLinear, checkSupport, checkTexture, createSourceCanvas, getExtension, getSupportedExtensions, name, shimExtensions, shimLookup, unshimExtensions, unshimLookup, _i, _len;
+    createSourceCanvas = function() {
+      var canvas, ctx, imageData;
+      canvas = document.createElement('canvas');
+      canvas.width = 2;
+      canvas.height = 2;
+      ctx = canvas.getContext('2d');
+      imageData = ctx.getImageData(0, 0, 2, 2);
+      imageData.data.set(new Uint8ClampedArray([0, 0, 0, 0, 255, 255, 255, 255, 0, 0, 0, 0, 255, 255, 255, 255]));
+      ctx.putImageData(imageData, 0, 0);
+      return canvas;
+    };
+    createSourceCanvas();
+    checkFloatLinear = function(gl, sourceType) {
+      var buffer, cleanup, fragmentShader, framebuffer, positionLoc, program, readBuffer, result, source, sourceCanvas, sourceLoc, target, vertexShader, vertices;
+      program = gl.createProgram();
+      vertexShader = gl.createShader(gl.VERTEX_SHADER);
+      gl.attachShader(program, vertexShader);
+      gl.shaderSource(vertexShader, 'attribute vec2 position;\nvoid main(){\n    gl_Position = vec4(position, 0.0, 1.0);\n}');
+      gl.compileShader(vertexShader);
+      if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
+        throw gl.getShaderInfoLog(vertexShader);
+      }
+      fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+      gl.attachShader(program, fragmentShader);
+      gl.shaderSource(fragmentShader, 'uniform sampler2D source;\nvoid main(){\n    gl_FragColor = texture2D(source, vec2(1.0, 1.0));\n}');
+      gl.compileShader(fragmentShader);
+      if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
+        throw gl.getShaderInfoLog(fragmentShader);
+      }
+      gl.linkProgram(program);
+      if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+        throw gl.getProgramInfoLog(program);
+      }
+      gl.useProgram(program);
+      cleanup = function() {
+        gl.deleteShader(fragmentShader);
+        gl.deleteShader(vertexShader);
+        gl.deleteProgram(program);
+        gl.deleteBuffer(buffer);
+        gl.deleteTexture(source);
+        gl.deleteTexture(target);
+        gl.deleteFramebuffer(framebuffer);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        gl.useProgram(null);
+        gl.bindTexture(gl.TEXTURE_2D, null);
+        return gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+      };
+      target = gl.createTexture();
+      gl.bindTexture(gl.TEXTURE_2D, target);
+      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 2, 2, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+      framebuffer = gl.createFramebuffer();
+      gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
+      gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, target, 0);
+      sourceCanvas = createSourceCanvas();
+      source = gl.createTexture();
+      gl.bindTexture(gl.TEXTURE_2D, source);
+      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, sourceType, sourceCanvas);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+      vertices = new Float32Array([1, 1, -1, 1, -1, -1, 1, 1, -1, -1, 1, -1]);
+      buffer = gl.createBuffer();
+      gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+      gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
+      positionLoc = gl.getAttribLocation(program, 'position');
+      sourceLoc = gl.getUniformLocation(program, 'source');
+      gl.enableVertexAttribArray(positionLoc);
+      gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0);
+      gl.uniform1i(sourceLoc, 0);
+      gl.drawArrays(gl.TRIANGLES, 0, 6);
+      readBuffer = new Uint8Array(4 * 4);
+      gl.readPixels(0, 0, 2, 2, gl.RGBA, gl.UNSIGNED_BYTE, readBuffer);
+      result = Math.abs(readBuffer[0] - 127) < 10;
+      cleanup();
+      return result;
+    };
+    checkTexture = function(gl, targetType) {
+      var target;
+      target = gl.createTexture();
+      gl.bindTexture(gl.TEXTURE_2D, target);
+      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 2, 2, 0, gl.RGBA, targetType, null);
+      if (gl.getError() === 0) {
+        gl.deleteTexture(target);
+        return true;
+      } else {
+        gl.deleteTexture(target);
+        return false;
+      }
+    };
+    checkColorBuffer = function(gl, targetType) {
+      var check, framebuffer, target;
+      target = gl.createTexture();
+      gl.bindTexture(gl.TEXTURE_2D, target);
+      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 2, 2, 0, gl.RGBA, targetType, null);
+      framebuffer = gl.createFramebuffer();
+      gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
+      gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, target, 0);
+      check = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
+      gl.deleteTexture(target);
+      gl.deleteFramebuffer(framebuffer);
+      gl.bindTexture(gl.TEXTURE_2D, null);
+      gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+      if (check === gl.FRAMEBUFFER_COMPLETE) {
+        return true;
+      } else {
+        return false;
+      }
+    };
+    shimExtensions = [];
+    shimLookup = {};
+    unshimExtensions = [];
+    checkSupport = function() {
+      var canvas, extobj, gl, halfFloatExt, halfFloatTexturing, singleFloatExt, singleFloatTexturing;
+      canvas = document.createElement('canvas');
+      gl = null;
+      try {
+        gl = canvas.getContext('experimental-webgl');
+        if (gl === null) {
+          gl = canvas.getContext('webgl');
+        }
+      } catch (_error) {}
+      if (gl != null) {
+        singleFloatExt = gl.getExtension('OES_texture_float');
+        if (singleFloatExt === null) {
+          if (checkTexture(gl, gl.FLOAT)) {
+            singleFloatTexturing = true;
+            shimExtensions.push('OES_texture_float');
+            shimLookup.OES_texture_float = {
+              shim: true
+            };
+          } else {
+            singleFloatTexturing = false;
+            unshimExtensions.push('OES_texture_float');
+          }
+        } else {
+          if (checkTexture(gl, gl.FLOAT)) {
+            singleFloatTexturing = true;
+            shimExtensions.push('OES_texture_float');
+          } else {
+            singleFloatTexturing = false;
+            unshimExtensions.push('OES_texture_float');
+          }
+        }
+        if (singleFloatTexturing) {
+          extobj = gl.getExtension('WEBGL_color_buffer_float');
+          if (extobj === null) {
+            if (checkColorBuffer(gl, gl.FLOAT)) {
+              shimExtensions.push('WEBGL_color_buffer_float');
+              shimLookup.WEBGL_color_buffer_float = {
+                shim: true,
+                RGBA32F_EXT: 0x8814,
+                RGB32F_EXT: 0x8815,
+                FRAMEBUFFER_ATTACHMENT_COMPONENT_TYPE_EXT: 0x8211,
+                UNSIGNED_NORMALIZED_EXT: 0x8C17
+              };
+            } else {
+              unshimExtensions.push('WEBGL_color_buffer_float');
+            }
+          } else {
+            if (checkColorBuffer(gl, gl.FLOAT)) {
+              shimExtensions.push('WEBGL_color_buffer_float');
+            } else {
+              unshimExtensions.push('WEBGL_color_buffer_float');
+            }
+          }
+          extobj = gl.getExtension('OES_texture_float_linear');
+          if (extobj === null) {
+            if (checkFloatLinear(gl, gl.FLOAT)) {
+              shimExtensions.push('OES_texture_float_linear');
+              shimLookup.OES_texture_float_linear = {
+                shim: true
+              };
+            } else {
+              unshimExtensions.push('OES_texture_float_linear');
+            }
+          } else {
+            if (checkFloatLinear(gl, gl.FLOAT)) {
+              shimExtensions.push('OES_texture_float_linear');
+            } else {
+              unshimExtensions.push('OES_texture_float_linear');
+            }
+          }
+        }
+        halfFloatExt = gl.getExtension('OES_texture_half_float');
+        if (halfFloatExt === null) {
+          if (checkTexture(gl, 0x8D61)) {
+            halfFloatTexturing = true;
+            shimExtensions.push('OES_texture_half_float');
+            halfFloatExt = shimLookup.OES_texture_half_float = {
+              HALF_FLOAT_OES: 0x8D61,
+              shim: true
+            };
+          } else {
+            halfFloatTexturing = false;
+            unshimExtensions.push('OES_texture_half_float');
+          }
+        } else {
+          if (checkTexture(gl, halfFloatExt.HALF_FLOAT_OES)) {
+            halfFloatTexturing = true;
+            shimExtensions.push('OES_texture_half_float');
+          } else {
+            halfFloatTexturing = false;
+            unshimExtensions.push('OES_texture_half_float');
+          }
+        }
+        if (halfFloatTexturing) {
+          extobj = gl.getExtension('EXT_color_buffer_half_float');
+          if (extobj === null) {
+            if (checkColorBuffer(gl, halfFloatExt.HALF_FLOAT_OES)) {
+              shimExtensions.push('EXT_color_buffer_half_float');
+              shimLookup.EXT_color_buffer_half_float = {
+                shim: true,
+                RGBA16F_EXT: 0x881A,
+                RGB16F_EXT: 0x881B,
+                FRAMEBUFFER_ATTACHMENT_COMPONENT_TYPE_EXT: 0x8211,
+                UNSIGNED_NORMALIZED_EXT: 0x8C17
+              };
+            } else {
+              unshimExtensions.push('EXT_color_buffer_half_float');
+            }
+          } else {
+            if (checkColorBuffer(gl, halfFloatExt.HALF_FLOAT_OES)) {
+              shimExtensions.push('EXT_color_buffer_half_float');
+            } else {
+              unshimExtensions.push('EXT_color_buffer_half_float');
+            }
+          }
+          extobj = gl.getExtension('OES_texture_half_float_linear');
+          if (extobj === null) {
+            if (checkFloatLinear(gl, halfFloatExt.HALF_FLOAT_OES)) {
+              shimExtensions.push('OES_texture_half_float_linear');
+              return shimLookup.OES_texture_half_float_linear = {
+                shim: true
+              };
+            } else {
+              return unshimExtensions.push('OES_texture_half_float_linear');
+            }
+          } else {
+            if (checkFloatLinear(gl, halfFloatExt.HALF_FLOAT_OES)) {
+              return shimExtensions.push('OES_texture_half_float_linear');
+            } else {
+              return unshimExtensions.push('OES_texture_half_float_linear');
+            }
+          }
+        }
+      }
+    };
+    if (window.WebGLRenderingContext != null) {
+      checkSupport();
+      unshimLookup = {};
+      for (_i = 0, _len = unshimExtensions.length; _i < _len; _i++) {
+        name = unshimExtensions[_i];
+        unshimLookup[name] = true;
+      }
+      getExtension = WebGLRenderingContext.prototype.getExtension;
+      WebGLRenderingContext.prototype.getExtension = function(name) {
+        var extobj;
+        extobj = shimLookup[name];
+        if (extobj === void 0) {
+          if (unshimLookup[name]) {
+            return null;
+          } else {
+            return getExtension.call(this, name);
+          }
+        } else {
+          return extobj;
+        }
+      };
+      getSupportedExtensions = WebGLRenderingContext.prototype.getSupportedExtensions;
+      WebGLRenderingContext.prototype.getSupportedExtensions = function() {
+        var extension, result, supported, _j, _k, _len1, _len2;
+        supported = getSupportedExtensions.call(this);
+        result = [];
+        for (_j = 0, _len1 = supported.length; _j < _len1; _j++) {
+          extension = supported[_j];
+          if (unshimLookup[extension] === void 0) {
+            result.push(extension);
+          }
+        }
+        for (_k = 0, _len2 = shimExtensions.length; _k < _len2; _k++) {
+          extension = shimExtensions[_k];
+          if (__indexOf.call(result, extension) < 0) {
+            result.push(extension);
+          }
+        }
+        return result;
+      };
+      return WebGLRenderingContext.prototype.getFloatExtension = function(spec) {
+        var candidate, candidates, half, halfFramebuffer, halfLinear, halfTexture, i, importance, preference, result, single, singleFramebuffer, singleLinear, singleTexture, use, _j, _k, _l, _len1, _len2, _len3, _len4, _m, _ref, _ref1, _ref2;
+        if (spec.prefer == null) {
+          spec.prefer = ['half'];
+        }
+        if (spec.require == null) {
+          spec.require = [];
+        }
+        if (spec.throws == null) {
+          spec.throws = true;
+        }
+        singleTexture = this.getExtension('OES_texture_float');
+        halfTexture = this.getExtension('OES_texture_half_float');
+        singleFramebuffer = this.getExtension('WEBGL_color_buffer_float');
+        halfFramebuffer = this.getExtension('EXT_color_buffer_half_float');
+        singleLinear = this.getExtension('OES_texture_float_linear');
+        halfLinear = this.getExtension('OES_texture_half_float_linear');
+        single = {
+          texture: singleTexture !== null,
+          filterable: singleLinear !== null,
+          renderable: singleFramebuffer !== null,
+          score: 0,
+          precision: 'single',
+          half: false,
+          single: true,
+          type: this.FLOAT
+        };
+        half = {
+          texture: halfTexture !== null,
+          filterable: halfLinear !== null,
+          renderable: halfFramebuffer !== null,
+          score: 0,
+          precision: 'half',
+          half: true,
+          single: false,
+          type: (_ref = halfTexture != null ? halfTexture.HALF_FLOAT_OES : void 0) != null ? _ref : null
+        };
+        candidates = [];
+        if (single.texture) {
+          candidates.push(single);
+        }
+        if (half.texture) {
+          candidates.push(half);
+        }
+        result = [];
+        for (_j = 0, _len1 = candidates.length; _j < _len1; _j++) {
+          candidate = candidates[_j];
+          use = true;
+          _ref1 = spec.require;
+          for (_k = 0, _len2 = _ref1.length; _k < _len2; _k++) {
+            name = _ref1[_k];
+            if (candidate[name] === false) {
+              use = false;
+            }
+          }
+          if (use) {
+            result.push(candidate);
+          }
+        }
+        for (_l = 0, _len3 = result.length; _l < _len3; _l++) {
+          candidate = result[_l];
+          _ref2 = spec.prefer;
+          for (i = _m = 0, _len4 = _ref2.length; _m < _len4; i = ++_m) {
+            preference = _ref2[i];
+            importance = Math.pow(2, spec.prefer.length - i - 1);
+            if (candidate[preference]) {
+              candidate.score += importance;
+            }
+          }
+        }
+        result.sort(function(a, b) {
+          if (a.score === b.score) {
+            return 0;
+          } else if (a.score < b.score) {
+            return 1;
+          } else if (a.score > b.score) {
+            return -1;
+          }
+        });
+        if (result.length === 0) {
+          if (spec.throws) {
+            throw 'No floating point texture support that is ' + spec.require.join(', ');
+          } else {
+            return null;
+          }
+        } else {
+          result = result[0];
+          return {
+            filterable: result.filterable,
+            renderable: result.renderable,
+            type: result.type,
+            precision: result.precision
+          };
+        }
+      };
+    }
+  };
 
+  nukeVendorPrefix();
+
+  textureFloatShims();
+
+  Shader = (function() {
     function Shader(gl, _arg) {
       var fragment, vertex;
       this.gl = gl;
@@ -99,7 +537,6 @@
   })();
 
   Framebuffer = (function() {
-
     function Framebuffer(gl) {
       this.gl = gl;
       this.buffer = this.gl.createFramebuffer();
@@ -159,15 +596,18 @@
   })();
 
   Texture = (function() {
-
     function Texture(gl, params) {
       var _ref, _ref1;
       this.gl = gl;
       if (params == null) {
         params = {};
       }
-      this.channels = this.gl[((_ref = params.channels) != null ? _ref : 'rgb').toUpperCase()];
-      this.type = this.gl[((_ref1 = params.type) != null ? _ref1 : 'unsigned_byte').toUpperCase()];
+      this.channels = this.gl[((_ref = params.channels) != null ? _ref : 'rgba').toUpperCase()];
+      if (typeof params.type === 'number') {
+        this.type = params.type;
+      } else {
+        this.type = this.gl[((_ref1 = params.type) != null ? _ref1 : 'unsigned_byte').toUpperCase()];
+      }
       switch (this.channels) {
         case this.gl.RGBA:
           this.chancount = 4;
@@ -208,6 +648,13 @@
       return this;
     };
 
+    Texture.prototype.upload = function(data) {
+      this.width = data.width;
+      this.height = data.height;
+      this.gl.texImage2D(this.target, 0, this.channels, this.channels, this.type, data);
+      return this;
+    };
+
     Texture.prototype.linear = function() {
       this.gl.texParameteri(this.target, this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR);
       this.gl.texParameteri(this.target, this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR);
@@ -237,19 +684,18 @@
   })();
 
   Node = (function() {
-
     function Node(gl, width, height) {
+      var floatExt;
       this.gl = gl;
       this.width = width;
       this.height = height;
+      floatExt = this.gl.getFloatExtension({
+        require: ['renderable']
+      });
       this.texture = new Texture(this.gl, {
-        type: 'float'
+        type: floatExt.type
       }).bind(0).setSize(this.width, this.height).nearest().clampToEdge();
-      try {
-        this.fbo = new Framebuffer(this.gl).bind().color(this.texture).unbind();
-      } catch (error) {
-        throw 'Floating point render target not supported';
-      }
+      this.fbo = new Framebuffer(this.gl).bind().color(this.texture).unbind();
     }
 
     Node.prototype.use = function() {
@@ -276,10 +722,9 @@
 
   vertexShaderBlit = 'attribute vec4 position;\nvarying vec2 texcoord;\nvoid main(){\n    texcoord = position.xy*0.5+0.5;\n    gl_Position = position;\n}';
 
-  fragmentShaderBlit = 'precision highp int;\nprecision highp float;\nprecision highp vec2;\nprecision highp vec3;\nprecision highp vec4;\nuniform sampler2D source;\nvarying vec2 texcoord;';
+  fragmentShaderBlit = '#ifdef GL_FRAGMENT_PRECISION_HIGH\n    precision highp int;\n    precision highp float;\n#else\n    precision mediump int;\n    precision mediump float;\n#endif\nuniform sampler2D source;\nvarying vec2 texcoord;';
 
   Heights = (function() {
-
     function Heights(heatmap, gl, width, height) {
       var i, _i, _ref;
       this.heatmap = heatmap;
@@ -288,7 +733,7 @@
       this.height = height;
       this.shader = new Shader(this.gl, {
         vertex: 'attribute vec4 position, intensity;\nvarying vec2 off, dim;\nvarying float vIntensity;\nuniform vec2 viewport;\n\nvoid main(){\n    dim = abs(position.zw);\n    off = position.zw;\n    vec2 pos = position.xy + position.zw;\n    vIntensity = intensity.x;\n    gl_Position = vec4((pos/viewport)*2.0-1.0, 0.0, 1.0);\n}',
-        fragment: 'precision highp int;\nprecision highp float;\nprecision highp vec2;\nprecision highp vec3;\nprecision highp vec4;\nvarying vec2 off, dim;\nvarying float vIntensity;\nvoid main(){\n    float falloff = (1.0 - smoothstep(0.0, 1.0, length(off/dim)));\n    float intensity = falloff*vIntensity;\n    gl_FragColor = vec4(intensity);\n}'
+        fragment: '#ifdef GL_FRAGMENT_PRECISION_HIGH\n    precision highp int;\n    precision highp float;\n#else\n    precision mediump int;\n    precision mediump float;\n#endif\nvarying vec2 off, dim;\nvarying float vIntensity;\nvoid main(){\n    float falloff = (1.0 - smoothstep(0.0, 1.0, length(off/dim)));\n    float intensity = falloff*vIntensity;\n    gl_FragColor = vec4(intensity);\n}'
       });
       this.clampShader = new Shader(this.gl, {
         vertex: vertexShaderBlit,
@@ -430,10 +875,9 @@
   })();
 
   WebGLHeatmap = (function() {
-
     function WebGLHeatmap(_arg) {
-      var quad, _ref, _ref1, _ref2;
-      _ref = _arg != null ? _arg : {}, this.canvas = _ref.canvas, this.width = _ref.width, this.height = _ref.height;
+      var alphaEnd, alphaRange, alphaStart, error, getColorFun, gradientTexture, image, intensityToAlpha, output, quad, textureGradient, _ref, _ref1;
+      _ref = _arg != null ? _arg : {}, this.canvas = _ref.canvas, this.width = _ref.width, this.height = _ref.height, intensityToAlpha = _ref.intensityToAlpha, gradientTexture = _ref.gradientTexture, alphaRange = _ref.alphaRange;
       if (!this.canvas) {
         this.canvas = document.createElement('canvas');
       }
@@ -451,22 +895,59 @@
             throw 'WebGL not supported';
           }
         }
-      } catch (error) {
+      } catch (_error) {
+        error = _error;
         throw 'WebGL not supported';
       }
-      if (!this.gl.getExtension('OES_texture_float')) {
-        throw 'No floating point texture support';
+      if (window.WebGLDebugUtils != null) {
+        console.log('debugging mode');
+        this.gl = WebGLDebugUtils.makeDebugContext(this.gl, function(err, funcName, args) {
+          throw WebGLDebugUtils.glEnumToString(err) + " was caused by call to: " + funcName;
+        });
       }
       this.gl.enableVertexAttribArray(0);
       this.gl.blendFunc(this.gl.ONE, this.gl.ONE);
+      if (gradientTexture) {
+        textureGradient = this.gradientTexture = new Texture(this.gl, {
+          channels: 'rgba'
+        }).bind(0).setSize(2, 2).nearest().clampToEdge();
+        if (typeof gradientTexture === 'string') {
+          image = new Image();
+          image.onload = function() {
+            return textureGradient.bind().upload(image);
+          };
+          image.src = gradientTexture;
+        } else {
+          if (gradientTexture.width > 0 && gradientTexture.height > 0) {
+            textureGradient.upload(gradientTexture);
+          } else {
+            gradientTexture.onload = function() {
+              return textureGradient.upload(gradientTexture);
+            };
+          }
+        }
+        getColorFun = 'uniform sampler2D gradientTexture;\nvec3 getColor(float intensity){\n    return texture2D(gradientTexture, vec2(intensity, 0.0)).rgb;\n}';
+      } else {
+        textureGradient = null;
+        getColorFun = 'vec3 getColor(float intensity){\n    vec3 blue = vec3(0.0, 0.0, 1.0);\n    vec3 cyan = vec3(0.0, 1.0, 1.0);\n    vec3 green = vec3(0.0, 1.0, 0.0);\n    vec3 yellow = vec3(1.0, 1.0, 0.0);\n    vec3 red = vec3(1.0, 0.0, 0.0);\n\n    vec3 color = (\n        fade(-0.25, 0.25, intensity)*blue +\n        fade(0.0, 0.5, intensity)*cyan +\n        fade(0.25, 0.75, intensity)*green +\n        fade(0.5, 1.0, intensity)*yellow +\n        smoothstep(0.75, 1.0, intensity)*red\n    );\n    return color;\n}';
+      }
+      if (intensityToAlpha == null) {
+        intensityToAlpha = true;
+      }
+      if (intensityToAlpha) {
+        _ref1 = alphaRange != null ? alphaRange : [0, 1], alphaStart = _ref1[0], alphaEnd = _ref1[1];
+        output = "vec4 alphaFun(vec3 color, float intensity){\n    float alpha = smoothstep(" + (alphaStart.toFixed(8)) + ", " + (alphaEnd.toFixed(8)) + ", intensity);\n    return vec4(color*alpha, alpha);\n}";
+      } else {
+        output = 'vec4 alphaFun(vec3 color, float intensity){\n    return vec4(color, 1.0);\n}';
+      }
       this.shader = new Shader(this.gl, {
         vertex: vertexShaderBlit,
-        fragment: fragmentShaderBlit + 'float linstep(float low, float high, float value){\n    return clamp((value-low)/(high-low), 0.0, 1.0);\n}\n\nfloat fade(float low, float high, float value){\n    float mid = (low+high)*0.5;\n    float range = (high-low)*0.5;\n    float x = 1.0 - clamp(abs(mid-value)/range, 0.0, 1.0);\n    return smoothstep(0.0, 1.0, x);\n}\nvoid main(){\n    float intensity = smoothstep(0.0, 1.0, texture2D(source, texcoord).r);\n\n    vec3 blue = vec3(0.0, 0.0, 1.0);\n    vec3 cyan = vec3(0.0, 1.0, 1.0);\n    vec3 green = vec3(0.0, 1.0, 0.0);\n    vec3 yellow = vec3(1.0, 1.0, 0.0);\n    vec3 red = vec3(1.0, 0.0, 0.0);\n\n    vec3 color = (\n        fade(-0.25, 0.25, intensity)*blue +\n        fade(0.0, 0.5, intensity)*cyan +\n        fade(0.25, 0.75, intensity)*green +\n        fade(0.5, 1.0, intensity)*yellow +\n        smoothstep(0.75, 1.0, intensity)*red\n    );\n\n    gl_FragColor = vec4(color*intensity, intensity);\n    //gl_FragColor = vec4(1.0, 0.0, 1.0, 1.0);\n}'
+        fragment: fragmentShaderBlit + ("float linstep(float low, float high, float value){\n    return clamp((value-low)/(high-low), 0.0, 1.0);\n}\n\nfloat fade(float low, float high, float value){\n    float mid = (low+high)*0.5;\n    float range = (high-low)*0.5;\n    float x = 1.0 - clamp(abs(mid-value)/range, 0.0, 1.0);\n    return smoothstep(0.0, 1.0, x);\n}\n\n" + getColorFun + "\n" + output + "\n\nvoid main(){\n    float intensity = smoothstep(0.0, 1.0, texture2D(source, texcoord).r);\n    vec3 color = getColor(intensity);\n    gl_FragColor = alphaFun(color, intensity);\n}")
       });
-      if ((_ref1 = this.width) == null) {
+      if (this.width == null) {
         this.width = this.canvas.offsetWidth || 2;
       }
-      if ((_ref2 = this.height) == null) {
+      if (this.height == null) {
         this.height = this.canvas.offsetHeight || 2;
       }
       this.canvas.width = this.width;
@@ -498,7 +979,10 @@
       this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.quad);
       this.gl.vertexAttribPointer(0, 4, this.gl.FLOAT, false, 0, 0);
       this.heights.nodeFront.bind(0);
-      this.shader.use().int('source', 0);
+      if (this.gradientTexture) {
+        this.gradientTexture.bind(1);
+      }
+      this.shader.use().int('source', 0).int('gradientTexture', 1);
       return this.gl.drawArrays(this.gl.TRIANGLES, 0, 6);
     };
 
@@ -535,6 +1019,16 @@
       return this.heights.addPoint(x, y, size, intensity);
     };
 
+    WebGLHeatmap.prototype.addPoints = function(items) {
+      var item, _i, _len, _results;
+      _results = [];
+      for (_i = 0, _len = items.length; _i < _len; _i++) {
+        item = items[_i];
+        _results.push(this.addPoint(item.x, item.y, item.size, item.intensity));
+      }
+      return _results;
+    };
+
     return WebGLHeatmap;
 
   })();
