webgl-heatmap.coffee

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()
        @vs         = @gl.createShader @gl.VERTEX_SHADER
        @fs         = @gl.createShader @gl.FRAGMENT_SHADER
        @gl.attachShader @program, @vs
        @gl.attachShader @program, @fs
        @compileShader @vs, vertex
        @compileShader @fs, fragment
        @link()

        @value_cache = {}
        @uniform_cache = {}
        @attribCache = {}
    
    attribLocation: (name) ->
        location = @attribCache[name]
        if location is undefined
            location = @attribCache[name] = @gl.getAttribLocation @program, name
        return location
    
    compileShader: (shader, source) ->
        @gl.shaderSource shader, source
        @gl.compileShader shader

        if not @gl.getShaderParameter shader, @gl.COMPILE_STATUS
            throw "Shader Compile Error: #{@gl.getShaderInfoLog(shader)}"
    
    link: ->
        @gl.linkProgram @program

        if not @gl.getProgramParameter @program, @gl.LINK_STATUS
            throw "Shader Link Error: #{@gl.getProgramInfoLog(@program)}"

    use: ->
        @gl.useProgram @program
        return @
    
    uniformLoc: (name) ->
        location = @uniform_cache[name]
        if location is undefined
            location = @uniform_cache[name] = @gl.getUniformLocation @program, name
        return location
    
    int: (name, value) ->
        cached = @value_cache[name]
        if cached != value
            @value_cache[name] = value
            loc = @uniformLoc name
            @gl.uniform1i loc, value if loc
        return @
    
    vec2: (name, a, b) ->
        loc = @uniformLoc name
        @gl.uniform2f loc, a, b if loc
        return @
            
    float: (name, value) ->
        cached = @value_cache[name]
        if cached != value
            @value_cache[name] = value
            loc = @uniformLoc name
            @gl.uniform1f loc, value if loc
        return @

class Framebuffer
    constructor: (@gl) ->
        @buffer = @gl.createFramebuffer()

    destroy: ->
        @gl.deleteFRamebuffer @buffer

    bind: ->
        @gl.bindFramebuffer @gl.FRAMEBUFFER, @buffer
        return @

    unbind: ->
        @gl.bindFramebuffer @gl.FRAMEBUFFER, null
        return @

    check: ->
        result = @gl.checkFramebufferStatus @gl.FRAMEBUFFER
        switch result
            when @gl.FRAMEBUFFER_UNSUPPORTED
                throw 'Framebuffer is unsupported'
            when @gl.FRAMEBUFFER_INCOMPLETE_ATTACHMENT
                throw 'Framebuffer incomplete attachment'
            when @gl.FRAMEBUFFER_INCOMPLETE_DIMENSIONS
                throw 'Framebuffer incomplete dimensions'
            when @gl.FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT
                throw 'Framebuffer incomplete missing attachment'
        return @

    color: (texture) ->
        @gl.framebufferTexture2D @gl.FRAMEBUFFER, @gl.COLOR_ATTACHMENT0, texture.target, texture.handle, 0
        @check()
        return @
    
    depth: (buffer) ->
        @gl.framebufferRenderbuffer @gl.FRAMEBUFFER, @gl.DEPTH_ATTACHMENT, @gl.RENDERBUFFER, buffer.id
        @check()
        return @

    destroy: ->
        @gl.deleteFramebuffer @buffer

class Texture
    constructor: (@gl, params={}) ->
        @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
            when @gl.RGB then @chancount = 3
            when @gl.LUMINANCE_ALPHA then @chancount = 2
            else @chancount = 1

        @target = @gl.TEXTURE_2D
        @handle = @gl.createTexture()

    destroy: ->
        @gl.deleteTexture @handle
    
    bind: (unit=0) ->
        if unit > 15
            throw 'Texture unit too large: ' + unit

        @gl.activeTexture @gl.TEXTURE0+unit
        @gl.bindTexture @target, @handle

        return @

    setSize: (@width, @height) ->
        @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
        return @
    
    nearest: ->
        @gl.texParameteri @target, @gl.TEXTURE_MAG_FILTER, @gl.NEAREST
        @gl.texParameteri @target, @gl.TEXTURE_MIN_FILTER, @gl.NEAREST
        return @

    clampToEdge: ->
        @gl.texParameteri @target, @gl.TEXTURE_WRAP_S, @gl.CLAMP_TO_EDGE
        @gl.texParameteri @target, @gl.TEXTURE_WRAP_T, @gl.CLAMP_TO_EDGE
        return @
    
    repeat: ->
        @gl.texParameteri @target, @gl.TEXTURE_WRAP_S, @gl.REPEAT
        @gl.texParameteri @target, @gl.TEXTURE_WRAP_T, @gl.REPEAT
        return @

class Node
    constructor: (@gl, @width, @height) ->
        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)
    end: -> @fbo.unbind()

    resize: (@width, @height) ->
        @texture.bind(0).setSize(@width, @height)

