openseadragon/test/demo/webgldemodrawer.js

// THIS CODE OVERWRITES THE ORIGINAL VERSION FOR FASTER TESTING
// i.e. it doesn't need to be re-built with grunt after every save.


/*
 * OpenSeadragon - WebGLDrawer
 *
 * Copyright (C) 2009 CodePlex Foundation
 * Copyright (C) 2010-2023 OpenSeadragon contributors
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions are
 * met:
 *
 * - Redistributions of source code must retain the above copyright notice,
 *   this list of conditions and the following disclaimer.
 *
 * - Redistributions in binary form must reproduce the above copyright
 *   notice, this list of conditions and the following disclaimer in the
 *   documentation and/or other materials provided with the distribution.
 *
 * - Neither the name of CodePlex Foundation nor the names of its
 *   contributors may be used to endorse or promote products derived from
 *   this software without specific prior written permission.
 *
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
 * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
 * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
 * A PARTICULAR PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL THE COPYRIGHT
 * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
 * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED
 * TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
 * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
 * LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
 * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */

(function( $ ){

    // internal class Mat3: implements matrix operations
    // Modified from https://webglfundamentals.org/webgl/lessons/webgl-2d-matrices.html
   class Mat3{
       constructor(values){
           if(!values) {
               values = [
                   0, 0, 0,
                   0, 0, 0,
                   0, 0, 0
               ];
           }

           this.values = values;
       }

       static makeIdentity(){
           return new Mat3([
               1, 0, 0,
               0, 1, 0,
               0, 0, 1
           ]);
       }

       static makeTranslation(tx, ty) {
           return new Mat3([
               1, 0, 0,
               0, 1, 0,
               tx, ty, 1,
           ]);
       }

       static makeRotation(angleInRadians) {
           var c = Math.cos(angleInRadians);
           var s = Math.sin(angleInRadians);
           return new Mat3([
               c, -s, 0,
               s, c, 0,
               0, 0, 1,
           ]);
       }

       static makeScaling(sx, sy) {
           return new Mat3([
               sx, 0, 0,
               0, sy, 0,
               0, 0, 1,
           ]);
       }

       multiply(other) {
           let a = this.values;
           let b = other.values;

           var a00 = a[0 * 3 + 0];
           var a01 = a[0 * 3 + 1];
           var a02 = a[0 * 3 + 2];
           var a10 = a[1 * 3 + 0];
           var a11 = a[1 * 3 + 1];
           var a12 = a[1 * 3 + 2];
           var a20 = a[2 * 3 + 0];
           var a21 = a[2 * 3 + 1];
           var a22 = a[2 * 3 + 2];
           var b00 = b[0 * 3 + 0];
           var b01 = b[0 * 3 + 1];
           var b02 = b[0 * 3 + 2];
           var b10 = b[1 * 3 + 0];
           var b11 = b[1 * 3 + 1];
           var b12 = b[1 * 3 + 2];
           var b20 = b[2 * 3 + 0];
           var b21 = b[2 * 3 + 1];
           var b22 = b[2 * 3 + 2];
           return new Mat3([
               b00 * a00 + b01 * a10 + b02 * a20,
               b00 * a01 + b01 * a11 + b02 * a21,
               b00 * a02 + b01 * a12 + b02 * a22,
               b10 * a00 + b11 * a10 + b12 * a20,
               b10 * a01 + b11 * a11 + b12 * a21,
               b10 * a02 + b11 * a12 + b12 * a22,
               b20 * a00 + b21 * a10 + b22 * a20,
               b20 * a01 + b21 * a11 + b22 * a21,
               b20 * a02 + b21 * a12 + b22 * a22,
           ]);
       }

   }

   /**
    * @class WebGLDrawer
    * @memberof OpenSeadragon
    * @classdesc Default implementation of WebGLDrawer for an {@link OpenSeadragon.Viewer}.
    * @param {Object} options - Options for this Drawer.
    * @param {OpenSeadragon.Viewer} options.viewer - The Viewer that owns this Drawer.
    * @param {OpenSeadragon.Viewport} options.viewport - Reference to Viewer viewport.
    * @param {Element} options.element - Parent element.
    * @param {Number} [options.debugGridColor] - See debugGridColor in {@link OpenSeadragon.Options} for details.
    */

    $.WebGLDrawer = class WebGLDrawer extends OpenSeadragon.DrawerBase{
        constructor(options){
           super(options);

           this.destroyed = false;
           // private members

           this._TextureMap = new Map();
           this._TileMap = new Map();

           this._gl = null;
           this._glLocs = null;
           this._glProgram = null;
           this._glUnitQuadBuffer = null;
           this._glFrameBuffer = null;
           this._glTiledImageTexture = null;
           this._glFramebufferToCanvasTransform = null;
           this._outputCanvas = null;
           this._outputContext = null;
           this._clippingCanvas = null;
           this._clippingContext = null;
           this._renderingCanvas = null;

           // Add listeners for events that require modifying the scene or camera
           this.viewer.addHandler("tile-ready", ev => this._tileReadyHandler(ev));
           this.viewer.addHandler("image-unloaded", ev => this._imageUnloadedHandler(ev));

           // this.viewer is set by parent constructor
           // this.canvas is set by parent constructor, created and appended to the viewer container element
           this._setupCanvases();

           this._setupRenderer();

           this.context = this._outputContext; // API required by tests
       }

        // Public API required by all Drawer implementations
        /**
            * Clean up the renderer, removing all resources
            */
        destroy(){
            if(this.destroyed){
                return;
            }
            // clear all resources used by the renderer, geometries, textures etc
            let gl = this._gl;

            // adapted from https://stackoverflow.com/a/23606581/1214731
            var numTextureUnits = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS);
            for (let unit = 0; unit < numTextureUnits; ++unit) {
                gl.activeTexture(gl.TEXTURE0 + unit);
                gl.bindTexture(gl.TEXTURE_2D, null);
                gl.bindTexture(gl.TEXTURE_CUBE_MAP, null);
            }
            gl.bindBuffer(gl.ARRAY_BUFFER, null);
            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
            gl.bindRenderbuffer(gl.RENDERBUFFER, null);
            gl.bindFramebuffer(gl.FRAMEBUFFER, null);

            let canvases = Array.from(this._TextureMap.keys());
            canvases.forEach(canvas => {
                this._cleanupImageData(canvas); // deletes texture, removes from _TextureMap
            });

            // Delete all our created resources
            gl.deleteBuffer(this._glUnitQuadBuffer);
            gl.deleteBuffer(this._glFrameBuffer);
            // TO DO: if/when render buffers or frame buffers are used, release them:
            // gl.deleteRenderbuffer(someRenderbuffer);
            // gl.deleteFramebuffer(someFramebuffer);

            // make canvases 1 x 1 px and delete references
            this._renderingCanvas.width = this._renderingCanvas.height = 1;
            this._clippingCanvas.width = this._clippingCanvas.height = 1;
            this._outputCanvas.width = this._outputCanvas.height = 1;
            this._renderingCanvas = null;
            this._clippingCanvas = this._clippingContext = null;
            this._outputCanvas = this._outputContext = null;

            let ext = gl.getExtension('WEBGL_lose_context');
            if(ext){
                ext.loseContext();
            }

            // set our webgl context reference to null to enable garbage collection
            this._gl = null;

            // set our destroyed flag to true
            this.destroyed = true;
        }

        // Public API required by all Drawer implementations
        /**
            *
            * @returns true if the drawer supports rotation
            */
        canRotate(){
            return true;
        }

        // Public API required by all Drawer implementations

        /**
            * @returns {Boolean} returns true if canvas and webgl are supported and
            * three.js has been exposed as a global variable named THREE
            */
        isSupported(){
            let canvasElement = document.createElement( 'canvas' );
            let webglContext = $.isFunction( canvasElement.getContext ) &&
                        canvasElement.getContext( 'webgl' );
            let ext = webglContext.getExtension('WEBGL_lose_context');
            if(ext){
                ext.loseContext();
            }
            return !!( webglContext );
        }

        /**
            * create the HTML element (canvas in this case) that the image will be drawn into
            * @returns {Element} the canvas to draw into
            */
        createDrawingElement(){
            let canvas = $.makeNeutralElement("canvas");
            let viewportSize = this._calculateCanvasSize();
            canvas.width = viewportSize.x;
            canvas.height = viewportSize.y;
            return canvas;
        }

        /**
            *
            * @param {Array} tiledImages Array of TiledImage objects to draw
            */
        draw(tiledImages){
            let gl = this._gl;
            let viewport = {
                bounds: this.viewport.getBoundsNoRotate(true),
                center: this.viewport.getCenter(true),
                rotation: this.viewport.getRotation(true) * Math.PI / 180
            };

            let flipMultiplier = this.viewport.flipped ? -1 : 1;
            // calculate view matrix for viewer
            let posMatrix = Mat3.makeTranslation(-viewport.center.x, -viewport.center.y);
            let scaleMatrix = Mat3.makeScaling(2 / viewport.bounds.width * flipMultiplier, -2 / viewport.bounds.height);
            let rotMatrix = Mat3.makeRotation(-viewport.rotation);
            let viewMatrix = scaleMatrix.multiply(rotMatrix).multiply(posMatrix);

            // clear the output canvas
            this._outputContext.clearRect(0, 0, this._outputCanvas.width, this._outputCanvas.height);


            // TO DO: further optimization is possible.
            // If no clipping and no composite operation, the tiled images
            // can all be drawn onto the rendering canvas at the same time, avoiding
            // unnecessary clearing and copying of the pixel data.
            // For now, I'm doing it this way to replicate full functionality
            // of the context2d drawer

            //iterate over tiled imagesget the list of tiles to draw
            tiledImages.forEach( (tiledImage, i) => {

                //get the list of tiles to draw
                let tilesToDraw = tiledImage.getTilesToDraw();

                if(tilesToDraw.length === 0){
                    return;
                }

                // bind to the framebuffer for render-to-texture
                gl.bindFramebuffer(gl.FRAMEBUFFER, this._glFrameBuffer);

                // clear the buffer
                gl.clear(gl.COLOR_BUFFER_BIT);

                // set opacity for this image
                gl.uniform1f(this._glLocs.uOpacityMultiplier, tiledImage.opacity);



                let overallMatrix = viewMatrix;

                let imageRotation = tiledImage.getRotation(true);
                // if needed, handle the tiledImage being rotated
                if( imageRotation % 360 !== 0){
                    let imageRotationMatrix = Mat3.makeRotation(-imageRotation * Math.PI / 180);
                    let imageCenter = tiledImage.getBoundsNoRotate(true).getCenter();
                    let t1 = Mat3.makeTranslation(imageCenter.x, imageCenter.y);
                    let t2 = Mat3.makeTranslation(-imageCenter.x, -imageCenter.y);

                    // update the view matrix to account for this image's rotation
                    let localMatrix = t1.multiply(imageRotationMatrix).multiply(t2);
                    overallMatrix = viewMatrix.multiply(localMatrix);
                }

                // iterate over tiles and draw each one to the buffer
                for(let ti = 0; ti < tilesToDraw.length; ti++){
                    let tile = tilesToDraw[ti].tile;
                    let textureInfo = this._TextureMap.get(tile.getCanvasContext().canvas);
                    if(textureInfo){
                        this._drawTile(tile, tiledImage, textureInfo, overallMatrix, tiledImage.opacity);
                    } else {
                        // console.log('No tile info', tile);
                    }
                }


                // Draw from the Framebuffer onto the rendering canvas buffer

                gl.flush(); // finish drawing to the texture
                gl.bindFramebuffer(gl.FRAMEBUFFER, null); // null means bind to the backbuffer for drawing
                gl.bindTexture(gl.TEXTURE_2D, this._glTiledImageTexture); // bind the rendered texture to use
                gl.clear(gl.COLOR_BUFFER_BIT); // clear the back buffer

                // set up the matrix to draw the whole framebuffer to the entire clip space
                gl.uniformMatrix3fv(this._glLocs.uMatrix, false, this._glFramebufferToCanvasTransform);

                // reset texturebuffer to unit quad
                gl.bindBuffer(gl.ARRAY_BUFFER, this._glTextureBuffer);
                gl.bufferData(gl.ARRAY_BUFFER, this._glUnitQuad, gl.DYNAMIC_DRAW);

                // set opacity to the value for the current tiledImage
                this._gl.uniform1f(this._glLocs.uOpacityMultiplier, tiledImage.opacity);
                gl.drawArrays(gl.TRIANGLES, 0, 6);

                // iterate over any filters - filters can use this._glTiledImageTexture to get rendered data if desired
                let filters = this.filters || [];
                for(let fi = 0; fi < filters.length; fi++){
                    let filter = this.filters[fi];
                    if(filter.createProgram && !filter.program){
                        filter.createProgram(gl);
                    }
                    if(filter.apply){
                        filter.apply(gl, this._glTiledImageTexture, tiledImage); // filter.apply should write data on top of the backbuffer (bound above)
                    }
                }

                gl.flush(); //make sure drawing to the output buffer of the rendering canvas is complete. Is this necessary?

                // draw from the rendering canvas onto the output canvas, clipping/cropping if needed.
                this._renderToOutputCanvas(tiledImage, tilesToDraw, i);

            });

        }

        // Public API required by all Drawer implementations
        /**
            * Set the context2d imageSmoothingEnabled parameter
            * @param {Boolean} enabled
            */
        setImageSmoothingEnabled(enabled){
            this._clippingContext.imageSmoothingEnabled = enabled;
            this._outputContext.imageSmoothingEnabled = enabled;
        }

        /**
        * Draw a rect onto the output canvas for debugging purposes
        * @param {OpenSeadragon.Rect} rect
        */
        drawDebuggingRect(rect){
            let context = this._outputContext;
            context.save();
            context.lineWidth = 2 * $.pixelDensityRatio;
            context.strokeStyle = this.debugGridColor[0];
            context.fillStyle = this.debugGridColor[0];

            context.strokeRect(
                rect.x * $.pixelDensityRatio,
                rect.y * $.pixelDensityRatio,
                rect.width * $.pixelDensityRatio,
                rect.height * $.pixelDensityRatio
            );

            context.restore();
        }
        // private
        _getTextureDataFromTile(tile){
            return tile.getCanvasContext().canvas;
        }

        /**
            * Draw data from the rendering canvas onto the output canvas, with clipping,
            * cropping and/or debug info as requested.
            * @private
            * @param {OpenSeadragon.TiledImage} tiledImage - the tiledImage to draw
            * @param {Array} tilesToDraw - array of objects containing tiles that were drawn
            */
        _renderToOutputCanvas(tiledImage, tilesToDraw, tiledImageIndex){
            // composite onto the output canvas, clipping if necessary
            this._outputContext.save();

            // set composite operation; ignore for first image drawn
            this._outputContext.globalCompositeOperation = tiledImageIndex === 0 ? null : tiledImage.compositeOperation || this.viewer.compositeOperation;
            if(tiledImage._croppingPolygons || tiledImage._clip){
                this._renderToClippingCanvas(tiledImage);
                this._outputContext.drawImage(this._clippingCanvas, 0, 0);

            } else {
                this._outputContext.drawImage(this._renderingCanvas, 0, 0);
            }
            this._outputContext.restore();
            if(tiledImage.debugMode){
                let colorIndex = this.viewer.world.getIndexOfItem(tiledImage) % this.debugGridColor.length;
                let strokeStyle = this.debugGridColor[colorIndex];
                let fillStyle = this.debugGridColor[colorIndex];
                this._drawDebugInfo(tilesToDraw, tiledImage, strokeStyle, fillStyle);
            }

            // Fire tiled-image-drawn event now that the data is on the output canvas
            if( this.viewer ){
                /**
                    * Raised when a tiled image is drawn to the canvas. Only valid
                    * for webgl drawer.
                    *
                    * @event tiled-image-drawn
                    * @memberof OpenSeadragon.Viewer
                    * @type {object}
                    * @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised the event.
                    * @property {OpenSeadragon.TiledImage} tiledImage - Which TiledImage is being drawn.
                    * @property {Array} tiles - An array of Tile objects that were drawn.
                    * @property {?Object} userData - Arbitrary subscriber-defined object.
                    */
                this.viewer.raiseEvent( 'tiled-image-drawn', {
                    tiledImage: tiledImage,
                    tiles: tilesToDraw.map(info => info.tile),
                });
            }
        }

        // private
        _drawTile(tile, tiledImage, textureInfo, viewMatrix, imageOpacity){

            let gl = this._gl;
            let texture = textureInfo.texture;
            let textureQuad = textureInfo.position;

            // set the vertices into the non-overlapped portion of the texture
            gl.bindBuffer(gl.ARRAY_BUFFER, this._glTextureBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, textureQuad, gl.DYNAMIC_DRAW);

            // compute offsets for overlap
            let overlapFraction = this._calculateOverlapFraction(tile, tiledImage);
            let xOffset = tile.positionedBounds.width * overlapFraction.x;
            let yOffset = tile.positionedBounds.height * overlapFraction.y;

            // x, y, w, h in viewport coords
            let x = tile.positionedBounds.x + (tile.x === 0 ? 0 : xOffset);
            let y = tile.positionedBounds.y + (tile.y === 0 ? 0 : yOffset);
            let right = tile.positionedBounds.x + tile.positionedBounds.width - (tile.isRightMost ? 0 : xOffset);
            let bottom = tile.positionedBounds.y + tile.positionedBounds.height - (tile.isBottomMost ? 0 : yOffset);
            let w = right - x;
            let h = bottom - y;

            let matrix = new Mat3([
                w, 0, 0,
                0, h, 0,
                x, y, 1,
            ]);

            if(tile.flipped){
                // flip the tile around the center of the unit quad
                let t1 = Mat3.makeTranslation(0.5, 0);
                let t2 = Mat3.makeTranslation(-0.5, 0);

                // update the view matrix to account for this image's rotation
                let localMatrix = t1.multiply(Mat3.makeScaling(-1, 1)).multiply(t2);
                matrix = matrix.multiply(localMatrix);
            }

            let overallMatrix = viewMatrix.multiply(matrix);

            // set opacity for this image
            this._gl.uniform1f(this._glLocs.uOpacityMultiplier, tile.opacity); // imageOpacity *

            gl.uniformMatrix3fv(this._glLocs.uMatrix, false, overallMatrix.values);
            gl.bindTexture(gl.TEXTURE_2D, texture);

            if(this.continuousTileRefresh){
                // Upload the image into the texture (already bound to TEXTURE_2D above)
                let tileContext = tile.getCanvasContext();
                this._raiseTileDrawingEvent(tiledImage, this._outputContext, tile, tileContext);
                this._uploadImageData(tileContext, tile, tiledImage);
            }


            gl.drawArrays(gl.TRIANGLES, 0, 6);
        }

        _setupRenderer(){

            if(!this._gl){
                $.console.error('_setupCanvases must be called before _setupRenderer');
            }

            const vertexShaderProgram = `
            attribute vec2 a_output_position;
            attribute vec2 a_texture_position;

            uniform mat3 u_matrix;

            varying vec2 v_texCoord;

            void main() {
            gl_Position = vec4(u_matrix * vec3(a_output_position, 1), 1);

            v_texCoord = a_texture_position;
            }
            `;

            const fragmentShaderProgram = `
            precision mediump float;

            // our texture
            uniform sampler2D u_image;

            // the texCoords passed in from the vertex shader.
            varying vec2 v_texCoord;

            // the opacity multiplier for the image
            uniform float u_opacity_multiplier;

            void main() {
            gl_FragColor = texture2D(u_image, v_texCoord);
            gl_FragColor *= u_opacity_multiplier;
            }
            `;

            let gl = this._gl;
            this._glProgram = this.constructor.initShaderProgram(gl, vertexShaderProgram, fragmentShaderProgram);
            gl.useProgram(this._glProgram);
            gl.enable(gl.BLEND);
            gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);

            this._glLocs = {
                aOutputPosition: gl.getAttribLocation(this._glProgram, 'a_output_position'),
                aTexturePosition: gl.getAttribLocation(this._glProgram, 'a_texture_position'),
                uMatrix: gl.getUniformLocation(this._glProgram, 'u_matrix'),
                uImage: gl.getUniformLocation(this._glProgram, 'u_image'),
                uOpacityMultiplier: gl.getUniformLocation(this._glProgram, 'u_opacity_multiplier')
            };

            this._glUnitQuad = this._makeQuadVertexBuffer(0, 1, 0, 1);
            // provide texture coordinates for the rectangle in output space.
            this._glUnitQuadBuffer = gl.createBuffer(); //keep reference to clear it later
            gl.bindBuffer(gl.ARRAY_BUFFER, this._glUnitQuadBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, this._glUnitQuad, gl.STATIC_DRAW);
            gl.enableVertexAttribArray(this._glLocs.aOutputPosition);
            gl.vertexAttribPointer(this._glLocs.aOutputPosition, 2, gl.FLOAT, false, 0, 0);

            // provide texture coordinates for the rectangle in image (texture) space.
            this._glTextureBuffer = gl.createBuffer(); //keep reference to clear it later
            gl.bindBuffer(gl.ARRAY_BUFFER, this._glTextureBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, this._glUnitQuad, gl.DYNAMIC_DRAW); // use unit quad to start, will be updated per tile
            gl.enableVertexAttribArray(this._glLocs.aTexturePosition);
            gl.vertexAttribPointer(this._glLocs.aTexturePosition, 2, gl.FLOAT, false, 0, 0);

            // setup the framebuffer
            this._glTiledImageTexture = gl.createTexture();
            gl.bindTexture(gl.TEXTURE_2D, this._glTiledImageTexture);
            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, this._renderingCanvas.width, this._renderingCanvas.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
            this._glFrameBuffer = gl.createFramebuffer();
            gl.bindFramebuffer(gl.FRAMEBUFFER, this._glFrameBuffer);
            gl.framebufferTexture2D(
                gl.FRAMEBUFFER,
                gl.COLOR_ATTACHMENT0,  // attach texture as COLOR_ATTACHMENT0
                gl.TEXTURE_2D,         // attach a 2D texture
                this._glTiledImageTexture,           // the texture to attach
                0
            );

            this._glFramebufferToCanvasTransform = Mat3.makeScaling(2, 2).multiply(Mat3.makeTranslation(-0.5, -0.5)).values;


        }

        _resizeRenderer(){
            let gl = this._gl;
            let w = this._renderingCanvas.width;
            let h = this._renderingCanvas.height;
            gl.viewport(0, 0, w, h);

            //release the old texture
            gl.deleteTexture(this._glTiledImageTexture);
            //create a new texture and set it up
            this._glTiledImageTexture = gl.createTexture();
            gl.bindTexture(gl.TEXTURE_2D, this._glTiledImageTexture);
            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, w, h, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

            //bind the frame buffer to the new texture
            gl.bindFramebuffer(gl.FRAMEBUFFER, this._glFrameBuffer);
            gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this._glTiledImageTexture, 0);

        }

        _setupCanvases(){
            let _this = this;

            this._outputCanvas = this.canvas; //output canvas
            this._outputContext = this._outputCanvas.getContext('2d');

            this._renderingCanvas = document.createElement('canvas');

            this._clippingCanvas = document.createElement('canvas');
            this._clippingContext = this._clippingCanvas.getContext('2d');
            this._renderingCanvas.width = this._clippingCanvas.width = this._outputCanvas.width;
            this._renderingCanvas.height = this._clippingCanvas.height = this._outputCanvas.height;

            this._gl = this._renderingCanvas.getContext('webgl');

            //make the additional canvas elements mirror size changes to the output canvas
            this.viewer.addHandler("resize", function(){

                if(_this._outputCanvas !== _this.viewer.drawer.canvas){
                    _this._outputCanvas.style.width = _this.viewer.drawer.canvas.clientWidth + 'px';
                    _this._outputCanvas.style.height = _this.viewer.drawer.canvas.clientHeight + 'px';
                }

                let viewportSize = _this._calculateCanvasSize();
                if( _this._outputCanvas.width !== viewportSize.x ||
                    _this._outputCanvas.height !== viewportSize.y ) {
                    _this._outputCanvas.width = viewportSize.x;
                    _this._outputCanvas.height = viewportSize.y;
                }

                _this._renderingCanvas.style.width = _this._outputCanvas.clientWidth + 'px';
                _this._renderingCanvas.style.height = _this._outputCanvas.clientHeight + 'px';
                _this._renderingCanvas.width = _this._clippingCanvas.width = _this._outputCanvas.width;
                _this._renderingCanvas.height = _this._clippingCanvas.height = _this._outputCanvas.height;

                // important - update the size of the rendering viewport!
                _this._resizeRenderer();
            });
        }

        _makeQuadVertexBuffer(left, right, top, bottom){
            return new Float32Array([
                left, bottom,
                right, bottom,
                left, top,
                left, top,
                right, bottom,
                right, top]);
        }


        _tileReadyHandler(event){
            let tile = event.tile;
            let tiledImage = event.tiledImage;
            let tileContext = tile.getCanvasContext();
            let canvas = tileContext.canvas;
            let textureInfo = this._TextureMap.get(canvas);

            // if this is a new image for us, create a texture
            if(!textureInfo){
                let gl = this._gl;

                // create a gl Texture for this tile and bind the canvas with the image data
                let texture = gl.createTexture();
                let position;
                let overlap = tiledImage.source.tileOverlap;
                if( overlap > 0){
                    // calculate the normalized position of the rect to actually draw
                    // discarding overlap.
                    let overlapFraction = this._calculateOverlapFraction(tile, tiledImage);

                    let left = tile.x === 0 ? 0 : overlapFraction.x;
                    let top = tile.y === 0 ? 0 : overlapFraction.y;
                    let right = tile.isRightMost ? 1 : 1 - overlapFraction.x;
                    let bottom = tile.isBottomMost ? 1 : 1 - overlapFraction.y;
                    position = this._makeQuadVertexBuffer(left, right, top, bottom);
                } else {
                    // no overlap: this texture can use the unit quad as it's position data
                    position = this._glUnitQuad;
                }

                let textureInfo = {
                    texture: texture,
                    position: position,
                };

                // add it to our _TextureMap
                this._TextureMap.set(canvas, textureInfo);

                gl.bindTexture(gl.TEXTURE_2D, texture);
                // Set the parameters so we can render any size image.
                gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
                gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
                gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
                gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

                // Upload the image into the texture.
                this._uploadImageData(tileContext);

            }

        }

        _calculateOverlapFraction(tile, tiledImage){
            let overlap = tiledImage.source.tileOverlap;
            let nativeWidth = tile.sourceBounds.width; // in pixels
            let nativeHeight = tile.sourceBounds.height; // in pixels
            let overlapWidth  = (tile.x === 0 ? 0 : overlap) + (tile.isRightMost ? 0 : overlap); // in pixels
            let overlapHeight = (tile.y === 0 ? 0 : overlap) + (tile.isBottomMost ? 0 : overlap); // in pixels
            let widthOverlapFraction = overlap / (nativeWidth + overlapWidth); // as a fraction of image including overlap
            let heightOverlapFraction = overlap / (nativeHeight + overlapHeight); // as a fraction of image including overlap
            return {
                x: widthOverlapFraction,
                y: heightOverlapFraction
            };
        }

        _uploadImageData(tileContext){

            let gl = this._gl;
            let canvas = tileContext.canvas;

            // This depends on gl.TEXTURE_2D being bound to the texture
            // associated with this canvas before calling this function
            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas);

        }

        _imageUnloadedHandler(event){
            let canvas = event.context2D.canvas;
            this._cleanupImageData(canvas);
        }

        _cleanupImageData(tileCanvas){
            let textureInfo = this._TextureMap.get(tileCanvas);
            //remove from the map
            //release the texture from the GPU
            if(textureInfo){
                this._gl.deleteTexture(textureInfo.texture);
            }

            //release the texture from the GPU
            this._gl.deleteTexture(textureInfo.texture);
            // release the position buffer from the GPU
            // TO DO: do this!
        }
        // private
        // necessary for clip testing to pass (test uses spyOnce(drawer._setClip))
        _setClip(rect){
            this._clippingContext.beginPath();
            this._clippingContext.rect(rect.x, rect.y, rect.width, rect.height);
            this._clippingContext.clip();
        }
        _renderToClippingCanvas(item){
            let _this = this;

            this._clippingContext.clearRect(0, 0, this._clippingCanvas.width, this._clippingCanvas.height);
            this._clippingContext.save();

            if(item._clip){
                var box = item.imageToViewportRectangle(item._clip, true);
                var rect = this.viewportToDrawerRectangle(box);
                this._setClip(rect);
            }
            if(item._croppingPolygons){
                let polygons = item._croppingPolygons.map(function (polygon) {
                    return polygon.map(function (coord) {
                        let point = item.imageToViewportCoordinates(coord.x, coord.y, true)
                            .rotate(_this.viewer.viewport.getRotation(true), _this.viewer.viewport.getCenter(true));
                        let clipPoint = _this._viewportCoordToDrawerCoord(point);
                        return clipPoint;
                    });
                });
                this._clippingContext.beginPath();
                polygons.forEach(function (polygon) {
                    polygon.forEach(function (coord, i) {
                        _this._clippingContext[i === 0 ? 'moveTo' : 'lineTo'](coord.x, coord.y);
                    });
                });
                this._clippingContext.clip();
            }

            this._clippingContext.drawImage(this._renderingCanvas, 0, 0);

            this._clippingContext.restore();
        }

        // private
        _offsetForRotation(options) {
            var point = options.point ?
                options.point.times($.pixelDensityRatio) :
                new $.Point(this._outputCanvas.width / 2, this._outputCanvas.height / 2);

            var context = this._outputContext;
            context.save();

            context.translate(point.x, point.y);
            if(this.viewport.flipped){
                context.rotate(Math.PI / 180 * -options.degrees);
                context.scale(-1, 1);
            } else{
                context.rotate(Math.PI / 180 * options.degrees);
            }
            context.translate(-point.x, -point.y);
        }


        /**
            * @private
            * @inner
            * This function converts the given point from to the drawer coordinate by
            * multiplying it with the pixel density.
            * This function does not take rotation into account, thus assuming provided
            * point is at 0 degree.
            * @param {OpenSeadragon.Point} point - the pixel point to convert
            * @returns {OpenSeadragon.Point} Point in drawer coordinate system.
            */
        _viewportCoordToDrawerCoord(point) {
            var vpPoint = this.viewport.pixelFromPointNoRotate(point, true);
            return new $.Point(
                vpPoint.x * $.pixelDensityRatio,
                vpPoint.y * $.pixelDensityRatio
            );
        }

        // private
        _drawDebugInfo( tilesToDraw, tiledImage, stroke, fill ) {

            for ( var i = tilesToDraw.length - 1; i >= 0; i-- ) {
                var tile = tilesToDraw[ i ].tile;
                try {
                    this._drawDebugInfoOnTile(tile, tilesToDraw.length, i, tiledImage, stroke, fill);
                } catch(e) {
                    $.console.error(e);
                }
            }
        }
        // private
        _drawDebugInfoOnTile(tile, count, i, tiledImage, stroke, fill) {

            var context = this._outputContext;
            context.save();
            context.lineWidth = 2 * $.pixelDensityRatio;
            context.font = 'small-caps bold ' + (13 * $.pixelDensityRatio) + 'px arial';
            context.strokeStyle = stroke;
            context.fillStyle = fill;

            if (this.viewport.getRotation(true) % 360 !== 0 ) {
                this._offsetForRotation({degrees: this.viewport.getRotation(true)});
            }
            if (tiledImage.getRotation(true) % 360 !== 0) {
                this._offsetForRotation({
                    degrees: tiledImage.getRotation(true),
                    point: tiledImage.viewport.pixelFromPointNoRotate(
                        tiledImage._getRotationPoint(true), true)
                });
            }
            if (tiledImage.viewport.getRotation(true) % 360 === 0 &&
                tiledImage.getRotation(true) % 360 === 0) {
                if(tiledImage._drawer.viewer.viewport.getFlip()) {
                    tiledImage._drawer._flip();
                }
            }

            context.strokeRect(
                tile.position.x * $.pixelDensityRatio,
                tile.position.y * $.pixelDensityRatio,
                tile.size.x * $.pixelDensityRatio,
                tile.size.y * $.pixelDensityRatio
            );

            var tileCenterX = (tile.position.x + (tile.size.x / 2)) * $.pixelDensityRatio;
            var tileCenterY = (tile.position.y + (tile.size.y / 2)) * $.pixelDensityRatio;

            // Rotate the text the right way around.
            context.translate( tileCenterX, tileCenterY );
            context.rotate( Math.PI / 180 * -this.viewport.getRotation(true) );
            context.translate( -tileCenterX, -tileCenterY );

            if( tile.x === 0 && tile.y === 0 ){
                context.fillText(
                    "Zoom: " + this.viewport.getZoom(),
                    tile.position.x * $.pixelDensityRatio,
                    (tile.position.y - 30) * $.pixelDensityRatio
                );
                context.fillText(
                    "Pan: " + this.viewport.getBounds().toString(),
                    tile.position.x * $.pixelDensityRatio,
                    (tile.position.y - 20) * $.pixelDensityRatio
                );
            }
            context.fillText(
                "Level: " + tile.level,
                (tile.position.x + 10) * $.pixelDensityRatio,
                (tile.position.y + 20) * $.pixelDensityRatio
            );
            context.fillText(
                "Column: " + tile.x,
                (tile.position.x + 10) * $.pixelDensityRatio,
                (tile.position.y + 30) * $.pixelDensityRatio
            );
            context.fillText(
                "Row: " + tile.y,
                (tile.position.x + 10) * $.pixelDensityRatio,
                (tile.position.y + 40) * $.pixelDensityRatio
            );
            context.fillText(
                "Order: " + i + " of " + count,
                (tile.position.x + 10) * $.pixelDensityRatio,
                (tile.position.y + 50) * $.pixelDensityRatio
            );
            context.fillText(
                "Size: " + tile.size.toString(),
                (tile.position.x + 10) * $.pixelDensityRatio,
                (tile.position.y + 60) * $.pixelDensityRatio
            );
            context.fillText(
                "Position: " + tile.position.toString(),
                (tile.position.x + 10) * $.pixelDensityRatio,
                (tile.position.y + 70) * $.pixelDensityRatio
            );

            if (this.viewport.getRotation(true) % 360 !== 0 ) {
                this._restoreRotationChanges();
            }
            if (tiledImage.getRotation(true) % 360 !== 0) {
                this._restoreRotationChanges();
            }

            if (tiledImage.viewport.getRotation(true) % 360 === 0 &&
                tiledImage.getRotation(true) % 360 === 0) {
                if(tiledImage._drawer.viewer.viewport.getFlip()) {
                    tiledImage._drawer._flip();
                }
            }

            context.restore();
        }

        // private
        _restoreRotationChanges() {
            var context = this._outputContext;
            context.restore();
        }

        // modified from https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context
        static initShaderProgram(gl, vsSource, fsSource) {
            const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
            const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);

            // Create the shader program

            const shaderProgram = gl.createProgram();
            gl.attachShader(shaderProgram, vertexShader);
            gl.attachShader(shaderProgram, fragmentShader);
            gl.linkProgram(shaderProgram);

            // If creating the shader program failed, alert

            if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
            alert(
                `Unable to initialize the shader program: ${gl.getProgramInfoLog(
                shaderProgram
                )}`
            );
            return null;
            }

            return shaderProgram;

            function loadShader(gl, type, source) {
                    const shader = gl.createShader(type);

                    // Send the source to the shader object

                    gl.shaderSource(shader, source);

                    // Compile the shader program

                    gl.compileShader(shader);

                    // See if it compiled successfully

                    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
                        alert(
                            `An error occurred compiling the shaders: ${gl.getShaderInfoLog(shader)}`
                        );
                        gl.deleteShader(shader);
                        return null;
                    }

                return shader;
            }
        }

    };

    // $.WebGLDrawer.Filter = class{
    //     constructor(gl){
    //         this.gl = gl;
    //     }
    //     apply(){

    //     }
    // };


}( OpenSeadragon ));