vertexShaderBlit = '''
    attribute vec4 position;
    varying vec2 texcoord;
    void main(){
        texcoord = position.xy*0.5+0.5;
        gl_Position = position;
    }
'''

fragmentShaderBlit = '''
    #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;
'''

class Heights
    constructor: (@heatmap, @gl, @width, @height) ->
        @shader = new Shader @gl,
            vertex: '''
                attribute vec4 position, intensity;
                varying vec2 off, dim;
                varying float vIntensity;
                uniform vec2 viewport;

                void main(){
                    dim = abs(position.zw);
                    off = position.zw;
                    vec2 pos = position.xy + position.zw;
                    vIntensity = intensity.x;
                    gl_Position = vec4((pos/viewport)*2.0-1.0, 0.0, 1.0);
                }
            '''
            fragment: '''
                #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(){
                    float falloff = (1.0 - smoothstep(0.0, 1.0, length(off/dim)));
                    float intensity = falloff*vIntensity;
                    gl_FragColor = vec4(intensity);
                }
            '''

        @clampShader = new Shader @gl,
            vertex: vertexShaderBlit
            fragment: fragmentShaderBlit + '''
                uniform float low, high;
                void main(){
                    gl_FragColor = vec4(clamp(texture2D(source, texcoord).rgb, low, high), 1.0);
                }
            '''
        
        @multiplyShader = new Shader @gl,
            vertex: vertexShaderBlit
            fragment: fragmentShaderBlit + '''
                uniform float value;
                void main(){
                    gl_FragColor = vec4(texture2D(source, texcoord).rgb*value, 1.0);
                }
            '''
        
        @blurShader = new Shader @gl,
            vertex: vertexShaderBlit
            fragment: fragmentShaderBlit + '''
                uniform vec2 viewport;
                void main(){
                    vec4 result = vec4(0.0);
                    for(int x=-1; x<=1; x++){
                        for(int y=-1; y<=1; y++){
                            vec2 off = vec2(x,y)/viewport;
                            //float factor = 1.0 - smoothstep(0.0, 1.5, length(off));
                            float factor = 1.0;
                            result += vec4(texture2D(source, texcoord+off).rgb*factor, factor);
                        }
                    }
                    gl_FragColor = vec4(result.rgb/result.w, 1.0);
                }
            '''

        @nodeBack = new Node @gl, @width, @height
        @nodeFront = new Node @gl, @width, @height
        
        @vertexBuffer = @gl.createBuffer()
        @vertexSize = 8
        @maxPointCount = 1024*10
        @vertexBufferData = new Float32Array @maxPointCount*@vertexSize*6
        @vertexBufferViews = []
        for i in [0...@maxPointCount]
            @vertexBufferViews.push new Float32Array(@vertexBufferData.buffer, 0, i*@vertexSize*6)

        @bufferIndex = 0
        @pointCount = 0

    resize: (@width, @height) ->
        @nodeBack.resize @width, @height
        @nodeFront.resize @width, @height

    update: ->
        if @pointCount > 0
            @gl.enable @gl.BLEND

            @nodeFront.use()

            @gl.bindBuffer @gl.ARRAY_BUFFER, @vertexBuffer
            @gl.bufferData @gl.ARRAY_BUFFER, @vertexBufferViews[@pointCount], @gl.STREAM_DRAW

            positionLoc = @shader.attribLocation('position')
            intensityLoc = @shader.attribLocation('intensity')
            
            @gl.enableVertexAttribArray 1
            @gl.vertexAttribPointer(positionLoc, 4, @gl.FLOAT, false, 8*4, 0*4)
            @gl.vertexAttribPointer(intensityLoc, 4, @gl.FLOAT, false, 8*4, 4*4)
            @shader.use().vec2('viewport', @width, @height)
            @gl.drawArrays @gl.TRIANGLES, 0, @pointCount*6
            @gl.disableVertexAttribArray 1

            @pointCount = 0
            @bufferIndex = 0

            @nodeFront.end()
            @gl.disable @gl.BLEND

    clear: ->
        @nodeFront.use()
        @gl.clearColor(0,0,0,1)
        @gl.clear(@gl.COLOR_BUFFER_BIT)
        @nodeFront.end()

    clamp: (min, max) ->
        @gl.bindBuffer @gl.ARRAY_BUFFER, @heatmap.quad
        @gl.vertexAttribPointer(0, 4, @gl.FLOAT, false, 0, 0)
        @nodeFront.bind(0)
        @nodeBack.use()
        @clampShader.use().int('source', 0).float('low', min).float('high', max)
        @gl.drawArrays @gl.TRIANGLES, 0, 6
        @nodeBack.end()
        @swap()
    
    multiply: (value) ->
        @gl.bindBuffer @gl.ARRAY_BUFFER, @heatmap.quad
        @gl.vertexAttribPointer(0, 4, @gl.FLOAT, false, 0, 0)
        @nodeFront.bind(0)
        @nodeBack.use()
        @multiplyShader.use().int('source', 0).float('value', value)
        @gl.drawArrays @gl.TRIANGLES, 0, 6
        @nodeBack.end()
        @swap()

    blur: ->
        @gl.bindBuffer @gl.ARRAY_BUFFER, @heatmap.quad
        @gl.vertexAttribPointer(0, 4, @gl.FLOAT, false, 0, 0)
        @nodeFront.bind(0)
        @nodeBack.use()
        @blurShader.use().int('source', 0).vec2('viewport', @width, @height)
        @gl.drawArrays @gl.TRIANGLES, 0, 6
        @nodeBack.end()
        @swap()

    swap: ->
        tmp = @nodeFront
        @nodeFront = @nodeBack
        @nodeBack = tmp

    addVertex: (x, y, xs, ys, intensity) ->
        @vertexBufferData[@bufferIndex++] = x
        @vertexBufferData[@bufferIndex++] = y
        @vertexBufferData[@bufferIndex++] = xs
        @vertexBufferData[@bufferIndex++] = ys
        @vertexBufferData[@bufferIndex++] = intensity
        @vertexBufferData[@bufferIndex++] = intensity
        @vertexBufferData[@bufferIndex++] = intensity
        @vertexBufferData[@bufferIndex++] = intensity

    addPoint: (x, y, size=50, intensity=0.2) ->
        if @pointCount >= @maxPointCount - 1
            @update()

        #if @pointCount < @maxPointCount
        y = @height - y
        s = size/2
        @addVertex x, y, -s, -s, intensity
        @addVertex x, y, +s, -s, intensity
        @addVertex x, y, -s, +s, intensity
        
        @addVertex x, y, -s, +s, intensity
        @addVertex x, y, +s, -s, intensity
        @addVertex x, y, +s, +s, intensity

        @pointCount += 1

class WebGLHeatmap
    constructor: ({@canvas, @width, @height, intensityToAlpha, gradientTexture, alphaRange}={}) ->
        @canvas = document.createElement('canvas') unless @canvas
        try
            @gl = @canvas.getContext('experimental-webgl', depth:false, antialias:false)
            if @gl == null
                @gl = @canvas.getContext('webgl', depth:false, antialias:false)
                if @gl == null
                    throw 'WebGL not supported'
        catch error
            throw 'WebGL not supported'

        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

        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;
                }
            '''
        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);
                    vec3 yellow = vec3(1.0, 1.0, 0.0);
                    vec3 red = vec3(1.0, 0.0, 0.0);

                    vec3 color = (
                        fade(-0.25, 0.25, intensity)*blue +
                        fade(0.0, 0.5, intensity)*cyan +
                        fade(0.25, 0.75, intensity)*green +
                        fade(0.5, 1.0, intensity)*yellow +
                        smoothstep(0.75, 1.0, intensity)*red
                    );
                    return color;
                }
            '''

        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
        @canvas.height = @height
        @gl.viewport(0, 0, @width, @height)
        
        @quad = @gl.createBuffer()
        @gl.bindBuffer @gl.ARRAY_BUFFER, @quad
        quad = new Float32Array([
            -1, -1, 0, 1,
            1, -1, 0, 1,
            -1, 1, 0, 1,
            
            -1, 1, 0, 1,
            1, -1, 0, 1,
            1, 1, 0, 1,
        ])
        @gl.bufferData @gl.ARRAY_BUFFER, quad, @gl.STATIC_DRAW
        @gl.bindBuffer @gl.ARRAY_BUFFER, null
        
        @heights = new Heights @, @gl, @width, @height
    
    adjustSize: ->
        canvasWidth = @canvas.offsetWidth or 2
        canvasHeight = @canvas.offsetHeight or 2

        if @width isnt canvasWidth or @height isnt canvasHeight
            @gl.viewport 0, 0, canvasWidth, canvasHeight
            @canvas.width = canvasWidth
            @canvas.height = canvasHeight
            @width = canvasWidth
            @height = canvasHeight
            @heights.resize @width, @height

    display: ->
        @gl.bindBuffer @gl.ARRAY_BUFFER, @quad
        @gl.vertexAttribPointer(0, 4, @gl.FLOAT, false, 0, 0)
        @heights.nodeFront.bind(0)
        if @gradientTexture
            @gradientTexture.bind(1)
        @shader.use().int('source', 0).int('gradientTexture', 1)
        @gl.drawArrays @gl.TRIANGLES, 0, 6

    update: ->
        @heights.update()

    clear: -> @heights.clear()
    clamp: (min=0, max=1) -> @heights.clamp(min, max)
    multiply: (value=0.95) -> @heights.multiply(value)
    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)