Na}{

File Content: `curtains.js`

/***
 Little WebGL helper to apply images, videos or canvases as textures of planes
 Author: Martin Laxenaire https://www.martin-laxenaire.fr/
 Version: 6.1.1
 https://www.curtainsjs.com/
 ***/

'use strict';

/*** CURTAINS CLASS ***/

/***
 This is our main class to call to init our curtains
 Basically sets up all necessary intern variables based on params and runs the init method

 params:
 @containerID (string): the container ID that will hold our canvas

 returns:
 @this: our Curtains element
 ***/
function Curtains(params) {
    this.planes = [];
    this.renderTargets = [];
    this.shaderPasses = [];
    // textures
    this._imageCache = [];

    this._drawStacks = {
        "opaque": {
            length: 0,
            programs: [],
            order: [],
        },
        "transparent": {
            length: 0,
            programs: [],
            order: [],
        },
        "renderPasses": [],
        "scenePasses": [],
    };

    this._drawingEnabled = true;
    this._forceRender = false;

    // handle old version init param
    if(typeof params === "string") {
        console.warn("Since v4.0 you should use an object to pass your container and other parameters. Please refer to the docs: https://www.curtainsjs.com/documentation.html");
        var container = params;
        params = {
            container: container
        };
    }

    // set container
    if(!params.container) {
        var container = document.createElement("div");
        container.setAttribute("id", "curtains-canvas");
        document.body.appendChild(container);
        this.container = container;
    }
    else {
        if(typeof params.container === "string") {
            this.container = document.getElementById(params.container);
        }
        else if(params.container instanceof Element) {
            this.container = params.container;
        }
    }

    // if we should use auto resize (default to true)
    this._autoResize = params.autoResize;
    if(this._autoResize === null || this._autoResize === undefined) {
        this._autoResize = true;
    }

    // if we should use auto render (default to true)
    this._autoRender = params.autoRender;
    if(this._autoRender === null || this._autoRender === undefined) {
        this._autoRender = true;
    }

    // if we should watch the scroll (default to true)
    this._watchScroll = params.watchScroll;
    if(this._watchScroll === null || this._watchScroll === undefined) {
        this._watchScroll = true;
    }

    // pixel ratio and rendering scale
    this.pixelRatio = params.pixelRatio || window.devicePixelRatio || 1;

    params.renderingScale = isNaN(params.renderingScale) ? 1 : parseFloat(params.renderingScale);
    this._renderingScale = Math.max(0.25, Math.min(1, params.renderingScale));

    // webgl context parameters
    this.premultipliedAlpha = params.premultipliedAlpha || false;

    this.alpha = params.alpha;
    if(this.alpha === null || this.alpha === undefined) {
        this.alpha = true;
    }

    this.antialias = params.antialias;
    if(this.antialias === null || this.antialias === undefined) {
        this.antialias = true;
    }

    this.productionMode = params.production || false;

    if(!this.container) {
        if(!this.productionMode) console.warn("You must specify a valid container ID");

        // call the error callback if provided
        if(this._onErrorCallback) {
            this._onErrorCallback()
        }

        return;
    }

    this._init();
}

/***
 Init by creating a canvas and webgl context, set the size and handle events
 Then prepare immediately for drawing as all planes will be created asynchronously
 ***/
Curtains.prototype._init = function() {
    this.glCanvas = document.createElement("canvas");

    // set our webgl context
    var glAttributes = {
        alpha: this.alpha,
        premultipliedAlpha: this.premultipliedAlpha,
        antialias: this.antialias,
    };

    this.gl = this.glCanvas.getContext("webgl2", glAttributes);
    this._isWebGL2 = !!this.gl;
    if(!this.gl) {
        this.gl = this.glCanvas.getContext("webgl", glAttributes) || this.glCanvas.getContext("experimental-webgl", glAttributes);
    }

    // WebGL context could not be created
    if(!this.gl) {
        if(!this.productionMode) console.warn("WebGL context could not be created");

        if(this._onErrorCallback) {
            this._onErrorCallback()
        }

        return;
    }

    // get webgl extensions
    this._getExtensions();

    // managing our webgl draw states
    this._glState = {
        // programs
        currentProgramID: null,
        programs: [],

        // last buffer sizes drawn (avoid redundant buffer bindings)
        currentBuffersID: 0,
        setDepth: null,
        // current frame buffer ID
        frameBufferID: null,
        // current scene pass ID
        scenePassIndex: null,

        // face culling
        cullFace: null,

        // textures flip Y
        flipY: null,
    };

    // handling context
    this._contextLostHandler = this._contextLost.bind(this);
    this.glCanvas.addEventListener("webglcontextlost", this._contextLostHandler, false);

    this._contextRestoredHandler = this._contextRestored.bind(this);
    this.glCanvas.addEventListener("webglcontextrestored", this._contextRestoredHandler, false);

    // handling scroll event
    this._scrollManager = {
        handler: this._scroll.bind(this, true),
        shouldWatch: this._watchScroll,

        // init values even if we won't necessarily use them
        xOffset: window.pageXOffset,
        yOffset: window.pageYOffset,
        lastXDelta: 0,
        lastYDelta: 0,
    };
    if(this._watchScroll) {
        window.addEventListener("scroll", this._scrollManager.handler, {passive: true});
    }

    // this will set the size as well
    this.setPixelRatio(this.pixelRatio, false);

    // handling window resize event
    this._resizeHandler = null;
    if(this._autoResize) {
        this._resizeHandler = this.resize.bind(this, true);
        window.addEventListener("resize", this._resizeHandler, false);
    }

    // we can start rendering now
    this._readyToDraw();
};


/***
 Get all available WebGL extensions based on WebGL used version
 Called on init and on context restoration
 ***/
Curtains.prototype._getExtensions = function() {
    this._extensions = [];
    if(this._isWebGL2) {
        this._extensions['EXT_color_buffer_float'] = this.gl.getExtension('EXT_color_buffer_float');
        this._extensions['OES_texture_float_linear'] = this.gl.getExtension('OES_texture_float_linear');
        this._extensions['WEBGL_lose_context'] = this.gl.getExtension('WEBGL_lose_context');
    } else {
        this._extensions['OES_vertex_array_object'] = this.gl.getExtension('OES_vertex_array_object');
        this._extensions['OES_texture_float'] = this.gl.getExtension('OES_texture_float');
        this._extensions['OES_texture_float_linear'] = this.gl.getExtension('OES_texture_float_linear');
        this._extensions['OES_texture_half_float'] = this.gl.getExtension('OES_texture_half_float');
        this._extensions['OES_texture_half_float_linear'] = this.gl.getExtension('OES_texture_half_float_linear');
        this._extensions['OES_element_index_uint'] = this.gl.getExtension('OES_element_index_uint');
        this._extensions['OES_standard_derivatives'] = this.gl.getExtension('OES_standard_derivatives');
        this._extensions['EXT_sRGB'] = this.gl.getExtension('EXT_sRGB');
        this._extensions['WEBGL_depth_texture'] = this.gl.getExtension('WEBGL_depth_texture');
        this._extensions['WEBGL_draw_buffers'] = this.gl.getExtension('WEBGL_draw_buffers');
        this._extensions['WEBGL_lose_context'] = this.gl.getExtension('WEBGL_lose_context');
    }
};


/*** SIZING ***/

/***
 Set the pixel ratio property and update everything by calling resize method
 ***/
Curtains.prototype.setPixelRatio = function(pixelRatio, triggerCallback) {
    this.pixelRatio = parseFloat(Math.max(pixelRatio, 1)) || 1;
    // apply new pixel ratio to all our elements but don't trigger onAfterResize callback
    this.resize(triggerCallback);
};


/***
 Set our container and canvas sizes
 ***/
Curtains.prototype._setSize = function() {
    // get our container bounding client rectangle
    var containerBoundingRect = this.container.getBoundingClientRect();

    // use the bounding rect values
    this._boundingRect = {
        width: containerBoundingRect.width * this.pixelRatio,
        height: containerBoundingRect.height * this.pixelRatio,
        top: containerBoundingRect.top * this.pixelRatio,
        left: containerBoundingRect.left * this.pixelRatio,
    };

    // iOS Safari > 8+ has a known bug due to navigation bar appearing/disappearing
    // this causes wrong bounding client rect calculations, especially negative top value when it shouldn't
    // to fix this we'll use a dirty but useful workaround

    // first we check if we're on iOS Safari
    var isSafari = !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/);
    var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

    if(isSafari && iOS) {
        // if we are on iOS Safari we'll need a custom function to retrieve our container absolute top position
        function getTopOffset(el) {
            var topOffset = 0;
            while(el && !isNaN(el.offsetTop)) {
                topOffset += el.offsetTop - el.scrollTop;
                el = el.offsetParent;
            }
            return topOffset;
        }

        // use it to update our top value
        this._boundingRect.top = getTopOffset(this.container) * this.pixelRatio;
    }

    this.glCanvas.style.width  = Math.floor(this._boundingRect.width / this.pixelRatio) + "px";
    this.glCanvas.style.height = Math.floor(this._boundingRect.height / this.pixelRatio) + "px";

    this.glCanvas.width = Math.floor(this._boundingRect.width * this._renderingScale);
    this.glCanvas.height = Math.floor(this._boundingRect.height * this._renderingScale);

    this.gl.viewport(0, 0, this.gl.drawingBufferWidth, this.gl.drawingBufferHeight);

    // update scroll values ass well
    if(this._scrollManager.shouldWatch) {
        this._scrollManager.xOffset = window.pageXOffset;
        this._scrollManager.yOffset = window.pageYOffset;
    }
};


/***
 Useful to get our container bounding rectangle without triggering a reflow/layout

 returns :
 @boundingRectangle (obj): an object containing our container bounding rectangle (width, height, top and left properties)
 ***/
Curtains.prototype.getBoundingRect = function() {
    return this._boundingRect;
};


/***
 Resize our container and all the planes

 params:
 @triggerCallback (boolean): Whether we should trigger onAfterResize callback
 ***/
Curtains.prototype.resize = function(triggerCallback) {
    this._setSize();

    // resize the planes only if they are fully initiated
    for(var i = 0; i < this.planes.length; i++) {
        if(this.planes[i]._canDraw) {
            this.planes[i].planeResize();
        }
    }

    // resize the shader passes only if they are fully initiated
    for(var i = 0; i < this.shaderPasses.length; i++) {
        if(this.shaderPasses[i]._canDraw) {
            this.shaderPasses[i].planeResize();
        }
    }

    // resize the render targets
    for(var i = 0; i < this.renderTargets.length; i++) {
        this.renderTargets[i].resize();
    }

    // be sure we'll update the scene even if drawing is disabled
    this.needRender();

    var self = this;
    setTimeout(function() {
        if(self._onAfterResizeCallback && triggerCallback) {
            self._onAfterResizeCallback();
        }
    }, 0);
};


/*** SCROLLING ***/

/***
 Handles the different values associated with a scroll event (scroll and delta values)
 If no plane watch the scroll then those values won't be retrieved to avoid unnecessary reflow calls
 If at least a plane is watching, update all watching planes positions based on the scroll values
 And force render for at least one frame to actually update the scene
 ***/
Curtains.prototype._scroll = function() {
    // get our scroll values
    var scrollValues = {
        x: window.pageXOffset,
        y: window.pageYOffset,
    };

    // update scroll manager values
    this.updateScrollValues(scrollValues.x, scrollValues.y);

    // shouldWatch should be true if at least one plane watches the scroll
    if(this._scrollManager.shouldWatch) {

        for(var i = 0; i < this.planes.length; i++) {
            // if our plane is watching the scroll, update its position
            if(this.planes[i].watchScroll) {
                this.planes[i].updateScrollPosition();
            }
        }

        // be sure we'll update the scene even if drawing is disabled
        this.needRender();
    }

    if(this._onScrollCallback) {
        this._onScrollCallback();
    }
};


/***
 Updates the scroll manager X and Y scroll values as well as last X and Y deltas
 Internally called by the scroll handler if at least one plane is watching the scroll
 Could be called externally as well if the user wants to handle the scroll by himself

 params:
 @x (float): scroll value along X axis
 @y (float): scroll value along Y axis
 ***/
Curtains.prototype.updateScrollValues = function(x, y) {
    // get our scroll delta values
    var lastScrollXValue = this._scrollManager.xOffset;
    this._scrollManager.xOffset = x;
    this._scrollManager.lastXDelta = lastScrollXValue - this._scrollManager.xOffset;

    var lastScrollYValue = this._scrollManager.yOffset;
    this._scrollManager.yOffset = y;
    this._scrollManager.lastYDelta = lastScrollYValue - this._scrollManager.yOffset;
};


/***
 Returns last delta scroll values

 returns:
 @delta (obj): an object containing X and Y last delta values
 ***/
Curtains.prototype.getScrollDeltas = function() {
    return {
        x: this._scrollManager.lastXDelta,
        y: this._scrollManager.lastYDelta,
    };
};


/***
 Returns last window scroll values

 returns:
 @scrollValue (obj): an object containing X and Y last scroll values
 ***/
Curtains.prototype.getScrollValues = function() {
    return {
        x: this._scrollManager.xOffset,
        y: this._scrollManager.yOffset,
    };
};



/*** ENABLING / DISABLING DRAWING ***/

/***
 Enables the render loop
 ***/
Curtains.prototype.enableDrawing = function() {
    this._drawingEnabled = true;
};

/***
 Disables the render loop
 ***/
Curtains.prototype.disableDrawing = function() {
    this._drawingEnabled = false;
};

/***
 Forces the rendering of the next frame, even if disabled
 ***/
Curtains.prototype.needRender = function() {
    this._forceRender = true;
};


/*** HANDLING CONTEXT ***/

/***
 Called when the WebGL context is lost
 ***/
Curtains.prototype._contextLost = function(event) {
    event.preventDefault();

    this._glState = {
        currentProgramID: null,
        programs: [],

        // last buffer sizes drawn (avoid redundant buffer bindings)
        currentBuffersID: 0,
        setDepth: null,
        // current frame buffer ID
        frameBufferID: null,
        // current scene pass ID
        scenePassIndex: null,

        // face culling
        cullFace: null,

        // textures flip Y
        flipY: null,
    };

    // cancel requestAnimationFrame
    if(this._animationFrameID) {
        window.cancelAnimationFrame(this._animationFrameID);
    }

    var self = this;
    setTimeout(function() {
        if(self._onContextLostCallback) {
            self._onContextLostCallback();
        }
    }, 0);
};


/***
 Call this method to restore your context
 ***/
Curtains.prototype.restoreContext = function() {
    if(this.gl && this._extensions['WEBGL_lose_context']) {
        this._extensions['WEBGL_lose_context'].restoreContext();
    }
    else if(!this.productionMode) {
        if(!this.gl) {
            console.warn("Could not restore context because the context is not defined");
        }
        else if(!this._extensions['WEBGL_lose_context']) {
            console.warn("Could not restore context because the restore context extension is not defined");
        }
    }
};


/***
 Called when the WebGL context is restored
 ***/
Curtains.prototype._contextRestored = function() {
    var isDrawingEnabled = this._drawingEnabled;
    this._drawingEnabled = false;

    this._getExtensions();

    // set blend func
    this._setBlendFunc();

    // enable depth by default
    this._setDepth(true);

    // reset draw stacks
    this._drawStacks = {
        "opaque": {
            length: 0,
            programs: [],
            order: [],
        },
        "transparent": {
            length: 0,
            programs: [],
            order: [],
        },
        "renderPasses": [],
        "scenePasses": [],
    };

    this._imageCache = [];

    // we need to reset everything : planes programs, shaders, buffers and textures !
    for(var i = 0; i < this.renderTargets.length; i++) {
        this.renderTargets[i]._restoreContext();
    }

    for(var i = 0; i < this.planes.length; i++) {
        this.planes[i]._restoreContext();
    }

    // same goes for shader passes
    for(var i = 0; i < this.shaderPasses.length; i++) {
        this.shaderPasses[i]._restoreContext();
    }

    // callback
    if(this._onContextRestoredCallback) {
        this._onContextRestoredCallback();
    }

    // start drawing again
    // reset drawing flag to original value
    this._drawingEnabled = isDrawingEnabled;

    // force next frame render whatever our drawing flag value
    this.needRender();

    // requestAnimationFrame again if needed
    if(this._autoRender) {
        this._animate();
    }
};


/***
 Dispose everything
 ***/
Curtains.prototype.dispose = function() {
    this._isDestroying = true;

    // be sure to delete all planes
    while(this.planes.length > 0) {
        this.removePlane(this.planes[0]);
    }

    // we need to delete the shader passes also
    while(this.shaderPasses.length > 0) {
        this.removeShaderPass(this.shaderPasses[0]);
    }

    // finally we need to delete the render targets
    while(this.renderTargets.length > 0) {
        this.removeRenderTarget(this.renderTargets[0]);
    }

    // delete all programs from manager
    for(var i = 0; i < this._glState.programs.length; i++) {
        var program = this._glState.programs[i];
        this.gl.deleteProgram(program.program);
    }

    this._glState = {
        currentProgramID: null,
        programs: [],
        // last buffer sizes drawn (avoid redundant buffer bindings)
        currentBuffersID: 0,
        setDepth: null,
        // current frame buffer ID
        frameBufferID: null,
        // current scene pass ID
        scenePassIndex: null,
        // face culling
        cullFace: null,
        // textures flip Y
        flipY: null,
    };

    // wait for all planes to be deleted before stopping everything
    var self = this;
    var deleteInterval = setInterval(function() {
        if(self.planes.length === 0 && self.shaderPasses.length === 0 && self.renderTargets.length === 0) {
            // clear interval
            clearInterval(deleteInterval);

            // clear the buffer to clean scene
            self._clear();

            // cancel animation frame
            if(self._animationFrameID) {
                window.cancelAnimationFrame(self._animationFrameID);
            }

            // remove event listeners
            if(this._resizeHandler) {
                window.removeEventListener("resize", self._resizeHandler, false);
            }
            if(this._watchScroll) {
                window.removeEventListener("scroll", this._scrollManager.handler, {passive: true});
            }

            // ThemeREX fix: Incorrect event names in the original script
            //self.glCanvas.removeEventListener("webgllost", self._contextLostHandler, false);
            //self.glCanvas.removeEventListener("webglrestored", self._contextRestoredHandler, false);
            self.glCanvas.removeEventListener("webglcontextlost", self._contextLostHandler, false);
            self.glCanvas.removeEventListener("webglcontextrestored", self._contextRestoredHandler, false);

            // lose context
            if(self.gl && self._extensions['WEBGL_lose_context']) {
                self._extensions['WEBGL_lose_context'].loseContext();
            }

            // clear canvas state
            self.glCanvas.width = self.glCanvas.width;

            self.gl = null;

            // remove canvas from DOM
            self.container.removeChild(self.glCanvas);

            self.container = null;
            self.glCanvas = null;
        }
    }, 100);
};


/*** WEBGL PROGRAMS ***/


/***
 Compile our WebGL shaders based on our written shaders

 params:
 @shaderCode (string): shader code
 @shaderType (shaderType): WebGL shader type (vertex or fragment)

 returns:
 @shader (compiled shader): our compiled shader
 ***/
Curtains.prototype._createShader = function(shaderCode, shaderType) {
    var shader = this.gl.createShader(shaderType);

    this.gl.shaderSource(shader, shaderCode);
    this.gl.compileShader(shader);

    // check shader compilation status only when not in production mode
    if(!this.productionMode) {
        if(!this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS)) {
            // shader debugging log as seen in THREE.js WebGLProgram source code
            var shaderTypeString = shaderType === this.gl.VERTEX_SHADER ? "vertex shader" : "fragment shader";
            var shaderSource = this.gl.getShaderSource(shader);
            var shaderLines = shaderSource.split('\n');

            for(var i = 0; i < shaderLines.length; i ++) {
                shaderLines[i] = (i + 1) + ': ' + shaderLines[i];
            }
            shaderLines = shaderLines.join("\n");

            console.warn("Errors occurred while compiling the", shaderTypeString, ":\n", this.gl.getShaderInfoLog(shader));
            console.error(shaderLines);

            return null;
        }
    }

    return shader;
};

/***
 Compare two shaders strings to detect whether they are equal or not

 params:
 @firstShader (string): shader code
 @secondShader (string): shader code

 returns:
 @shader (bool): whether both shaders are equal or not
 ***/
Curtains.prototype._isEqualShader = function(firstShader, secondShader) {
    var isEqualShader = false;
    if(firstShader.localeCompare(secondShader) === 0) {
        isEqualShader = true;
    }

    return isEqualShader;
};


/***
 Checks whether the program has already been registered before creating it

 params:
 @vs (string): vertex shader code
 @fs (string): fragment shader code
 @plane (Plane or ShaderPass object): our plane to set up

 returns:
 @program (object): our program object, false if ceation failed
 ***/
Curtains.prototype._setupProgram = function(vs, fs, plane) {
    var existingProgram = {};
    // check if the program exists
    // a program already exists if both vertex and fragment shaders are the same
    for(var i = 0; i < this._glState.programs.length; i++) {
        if(this._isEqualShader(this._glState.programs[i].vsCode, vs) && this._isEqualShader(this._glState.programs[i].fsCode, fs)) {
            existingProgram = this._glState.programs[i];
            // no need to go further
            break;
        }
    }

    // we found an existing program
    if(existingProgram.program) {
        // if we've decided to share existing programs, just return the existing one
        if(plane.shareProgram) {
            return existingProgram;
        }
        else {
            // we need to create a new program but we don't have to re compile the shaders
            var shaders = this._useExistingShaders(existingProgram);
            return this._createProgram(shaders, plane._type);
        }
    }
    else {
        // compile the new shaders and create a new program
        var shaders = this._useNewShaders(vs, fs);
        if(!shaders) {
            return false;
        }
        else {
            return this._createProgram(shaders, plane._type);
        }
    }
};


/***
 Use already compiled shaders

 params:
 @program (object): an object containing amongst others our compiled shaders and their codes

 returns:
 @shadersObject (object): an object containing the shaders and their codes
 ***/
Curtains.prototype._useExistingShaders = function(program) {
    return {
        vs: {
            vertexShader: program.vertexShader,
            vsCode: program.vsCode,
        },
        fs: {
            fragmentShader: program.fragmentShader,
            fsCode: program.fsCode,
        }
    };
};


/***
 Compiles and creates new shaders

 params:
 @vs (string): vertex shader code
 @fs (string): fragment shader code

 returns:
 @shadersObject (object): an object containing the shaders and their codes
 ***/
Curtains.prototype._useNewShaders = function(vs, fs) {
    var isProgramValid = true;

    var vertexShader = this._createShader(vs, this.gl.VERTEX_SHADER);
    var fragmentShader = this._createShader(fs, this.gl.FRAGMENT_SHADER);

    if(!vertexShader || !fragmentShader) {
        if(!this.productionMode) console.warn("Unable to find or compile the vertex or fragment shader");

        isProgramValid = false;
    }

    if(isProgramValid) {
        return {
            vs: {
                vertexShader: vertexShader,
                vsCode: vs,
            },
            fs: {
                fragmentShader: fragmentShader,
                fsCode: fs,
            }
        };
    }
    else {
        return isProgramValid;
    }
};


/***
 Used internally to set up program based on the created shaders and attach them to the program
 Checks whether the program has already been registered before creating it

 params:
 @shadersObject (object): an object containing the shaders and their codes
 @type (string): type of the plane that will use that program. Could be either "Plane" or "ShaderPass"

 returns:
 @program (object): our program object, false if ceation failed
 ***/
Curtains.prototype._createProgram = function(shadersObject, type) {
    var gl = this.gl;
    var isProgramValid = true;

    // we need to create a new shader program
    var webglProgram = gl.createProgram();

    // if shaders are valid, go on
    if(isProgramValid) {
        gl.attachShader(webglProgram, shadersObject.vs.vertexShader);
        gl.attachShader(webglProgram, shadersObject.fs.fragmentShader);
        gl.linkProgram(webglProgram);

        // check the shader program creation status only when not in production mode
        if(!this.productionMode) {
            if(!gl.getProgramParameter(webglProgram, gl.LINK_STATUS)) {
                console.warn("Unable to initialize the shader program.");

                isProgramValid = false;
            }
        }

        // free the shaders handles
        gl.deleteShader(shadersObject.vs.vertexShader);
        gl.deleteShader(shadersObject.fs.fragmentShader);
    }

    // everything is ok we can go on
    if(isProgramValid) {
        // our program object
        var program = {
            id: this._glState.programs.length,
            vsCode: shadersObject.vs.vsCode,
            vertexShader: shadersObject.vs.vertexShader,
            fsCode: shadersObject.fs.fsCode,
            fragmentShader: shadersObject.fs.fragmentShader,
            program: webglProgram,
            type: type,
        };

        // create a new entry in our draw stack array if it's a regular plane
        if(type === "Plane") {
            this._drawStacks["opaque"]["programs"]["program-" + program.id] = [];
            this._drawStacks["transparent"]["programs"]["program-" + program.id] = [];
        }

        // add it to our program manager programs list
        this._glState.programs.push(program);

        return program;
    }
    else {
        return isProgramValid;
    }
};


/***
 Tell WebGL to use the specified program if it's not already in use

 params:
 @program (object): a program object
 ***/
Curtains.prototype._useProgram = function(program) {
    if(this._glState.currentProgramID === null || this._glState.currentProgramID !== program.id) {
        this.gl.useProgram(program.program);
        this._glState.currentProgramID = program.id;
    }
};



/***
 Create a Plane element and load its images

 params:
 @planesHtmlElement (html element): the html element that we will use for our plane
 @params (obj): plane params:
 - vertexShaderID (string, optionnal): the vertex shader ID. If not specified, will look for a data attribute data-vs-id on the plane HTML element. Will throw an error if nothing specified
 - fragmentShaderID (string, optionnal): the fragment shader ID. If not specified, will look for a data attribute data-fs-id on the plane HTML element. Will throw an error if nothing specified
 - widthSegments (optionnal): plane definition along the X axis (1 by default)
 - heightSegments (optionnal): plane definition along the Y axis (1 by default)
 - mimicCSS (boolean, optionnal): define if the plane should mimic it's html element position (true by default) DEPRECATED
 - alwaysDraw (boolean, optionnal): define if the plane should always be drawn or it should be drawn only if its within the canvas (false by default)
 - autoloadSources (boolean, optionnal): define if the sources should be load on init automatically (true by default)
 - crossOrigin (string, optionnal): define the crossOrigin process to load images if any
 - fov (int, optionnal): define the perspective field of view (default to 75)
 - uniforms (obj, otpionnal): the uniforms that will be passed to the shaders (if no uniforms specified there wont be any interaction with the plane)

 returns :
 @plane: our newly created plane object
 ***/
Curtains.prototype.addPlane = function(planeHtmlElement, params) {
    // if the WebGL context couldn't be created, return null
    if(!this.gl) {
        if(!this.productionMode) console.warn("Unable to create a plane. The WebGl context couldn't be created");

        if(this._onErrorCallback) {
            this._onErrorCallback()
        }

        return null;
    }
    else {
        if(!planeHtmlElement || planeHtmlElement.length === 0) {
            if(!this.productionMode) console.warn("The html element you specified does not currently exists in the DOM");

            if(this._onErrorCallback) {
                this._onErrorCallback()
            }

            return false;
        }

        // init the plane
        var plane = new Curtains.Plane(this, planeHtmlElement, params);

        if(!plane._usedProgram) {
            plane = false;
        }
        else {
            this.planes.push(plane);
        }

        return plane;
    }
};


/***
 Completly remove a Plane element (delete from draw stack, delete buffers and textures, empties object, remove)

 params:
 @plane (plane element): the plane element to remove
 ***/
Curtains.prototype.removePlane = function(plane) {
    // first we want to stop drawing it
    plane._canDraw = false;

    var stackType = plane._transparent ? "transparent" : "opaque";

    // now free the webgl part
    plane && plane._dispose();

    // remove from our planes array
    var planeIndex;
    for(var i = 0; i < this.planes.length; i++) {
        if(plane.uuid === this.planes[i].uuid) {
            planeIndex = i;
        }
    }

    // erase the plane
    plane = null;
    this.planes[planeIndex] = null;
    this.planes.splice(planeIndex, 1);

    // now rebuild the drawStacks
    // start by clearing all the program drawstacks
    for(var i = 0; i < this._glState.programs.length; i++) {
        this._drawStacks["opaque"]["programs"]["program-" + this._glState.programs[i].id] = [];
        this._drawStacks["transparent"]["programs"]["program-" + this._glState.programs[i].id] = [];
    }
    this._drawStacks["opaque"].length = 0;
    this._drawStacks["transparent"].length = 0;

    // rebuild them with the new plane indexes
    for(var i = 0; i < this.planes.length; i++) {
        var plane = this.planes[i];
        plane.index = i;

        var planeStackType = plane._transparent ? "transparent" : "opaque";
        if(planeStackType === "transparent") {
            this._drawStacks[planeStackType]["programs"]["program-" + plane._usedProgram.id].unshift(plane.index);
        }
        else {
            this._drawStacks[planeStackType]["programs"]["program-" + plane._usedProgram.id].push(plane.index);
        }
        this._drawStacks[planeStackType].length++;
    }

    // look for an empty program drawstack array and remove it from the program order stack
    for(var i = 0; i < this._drawStacks[stackType]["order"].length; i++) {
        var programID = this._drawStacks[stackType]["order"][i];
        if(this._drawStacks[stackType]["programs"]["program-" + programID].length === 0) {
            this._drawStacks[stackType]["order"].splice(i, 1);
        }
    }

    // clear the buffer to clean scene
    if(this.gl) this._clear();

    // reset buffers to force binding them again
    this._glState.currentBuffersID = 0;
};


/***
 This function will stack planes by opaqueness/transparency, program ID and then indexes
 Stack order drawing process:
 - draw opaque then transparent planes
 - for each of those two stacks, iterate through the existing programs (following the "order" array) and draw their respective planes
 This is done to improve speed, notably when using shared programs, and reduce GL calls
 ***/
Curtains.prototype._stackPlane = function(plane) {
    var stackType = plane._transparent ? "transparent" : "opaque";
    var drawStack = this._drawStacks[stackType];
    if(stackType === "transparent") {
        drawStack["programs"]["program-" + plane._usedProgram.id].unshift(plane.index);
        // push to the order array only if it's not already in there
        if(!drawStack["order"].includes(plane._usedProgram.id)) {
            drawStack["order"].unshift(plane._usedProgram.id);
        }
    }
    else {
        drawStack["programs"]["program-" + plane._usedProgram.id].push(plane.index);
        // push to the order array only if it's not already in there
        if(!drawStack["order"].includes(plane._usedProgram.id)) {
            drawStack["order"].push(plane._usedProgram.id);
        }
    }
    drawStack.length++;
};


/*** POST PROCESSING ***/


/*** RENDER TARGETS ***/


/***
 Create a new RenderTarget element

 params:
 @params (obj): plane params:
 - depth (bool, optionnal): if the render target should use a depth buffer in order to preserve depth (default to false)

 returns :
 @renderTarget: our newly created RenderTarget object
 ***/
Curtains.prototype.addRenderTarget = function(params) {
    // if the WebGL context couldn't be created, return null
    if(!this.gl) {
        if(!this.productionMode) console.warn("Unable to create a render target. The WebGl context couldn't be created");

        if(this._onErrorCallback) {
            this._onErrorCallback()
        }

        return null;
    }
    else {
        // init the render target
        var renderTarget = new Curtains.RenderTarget(this, params);

        return renderTarget;
    }
};


/***
 Completely remove a RenderTarget element

 params:
 @renderTarget (RenderTarget element): the render target element to remove
 ***/
Curtains.prototype.removeRenderTarget = function(renderTarget) {
    // check if it is attached to a shader pass
    if(renderTarget._shaderPass) {
        if(!this.productionMode) {
            console.warn("You're trying to remove a render target attached to a shader pass. You should remove that shader pass instead:", renderTarget._shaderPass);
        }

        return;
    }

    // loop through all planes that might use that render target and reset it
    for(var i = 0; i < this.planes.length; i++) {
        if(this.planes[i].target && this.planes[i].target.uuid === renderTarget.uuid) {
            this.planes[i].target = null;
        }
    }

    // remove from our render targets array
    var fboIndex;
    for(var i = 0; i < this.renderTargets.length; i++) {
        if(renderTarget.uuid === this.renderTargets[i].uuid) {
            fboIndex = i;
        }
    }

    // finally erase the plane
    this.renderTargets[fboIndex] = null;
    this.renderTargets.splice(fboIndex, 1);

    // now free the webgl part
    renderTarget && renderTarget._dispose();
    renderTarget = null;

    // clear the buffer to clean scene
    if(this.gl) this._clear();

    // reset buffers to force binding them again
    this._glState.currentBuffersID = 0;
};


/*** SHADER PASSES ***/


/***
 Create a new ShaderPass element

 params:
 @params (obj): plane params:
 - vertexShaderID (string, optionnal): the vertex shader ID. If not specified, will look for a data attribute data-vs-id on the plane HTML element. Will throw an error if nothing specified
 - fragmentShaderID (string, optionnal): the fragment shader ID. If not specified, will look for a data attribute data-fs-id on the plane HTML element. Will throw an error if nothing specified
 - crossOrigin (string, optionnal): define the crossOrigin process to load images if any
 - uniforms (obj, otpionnal): the uniforms that will be passed to the shaders (if no uniforms specified there wont be any interaction with the plane)

 returns :
 @shaderPass: our newly created ShaderPass object
 ***/
Curtains.prototype.addShaderPass = function(params) {
    // if the WebGL context couldn't be created, return null
    if(!this.gl) {
        if(!this.productionMode) console.warn("Unable to create a shader pass. The WebGl context couldn't be created");

        if(this._onErrorCallback) {
            this._onErrorCallback()
        }

        return null;
    }
    else {
        // init the shader pass
        var shaderPass = new Curtains.ShaderPass(this, params);

        if(!shaderPass._usedProgram) {
            shaderPass = false;
        }
        else {
            if(params.renderTarget) {
                this._drawStacks.renderPasses.push(shaderPass.index);
            }
            else {
                this._drawStacks.scenePasses.push(shaderPass.index);
            }

            this.shaderPasses.push(shaderPass);
        }

        return shaderPass;
    }
};


/***
 Completly remove a ShaderPass element
 does almost the same thing as the removePlane method but handles only shaderPasses array, not drawStack

 params:
 @plane (plane element): the plane element to remove
 ***/
Curtains.prototype.removeShaderPass = function(plane) {
    // first we want to stop drawing it
    plane._canDraw = false;

    if(plane.target) {
        plane.target._shaderPass = null;
        this.removeRenderTarget(plane.target);
        plane.target = null;
    }

    // remove from shaderPasses our array
    var planeIndex;
    for(var i = 0; i < this.shaderPasses.length; i++) {
        if(plane.uuid === this.shaderPasses[i].uuid) {
            planeIndex = i;
        }
    }

    // finally erase the plane
    this.shaderPasses.splice(planeIndex, 1);

    // now rebuild the drawStacks
    // start by clearing all drawstacks
    this._drawStacks.scenePasses = [];
    this._drawStacks.renderPasses = [];

    // restack our planes with new indexes
    for(var i = 0; i < this.shaderPasses.length; i++) {
        this.shaderPasses[i].index = i;
        if(this.shaderPasses[i]._isScenePass) {
            this._drawStacks.scenePasses.push(this.shaderPasses[i].index);
        }
        else {
            this._drawStacks.renderPasses.push(this.shaderPasses[i].index);
        }
    }

    // reset the scenePassIndex if needed
    if(this._drawStacks.scenePasses.length === 0) {
        this._glState.scenePassIndex = null;
    }

    // now free the webgl part
    plane && plane._dispose();
    plane = null;

    // clear the buffer to clean scene
    if(this.gl) this._clear();

    // reset buffers to force binding them again
    this._glState.currentBuffersID = 0;
};


/*** CLEAR SCENE ***/

Curtains.prototype._clear = function() {
    this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
};


/*** FBO ***/

/***
 Called to bind or unbind a FBO

 params:
 @frameBuffer (frameBuffer): if frameBuffer is not null, bind it, unbind it otherwise
 @cancelClear (bool / undefined): if we should cancel clearing the frame buffer (typically on init & resize)
 ***/
Curtains.prototype._bindFrameBuffer = function(frameBuffer, cancelClear) {
    var bufferId = null;
    if(frameBuffer) {
        bufferId = frameBuffer.index;

        // new frame buffer, bind it
        if(bufferId !== this._glState.frameBufferID) {
            this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, frameBuffer._frameBuffer);
            this.gl.viewport(0, 0, frameBuffer._size.width, frameBuffer._size.height);

            // if we should clear the buffer content
            if(frameBuffer._shouldClear && !cancelClear) {
                this._clear();
            }
        }
    }
    else if(this._glState.frameBufferID !== null) {
        this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null);
        this.gl.viewport(0, 0, this.gl.drawingBufferWidth, this.gl.drawingBufferHeight);
    }

    this._glState.frameBufferID = bufferId;
};


/*** DEPTH ***/

/***
 Called to set whether the renderer will handle depth test or not
 Depth test is enabled by default

 params:
 @setDepth (boolean): if we should enable or disable the depth test
 ***/
Curtains.prototype._setDepth = function(setDepth) {
    if(setDepth && !this._glState.depthTest) {
        this._glState.depthTest = setDepth;
        // enable depth test
        this.gl.enable(this.gl.DEPTH_TEST);
    }
    else if(!setDepth && this._glState.depthTest) {
        this._glState.depthTest = setDepth;
        // disable depth test
        this.gl.disable(this.gl.DEPTH_TEST);
    }
};


/*** BLEND FUNC ***/

/***
 Called to set the blending function (transparency)
 ***/
Curtains.prototype._setBlendFunc = function() {
    // allows transparency
    // based on how three.js solves this
    var gl = this.gl;
    gl.enable(gl.BLEND);
    if(this.premultipliedAlpha) {
        gl.blendFuncSeparate(gl.ONE, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
    }
    else {
        gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
    }
};


/*** FACE CULLING ***/

/***
 Called to set whether we should cull a plane face or not

 params:
 @cullFace (boolean): what face we should cull
 ***/
Curtains.prototype._setFaceCulling = function(cullFace) {
    var gl = this.gl;
    if(this._glState.cullFace !== cullFace) {
        this._glState.cullFace = cullFace;

        if(cullFace === "none") {
            gl.disable(gl.CULL_FACE);
        }
        else {
            // default to back face culling
            var faceCulling = cullFace === "front" ? gl.FRONT : gl.BACK;

            gl.enable(gl.CULL_FACE);
            gl.cullFace(faceCulling);
        }
    }
};


/*** UTILS ***/

/***
 Returns a universally unique identifier
 ***/
Curtains.prototype._generateUUID = function() {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
        return v.toString(16).toUpperCase();
    });
};


/*** MATRICES MATHS ***/

/***
 Simple matrix multiplication helper

 params:
 @a (array): first matrix
 @b (array): second matrix

 returns:
 @out: matrix after multiplication
 ***/
Curtains.prototype._multiplyMatrix = function(a, b) {
    var out = new Float32Array(16);

    out[0] = b[0]*a[0] + b[1]*a[4] + b[2]*a[8] + b[3]*a[12];
    out[1] = b[0]*a[1] + b[1]*a[5] + b[2]*a[9] + b[3]*a[13];
    out[2] = b[0]*a[2] + b[1]*a[6] + b[2]*a[10] + b[3]*a[14];
    out[3] = b[0]*a[3] + b[1]*a[7] + b[2]*a[11] + b[3]*a[15];

    out[4] = b[4]*a[0] + b[5]*a[4] + b[6]*a[8] + b[7]*a[12];
    out[5] = b[4]*a[1] + b[5]*a[5] + b[6]*a[9] + b[7]*a[13];
    out[6] = b[4]*a[2] + b[5]*a[6] + b[6]*a[10] + b[7]*a[14];
    out[7] = b[4]*a[3] + b[5]*a[7] + b[6]*a[11] + b[7]*a[15];

    out[8] = b[8]*a[0] + b[9]*a[4] + b[10]*a[8] + b[11]*a[12];
    out[9] = b[8]*a[1] + b[9]*a[5] + b[10]*a[9] + b[11]*a[13];
    out[10] = b[8]*a[2] + b[9]*a[6] + b[10]*a[10] + b[11]*a[14];
    out[11] = b[8]*a[3] + b[9]*a[7] + b[10]*a[11] + b[11]*a[15];

    out[12] = b[12]*a[0] + b[13]*a[4] + b[14]*a[8] + b[15]*a[12];
    out[13] = b[12]*a[1] + b[13]*a[5] + b[14]*a[9] + b[15]*a[13];
    out[14] = b[12]*a[2] + b[13]*a[6] + b[14]*a[10] + b[15]*a[14];
    out[15] = b[12]*a[3] + b[13]*a[7] + b[14]*a[11] + b[15]*a[15];

    return out;
};


/***
 Simple matrix scaling helper

 params :
 @matrix (array): initial matrix
 @scaleX (float): scale along X axis
 @scaleY (float): scale along Y axis
 @scaleZ (float): scale along Z axis

 returns :
 @scaledMatrix: matrix after scaling
 ***/
Curtains.prototype._scaleMatrix = function(matrix, scaleX, scaleY, scaleZ) {
    var scaledMatrix = new Float32Array(16);

    scaledMatrix[0] = scaleX * matrix[0 * 4 + 0];
    scaledMatrix[1] = scaleX * matrix[0 * 4 + 1];
    scaledMatrix[2] = scaleX * matrix[0 * 4 + 2];
    scaledMatrix[3] = scaleX * matrix[0 * 4 + 3];
    scaledMatrix[4] = scaleY * matrix[1 * 4 + 0];
    scaledMatrix[5] = scaleY * matrix[1 * 4 + 1];
    scaledMatrix[6] = scaleY * matrix[1 * 4 + 2];
    scaledMatrix[7] = scaleY * matrix[1 * 4 + 3];
    scaledMatrix[8] = scaleZ * matrix[2 * 4 + 0];
    scaledMatrix[9] = scaleZ * matrix[2 * 4 + 1];
    scaledMatrix[10] = scaleZ * matrix[2 * 4 + 2];
    scaledMatrix[11] = scaleZ * matrix[2 * 4 + 3];

    if(matrix !== scaledMatrix) {
        scaledMatrix[12] = matrix[12];
        scaledMatrix[13] = matrix[13];
        scaledMatrix[14] = matrix[14];
        scaledMatrix[15] = matrix[15];
    }

    return scaledMatrix;
};



/***
 Creates a matrix from a quaternion rotation, vector translation and vector scale, rotating and scaling around the given origin
 Equivalent for applying translation, rotation and scale matrices but much faster
 Source code from: http://glmatrix.net/docs/mat4.js.html

 params :
 @translation (array): translation vector: [X, Y, Z]
 @quaternion (array): rotation quaternion
 @scale (array): scale vector: [X, Y, Z]
 @origin (array): origin vector around which to scale and rotate: [X, Y, Z]

 returns :
 @matrix: matrix after transformations
 ***/
Curtains.prototype._composeMatrixFromOrigin = function(translation, quaternion, scale, origin) {
    var matrix = new Float32Array(16);

    // Quaternion math
    var x = quaternion[0], y = quaternion[1], z = quaternion[2], w = quaternion[3];

    var x2 = x + x;
    var y2 = y + y;
    var z2 = z + z;

    var xx = x * x2;
    var xy = x * y2;
    var xz = x * z2;
    var yy = y * y2;
    var yz = y * z2;
    var zz = z * z2;

    var wx = w * x2;
    var wy = w * y2;
    var wz = w * z2;

    var sx = scale.x;
    var sy = scale.y;
    var sz = 1; // scale along Z is always equal to 1

    var ox = origin.x;
    var oy = origin.y;
    var oz = origin.z;

    var out0 = (1 - (yy + zz)) * sx;
    var out1 = (xy + wz) * sx;
    var out2 = (xz - wy) * sx;
    var out4 = (xy - wz) * sy;
    var out5 = (1 - (xx + zz)) * sy;
    var out6 = (yz + wx) * sy;
    var out8 = (xz + wy) * sz;
    var out9 = (yz - wx) * sz;
    var out10 = (1 - (xx + yy)) * sz;

    matrix[0] = out0;
    matrix[1] = out1;
    matrix[2] = out2;
    matrix[3] = 0;
    matrix[4] = out4;
    matrix[5] = out5;
    matrix[6] = out6;
    matrix[7] = 0;
    matrix[8] = out8;
    matrix[9] = out9;
    matrix[10] = out10;
    matrix[11] = 0;
    matrix[12] = translation.x + ox - (out0 * ox + out4 * oy + out8 * oz);
    matrix[13] = translation.y + oy - (out1 * ox + out5 * oy + out9 * oz);
    matrix[14] = translation.z + oz - (out2 * ox + out6 * oy + out10 * oz);
    matrix[15] = 1;

    return matrix;
};


/***
 Apply a matrix 4 to a point (vec3)
 Useful to convert a point position from plane local world to webgl space using projection view matrix for example
 Source code from: http://glmatrix.net/docs/vec3.js.html

 params :
 @point (array): point to which we apply the matrix
 @matrix (array): 4x4 matrix used

 returns :
 @point: point after matrix application
 ***/
Curtains.prototype._applyMatrixToPoint = function(point, matrix) {
    var transformedPoint = [];
    var x = point[0], y = point[1], z = point[2];

    transformedPoint[0] = matrix[0] * x + matrix[4] * y + matrix[8] * z + matrix[12];
    transformedPoint[1] = matrix[1] * x + matrix[5] * y + matrix[9] * z + matrix[13];
    transformedPoint[2] = matrix[2] * x + matrix[6] * y + matrix[10] * z + matrix[14];

    var w = matrix[3] * x + matrix[7] * y + matrix[11] * z + matrix[15];
    w = w || 1;

    transformedPoint[0] /= w;
    transformedPoint[1] /= w;
    transformedPoint[2] /= w;

    return transformedPoint;
};


/*** DRAW EVERYTHING ***/

/***
 This is called when everything is set up and ready to draw
 It will launch our requestAnimationFrame loop
 ***/
Curtains.prototype._readyToDraw = function() {
    // we are ready to go
    this.container.appendChild(this.glCanvas);

    // set blend func
    this._setBlendFunc();

    // enable depth by default
    this._setDepth(true);

    console.log("curtains.js - v6.1");

    this._animationFrameID = null;
    if(this._autoRender) {
        this._animate();
    }
};


/***
 This just handles our drawing animation frame
 ***/
Curtains.prototype._animate = function() {
    this.render();
    this._animationFrameID = window.requestAnimationFrame(this._animate.bind(this));
};


/***
 Loop through one of our stack (opaque or transparent objects) and draw its planes
 ***/
Curtains.prototype._drawPlaneStack = function(stackType) {
    for(var i = 0; i < this._drawStacks[stackType]["order"].length; i++) {
        var programID = this._drawStacks[stackType]["order"][i];
        var program = this._drawStacks[stackType]["programs"]["program-" + programID];
        for(var j = 0; j < program.length; j++) {
            var plane = this.planes[program[j]];
            // be sure the plane exists
            if(plane) {
                // draw the plane
                plane._drawPlane();
            }
        }
    }
};


/***
 This is our draw call, ie what has to be called at each frame our our requestAnimationFrame loop
 draw our planes and shader passes
 ***/
Curtains.prototype.render = function() {
    // If _forceRender is true, force rendering this frame even if drawing is not enabled.
    // If not, only render if enabled.
    if(!this._drawingEnabled && !this._forceRender) return;

    // reset _forceRender
    if(this._forceRender) {
        this._forceRender = false;
    }

    // Curtains onRender callback
    if(this._onRenderCallback) {
        this._onRenderCallback();
    }

    // clear scene first
    this._clear();

    // enable first frame buffer for shader passes
    if(this._drawStacks.scenePasses.length > 0 && this._drawStacks.renderPasses.length === 0) {
        this._glState.scenePassIndex = 0;
        this._bindFrameBuffer(this.shaderPasses[this._drawStacks.scenePasses[0]].target);
    }

    // loop on our stacked planes
    this._drawPlaneStack("opaque");

    // draw transparent planes if needed
    if(this._drawStacks["transparent"].length) {
        // clear our depth buffer to display transparent objects
        this.gl.clearDepth(1.0);
        this.gl.clear(this.gl.DEPTH_BUFFER_BIT);

        this._drawPlaneStack("transparent");
    }

    // now render the shader passes
    // if we got one or multiple scene passes after the render passes, bind the first scene pass here
    if(this._drawStacks.scenePasses.length > 0 && this._drawStacks.renderPasses.length > 0) {
        this._glState.scenePassIndex = 0;
        this._bindFrameBuffer(this.shaderPasses[this._drawStacks.scenePasses[0]].target);
    }

    // first the render passes
    for(var i = 0; i < this._drawStacks.renderPasses.length; i++) {
        var renderPass = this.shaderPasses[this._drawStacks.renderPasses[i]];
        renderPass._drawPlane();
    }

    // then the scene passes
    if(this._drawStacks.scenePasses.length > 0) {
        for(var i = 0; i < this._drawStacks.scenePasses.length; i++) {
            var scenePass = this.shaderPasses[this._drawStacks.scenePasses[i]];
            scenePass._drawPlane();
        }
    }
};


/*** EVENTS ***/


/***
 This is called each time our container has been resized

 params :
 @callback (function) : a function to execute

 returns :
 @this: our Curtains element to handle chaining
 ***/
Curtains.prototype.onAfterResize = function(callback) {
    if(callback) {
        this._onAfterResizeCallback = callback;
    }

    return this;
};

/***
 This is called when an error has been detected during init

 params:
 @callback (function): a function to execute

 returns:
 @this: our Curtains element to handle chaining
 ***/
Curtains.prototype.onError = function(callback) {
    if(callback) {
        this._onErrorCallback = callback;
    }

    return this;
};


/***
 This is called once our context has been lost

 params:
 @callback (function): a function to execute

 returns:
 @this: our Curtains element to handle chaining
 ***/
Curtains.prototype.onContextLost = function(callback) {
    if(callback) {
        this._onContextLostCallback = callback;
    }

    return this;
};


/***
 This is called once our context has been restored

 params:
 @callback (function): a function to execute

 returns:
 @this: our Curtains element to handle chaining
 ***/
Curtains.prototype.onContextRestored = function(callback) {
    if(callback) {
        this._onContextRestoredCallback = callback;
    }

    return this;
};


/***
 This is called once at each request animation frame call

 params:
 @callback (function): a function to execute

 returns:
 @this: our Curtains element to handle chaining
 ***/
Curtains.prototype.onRender = function(callback) {
    if(callback) {
        this._onRenderCallback = callback;
    }

    return this;
};


/***
 This is called each time window is scrolled and if our scrollManager is active

 params :
 @callback (function) : a function to execute

 returns :
 @this: our Curtains element to handle chaining
 ***/
Curtains.prototype.onScroll = function(callback) {
    if(callback) {
        this._onScrollCallback = callback;
    }

    return this;
};




/*** BASEPLANE CLASS ***/

/***
 Here we create our BasePlane object (note that we are using the Curtains namespace to avoid polluting the global scope)
 We will create a plane object containing the program, shaders, as well as other useful data
 Once our shaders are linked to a program, we create their matrices and set up their default attributes

 params:
 @curtainWrapper: our curtain object that wraps all the planes
 @plane (html element): html div that contains 0 or more media elements.
 @params (obj): see addPlanes method of the wrapper

 returns:
 @this: our BasePlane element
 ***/
Curtains.BasePlane = function(curtainWrapper, plane, params) {
    this._type = this._type || "BasicPlane";

    this._curtains = curtainWrapper;
    this.htmlElement = plane;

    this.uuid = this._curtains._generateUUID();

    this._initBasePlane(params);
};


/***
 Init our plane object and its properties

 params:
 @params (obj): see addPlanes method of the wrapper

 returns:
 @this: our BasePlane element or false if it could not have been created
 ***/
Curtains.BasePlane.prototype._initBasePlane = function(params) {
    // if params are not defined
    if(!params) params = {};

    this._canDraw = false;

    // whether to share programs or not (could enhance performance if a lot of planes use the same shaders)
    this.shareProgram = params.shareProgram || false;

    // define if we should update the plane's matrices when called in the draw loop
    this._updatePerspectiveMatrix = false;
    this._updateMVMatrix = false;

    this._definition = {
        width: parseInt(params.widthSegments) || 1,
        height: parseInt(params.heightSegments) || 1,
    };

    // unique plane buffers dimensions based on width and height
    // used to avoid unnecessary buffer bindings during draw loop
    this._definition.buffersID = this._definition.width * this._definition.height + this._definition.width;

    // depth test
    this._depthTest = params.depthTest;
    if(this._depthTest === null || this._depthTest === undefined) {
        this._depthTest = true;
    }

    // face culling
    this.cullFace = params.cullFace;
    if(
        this.cullFace !== "back"
        && this.cullFace !== "front"
        && this.cullFace !== "none"
    ) {
        this.cullFace = "back";
    }

    // we will store our active textures in an array
    this._activeTextures = [];

    // set up init uniforms
    if(!params.uniforms) {
        params.uniforms = {};
    }

    this.uniforms = {};

    // create our uniforms objects
    if(params.uniforms) {
        for(var key in params.uniforms) {
            var uniform = params.uniforms[key];

            // fill our uniform object
            this.uniforms[key] = {
                name: uniform.name,
                type: uniform.type,
                value: uniform.value,
                lastValue: uniform.value,
            };
        }
    }

    // first we prepare the shaders to be set up
    var shaders = this._setupShaders(params);

    // then we set up the program as compiling can be quite slow
    this._usedProgram = this._curtains._setupProgram(shaders.vertexShaderCode, shaders.fragmentShaderCode, this);

    // our object that will handle all medias loading process
    this._loadingManager = {
        sourcesLoaded: 0,
        initSourcesToLoad: 0, // will change if there's any texture to load on init
        complete: false,
    };

    this.images = [];
    this.videos = [];
    this.canvases = [];
    this.textures = [];

    this.crossOrigin = params.crossOrigin || "anonymous";

    // allow the user to add custom data to the plane
    this.userData = {};

    // if program and shaders are valid, go on
    if(this._usedProgram) {
        // should draw is set to true by default, we'll check it later
        this._shouldDraw = true;
        // let the user decide whether the plane should be drawn
        this.visible = true;

        // set plane attributes
        this._setAttributes();

        // set plane sizes
        this._setDocumentSizes();

        // set our uniforms
        this._setUniforms();

        // set plane definitions, vertices, uvs and stuff
        this._initializeBuffers();

        this._canDraw = true;

        return this;
    }
    else {
        return false;
    }
};


/***
 Get a default vertex shader that does nothing but show the plane
 ***/
Curtains.BasePlane.prototype._getDefaultVS = function() {
    if(!this._curtains.productionMode) console.warn("No vertex shader provided, will use a default one");

    return "precision mediump float;\nattribute vec3 aVertexPosition;attribute vec2 aTextureCoord;uniform mat4 uMVMatrix;uniform mat4 uPMatrix;varying vec3 vVertexPosition;varying vec2 vTextureCoord;void main() {vTextureCoord = aTextureCoord;vVertexPosition = aVertexPosition;gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);}";
};


/***
 Get a default fragment shader that does nothing but draw black pixels
 ***/
Curtains.BasePlane.prototype._getDefaultFS = function() {
    return "precision mediump float;\nvarying vec3 vVertexPosition;varying vec2 vTextureCoord;void main( void ) {gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);}";
};



/*** SHADERS CREATIONS ***/


/***
 Used internally to set up shaders

 params:
 @params (obj): see addPlanes method of the wrapper
 ***/
Curtains.BasePlane.prototype._setupShaders = function(params) {
    // handling shaders
    var vsId = params.vertexShaderID || this.htmlElement.getAttribute("data-vs-id");
    var fsId = params.fragmentShaderID || this.htmlElement.getAttribute("data-fs-id");

    var vsIdHTML, fsIdHTML;

    if(!params.vertexShader) {
        if(!vsId || !document.getElementById(vsId)) {
            vsIdHTML = this._getDefaultVS();
        }
        else {
            vsIdHTML = document.getElementById(vsId).innerHTML;
        }
    }

    if(!params.fragmentShader) {
        if(!fsId || !document.getElementById(fsId)) {
            if(!this._curtains.productionMode) console.warn("No fragment shader provided, will use a default one");

            fsIdHTML = this._getDefaultFS();
        }
        else {
            fsIdHTML = document.getElementById(fsId).innerHTML;
        }
    }

    return {
        vertexShaderCode: params.vertexShader || vsIdHTML,
        fragmentShaderCode: params.fragmentShader || fsIdHTML,
    }
};

/*** PLANE ATTRIBUTES & UNIFORMS ***/

/*** UNIFORMS ***/

/***
 This is a little helper to set uniforms based on their types

 params :
 @uniformType (string): the uniform type
 @uniformLocation (WebGLUniformLocation obj): location of the current program uniform
 @uniformValue (float/integer or array of float/integer): value to set
 ***/
Curtains.BasePlane.prototype._handleUniformSetting = function(uniformType, uniformLocation, uniformValue) {
    var gl = this._curtains.gl;

    switch(uniformType) {
        case "1i":
            gl.uniform1i(uniformLocation, uniformValue);
            break;
        case "1iv":
            gl.uniform1iv(uniformLocation, uniformValue);
            break;
        case "1f":
            gl.uniform1f(uniformLocation, uniformValue);
            break;
        case "1fv":
            gl.uniform1fv(uniformLocation, uniformValue);
            break;

        case "2i":
            gl.uniform2i(uniformLocation, uniformValue[0], uniformValue[1]);
            break;
        case "2iv":
            gl.uniform2iv(uniformLocation, uniformValue);
            break;
        case "2f":
            gl.uniform2f(uniformLocation, uniformValue[0], uniformValue[1]);
            break;
        case "2fv":
            gl.uniform2fv(uniformLocation, uniformValue);
            break;

        case "3i":
            gl.uniform3i(uniformLocation, uniformValue[0], uniformValue[1], uniformValue[2]);
            break;
        case "3iv":
            gl.uniform3iv(uniformLocation, uniformValue);
            break;
        case "3f":
            gl.uniform3f(uniformLocation, uniformValue[0], uniformValue[1], uniformValue[2]);
            break;
        case "3fv":
            gl.uniform3fv(uniformLocation, uniformValue);
            break;

        case "4i":
            gl.uniform4i(uniformLocation, uniformValue[0], uniformValue[1], uniformValue[2], uniformValue[3]);
            break;
        case "4iv":
            gl.uniform4iv(uniformLocation, uniformValue);
            break;
        case "4f":
            gl.uniform4f(uniformLocation, uniformValue[0], uniformValue[1], uniformValue[2], uniformValue[3]);
            break;
        case "4fv":
            gl.uniform4fv(uniformLocation, uniformValue);
            break;

        case "mat2":
            gl.uniformMatrix2fv(uniformLocation, false, uniformValue);
            break;
        case "mat3":
            gl.uniformMatrix3fv(uniformLocation, false, uniformValue);
            break;
        case "mat4":
            gl.uniformMatrix4fv(uniformLocation, false, uniformValue);
            break;

        default:
            if(!this._curtains.productionMode) console.warn("This uniform type is not handled : ", uniformType);
    }
};


/***
 This sets our shaders uniforms
 ***/
Curtains.BasePlane.prototype._setUniforms = function() {
    var curtains = this._curtains;
    var gl = curtains.gl;

    // ensure we are using the right program
    curtains._useProgram(this._usedProgram);

    // check for program active textures
    var numUniforms = gl.getProgramParameter(this._usedProgram.program, gl.ACTIVE_UNIFORMS);
    for(var i = 0; i < numUniforms; i++) {
        var activeUniform = gl.getActiveUniform(this._usedProgram.program, i);
        // if it's a texture add it to our activeTextures array
        if(activeUniform.type === gl.SAMPLER_2D) {
            this._activeTextures.push(activeUniform);
        }
    }

    // set our uniforms if we got some
    if(this.uniforms) {
        for(var key in this.uniforms) {
            var uniform = this.uniforms[key];

            // set our uniform location
            uniform.location = gl.getUniformLocation(this._usedProgram.program, uniform.name);

            if(!uniform.type) {
                if(Array.isArray(uniform.value)) {
                    if(uniform.value.length === 4) {
                        uniform.type = "4f";

                        if(!curtains.productionMode) console.warn("No uniform type declared for " + uniform.name + ", applied a 4f (array of 4 floats) uniform type");
                    }
                    else if(uniform.value.length === 3) {
                        uniform.type = "3f";

                        if(!curtains.productionMode) console.warn("No uniform type declared for " + uniform.name + ", applied a 3f (array of 3 floats) uniform type");
                    }
                    else if(uniform.value.length === 2) {
                        uniform.type = "2f";

                        if(!curtains.productionMode) console.warn("No uniform type declared for " + uniform.name + ", applied a 2f (array of 2 floats) uniform type");
                    }
                }
                else if(uniform.value.constructor === Float32Array) {
                    if(uniform.value.length === 16) {
                        uniform.type = "mat4";

                        if(!curtains.productionMode) console.warn("No uniform type declared for " + uniform.name + ", applied a mat4 (4x4 matrix array) uniform type");
                    }
                    else if(uniform.value.length === 9) {
                        uniform.type = "mat3";

                        if(!curtains.productionMode) console.warn("No uniform type declared for " + uniform.name + ", applied a mat3 (3x3 matrix array) uniform type");
                    }
                    else  if(uniform.value.length === 4) {
                        uniform.type = "mat2";

                        if(!curtains.productionMode) console.warn("No uniform type declared for " + uniform.name + ", applied a mat2 (2x2 matrix array) uniform type");
                    }
                }
                else {
                    uniform.type = "1f";

                    if(!curtains.productionMode) console.warn("No uniform type declared for " + uniform.name + ", applied a 1f (float) uniform type");
                }
            }

            // set the uniforms
            this._handleUniformSetting(uniform.type, uniform.location, uniform.value);
        }
    }
};


/***
 This updates all uniforms of a plane that were set by the user
 It is called at each draw call
 ***/
Curtains.BasePlane.prototype._updateUniforms = function() {
    if(this.uniforms) {
        for(var key in this.uniforms) {
            var uniform = this.uniforms[key];

            if(!this.shareProgram) {
                if(!uniform.value.length && uniform.value !== uniform.lastValue) {
                    // update our uniforms
                    this._handleUniformSetting(uniform.type, uniform.location, uniform.value);
                }
                else if(JSON.stringify(uniform.value) !== JSON.stringify(uniform.lastValue)) { // compare two arrays
                    // update our uniforms
                    this._handleUniformSetting(uniform.type, uniform.location, uniform.value);
                }

                uniform.lastValue = uniform.value;
            }
            else {
                // update our uniforms
                this._handleUniformSetting(uniform.type, uniform.location, uniform.value);
            }
        }
    }
};

/*** ATTRIBUTES ***/

/***
 This set our plane vertex shader attributes

 BE CAREFUL : if an attribute is set here, it MUST be DECLARED and USED inside our plane vertex shader
 ***/
Curtains.BasePlane.prototype._setAttributes = function() {
    // set default attributes
    if(!this._attributes) this._attributes = {};

    this._attributes.vertexPosition = {
        name: "aVertexPosition",
        location: this._curtains.gl.getAttribLocation(this._usedProgram.program, "aVertexPosition"),
    };

    this._attributes.textureCoord = {
        name: "aTextureCoord",
        location: this._curtains.gl.getAttribLocation(this._usedProgram.program, "aTextureCoord"),
    };
};


/*** PLANE VERTICES AND BUFFERS ***/

/***
 This method is used internally to create our vertices coordinates and texture UVs
 we first create our UVs on a grid from [0, 0, 0] to [1, 1, 0]
 then we use the UVs to create our vertices coords
 ***/
Curtains.BasePlane.prototype._setPlaneVertices = function() {
    // geometry vertices
    this._geometry = {
        vertices: [],
    };

    // now the texture UVs coordinates
    this._material = {
        uvs: [],
    };

    for(var y = 0; y < this._definition.height; ++y) {
        var v = y / this._definition.height;

        for(var x = 0; x < this._definition.width; ++x) {
            var u = x / this._definition.width;

            // uvs and vertices
            // our uvs are ranging from 0 to 1, our vertices range from -1 to 1

            // first triangle
            this._material.uvs.push(u);
            this._material.uvs.push(v);
            this._material.uvs.push(0);

            this._geometry.vertices.push((u - 0.5) * 2);
            this._geometry.vertices.push((v - 0.5) * 2);
            this._geometry.vertices.push(0);

            this._material.uvs.push(u + (1 / this._definition.width));
            this._material.uvs.push(v);
            this._material.uvs.push(0);

            this._geometry.vertices.push(((u + (1 / this._definition.width)) - 0.5) * 2);
            this._geometry.vertices.push((v - 0.5) * 2);
            this._geometry.vertices.push(0);

            this._material.uvs.push(u);
            this._material.uvs.push(v + (1 / this._definition.height));
            this._material.uvs.push(0);

            this._geometry.vertices.push((u - 0.5) * 2);
            this._geometry.vertices.push(((v + (1 / this._definition.height)) - 0.5) * 2);
            this._geometry.vertices.push(0);

            // second triangle
            this._material.uvs.push(u);
            this._material.uvs.push(v + (1 / this._definition.height));
            this._material.uvs.push(0);

            this._geometry.vertices.push((u - 0.5) * 2);
            this._geometry.vertices.push(((v + (1 / this._definition.height)) - 0.5) * 2);
            this._geometry.vertices.push(0);

            this._material.uvs.push(u + (1 / this._definition.width));
            this._material.uvs.push(v);
            this._material.uvs.push(0);

            this._geometry.vertices.push(((u + (1 / this._definition.width)) - 0.5) * 2);
            this._geometry.vertices.push((v - 0.5) * 2);
            this._geometry.vertices.push(0);

            this._material.uvs.push(u + (1 / this._definition.width));
            this._material.uvs.push(v + (1 / this._definition.height));
            this._material.uvs.push(0);

            this._geometry.vertices.push(((u + (1 / this._definition.width)) - 0.5) * 2);
            this._geometry.vertices.push(((v + (1 / this._definition.height)) - 0.5) * 2);
            this._geometry.vertices.push(0);
        }
    }
};


/***
 This method creates our vertex and texture coord buffers
 ***/
Curtains.BasePlane.prototype._initializeBuffers = function() {
    var gl = this._curtains.gl;

    // if this our first time we need to create our geometry and material objects
    if(!this._geometry && !this._material) {
        this._setPlaneVertices();
    }

    if(!this._attributes) return;

    // now we'll create vertices and uvs attributes
    this._geometry.bufferInfos = {
        id: gl.createBuffer(),
        itemSize: 3,
        numberOfItems: this._geometry.vertices.length / 3, // divided by item size
    };

    this._material.bufferInfos = {
        id: gl.createBuffer(),
        itemSize: 3,
        numberOfItems: this._material.uvs.length / 3, // divided by item size
    };

    // use vertex array objects if available
    if(this._curtains._isWebGL2) {
        this._vao = gl.createVertexArray();
        gl.bindVertexArray(this._vao);
    }
    else if(this._curtains._extensions['OES_vertex_array_object']) {
        this._vao = this._curtains._extensions['OES_vertex_array_object'].createVertexArrayOES();
        this._curtains._extensions['OES_vertex_array_object'].bindVertexArrayOES(this._vao);
    }

    // bind both attributes buffers
    gl.enableVertexAttribArray(this._attributes.vertexPosition.location);

    gl.bindBuffer(gl.ARRAY_BUFFER, this._geometry.bufferInfos.id);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this._geometry.vertices), gl.STATIC_DRAW);

    // Set where the vertexPosition attribute gets its data,
    gl.vertexAttribPointer(this._attributes.vertexPosition.location, this._geometry.bufferInfos.itemSize, gl.FLOAT, false, 0, 0);

    gl.enableVertexAttribArray(this._attributes.textureCoord.location);

    gl.bindBuffer(gl.ARRAY_BUFFER, this._material.bufferInfos.id);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this._material.uvs), gl.STATIC_DRAW);

    gl.vertexAttribPointer(this._attributes.textureCoord.location, this._material.bufferInfos.itemSize, gl.FLOAT, false, 0, 0);

    // update current buffers ID
    this._curtains._glState.currentBuffersID = this._definition.buffersID;
};


/***
 Used internally handle context restoration
 ***/
Curtains.BasePlane.prototype._restoreContext = function() {
    var curtains = this._curtains;
    this._canDraw = false;

    if(this._matrices) {
        this._matrices = null;
    }

    this._attributes = null;

    this._geometry.bufferInfos = null;
    this._material.bufferInfos = null;

    // reset the used program based on our previous shaders code strings
    this._usedProgram = curtains._setupProgram(this._usedProgram.vsCode, this._usedProgram.fsCode, this);

    if(this._usedProgram) {
        // reset attributes
        this._setAttributes();

        // reset plane uniforms
        this._activeTextures = [];
        this._setUniforms();

        // reinitialize buffers
        this._initializeBuffers();

        // handle attached render targets
        if(this._type === "ShaderPass") {
            // recreate the render target and its texture
            if(this._isScenePass) {
                this.target._frameBuffer = null;
                this.target._depthBuffer = null;

                // remove its render target
                curtains.renderTargets.splice(this.target.index, 1);

                // remove its render target texture as well
                this.textures.splice(0, 1);

                this._createFrameBuffer();

                curtains._drawStacks.scenePasses.push(this.index);
            }
            else {
                // set the render target
                var target = curtains.renderTargets[this.target.index];
                this.setRenderTarget(target);
                this.target._shaderPass = target;

                // re init render texture from render target texture
                this.textures[0]._canDraw = false;
                this.textures[0]._setTextureUniforms();
                this.textures[0].setFromTexture(target.textures[0]);

                curtains._drawStacks.renderPasses.push(this.index);
            }
        }
        else if(this.target) {
            // reset its render target if needed
            this.setRenderTarget(curtains.renderTargets[this.target.index]);
        }

        // reset textures
        // we have reinitiated our ShaderPass render target texture above, so skip it
        for(var i = this._type === "ShaderPass" ? 1 : 0; i < this.textures.length; i++) {
            this.textures[i]._restoreContext();
        }

        // if this is a Plane object we need to reset its matrices, perspective and position
        if(this._type === "Plane") {
            this._initMatrices();

            // set our initial perspective matrix
            this.setPerspective(this._fov, this._nearPlane, this._farPlane);

            this._applyWorldPositions();

            // add the plane to our draw stack again as they have been emptied
            curtains._stackPlane(this);
        }

        this._canDraw = true;
    }
};



/*** PLANE SIZES AND TEXTURES HANDLING ***/

/***
 Set our plane dimensions and positions relative to document
 Triggers reflow!
 ***/
Curtains.BasePlane.prototype._setDocumentSizes = function() {
    // set our basic initial infos
    var planeBoundingRect = this.htmlElement.getBoundingClientRect();

    // just in case the html element is missing from the DOM, set its container values instead
    if(planeBoundingRect.width === 0 && planeBoundingRect.height === 0) {
        planeBoundingRect = this._curtains._boundingRect;
    }

    if(!this._boundingRect) this._boundingRect = {};

    // set plane dimensions in document space
    this._boundingRect.document = {
        width: planeBoundingRect.width * this._curtains.pixelRatio,
        height: planeBoundingRect.height * this._curtains.pixelRatio,
        top: planeBoundingRect.top * this._curtains.pixelRatio,
        left: planeBoundingRect.left * this._curtains.pixelRatio,
    };
};


/*** BOUNDING BOXES GETTERS ***/

/***
 Useful to get our plane HTML element bounding rectangle without triggering a reflow/layout

 returns :
 @boundingRectangle (obj): an object containing our plane HTML element bounding rectangle (width, height, top, bottom, right and left properties)
 ***/
Curtains.BasePlane.prototype.getBoundingRect = function() {
    return {
        width: this._boundingRect.document.width,
        height: this._boundingRect.document.height,
        top: this._boundingRect.document.top,
        left: this._boundingRect.document.left,

        // right = left + width, bottom = top + height
        right: this._boundingRect.document.left + this._boundingRect.document.width,
        bottom: this._boundingRect.document.top + this._boundingRect.document.height,
    };
};


/***
 Get intersection points between a plane and the camera near plane
 When a plane gets clipped by the camera near plane, the clipped corner projected coords returned by _applyMatrixToPoint() are erronate
 We need to find the intersection points using another approach
 Here I chose to use non clipped corners projected coords and a really small vector parallel to the plane's side
 We're adding that vector again and again to our corner projected coords until the Z coordinate matches the near plane: we got our intersection

 params:
 @corners (array): our original corners vertices coordinates
 @mvpCorners (array): the projected corners of our plane
 @clippedCorners (array): index of the corners that are clipped

 returns:
 @mvpCorners (array): the corrected projected corners of our plane
 ***/
Curtains.BasePlane.prototype._getNearPlaneIntersections = function(corners, mvpCorners, clippedCorners) {
    // rebuild the clipped corners based on non clipped ones

    // find the intersection by adding a vector starting from a corner till we reach the near plane
    function getIntersection(refPoint, secondPoint) {
        // direction vector to add
        var vector = [
            secondPoint[0] - refPoint[0],
            secondPoint[1] - refPoint[1],
            secondPoint[2] - refPoint[2],
        ];
        // copy our corner refpoint
        var intersection = refPoint.slice();
        // iterate till we reach near plane
        while(intersection[2] > -1) {
            intersection[0] += vector[0];
            intersection[1] += vector[1];
            intersection[2] += vector[2];
        }

        return intersection;
    }

    if(clippedCorners.length === 1) {
        // we will have 5 corners to check so we'll need to push a new entry in our mvpCorners array
        if(clippedCorners[0] === 0) {
            // top left is culled
            // get intersection iterating from top right
            mvpCorners[0] = getIntersection(mvpCorners[1], this._curtains._applyMatrixToPoint([0.95, 1, 0], this._matrices.mVPMatrix));

            // get intersection iterating from bottom left
            mvpCorners.push(getIntersection(mvpCorners[3], this._curtains._applyMatrixToPoint([-1, -0.95, 0], this._matrices.mVPMatrix)));
        }
        else if(clippedCorners[0] === 1) {
            // top right is culled
            // get intersection iterating from top left
            mvpCorners[1] = getIntersection(mvpCorners[0], this._curtains._applyMatrixToPoint([-0.95, 1, 0], this._matrices.mVPMatrix));

            // get intersection iterating from bottom right
            mvpCorners.push(getIntersection(mvpCorners[2], this._curtains._applyMatrixToPoint([1, -0.95, 0], this._matrices.mVPMatrix)));
        }
        else if(clippedCorners[0] === 2) {
            // bottom right is culled
            // get intersection iterating from bottom left
            mvpCorners[2] = getIntersection(mvpCorners[3], this._curtains._applyMatrixToPoint([-0.95, -1, 0], this._matrices.mVPMatrix));

            // get intersection iterating from top right
            mvpCorners.push(getIntersection(mvpCorners[1], this._curtains._applyMatrixToPoint([1, 0.95, 0], this._matrices.mVPMatrix)));
        }
        else if(clippedCorners[0] === 3) {
            // bottom left is culled
            // get intersection iterating from bottom right
            mvpCorners[3] = getIntersection(mvpCorners[2], this._curtains._applyMatrixToPoint([0.95, -1, 0], this._matrices.mVPMatrix));

            // get intersection iterating from top left
            mvpCorners.push(getIntersection(mvpCorners[0], this._curtains._applyMatrixToPoint([-1, 0.95, 0], this._matrices.mVPMatrix)));
        }
    }
    else if(clippedCorners.length === 2) {
        if(clippedCorners[0] === 0 && clippedCorners[1] === 1) {
            // top part of the plane is culled by near plane
            // find intersection using bottom corners
            mvpCorners[0] = getIntersection(mvpCorners[3], this._curtains._applyMatrixToPoint([-1, -0.95, 0], this._matrices.mVPMatrix));
            mvpCorners[1] = getIntersection(mvpCorners[2], this._curtains._applyMatrixToPoint([1, -0.95, 0], this._matrices.mVPMatrix));
        }
        else if(clippedCorners[0] === 1 && clippedCorners[1] === 2) {
            // right part of the plane is culled by near plane
            // find intersection using left corners
            mvpCorners[1] = getIntersection(mvpCorners[0], this._curtains._applyMatrixToPoint([-0.95, 1, 0], this._matrices.mVPMatrix));
            mvpCorners[2] = getIntersection(mvpCorners[3], this._curtains._applyMatrixToPoint([-0.95, -1, 0], this._matrices.mVPMatrix));
        }
        else if(clippedCorners[0] === 2 && clippedCorners[1] === 3) {
            // bottom part of the plane is culled by near plane
            // find intersection using top corners
            mvpCorners[2] = getIntersection(mvpCorners[1], this._curtains._applyMatrixToPoint([1, 0.95, 0], this._matrices.mVPMatrix));
            mvpCorners[3] = getIntersection(mvpCorners[0], this._curtains._applyMatrixToPoint([-1, 0.95, 0], this._matrices.mVPMatrix));
        }
        else if(clippedCorners[0] === 0 && clippedCorners[1] === 3) {
            // left part of the plane is culled by near plane
            // find intersection using right corners
            mvpCorners[0] = getIntersection(mvpCorners[1], this._curtains._applyMatrixToPoint([0.95, 1, 0], this._matrices.mVPMatrix));
            mvpCorners[3] = getIntersection(mvpCorners[2], this._curtains._applyMatrixToPoint([0.95, -1, 0], this._matrices.mVPMatrix));
        }
    }
    else if(clippedCorners.length === 3) {
        // get the corner that is not clipped
        var nonClippedCorner = 0;
        for(var i = 0; i < corners.length; i++) {
            if(!clippedCorners.includes(i)) {
                nonClippedCorner = i;
            }
        }

        // we will have just 3 corners so reset our mvpCorners array with just the visible corner
        mvpCorners = [
            mvpCorners[nonClippedCorner]
        ];
        if(nonClippedCorner === 0) {
            // from top left corner to right
            mvpCorners.push(getIntersection(mvpCorners[0], this._curtains._applyMatrixToPoint([-0.95, 1, 0], this._matrices.mVPMatrix)));
            // from top left corner to bottom
            mvpCorners.push(getIntersection(mvpCorners[0], this._curtains._applyMatrixToPoint([-1, 0.95, 0], this._matrices.mVPMatrix)));
        }
        else if(nonClippedCorner === 1) {
            // from top right corner to left
            mvpCorners.push(getIntersection(mvpCorners[0], this._curtains._applyMatrixToPoint([0.95, 1, 0], this._matrices.mVPMatrix)));
            // from top right corner to bottom
            mvpCorners.push(getIntersection(mvpCorners[0], this._curtains._applyMatrixToPoint([1, 0.95, 0], this._matrices.mVPMatrix)));
        }
        else if(nonClippedCorner === 2) {
            // from bottom right corner to left
            mvpCorners.push(getIntersection(mvpCorners[0], this._curtains._applyMatrixToPoint([0.95, -1, 0], this._matrices.mVPMatrix)));
            // from bottom right corner to top
            mvpCorners.push(getIntersection(mvpCorners[0], this._curtains._applyMatrixToPoint([1, -0.95, 0], this._matrices.mVPMatrix)));
        }
        else if(nonClippedCorner === 3) {
            // from bottom left corner to right
            mvpCorners.push(getIntersection(mvpCorners[0], this._curtains._applyMatrixToPoint([-0.95, -1, 0], this._matrices.mVPMatrix)));
            // from bottom left corner to top
            mvpCorners.push(getIntersection(mvpCorners[0], this._curtains._applyMatrixToPoint([-1, -0.95, 0], this._matrices.mVPMatrix)));
        }
    }
    else {
        // all 4 corners are culled! artificially apply wrong coords to force plane culling
        for(var i = 0; i < corners.length; i++) {
            mvpCorners[i][0] = 10000;
            mvpCorners[i][1] = 10000;
        }
    }

    return mvpCorners;
};


/***
 Useful to get our WebGL plane bounding box in the world space
 Takes all transformations into account
 Used internally for frustum culling

 returns :
 @boundingRectangle (obj): an object containing our plane WebGL element 4 corners coordinates: top left corner is [-1, 1] and bottom right corner is [1, -1]
 ***/
Curtains.BasePlane.prototype._getWorldCoords = function() {
    var corners = [
        [-1, 1, 0], // plane's top left corner
        [1, 1, 0], // plane's top right corner
        [1, -1, 0], // plane's bottom right corner
        [-1, -1, 0], // plane's bottom left corner
    ];

    // corners with model view projection matrix applied
    var mvpCorners = [];
    // eventual clipped corners
    var clippedCorners = [];

    // we are going to get our plane's four corners relative to our model view projection matrix
    for(var i = 0; i < corners.length; i++) {
        var mvpCorner = this._curtains._applyMatrixToPoint(corners[i], this._matrices.mVPMatrix);
        mvpCorners.push(mvpCorner);

        // Z position is > 1 or < -1 means the corner is clipped
        if(Math.abs(mvpCorner[2]) > 1) {
            clippedCorners.push(i);
        }
    }

    // near plane is clipping, get intersections between plane and near plane
    if(clippedCorners.length) {
        mvpCorners = this._getNearPlaneIntersections(corners, mvpCorners, clippedCorners);
    }

    // we need to check for the X and Y min and max values
    // use arbitrary integers that will be overrided anyway
    var minX = Infinity;
    var maxX = -Infinity;

    var minY = Infinity;
    var maxY = -Infinity;

    for(var i = 0; i < mvpCorners.length; i++) {
        var corner = mvpCorners[i];

        if(corner[0] < minX) {
            minX = corner[0];
        }
        if(corner[0] > maxX) {
            maxX = corner[0];
        }

        if(corner[1] < minY) {
            minY = corner[1];
        }
        if(corner[1] > maxY) {
            maxY = corner[1];
        }
    }

    return {
        top: maxY,
        right: maxX,
        bottom: minY,
        left: minX,
    };
};


/***
 Useful to get our WebGL plane bounding box relative to the document
 Takes all transformations into account
 Used internally for frustum culling

 returns :
 @boundingRectangle (obj): an object containing our plane WebGL element bounding rectangle (width, height, top, bottom, right and left properties)
 ***/
Curtains.BasePlane.prototype.getWebGLBoundingRect = function() {
    // check that our view projection matrix is defined
    if(this._matrices.mVPMatrix) {
        // get our world space bouding rect
        var worldBBox = this._getWorldCoords();

        // normalize worldBBox to (0 -> 1) screen coordinates with [0, 0] being the top left corner and [1, 1] being the bottom right
        var screenBBox = {
            top: 1 - (worldBBox.top + 1) / 2,
            right: (worldBBox.right + 1) / 2,
            bottom: 1 - (worldBBox.bottom + 1) / 2,
            left: (worldBBox.left + 1) / 2,
        };

        screenBBox.width = screenBBox.right - screenBBox.left;
        screenBBox.height = screenBBox.bottom - screenBBox.top;

        // return our values ranging from 0 to 1 multiplied by our canvas sizes + canvas top and left offsets
        return {
            width: screenBBox.width * this._curtains._boundingRect.width,
            height: screenBBox.height * this._curtains._boundingRect.height,
            top: screenBBox.top * this._curtains._boundingRect.height + this._curtains._boundingRect.top,
            left: screenBBox.left * this._curtains._boundingRect.width + this._curtains._boundingRect.left,

            // add left and width to get right property
            right: screenBBox.left * this._curtains._boundingRect.width + this._curtains._boundingRect.left + screenBBox.width * this._curtains._boundingRect.width,
            // add top and height to get bottom property
            bottom: screenBBox.top * this._curtains._boundingRect.height + this._curtains._boundingRect.top + screenBBox.height * this._curtains._boundingRect.height,
        };
    }
    else {
        return this._boundingRect.document;
    }
};


/***
 Returns our plane WebGL bounding rectangle in document coordinates including additional drawCheckMargins

 returns :
 @boundingRectangle (obj): an object containing our plane WebGL element bounding rectangle including the draw check margins (top, bottom, right and left properties)
 ***/
Curtains.BasePlane.prototype._getWebGLDrawRect = function() {
    var boundingRect = this.getWebGLBoundingRect();

    return {
        top: boundingRect.top - this.drawCheckMargins.top,
        right: boundingRect.right + this.drawCheckMargins.right,
        bottom: boundingRect.bottom + this.drawCheckMargins.bottom,
        left: boundingRect.left - this.drawCheckMargins.left,
    };
};


/***
 Handles each plane resizing
 used internally when our container is resized
 ***/
Curtains.BasePlane.prototype.planeResize = function() {
    // reset plane dimensions
    this._setDocumentSizes();

    // if this is a Plane object we need to update its perspective and positions
    if(this._type === "Plane") {
        // reset perspective
        this.setPerspective(this._fov, this._nearPlane, this._farPlane);

        // apply new position
        this._applyWorldPositions();
    }

    // resize all textures
    for(var i = 0; i < this.textures.length; i++) {
        this.textures[i].resize();
    }

    // handle our after resize event
    var self = this;
    setTimeout(function() {
        if(self._onAfterResizeCallback) {
            self._onAfterResizeCallback();
        }
    }, 0);
};



/*** IMAGES, VIDEOS AND CANVASES LOADING ***/

/***
 This method creates a new Texture associated to the plane

 params :
 @type (string) : texture type, either image, video or canvas

 returns :
 @t: our newly created texture
 ***/
Curtains.BasePlane.prototype.createTexture = function(params) {
    if(typeof params === "string") {
        params = {
            sampler: params,
        };

        if(!this._curtains.productionMode) {
            console.warn("Since v5.1 you should use an object to pass your sampler name with the createTexture() method. Please refer to the docs: https://www.curtainsjs.com/documentation.html (texture concerned: ", params.sampler, ")");
        }
    }

    if(!params) params = {};

    var texture = new Curtains.Texture(this, {
        index: this.textures.length,
        sampler: params.sampler || null,
        fromTexture: params.fromTexture || null,
        isFBOTexture: params.isFBOTexture || false, // used internally
    });

    // add our texture to the textures array
    this.textures.push(texture);

    return texture;
};


/***
 Check whether a plane has loaded all its initial sources and fires the onReady callback

 params :
 @sourcesArray (array) : array of html images, videos or canvases elements
 ***/
Curtains.BasePlane.prototype._isPlaneReady = function() {
    if(!this._loadingManager.complete && this._loadingManager.sourcesLoaded >= this._loadingManager.initSourcesToLoad) {
        this._loadingManager.complete = true;

        // force next frame rendering
        this._curtains.needRender();

        var self = this;
        setTimeout(function() {
            if(self._onReadyCallback) {
                self._onReadyCallback();
            }
        }, 0);
    }
};


/***
 This method handles the sources loading process

 params :
 @sourcesArray (array) : array of html images, videos or canvases elements
 ***/
Curtains.BasePlane.prototype.loadSources = function(sourcesArray) {
    for(var i = 0; i < sourcesArray.length; i++) {
        this.loadSource(sourcesArray[i]);
    }
};


/***
 This method loads one source
 It checks what type of source it is then use the right loader

 params :
 @source (html element) : html image, video or canvas element
 ***/
Curtains.BasePlane.prototype.loadSource = function(source) {
    if(source.tagName.toUpperCase() === "IMG") {
        this.loadImage(source);
    }
    else if(source.tagName.toUpperCase() === "VIDEO") {
        this.loadVideo(source);
    }
    else if(source.tagName.toUpperCase() === "CANVAS") {
        this.loadCanvas(source);
    }
    else if(!this._curtains.productionMode) {
        console.warn("this HTML tag could not be converted into a texture:", source.tagName);
    }
};


/***
 Handles media loading errors

 params :
 @source (html element) : html image, video or canvas element
 @error (object) : loading error
 ***/
Curtains.BasePlane.prototype._sourceLoadError = function(source, error) {
    if(!this._curtains.productionMode) {
        console.warn("There has been an error:", error, "while loading this source:", source);
    }
};


/***
 Check if this source is already assigned to a cached texture

 params :
 @source (html element) : html image, video or canvas element (only images for now)
 ***/
Curtains.BasePlane.prototype._getTextureFromCache = function(source) {
    var cachedTexture = false;
    if(this._curtains._imageCache.length > 0) {
        for(var i = 0; i < this._curtains._imageCache.length; i++) {
            var cacheTextureItem = this._curtains._imageCache[i];
            if(cacheTextureItem.source) {
                if(cacheTextureItem.type === "image" && cacheTextureItem.source.src === source.src) {
                    cachedTexture = cacheTextureItem;
                }
            }
        }
    }

    return cachedTexture;
};


/***
 This method loads an image
 Creates a new texture object right away and once the image is loaded it uses it as our WebGL texture

 params :
 @source (image) : html image element
 ***/
Curtains.BasePlane.prototype.loadImage = function(source) {
    var image = source;

    image.crossOrigin = this.crossOrigin || "anonymous";
    image.sampler = source.getAttribute("data-sampler") || null;

    // check for cache
    var cachedTexture = this._getTextureFromCache(source);

    if(cachedTexture) {
        this.createTexture({
            sampler: image.sampler,
            fromTexture: cachedTexture,
        });
        this.images.push(cachedTexture.source);

        // fire parent plane onReady callback if needed
        this._isPlaneReady();

        return;
    }

    // create a new texture that will use our image later
    var texture = this.createTexture({
        sampler: image.sampler,
    });

    // handle our loaded data event inside the texture and tell our plane when the video is ready to play
    texture._onSourceLoadedHandler = texture._onSourceLoaded.bind(texture, image);

    // If the image is in the cache of the browser,
    // the 'load' event might have been triggered
    // before we registered the event handler.
    if(image.complete) {
        texture._onSourceLoaded(image);
    }
    else if(image.decode) {
        var self = this;
        image.decode().then(texture._onSourceLoadedHandler).catch(function() {
            // fallback to classic load & error events
            image.addEventListener('load', texture._onSourceLoadedHandler, false);
            image.addEventListener('error', self._sourceLoadError.bind(self, image), false);
        });
    }
    else {
        image.addEventListener('load', texture._onSourceLoadedHandler, false);
        image.addEventListener('error', this._sourceLoadError.bind(this, image), false);
    }

    // add the image to our array
    this.images.push(image);
};


/***
 This method loads a video
 Creates a new texture object right away and once the video has enough data it uses it as our WebGL texture

 params :
 @source (video) : html video element
 ***/
Curtains.BasePlane.prototype.loadVideo = function(source) {
    var video = source;

    video.preload = true;
    video.muted = true;
    video.loop = true;

    video.sampler = source.getAttribute("data-sampler") || null;
    video.crossOrigin = this.crossOrigin || "anonymous";

    // create a new texture that will use our video later
    var texture = this.createTexture({
        sampler: video.sampler
    });

    // handle our loaded data event inside the texture and tell our plane when the video is ready to play
    texture._onSourceLoadedHandler = texture._onVideoLoadedData.bind(texture, video);
    video.addEventListener('canplaythrough', texture._onSourceLoadedHandler, false);
    video.addEventListener('error', this._sourceLoadError.bind(this, video), false);

    // If the video is in the cache of the browser,
    // the 'canplaythrough' event might have been triggered
    // before we registered the event handler.
    if(video.readyState >= video.HAVE_FUTURE_DATA) {
        texture._onSourceLoaded(video);
    }

    // start loading our video
    video.load();

    this.videos.push(video);
};


/***
 This method loads a canvas
 Creates a new texture object right away and uses the canvas as our WebGL texture

 params :
 @source (canvas) : html canvas element
 ***/
Curtains.BasePlane.prototype.loadCanvas = function(source) {
    var canvas = source;
    canvas.sampler = source.getAttribute("data-sampler") || null;

    var texture = this.createTexture({
        sampler: canvas.sampler
    });

    this.canvases.push(canvas);

    texture._onSourceLoaded(canvas);
};


/*** LOAD ARRAYS ***/

/***
 Loads an array of images

 params :
 @imagesArray (array) : array of html image elements

 returns :
 @this: our plane to handle chaining
 ***/
Curtains.BasePlane.prototype.loadImages = function(imagesArray) {
    for(var i = 0; i < imagesArray.length; i++) {
        this.loadImage(imagesArray[i]);
    }
};

/***
 Loads an array of videos

 params :
 @videosArray (array) : array of html video elements

 returns :
 @this: our plane to handle chaining
 ***/
Curtains.BasePlane.prototype.loadVideos = function(videosArray) {
    for(var i = 0; i < videosArray.length; i++) {
        this.loadVideo(videosArray[i]);
    }
};

/***
 Loads an array of canvases

 params :
 @canvasesArray (array) : array of html canvas elements

 returns :
 @this: our plane to handle chaining
 ***/
Curtains.BasePlane.prototype.loadCanvases = function(canvasesArray) {
    for(var i = 0; i < canvasesArray.length; i++) {
        this.loadCanvas(canvasesArray[i]);
    }
};



/***
 This has to be called in order to play the planes videos
 We need this because on mobile devices we can't start playing a video without a user action
 Once the video has started playing we set an interval and update a new frame to our our texture at a 30FPS rate
 ***/
Curtains.BasePlane.prototype.playVideos = function() {
    for(var i = 0; i < this.textures.length; i++) {
        var texture = this.textures[i];

        if(texture.type === "video") {
            var playPromise = texture.source.play();

            // In browsers that don’t yet support this functionality,
            // playPromise won’t be defined.
            var self = this;
            if(playPromise !== undefined) {
                playPromise.catch(function(error) {
                    if(!self._curtains.productionMode) console.warn("Could not play the video : ", error);
                });
            }
        }
    }
};


/*** INTERACTION ***/

/***
 This function takes the mouse position relative to the document and returns it relative to our plane
 It ranges from -1 to 1 on both axis

 params :
 @xPosition (float): position to convert on X axis
 @yPosition (float): position to convert on Y axis

 returns :
 @mousePosition: the mouse position relative to our plane in WebGL space coordinates
 ***/
Curtains.BasePlane.prototype.mouseToPlaneCoords = function(xMousePosition, yMousePosition) {
    // remember our ShaderPass objects don't have a scale property
    var scale = this.scale ? this.scale : {x: 1, y: 1};

    // we need to adjust our plane document bounding rect to it's webgl scale
    var scaleAdjustment = {
        x: (this._boundingRect.document.width - this._boundingRect.document.width * scale.x) / 2,
        y: (this._boundingRect.document.height - this._boundingRect.document.height * scale.y) / 2,
    };

    // also we need to divide by pixel ratio
    var planeBoundingRect = {
        width: (this._boundingRect.document.width * scale.x) / this._curtains.pixelRatio,
        height: (this._boundingRect.document.height * scale.y) / this._curtains.pixelRatio,
        top: (this._boundingRect.document.top + scaleAdjustment.y) / this._curtains.pixelRatio,
        left: (this._boundingRect.document.left + scaleAdjustment.x) / this._curtains.pixelRatio,
    };

    // mouse position conversion from document to plane space
    var mousePosition = {
        x: (((xMousePosition - planeBoundingRect.left) / planeBoundingRect.width) * 2) - 1,
        y: 1 - (((yMousePosition - planeBoundingRect.top) / planeBoundingRect.height) * 2)
    };

    return mousePosition;
};


/***
 Used inside our draw call to set the correct plane buffers before drawing it
 ***/
Curtains.BasePlane.prototype._bindPlaneBuffers = function() {
    var curtains = this._curtains;
    var gl = curtains.gl;

    if(this._vao) {
        if(curtains._isWebGL2) {
            curtains.gl.bindVertexArray(this._vao);
        }
        else {
            curtains._extensions['OES_vertex_array_object'].bindVertexArrayOES(this._vao);
        }
    }
    else {
        // Set the vertices buffer
        gl.enableVertexAttribArray(this._attributes.vertexPosition.location);
        gl.bindBuffer(gl.ARRAY_BUFFER, this._geometry.bufferInfos.id);

        gl.vertexAttribPointer(this._attributes.vertexPosition.location, this._geometry.bufferInfos.itemSize, gl.FLOAT, false, 0, 0);

        // Set where the texture coord attribute gets its data,
        gl.enableVertexAttribArray(this._attributes.textureCoord.location);
        gl.bindBuffer(gl.ARRAY_BUFFER, this._material.bufferInfos.id);

        gl.vertexAttribPointer(this._attributes.textureCoord.location, this._material.bufferInfos.itemSize, gl.FLOAT, false, 0, 0);
    }

    // update current buffers ID
    curtains._glState.currentBuffersID = this._definition.buffersID;
};


/***
 This is used to set the WebGL context active texture and bind it

 params :
 @texture (texture object) : Our texture object containing our WebGL texture and its index
 ***/
Curtains.BasePlane.prototype._bindPlaneTexture = function(texture) {
    var gl = this._curtains.gl;

    if(texture._canDraw) {
        // tell WebGL we want to affect the texture at the plane's index unit
        gl.activeTexture(gl.TEXTURE0 + texture.index);
        // bind the texture to the plane's index unit
        gl.bindTexture(gl.TEXTURE_2D, texture._sampler.texture);
    }
};


/***
 This function adds a render target to a plane

 params :
 @renderTarger (RenderTarget): the render target to add to that plane
 ***/
Curtains.BasePlane.prototype.setRenderTarget = function(renderTarget) {
    if(!renderTarget || !renderTarget._type || renderTarget._type !== "RenderTarget") {
        if(!this._curtains.productionMode) {
            console.warn("Could not set the render target because the argument passed is not a RenderTarget class object", renderTarget);
        }

        return;
    }

    this.target = renderTarget;
};


/*** DRAW THE PLANE ***/

/***
 We draw the plane, ie bind the buffers, set the active textures and draw it
 If the plane type is a ShaderPass we also need to bind the right frame buffers
 ***/
Curtains.BasePlane.prototype._drawPlane = function() {
    var curtains = this._curtains;
    var gl = curtains.gl;

    // check if our plane is ready to draw
    if(this._canDraw) {
        // even if our plane should not be drawn we still execute its onRender callback and update its uniforms
        if(this._onRenderCallback) {
            this._onRenderCallback();
        }

        // to improve webgl pipeline performace, we might want to update each texture that needs an update here
        // see https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_best_practices#texImagetexSubImage_uploads_particularly_with_videos_can_cause_pipeline_flushes

        if(this._type === "ShaderPass") {
            if(this._isScenePass) {
                // if this is a scene pass, check if theres one more coming next and eventually bind it
                if(curtains._glState.scenePassIndex + 1 < curtains._drawStacks.scenePasses.length) {
                    curtains._bindFrameBuffer(curtains.shaderPasses[curtains._drawStacks.scenePasses[curtains._glState.scenePassIndex + 1]].target);

                    curtains._glState.scenePassIndex++;
                }
                else {
                    curtains._bindFrameBuffer(null);
                }
            }
            else if(curtains._glState.scenePassIndex === null) {
                // we are rendering a bunch of planes inside a render target, unbind it
                curtains._bindFrameBuffer(null);
            }
        }
        else {
            // if we should render to a render target
            if(this.target) {
                curtains._bindFrameBuffer(this.target);
            }
            else if(curtains._glState.scenePassIndex === null) {
                curtains._bindFrameBuffer(null);
            }

            // update our perspective matrix
            this._setPerspectiveMatrix();

            // update our mv matrix
            this._setMVMatrix();
        }

        // now check if we really need to draw it and its textures
        if((this.alwaysDraw || this._shouldDraw) && this.visible) {
            // enable/disable depth test
            curtains._setDepth(this._depthTest);

            // face culling
            curtains._setFaceCulling(this.cullFace);

            // ensure we're using the right program
            curtains._useProgram(this._usedProgram);

            // update all uniforms set up by the user
            this._updateUniforms();

            // bind plane attributes buffers
            // if we're rendering on a frame buffer object, force buffers bindings to avoid bugs
            if(curtains._glState.currentBuffersID !== this._definition.buffersID || this.target) {
                this._bindPlaneBuffers();
            }

            // draw all our plane textures
            for(var i = 0; i < this.textures.length; i++) {
                // draw (bind and maybe update) our texture
                this.textures[i]._drawTexture();
            }

            // the draw call!
            gl.drawArrays(gl.TRIANGLES, 0, this._geometry.bufferInfos.numberOfItems);

            // callback after draw
            if(this._onAfterRenderCallback) {
                this._onAfterRenderCallback();
            }
        }
    }
};


/***
 This deletes all our plane webgl bindings and its textures
 ***/
Curtains.BasePlane.prototype._dispose = function() {
    var gl = this._curtains.gl;

    if(gl) {
        // delete buffers
        // each time we check for existing properties to avoid errors
        if(this._vao) {
            if(this._curtains._isWebGL2) {
                gl.deleteVertexArray(this._vao);
            }
            else {
                this._curtains._extensions['OES_vertex_array_object'].deleteVertexArrayOES(this._vao);
            }
        }

        if(this._geometry) {
            gl.bindBuffer(gl.ARRAY_BUFFER, this._geometry.bufferInfos.id);
            gl.bufferData(gl.ARRAY_BUFFER, 1, gl.STATIC_DRAW);
            gl.deleteBuffer(this._geometry.bufferInfos.id);
            this._geometry = null;
        }

        if(this._material) {
            gl.bindBuffer(gl.ARRAY_BUFFER, this._material.bufferInfos.id);
            gl.bufferData(gl.ARRAY_BUFFER, 1, gl.STATIC_DRAW);
            gl.deleteBuffer(this._material.bufferInfos.id);
            this._material = null;
        }

        if(this.target && this._type === "ShaderPass") {
            this._curtains.removeRenderTarget(this.target);
            // remove the first texture since it has been deleted with the render target
            this.textures.shift();
        }

        // unbind and delete the textures
        for(var i = 0; i < this.textures.length; i++) {
            this.textures[i]._dispose();
        }
        this.textures = null;
    }
};



/*** BASE PLANE EVENTS ***/


/***
 This is called each time a plane has been resized

 params :
 @callback (function) : a function to execute

 returns :
 @this: our plane to handle chaining
 ***/
Curtains.BasePlane.prototype.onAfterResize = function(callback) {
    if(callback) {
        this._onAfterResizeCallback = callback;
    }

    return this;
};

/***
 This is called each time a plane's image has been loaded. Useful to handle a loader

 params :
 @callback (function) : a function to execute

 returns :
 @this: our plane to handle chaining
 ***/
Curtains.BasePlane.prototype.onLoading = function(callback) {
    if(callback) {
        this._onPlaneLoadingCallback = callback;
    }

    return this;
};


/***
 This is called when a plane is ready to be drawn

 params :
 @callback (function) : a function to execute

 returns :
 @this: our plane to handle chaining
 ***/
Curtains.BasePlane.prototype.onReady = function(callback) {
    if(callback) {
        this._onReadyCallback = callback;
    }

    return this;
};


/***
 This is called at each requestAnimationFrame call

 params :
 @callback (function) : a function to execute

 returns :
 @this: our plane to handle chaining
 ***/
Curtains.BasePlane.prototype.onRender = function(callback) {
    if(callback) {
        this._onRenderCallback = callback;
    }

    return this;
};


/***
 This is called at each requestAnimationFrame call for each plane after the draw call

 params :
 @callback (function) : a function to execute

 returns :
 @this: our plane to handle chaining
 ***/
Curtains.BasePlane.prototype.onAfterRender = function(callback) {
    if(callback) {
        this._onAfterRenderCallback = callback;
    }

    return this;
};



/*** PLANE CLASS ***/

/***
 Here we create our Plane object (note that we are using the Curtains namespace to avoid polluting the global scope)
 It will inherits from ou BasePlane class that handles all the WebGL part
 Plane class will add:
 - sizing and positioning and everything that relates to the DOM like draw checks and reenter/leave events
 - projection and view matrices and everything that is related like perspective, scale, rotation...
 - sources auto loading and onReady callback
 - depth related things

 params :
 @curtainWrapper : our curtain object that wraps all the planes
 @plane (html element) : html div that contains 0 or more media elements.
 @params (obj) : see addPlanes method of the wrapper

 returns :
 @this: our Plane element
 ***/
Curtains.Plane = function(curtainWrapper, plane, params) {
    this._type = "Plane";

    // inherit
    Curtains.BasePlane.call(this, curtainWrapper, plane, params);

    this.index = this._curtains.planes.length;
    this._canDraw = false;

    // used for FBOs
    this.target = null;

    // if params is not defined
    if(!params) params = {};

    this._setInitParams(params);

    // if program is valid, go on
    if(this._usedProgram) {
        // add our plane to the draw stack
        this._curtains._stackPlane(this);

        // init our plane
        this._initPositions();
        this._initSources();
    }
    else {
        if(this._curtains._onErrorCallback) {
            // if it's not valid call the curtains error callback
            this._curtains._onErrorCallback();
        }
    }
};
Curtains.Plane.prototype = Object.create(Curtains.BasePlane.prototype);
Curtains.Plane.prototype.constructor = Curtains.Plane;


/***
 Set plane's initial params

 params :
 @params (obj) : see addPlanes method of the Curtains class
 ***/
Curtains.Plane.prototype._setInitParams = function(params) {
    // if our plane should always be drawn or if it should be drawn only when inside the viewport (frustum culling)
    this.alwaysDraw = params.alwaysDraw || false;

    // if the plane has transparency
    this._transparent = params.transparent || false;

    // draw check margins in pixels
    // positive numbers means it can be displayed even when outside the viewport
    // negative numbers means it can be hidden even when inside the viewport
    var drawCheckMargins = {
        top: 0,
        right: 0,
        bottom: 0,
        left: 0,
    };
    if(params.drawCheckMargins) {
        drawCheckMargins = params.drawCheckMargins;
    }
    this.drawCheckMargins = drawCheckMargins;

    this._initTransformValues();

    // if we decide to load all sources on init or let the user do it manually
    this.autoloadSources = params.autoloadSources;
    if(this.autoloadSources === null || this.autoloadSources === undefined) {
        this.autoloadSources = true;
    }

    // set default fov
    this._fov = params.fov || 50;
    this._nearPlane = 0.1;
    this._farPlane = 150;

    // if we should watch scroll
    if(params.watchScroll === null || params.watchScroll === undefined) {
        this.watchScroll = this._curtains._watchScroll;
    }
    else {
        this.watchScroll = params.watchScroll || false;
    }
    // start listening for scroll
    if(this.watchScroll) {
        this._curtains._scrollManager.shouldWatch = true;
    }
};


/***
 Set/reset plane's transformation values: rotation, scale, translation, transform origin
 ***/
Curtains.Plane.prototype._initTransformValues = function() {
    this.rotation = {
        x: 0,
        y: 0,
        z: 0,
    };

    // initial quaternion
    this.quaternion = new Float32Array([0, 0, 0, 1]);

    this.relativeTranslation = {
        x: 0,
        y: 0,
        z: 0,
    };

    // will be our translation in webgl coordinates
    this._translation = {
        x: 0,
        y: 0,
        z: 0
    };

    this.scale = {
        x: 1,
        y: 1,
    };

    // set plane transform origin to center
    this.transformOrigin = {
        x: 0.5,
        y: 0.5,
        z: 0,
    };
};


/***
 Init our plane position: set its matrices, its position and perspective
 ***/
Curtains.Plane.prototype._initPositions = function() {
    // set its matrices
    this._initMatrices();

    // set our initial perspective matrix
    this.setPerspective(this._fov, this._nearPlane, this._farPlane);

    // apply our css positions
    this._applyWorldPositions();
};


/***
 Load our initial sources if needed and calls onReady callback
 ***/
Curtains.Plane.prototype._initSources = function() {
    // finally load every sources already in our plane html element
    // load plane sources
    if(this.autoloadSources) {
        // load images
        var imagesArray = [];
        for(var i = 0; i < this.htmlElement.getElementsByTagName("img").length; i++) {
            imagesArray.push(this.htmlElement.getElementsByTagName("img")[i]);
        }
        if(imagesArray.length > 0) {
            this.loadSources(imagesArray);
        }

        // load videos
        var videosArray = [];
        for(var i = 0; i < this.htmlElement.getElementsByTagName("video").length; i++) {
            videosArray.push(this.htmlElement.getElementsByTagName("video")[i]);
        }
        if(videosArray.length > 0) {
            this.loadSources(videosArray);
        }

        // load canvases
        var canvasesArray = [];
        for(var i = 0; i < this.htmlElement.getElementsByTagName("canvas").length; i++) {
            canvasesArray.push(this.htmlElement.getElementsByTagName("canvas")[i]);
        }
        if(canvasesArray.length > 0) {
            this.loadSources(canvasesArray);
        }

        this._loadingManager.initSourcesToLoad = imagesArray.length + videosArray.length + canvasesArray.length;
    }

    if(this._loadingManager.initSourcesToLoad === 0) {
        // onReady callback
        this._isPlaneReady();

        if(!this._curtains.productionMode) {
            // if there's no images, no videos, no canvas, send a warning
            console.warn("This plane does not contain any image, video or canvas element. You may want to add some later with the loadSource() or loadSources() method.");
        }
    }

    this._canDraw = true;

    // be sure we'll update the scene even if drawing is disabled
    this._curtains.needRender();

    // everything is ready, check if we should draw the plane
    if(!this.alwaysDraw) {
        this._shouldDrawCheck();
    }
};


/***
 Init our plane model view and projection matrices and set their uniform locations
 ***/
Curtains.Plane.prototype._initMatrices = function() {
    var gl = this._curtains.gl;

    // projection and model view matrix
    // create our modelview and projection matrix
    this._matrices = {
        mvMatrix: {
            name: "uMVMatrix",
            matrix: new Float32Array([
                1, 0, 0, 0,
                0, 1, 0, 0,
                0, 0, 1, 0,
                0, 0, 0, 1
            ]),
            location: gl.getUniformLocation(this._usedProgram.program, "uMVMatrix"),
        },
        pMatrix: {
            name: "uPMatrix",
            matrix: new Float32Array([
                1, 0, 0, 0,
                0, 1, 0, 0,
                0, 0, 1, 0,
                0, 0, 0, 1
            ]), // will be set after
            location: gl.getUniformLocation(this._usedProgram.program, "uPMatrix"),
        }
    };
};


/***
 Reset our plane transformation values and HTML element if specified (and valid)

 params :
 @htmlElement (HTML element, optionnal) : if provided, new HTML element to use as a reference for sizes and position syncing.
 ***/
Curtains.Plane.prototype.resetPlane = function(htmlElement) {
    this._initTransformValues();

    if(htmlElement !== null && !!htmlElement) {
        this.htmlElement = htmlElement;

        this.updatePosition();
    }
    else if(!htmlElement && !this._curtains.productionMode) {
        console.warn("You are trying to reset a plane with a HTML element that does not exist. The old HTML element will be kept instead.");
    }
};


/***
 Set our plane dimensions and positions relative to clip spaces
 ***/
Curtains.Plane.prototype._setWorldSizes = function() {
    var curtains = this._curtains;

    // dimensions and positions of our plane in the document and clip spaces
    // don't forget translations in webgl space are referring to the center of our plane and canvas
    var planeCenter = {
        x: (this._boundingRect.document.width / 2) + this._boundingRect.document.left,
        y: (this._boundingRect.document.height / 2) + this._boundingRect.document.top,
    };

    var curtainsCenter = {
        x: (curtains._boundingRect.width / 2) + curtains._boundingRect.left,
        y: (curtains._boundingRect.height / 2) + curtains._boundingRect.top,
    };

    // our plane clip space informations
    this._boundingRect.world = {
        width: this._boundingRect.document.width / curtains._boundingRect.width,
        height: this._boundingRect.document.height / curtains._boundingRect.height,
        top: (curtainsCenter.y - planeCenter.y) / curtains._boundingRect.height,
        left: (planeCenter.x - curtainsCenter.x) / curtains._boundingRect.height,
    };

    // since our vertices values range from -1 to 1
    // we need to scale them under the hood relatively to our canvas
    // to display an accurately sized plane
    this._boundingRect.world.scale = {
        x: (this._curtains._boundingRect.width / this._curtains._boundingRect.height) * this._boundingRect.world.width / 2,
        y: this._boundingRect.world.height / 2,
    };
};



/*** PLANES PERSPECTIVES, SCALES AND ROTATIONS ***/

/***
 This will set our perspective matrix and update our perspective matrix uniform
 used internally at each draw call if needed
 ***/
Curtains.Plane.prototype._setPerspectiveMatrix = function() {
    if(this._updatePerspectiveMatrix) {
        var aspect = this._curtains._boundingRect.width / this._curtains._boundingRect.height;

        var top = this._nearPlane * Math.tan((Math.PI / 180) * 0.5 * this._fov);
        var height = 2 * top;
        var width = aspect * height;
        var left = -0.5 * width;

        var right = left + width;
        var bottom = top - height;


        var x = 2 * this._nearPlane / (right - left);
        var y = 2 * this._nearPlane / (top - bottom);

        var a = (right + left) / (right - left);
        var b = (top + bottom) / (top - bottom);
        var c = -(this._farPlane + this._nearPlane) / (this._farPlane - this._nearPlane);
        var d = -2 * this._farPlane * this._nearPlane / (this._farPlane - this._nearPlane);

        this._matrices.pMatrix.matrix = new Float32Array([
            x, 0, 0, 0,
            0, y, 0, 0,
            a, b, c, -1,
            0, 0, d, 0
        ]);
    }

    // update our matrix uniform only if we share programs or if we actually have updated its values
    if(this.shareProgram || !this.shareProgram && this._updatePerspectiveMatrix) {
        this._curtains._useProgram(this._usedProgram);
        this._curtains.gl.uniformMatrix4fv(this._matrices.pMatrix.location, false, this._matrices.pMatrix.matrix);
    }

    this._updatePerspectiveMatrix = false;
};


/***
 This will set our perspective matrix new parameters (fov, near plane and far plane)
 used internally but can be used externally as well to change fov for example

 params :
 @fov (float): the field of view
 @near (float): the nearest point where object are displayed
 @far (float): the farthest point where object are displayed
 ***/
Curtains.Plane.prototype.setPerspective = function(fov, near, far) {
    var fieldOfView = isNaN(fov) ? this._fov : parseFloat(fov);

    // clamp between 1 and 179
    fieldOfView = Math.max(1, Math.min(fieldOfView, 179));

    if(fieldOfView !== this._fov) {
        this._fov = fieldOfView;
    }

    // update the camera position anyway
    this._cameraZPosition = Math.tan((Math.PI / 180) * 0.5 * this._fov) * 2.0;

    // corresponding CSS perspective property value depending on canvas size and fov values
    // based on https://stackoverflow.com/questions/22421439/convert-field-of-view-value-to-css3d-perspective-value
    this._CSSPerspective = Math.pow(Math.pow(this._curtains._boundingRect.width / (2 * this._curtains.pixelRatio), 2) + Math.pow(this._curtains._boundingRect.height / (2 * this._curtains.pixelRatio), 2), 0.5) / Math.tan((this._fov / 2) * Math.PI / 180);

    // near plane
    this._nearPlane = isNaN(near) ? this._nearPlane : parseFloat(near);
    this._nearPlane = Math.max(this._nearPlane, 0.01);

    // far plane
    this._farPlane = isNaN(far) ? this._farPlane : parseFloat(far);
    this._farPlane = Math.max(this._farPlane, 50);

    // update the plane perspective matrix
    this._updatePerspectiveMatrix = true;
    // update the mvMatrix as well cause we need to update z translation based on new fov
    this._updateMVMatrix = true;
};


/***
 This will set our model view matrix
 used internally at each draw call if needed
 It will calculate our matrix based on its plane translation, rotation and scale
 ***/
Curtains.Plane.prototype._setMVMatrix = function() {
    if(this._updateMVMatrix) {
        // translation
        // along the Z axis it's based on the relativeTranslation.z, CSSPerspective and cameraZPosition values
        // we're computing it here because it will change when our fov changes
        this._translation.z = this.relativeTranslation.z / this._CSSPerspective;
        var translation = {
            x: this._translation.x,
            y: this._translation.y,
            z: -((1 - this._translation.z) / this._cameraZPosition),
        };

        var adjustedOrigin = {
            x: this.transformOrigin.x * 2 - 1, // between -1 and 1
            y: -(this.transformOrigin.y * 2 - 1), // between -1 and 1
        };

        var origin = {
            x: adjustedOrigin.x * this._boundingRect.world.scale.x,
            y: adjustedOrigin.y * this._boundingRect.world.scale.y,
            z: this.transformOrigin.z
        };

        var matrixFromOrigin = this._curtains._composeMatrixFromOrigin(translation, this.quaternion, this.scale, origin);
        var scaleMatrix = new Float32Array([
            this._boundingRect.world.scale.x, 0.0, 0.0, 0.0,
            0.0, this._boundingRect.world.scale.y, 0.0, 0.0,
            0.0, 0.0, 1.0, 0.0,
            0.0, 0.0, 0.0, 1.0
        ]);

        this._matrices.mvMatrix.matrix = this._curtains._multiplyMatrix(matrixFromOrigin, scaleMatrix);

        // this is the result of our projection matrix * our mv matrix, useful for bounding box calculations and frustum culling
        this._matrices.mVPMatrix = this._curtains._multiplyMatrix(this._matrices.pMatrix.matrix, this._matrices.mvMatrix.matrix);

        // check if we should draw the plane but only if everything has been initialized
        if(!this.alwaysDraw) {
            this._shouldDrawCheck();
        }
    }

    // update our matrix uniform only if we share programs or if we actually have updated its values
    if(this.shareProgram || !this.shareProgram && this._updateMVMatrix) {
        this._curtains._useProgram(this._usedProgram);
        this._curtains.gl.uniformMatrix4fv(this._matrices.mvMatrix.location, false, this._matrices.mvMatrix.matrix);
    }

    // reset our flag
    this._updateMVMatrix = false;
};


/***
 This will set our plane scale
 used internally but can be used externally as well

 params :
 @scaleX (float): scale to apply on X axis
 @scaleY (float): scale to apply on Y axis
 ***/
Curtains.Plane.prototype.setScale = function(scaleX, scaleY) {
    scaleX = isNaN(scaleX) ? this.scale.x : parseFloat(scaleX);
    scaleY = isNaN(scaleY) ? this.scale.y : parseFloat(scaleY);

    scaleX = Math.max(scaleX, 0.001);
    scaleY = Math.max(scaleY, 0.001);

    // only apply if values changed
    if(scaleX !== this.scale.x || scaleY !== this.scale.y) {
        this.scale = {
            x: scaleX,
            y: scaleY
        };

        // adjust textures size
        for(var i = 0; i < this.textures.length; i++) {
            this.textures[i].resize();
        }

        // we should update the plane mvMatrix
        this._updateMVMatrix = true;
    }
};


/***
 This will set our plane rotation
 used internally but can be used externally as well

 params :
 @angleX (float): rotation to apply on X axis (in radians)
 @angleY (float): rotation to apply on Y axis (in radians)
 @angleZ (float): rotation to apply on Z axis (in radians)
 ***/
Curtains.Plane.prototype.setRotation = function(angleX, angleY, angleZ) {
    angleX = isNaN(angleX) ? this.rotation.x : parseFloat(angleX);
    angleY = isNaN(angleY) ? this.rotation.y : parseFloat(angleY);
    angleZ = isNaN(angleZ) ? this.rotation.z : parseFloat(angleZ);

    // only apply if values changed
    if(angleX !== this.rotation.x || angleY !== this.rotation.y || angleZ !== this.rotation.z) {
        this.rotation = {
            x: angleX,
            y: angleY,
            z: angleZ
        };

        this._setQuaternion();

        // we should update the plane mvMatrix
        this._updateMVMatrix = true;
    }
};


/***
 Sets our plane rotation quaternion using Euler angles and XYZ as axis order
 ***/
Curtains.Plane.prototype._setQuaternion = function() {
    var ax = this.rotation.x * 0.5;
    var ay = this.rotation.y * 0.5;
    var az = this.rotation.z * 0.5;

    var sinx = Math.sin(ax);
    var cosx = Math.cos(ax);
    var siny = Math.sin(ay);
    var cosy = Math.cos(ay);
    var sinz = Math.sin(az);
    var cosz = Math.cos(az);

    // XYZ order
    this.quaternion[0] = sinx * cosy * cosz + cosx * siny * sinz;
    this.quaternion[1] = cosx * siny * cosz - sinx * cosy * sinz;
    this.quaternion[2] = cosx * cosy * sinz + sinx * siny * cosz;
    this.quaternion[3] = cosx * cosy * cosz - sinx * siny * sinz;
};


/***
 This will set our plane transform origin
 (0, 0, 0) means plane's top left corner
 (1, 1, 0) means plane's bottom right corner
 (0.5, 0.5, -1) means behind plane's center

 params :
 @xOrigin (float): coordinate of transformation origin along width
 @yOrigin (float): coordinate of transformation origin along height
 @zOrigin (float): coordinate of transformation origin along depth
 ***/
Curtains.Plane.prototype.setTransformOrigin = function(xOrigin, yOrigin, zOrigin) {
    xOrigin = isNaN(xOrigin) ? this.transformOrigin.x : parseFloat(xOrigin);
    yOrigin = isNaN(yOrigin) ? this.transformOrigin.y : parseFloat(yOrigin);
    zOrigin = isNaN(zOrigin) ? this.transformOrigin.z : parseFloat(zOrigin);

    if(xOrigin !== this.transformOrigin.x || yOrigin !== this.transformOrigin.y || zOrigin !== this.transformOrigin.z) {
        this.transformOrigin = {
            x: xOrigin,
            y: yOrigin,
            z: zOrigin,
        };

        this._updateMVMatrix = true;
    }
};


/***
 This will set our plane translation by adding plane computed bounding box values and computed relative position values
 ***/
Curtains.Plane.prototype._setTranslation = function() {
    // avoid unnecessary calculations if we don't have a users set relative position
    var relativePosition = {
        x: 0,
        y: 0,
        z: 0,
    };
    if(this.relativeTranslation.x !== 0 || this.relativeTranslation.y !== 0 || this.relativeTranslation.z !== 0) {
        relativePosition = this._documentToLocalSpace(this.relativeTranslation.x, this.relativeTranslation.y);
    }

    this._translation.x = this._boundingRect.world.left + relativePosition.x;
    this._translation.y = this._boundingRect.world.top + relativePosition.y;

    // we should update the plane mvMatrix
    this._updateMVMatrix = true;
};


/***
 This function takes pixel values along X and Y axis and convert them to clip space coordinates, and then apply the corresponding translation

 params :
 @translationX (float): translation to apply on X axis
 @translationY (float): translation to apply on Y axis
 ***/
Curtains.Plane.prototype.setRelativePosition = function(translationX, translationY, translationZ) {
    translationX = isNaN(translationX) ? this.relativeTranslation.x : parseFloat(translationX);
    translationY = isNaN(translationY) ? this.relativeTranslation.y : parseFloat(translationY);
    translationZ = isNaN(translationZ) ? this.relativeTranslation.z : parseFloat(translationZ);

    // only apply if values changed
    if(translationX !== this.relativeTranslation.x || translationY !== this.relativeTranslation.y || translationZ !== this.relativeTranslation.z) {
        this.relativeTranslation = {
            x: translationX,
            y: translationY,
            z: translationZ,
        };

        this._setTranslation();
    }
};


/***
 This function takes pixel values along X and Y axis and convert them to clip space coordinates

 params :
 @xPosition (float): position to convert on X axis
 @yPosition (float): position to convert on Y axis

 returns :
 @relativePosition: plane's position in WebGL space
 ***/
Curtains.Plane.prototype._documentToLocalSpace = function(xPosition, yPosition) {
    var relativePosition = {
        x: xPosition / (this._curtains._boundingRect.width / this._curtains.pixelRatio) * (this._curtains._boundingRect.width / this._curtains._boundingRect.height),
        y: -yPosition / (this._curtains._boundingRect.height / this._curtains.pixelRatio),
    };

    return relativePosition;
};


/***
 This function checks if the plane is currently visible in the canvas and sets _shouldDraw property according to this test
 This checks DOM positions for now but we might want to improve it to use real frustum calculations
 ***/
Curtains.Plane.prototype._shouldDrawCheck = function() {
    // get plane bounding rect
    var actualPlaneBounds = this._getWebGLDrawRect();

    var self = this;

    // if we decide to draw the plane only when visible inside the canvas
    // we got to check if its actually inside the canvas
    if(
        Math.round(actualPlaneBounds.right) <= this._curtains._boundingRect.left
        || Math.round(actualPlaneBounds.left) >= this._curtains._boundingRect.left + this._curtains._boundingRect.width
        || Math.round(actualPlaneBounds.bottom) <= this._curtains._boundingRect.top
        || Math.round(actualPlaneBounds.top) >= this._curtains._boundingRect.top + this._curtains._boundingRect.height
    ) {
        if(this._shouldDraw) {
            this._shouldDraw = false;
            // callback for leaving view
            setTimeout(function() {
                if(self._onLeaveViewCallback) {
                    self._onLeaveViewCallback();
                }
            }, 0);
        }
    }
    else {
        if(!this._shouldDraw) {
            // callback for entering view
            setTimeout(function() {
                if(self._onReEnterViewCallback) {
                    self._onReEnterViewCallback();
                }
            }, 0);
        }
        this._shouldDraw = true;
    }
};


/***
 This function returns if the plane is actually drawn (ie fully initiated, visible property set to true and not culled)
 ***/
Curtains.Plane.prototype.isDrawn = function() {
    return this._canDraw && this.visible && (this._shouldDraw || this.alwaysDraw);
};


/***
 This function uses our plane HTML Element bounding rectangle values and convert them to the world clip space coordinates, and then apply the corresponding translation
 ***/
Curtains.Plane.prototype._applyWorldPositions = function() {
    // set our plane sizes and positions relative to the world clipspace
    this._setWorldSizes();

    // set the translation values
    this._setTranslation();
};


/***
 This function updates the plane position based on its CSS positions and transformations values.
 Useful if the HTML element has been moved while the container size has not changed.
 ***/
Curtains.Plane.prototype.updatePosition = function() {
    // set the new plane sizes and positions relative to document by triggering getBoundingClientRect()
    this._setDocumentSizes();

    // apply them
    this._applyWorldPositions();
};


/***
 This function updates the plane position based on the Curtains class scroll manager values
 ***/
Curtains.Plane.prototype.updateScrollPosition = function() {
    // actually update the plane position only if last X delta or last Y delta is not equal to 0
    if(this._curtains._scrollManager.lastXDelta || this._curtains._scrollManager.lastYDelta) {
        // set new positions based on our delta without triggering reflow
        this._boundingRect.document.top += this._curtains._scrollManager.lastYDelta * this._curtains.pixelRatio;
        this._boundingRect.document.left += this._curtains._scrollManager.lastXDelta * this._curtains.pixelRatio;

        // apply them
        this._applyWorldPositions();
    }
};


/***
 This function set/unset the depth test for that plane

 params :
 @shouldEnableDepthTest (bool): enable/disable depth test for that plane
 ***/
Curtains.Plane.prototype.enableDepthTest = function(shouldEnableDepthTest) {
    this._depthTest = shouldEnableDepthTest;
};


/***
 This function puts the plane at the end of the draw stack, allowing it to overlap any other plane
 ***/
Curtains.Plane.prototype.moveToFront = function() {
    // disable the depth test
    this.enableDepthTest(false);

    var drawType = this._transparent ? "transparent" : "opaque";
    var drawStack = this._curtains._drawStacks[drawType]["programs"]["program-" + this._usedProgram.id];
    for(var i = 0; i < drawStack.length; i++) {
        if(this.index === drawStack[i]) {
            drawStack.splice(i, 1);
        }
    }
    if(drawType === "transparent") {
        drawStack.unshift(this.index);
    }
    else {
        drawStack.push(this.index);
    }

    this._curtains._drawStacks[drawType]["programs"]["program-" + this._usedProgram.id] = drawStack;


    // update order array
    for(var i = 0; i < this._curtains._drawStacks[drawType]["order"].length; i++) {
        if(this._curtains._drawStacks[drawType]["order"][i] === this._usedProgram.id) {
            this._curtains._drawStacks[drawType]["order"].splice(i, 1);
        }
    }
    this._curtains._drawStacks[drawType]["order"].push(this._usedProgram.id);
};


/*** PLANE EVENTS ***/


/***
 This is called each time a plane is entering again the view bounding box

 params :
 @callback (function) : a function to execute

 returns :
 @this: our plane to handle chaining
 ***/
Curtains.Plane.prototype.onReEnterView = function(callback) {
    if(callback) {
        this._onReEnterViewCallback = callback;
    }

    return this;
};


/***
 This is called each time a plane is leaving the view bounding box

 params :
 @callback (function) : a function to execute

 returns :
 @this: our plane to handle chaining
 ***/
Curtains.Plane.prototype.onLeaveView = function(callback) {
    if(callback) {
        this._onLeaveViewCallback = callback;
    }

    return this;
};



/*** RENDERTARGET CLASS ***/

/***
 Here we create a render target

 params :
 @curtainWrapper : our curtain object that wraps all the planes
 @params (object, optionnal): additionnal params
 - plane (plane object, optionnal): the plane to attach this render target to. Set under the hood by shader passes
 - depth (bool, optionnal): whether the render target should use a depth buffer and handle depth

 returns :
 @this: our render target element
 ***/
Curtains.RenderTarget = function(curtainWrapper, params) {
    if(!params) params = {};
    this._curtains = curtainWrapper;

    this.index = this._curtains.renderTargets.length;
    this._type = "RenderTarget";

    this._shaderPass = params.shaderPass || null;

    // whether to create a render buffer
    this._depth = params.depth || false;

    this._shouldClear = params.clear;
    if(this._shouldClear === null || this._shouldClear === undefined) {
        this._shouldClear = true;
    }

    this._minSize = {
        width: params.minWidth || 1024 * this._curtains.pixelRatio,
        height: params.minHeight || 1024 * this._curtains.pixelRatio,
    };

    this.userData = {};

    this.uuid = this._curtains._generateUUID();

    this._curtains.renderTargets.push(this);

    this._initRenderTarget();
};



/***
 Init our RenderTarget by setting its size and creating a textures array
 ***/
Curtains.RenderTarget.prototype._initRenderTarget = function() {
    this._setSize();

    // create our render texture
    this.textures = [];

    // create our frame buffer
    this._createFrameBuffer();
};


/***
 Sets our RenderTarget size based on its parent plane size
 ***/
Curtains.RenderTarget.prototype._setSize = function() {
    if(this._shaderPass && this._shaderPass._isScenePass) {
        this._size = {
            width: this._curtains._boundingRect.width,
            height: this._curtains._boundingRect.height,
        };
    }
    else {
        this._size = {
            width: Math.max(this._minSize.width, this._curtains._boundingRect.width),
            height: Math.max(this._minSize.height, this._curtains._boundingRect.height),
        };
    }
};

/***
 Resizes our RenderTarget (basically only resize it if it's a ShaderPass scene pass FBO)
 ***/
Curtains.RenderTarget.prototype.resize = function() {
    // resize render target only if its a child of a shader pass
    if(this._shaderPass && this._shaderPass._isScenePass) {
        this._setSize();

        // cancel clear on resize
        this._curtains._bindFrameBuffer(this, true);

        if(this._depth) {
            this._bindDepthBuffer();
        }

        this._curtains._bindFrameBuffer(null);
    }
};


/***
 Binds our depth buffer
 ***/
Curtains.RenderTarget.prototype._bindDepthBuffer = function() {
    var gl = this._curtains.gl;

    // render to our target texture by binding the framebuffer
    if(this._depthBuffer) {
        gl.bindRenderbuffer(gl.RENDERBUFFER, this._depthBuffer);

        // allocate renderbuffer
        gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, this._size.width, this._size.height);

        // attach renderbuffer
        gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, this._depthBuffer);
    }
};


/***
 Here we create our FBO texture and assign it as our FBO attachment
 ***/
Curtains.RenderTarget.prototype._createFBOTexture = function() {
    var gl = this._curtains.gl;

    if(this.textures.length > 0) {
        // we're restoring context, re init the texture
        this.textures[0]._canDraw = false;
        this.textures[0]._init();
    }
    else {
        // attach the texture to the parent ShaderPass if it exists, to the render target otherwise
        var texture = new Curtains.Texture(this._shaderPass ? this._shaderPass : this, {
            index: this.textures.length,
            sampler: "uRenderTexture",
            isFBOTexture: true,
        });

        this.textures.push(texture);
    }

    // attach the texture as the first color attachment
    // this.textures[0]._sampler.texture contains our WebGLTexture object
    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.textures[0]._sampler.texture, 0);
};


/***
 Here we create our frame buffer object
 We're also adding a render buffer object to handle depth if needed
 ***/
Curtains.RenderTarget.prototype._createFrameBuffer = function() {
    var gl = this._curtains.gl;

    this._frameBuffer = gl.createFramebuffer();

    // cancel clear on init
    this._curtains._bindFrameBuffer(this, true);

    this._createFBOTexture();

    // create a depth renderbuffer
    if(this._depth) {
        this._depthBuffer = gl.createRenderbuffer();
        this._bindDepthBuffer();
    }

    this._curtains._bindFrameBuffer(null);
};


/***
 Restore a render target
 Used only for render targets that are not attached to shader passes
 Those attached to shader passes are restored inside the _restoreContext method of the ShaderPass class
 ***/
Curtains.RenderTarget.prototype._restoreContext = function() {
    if(!this._shaderPass || !this._shaderPass._isScenePass) {
        // if there's a _shaderPass attached it will be re-attached in the _shaderPass's restoreContext method anyway
        this._shaderPass = null;

        // recreate frame buffer
        this._createFrameBuffer();
    }
};


/***
 Remove a RenderTarget buffers
 ***/
Curtains.RenderTarget.prototype._dispose = function() {
    if(this._frameBuffer) {
        this._curtains.gl.deleteFramebuffer(this._frameBuffer);
        this._frameBuffer = null;
    }
    if(this._depthBuffer) {
        this._curtains.gl.deleteRenderbuffer(this._depthBuffer);
        this._depthBuffer = null;
    }

    this.textures[0]._dispose();
    this.textures = [];
};



/*** SHADERPASS CLASS ***/

/***
 Here we create our ShaderPass object (note that we are using the Curtains namespace to avoid polluting the global scope)
 It will inherits from ou BasePlane class that handles all the WebGL part
 ShaderPass class will handle the frame buffer

 params :
 @curtainWrapper : our curtain object that (we will use its container property and its size)
 @params (obj) : see addShaderPass method of the wrapper

 returns :
 @this: our ShaderPass element
 ***/
Curtains.ShaderPass = function(curtainWrapper, params) {
    if(!params) params = {};

    // force plane defintion to 1x1
    params.widthSegments = 1;
    params.heightSegments = 1;

    this._type = "ShaderPass";

    // default to scene pass
    this._isScenePass = true;

    // inherit
    Curtains.BasePlane.call(this, curtainWrapper, curtainWrapper.container, params);

    this.index = this._curtains.shaderPasses.length;

    this._depth = params.depth || false;

    this._shouldClear = params.clear;
    if(this._shouldClear === null || this._shouldClear === undefined) {
        this._shouldClear = true;
    }

    this.target = params.renderTarget || null;
    if(this.target) {
        // if there's a target defined it's not a scene pass
        this._isScenePass = false;
        // inherit clear param
        this._shouldClear = this.target._shouldClear;
    }

    // if the program is valid, go on
    if(this._usedProgram) {
        this._initShaderPassPlane();
    }
};
Curtains.ShaderPass.prototype = Object.create(Curtains.BasePlane.prototype);
Curtains.ShaderPass.prototype.constructor = Curtains.ShaderPass;


/***
 Here we init additionnal shader pass planes properties
 This mainly consists in creating our render texture and add a frame buffer object
 ***/
Curtains.ShaderPass.prototype._initShaderPassPlane = function() {
    // create our frame buffer
    if(!this.target) {
        this._createFrameBuffer();
    }
    else {
        // set the render target
        this.setRenderTarget(this.target);
        this.target._shaderPass = this;

        // copy the render target texture
        var texture = new Curtains.Texture(this, {
            index: this.textures.length,
            sampler: "uRenderTexture",
            isFBOTexture: true,
            fromTexture: this.target.textures[0],
        });

        this.textures.push(texture);
    }

    // onReady callback
    this._isPlaneReady();

    this._canDraw = true;

    // be sure we'll update the scene even if drawing is disabled
    this._curtains.needRender();
};


/***
 Here we override the parent _getDefaultVS method
 because shader passes vs don't have projection and model view matrices
 ***/
Curtains.ShaderPass.prototype._getDefaultVS = function(params) {
    return "precision mediump float;\nattribute vec3 aVertexPosition;attribute vec2 aTextureCoord;varying vec3 vVertexPosition;varying vec2 vTextureCoord;void main() {vTextureCoord = aTextureCoord;vVertexPosition = aVertexPosition;gl_Position = vec4(aVertexPosition, 1.0);}";
};


/***
 Here we override the parent _getDefaultFS method
 taht way we can still draw our render texture
 ***/
Curtains.ShaderPass.prototype._getDefaultFS = function(params) {
    return "precision mediump float;\nvarying vec3 vVertexPosition;varying vec2 vTextureCoord;uniform sampler2D uRenderTexture;void main( void ) {gl_FragColor = texture2D(uRenderTexture, vTextureCoord);}";
};


/***
 Here we create our frame buffer object
 We're also adding a render buffer object to handle depth inside our shader pass
 ***/
Curtains.ShaderPass.prototype._createFrameBuffer = function() {
    var target = new Curtains.RenderTarget(this._curtains, {
        shaderPass: this,
        clear: this._shouldClear,
        depth: this._depth,
    });
    this.setRenderTarget(target);

    // add the frame buffer texture to the shader pass texture array
    this.textures.push(this.target.textures[0]);
};



/*** TEXTURE CLASS ***/

/***
 Here we create our Texture object (note that we are using the Curtains namespace to avoid polluting the global scope)

 params:
 @parent (Plane, ShaderPass or RenderTarget object): the parent object using that texture
 @params (obj): see createTexture method of the Plane

 returns:
 @this: our newly created texture object
 ***/
Curtains.Texture = function(parent, params) {
    // set up base properties
    this._parent = parent;
    this._curtains = parent._curtains;

    this.uuid = this._curtains._generateUUID();

    if(!parent._usedProgram && !params.isFBOTexture) {
        if(!this._curtains.productionMode) {
            console.warn("Unable to create the texture because the program is not valid");
        }

        return;
    }

    this.index = parent.textures.length;

    // prepare texture sampler
    this._sampler = {
        isActive: false,
        name: params.sampler || "uSampler" + this.index
    };

    // we will always declare a texture matrix
    this._textureMatrix = {
        name: params.sampler ? params.sampler + "Matrix" : "uTextureMatrix" + this.index,
        matrix: null,
    };

    // _willUpdate and shouldUpdate property are set to false by default
    // we will handle that in the setSource() method for videos and canvases
    this._willUpdate = false;
    this.shouldUpdate = false;

    // if we need to force a texture update
    this._forceUpdate = false;

    this.scale = {
        x: 1,
        y: 1,
    };

    // custom user properties
    this.userData = {};

    // is it a frame buffer object texture?
    // if it's not, type will change when the source will be loaded
    this.type = params.isFBOTexture ? "fboTexture" : "empty";

    // useful flag to avoid binding texture that does not belong to current context
    this._canDraw = false;

    // is it set from an existing texture?
    if(params.fromTexture) {
        this._initFromTexture = true;

        // set sampler loation if needed
        if(this._parent._usedProgram) {
            // set our texture sampler uniform
            this._setTextureUniforms();
        }

        // copy from the original texture
        this.setFromTexture(params.fromTexture);
        // we're done!
        return;
    }

    this._initFromTexture = false;

    // init our texture
    this._init();

    return this;
};


/***
 Init our texture object
 ***/
Curtains.Texture.prototype._init = function() {
    var gl = this._curtains.gl;

    // create our WebGL texture
    this._sampler.texture = gl.createTexture();

    // texImage2D properties
    this._internalFormat = gl.RGBA;
    this._format = gl.RGBA;
    this._textureType = gl.UNSIGNED_BYTE;

    // set texture parameters once
    this._texParameters = false;

    this._flipY = false;

    // bind the texture the target (TEXTURE_2D) of the active texture unit.
    gl.bindTexture(gl.TEXTURE_2D, this._sampler.texture);

    // we don't use Y flip yet
    if(this._curtains._glState.flipY) {
        this._curtains._glState.flipY = this._flipY;
        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, this._flipY);
    }

    gl.pixelStorei(gl.UNPACK_ALIGNMENT, 4);
    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);

    // if the parent has a program it means its not a render target texture
    if(this._parent._usedProgram) {
        // set its size based on parent element size
        this._size = {
            width: this._parent._boundingRect.document.width,
            height: this._parent._boundingRect.document.height,
        };

        // set uniform
        this._setTextureUniforms();

        // its a plane texture
        if(this.type === "empty") {
            // draw a black plane before the real texture's content has been loaded
            gl.texImage2D(gl.TEXTURE_2D, 0, this._internalFormat, 1, 1, 0, this._format, this._textureType, new Uint8Array([0, 0, 0, 255]));

            // our texture source hasn't been loaded yet
            this._sourceLoaded = false;
        }
        else if(!this.source) {
            // get a texture matrix even if it fits the viewport
            var sizes = this._getSizes();

            // always update texture matrix anyway
            this._updateTextureMatrix(sizes);
        }
    }
    else {
        // its a render target texture, it has no uniform location and no texture matrix
        this._size = {
            width: this._parent._size.width || this._curtains._boundingRect.width,
            height: this._parent._size.height || this._curtains._boundingRect.height,
        };
    }

    // if its a render target texture use nearest filters and half float whenever possible
    if(this.type === "fboTexture") {
        // update texImage2D properties
        if(this._curtains._isWebGL2 && this._curtains._extensions['EXT_color_buffer_float']) {
            this._internalFormat = gl.RGBA16F;
            this._textureType = gl.HALF_FLOAT;
        }
        else if(this._curtains._extensions['OES_texture_half_float']) {
            this._textureType = this._curtains._extensions['OES_texture_half_float'].HALF_FLOAT_OES;
        }

        // define its size
        gl.texImage2D(gl.TEXTURE_2D, 0, this._internalFormat, this._size.width, this._size.height, 0, this._format, this._textureType, null);

        // set texture parameters
        this._setMipmaps();
    }

    this._canDraw = true;
};


/*** SEND DATA TO THE GPU ***/

/***
 Check if our textures is effectively used in our shaders
 If so, set it to active, get its uniform locations and bind it to our texture unit
 ***/
Curtains.Texture.prototype._setTextureUniforms = function() {
    // check if our texture is used in our program shaders
    // if so, get its uniform locations and bind it to our program
    for(var i = 0; i < this._parent._activeTextures.length; i++) {
        if(this._parent._activeTextures[i].name === this._sampler.name) {
            // this texture is active
            this._sampler.isActive = true;

            // set our texture sampler uniform
            this._sampler.location = this._curtains.gl.getUniformLocation(this._parent._usedProgram.program, this._sampler.name);
            // texture matrix uniform
            this._textureMatrix.location = this._curtains.gl.getUniformLocation(this._parent._usedProgram.program, this._textureMatrix.name);

            // use the program and get our sampler and texture matrices uniforms
            this._curtains._useProgram(this._parent._usedProgram);

            // tell the shader we bound the texture to our indexed texture unit
            this._curtains.gl.uniform1i(this._sampler.location, this.index);
        }
    }
};


/*** LOADING SOURCES ***/


/***
 This applies an already existing Texture object to our texture

 params:
 @texture (Texture): texture to set from
 ***/
Curtains.Texture.prototype.setFromTexture = function(texture) {
    if(texture) {
        this.type = texture.type;
        this._sampler.texture = texture._sampler.texture;

        this.source = texture.source;
        this._size = texture._size;
        this._sourceLoaded = texture._sourceLoaded;

        this._internalFormat = texture._internalFormat;
        this._format = texture._format;
        this._textureType = texture._textureType;

        this._texParameters = texture._texParameters;

        this._originalTexture = texture;

        // update its texture matrix if needed and we're good to go!
        if(this._parent._usedProgram && (!this._canDraw || !this._textureMatrix.matrix)) {
            var sizes = this._getSizes();

            // always update texture matrix anyway
            this._updateTextureMatrix(sizes);

            this._canDraw = true;
        }
    }
    else if(!this._curtains.productionMode) {
        console.warn("Unable to set the texture from texture:", texture);
    }
};

/***
 This uses our source as texture

 params:
 @source (images/video/canvas): either an image, a video or a canvas
 ***/
Curtains.Texture.prototype.setSource = function(source) {
    // if our program hasn't been validated we can't set a texture source
    if(!this._parent._usedProgram) {
        if(!this._curtains.productionMode) {
            console.warn("Unable to set the texture source because the program is not valid");
        }

        return;
    }

    this.source = source;

    if(this.type === "empty") {
        if(source.tagName.toUpperCase() === "IMG") {
            this.type = "image";
        }
        else if(source.tagName.toUpperCase() === "VIDEO") {
            this.type = "video";
            // a video should be updated by default
            // _willUpdate property will be set to true if the video has data to draw
            this.shouldUpdate = true;
        }
        else if(source.tagName.toUpperCase() === "CANVAS") {
            this.type = "canvas";
            // a canvas could change each frame so we need to update it by default
            this._willUpdate = true;
            this.shouldUpdate = true;
        }
        else if(!this._curtains.productionMode) {
            console.warn("this HTML tag could not be converted into a texture:", source.tagName);
        }
    }

    this._size = {
        width: this.source.naturalWidth || this.source.width || this.source.videoWidth,
        height: this.source.naturalHeight || this.source.height || this.source.videoHeight,
    };

    // our source is loaded now
    this._sourceLoaded = true;

    var gl = this._curtains.gl;

    // Bind the texture the target (TEXTURE_2D) of the active texture unit.
    gl.activeTexture(gl.TEXTURE0 + this.index);
    gl.bindTexture(gl.TEXTURE_2D, this._sampler.texture);

    // maybe we should handle alpha premultiplying separately for each texture
    // for now we just use our gl context premultipliedAlpha value
    if(this._curtains.premultipliedAlpha) {
        gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
    }

    this._flipY = true;
    if(!this._curtains._glState.flipY) {
        this._curtains._glState.flipY = this._flipY;
        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, this._flipY);
    }

    this.resize();

    // set our webgl texture only if it is an image
    // canvas and video textures will be updated anyway in the rendering loop
    // thanks to the shouldUpdate and _willUpdate flags
    if(this.type === "image") {
        gl.texImage2D(gl.TEXTURE_2D, 0, this._internalFormat, this._format, this._textureType, source);
        // set texture parameters
        this._setMipmaps();
    }

    // update scene
    this._curtains.needRender();
};


/***
 Sets the texture parameters
 Always clamp to edge
 Generates mipmapping for images in WebGL2 context
 ***/
Curtains.Texture.prototype._setMipmaps = function() {
    var gl = this._curtains.gl;

    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);
    // generate mip map only for images
    if(this._curtains._isWebGL2 && this.type === "image") {
        gl.generateMipmap(gl.TEXTURE_2D);
        // improve quality of scaled down images
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
    }
    else {
        // Set the parameters so we can render any size image.
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    }

    this._texParameters = true;
};


/***
 This forces a texture to be updated on the next draw call
 ***/
Curtains.Texture.prototype.needUpdate = function() {
    this._forceUpdate = true;
};


/***
 This updates our texture
 Called inside our drawing loop if shouldUpdate property is set to true
 Typically used by videos or canvas
 ***/
Curtains.Texture.prototype._update = function() {
    var gl = this._curtains.gl;

    if(this.source) {
        gl.texImage2D(gl.TEXTURE_2D, 0, this._internalFormat, this._format, this._textureType, this.source);

        if(!this._texParameters) {
            this._setMipmaps();
        }
    }
    else {
        gl.texImage2D(gl.TEXTURE_2D, 0, this._internalFormat, this._size.width, this._size.height, 0, this._format, this._textureType, this.source);
    }
};


/*** TEXTURE SIZINGS ***/


/***
 This is used to calculate how to crop/center an texture

 returns:
 @sizes (obj): an object containing plane sizes, source sizes and x and y offset to center the source in the plane
 ***/
Curtains.Texture.prototype._getSizes = function() {
    // remember our ShaderPass objects don't have a scale property
    var scale = this._parent.scale ? this._parent.scale : {x: 1, y: 1};

    var parentWidth  = this._parent._boundingRect.document.width * scale.x;
    var parentHeight = this._parent._boundingRect.document.height * scale.y;

    var sourceWidth = this._size.width;
    var sourceHeight = this._size.height;

    var sourceRatio = sourceWidth / sourceHeight;
    var parentRatio = parentWidth / parentHeight;

    // center image in its container
    var xOffset = 0;
    var yOffset = 0;

    if(parentRatio > sourceRatio) { // means parent is larger
        yOffset = Math.min(0, parentHeight - (parentWidth * (1 / sourceRatio)));
    }
    else if(parentRatio < sourceRatio) { // means parent is taller
        xOffset = Math.min(0, parentWidth - (parentHeight * sourceRatio));
    }

    return {
        parentWidth: parentWidth,
        parentHeight: parentHeight,
        sourceWidth: sourceWidth,
        sourceHeight: sourceHeight,
        xOffset: xOffset,
        yOffset: yOffset,
    };
};


/***
 Set the texture scale and then update its matrix

 params:
 @scaleX (float): scale to apply on X axis
 @scaleY (float): scale to apply on Y axis
 ***/
Curtains.Texture.prototype.setScale = function(scaleX, scaleY) {
    scaleX = isNaN(scaleX) ? this.scale.x : parseFloat(scaleX);
    scaleY = isNaN(scaleY) ? this.scale.y : parseFloat(scaleY);

    scaleX = Math.max(scaleX, 0.001);
    scaleY = Math.max(scaleY, 0.001);

    if(scaleX !== this.scale.x || scaleY !== this.scale.y) {
        this.scale = {
            x: scaleX,
            y: scaleY,
        };

        this.resize();
    }
};


/***
 This is used to crop/center a texture
 If the texture is using texture matrix then we just have to update its matrix
 If it is a render pass texture we also upload the texture with its new size on the GPU
 ***/
Curtains.Texture.prototype.resize = function() {
    if(this.type === "fboTexture") {
        var gl = this._curtains.gl;

        this._size = {
            width: this._parent._boundingRect.document.width,
            height: this._parent._boundingRect.document.height,
        };

        // if its not a texture set from another texture
        if(!this._originalTexture) {
            gl.bindTexture(gl.TEXTURE_2D, this._parent.textures[0]._sampler.texture);
            gl.texImage2D(gl.TEXTURE_2D, 0, this._internalFormat, this._size.width, this._size.height, 0, this._format, this._textureType, this.source);
        }
    }
    else if(this.source) {
        // reset texture sizes (useful for canvas because their dimensions might change on resize)
        this._size = {
            width: this.source.naturalWidth || this.source.width || this.source.videoWidth,
            height: this.source.naturalHeight || this.source.height || this.source.videoHeight,
        };
    }

    // if we need to update the texture matrix uniform
    if(this._parent._usedProgram) {
        // no point in resizing texture if it does not have a source yet
        var sizes = this._getSizes();

        // always update texture matrix anyway
        this._updateTextureMatrix(sizes);
    }
};

/***
 This updates our textures matrix uniform based on plane and sources sizes

 params:
 @sizes (object): object containing plane sizes, source sizes and x and y offset to center the source in the plane
 ***/
Curtains.Texture.prototype._updateTextureMatrix = function(sizes) {
    // calculate scale to apply to the matrix
    var texScale = {
        x: sizes.parentWidth / (sizes.parentWidth - sizes.xOffset),
        y: sizes.parentHeight / (sizes.parentHeight - sizes.yOffset),
    };

    // apply texture scale
    texScale.x /= this.scale.x;
    texScale.y /= this.scale.y;

    // translate texture to center it
    var textureTranslation = new Float32Array([
        1.0, 0.0, 0.0, 0.0,
        0.0, 1.0, 0.0, 0.0,
        0.0, 0.0, 1.0, 0.0,
        (1 - texScale.x) / 2, (1 - texScale.y) / 2, 0.0, 1.0
    ]);

    // scale texture
    this._textureMatrix.matrix = this._curtains._scaleMatrix(
        textureTranslation,
        texScale.x,
        texScale.y,
        1
    );

    // update the texture matrix uniform
    this._curtains._useProgram(this._parent._usedProgram);
    this._curtains.gl.uniformMatrix4fv(this._textureMatrix.location, false, this._textureMatrix.matrix);
};


/***
 This calls our loading callback and set our media as texture source
 ***/
Curtains.Texture.prototype._onSourceLoaded = function(source) {
    // increment our loading manager
    this._parent._loadingManager.sourcesLoaded++;

    // fire callback during load (useful for a loader)
    var self = this;
    if(!this._sourceLoaded) {
        setTimeout(function() {
            if(self._parent._onPlaneLoadingCallback) {
                self._parent._onPlaneLoadingCallback(self);
            }
        }, 0);
    }

    // set the media as our texture source
    this.setSource(source);

    // fire parent plane onReady callback if needed
    this._parent._isPlaneReady();

    // add to the cache if needed
    if(this.type === "image") {
        var shouldCache = true;
        for(var i = 0; i < this._curtains._imageCache.length; i++) {
            if(this._curtains._imageCache[i].source && this._curtains._imageCache[i].source.src === source.src) {
                shouldCache = false;
            }
        }

        if(shouldCache) {
            this._curtains._imageCache.push(this);
        }
    }
};


/***
 This handles our canplaythrough data event, then handles source loaded
 ***/
Curtains.Texture.prototype._onVideoLoadedData = function(video) {
    // check if we have not already loaded the source to avoid calling loading callback twice
    if(!this._sourceLoaded) {
        this._onSourceLoaded(video);
    }
};


/***
 This is called to draw the texture
 ***/
Curtains.Texture.prototype._drawTexture = function() {
    // only draw if the texture is active (used in the shader)
    if(this._sampler.isActive) {
        // bind the texture
        this._parent._bindPlaneTexture(this);

        // force flip y for textures that needs it
        if(this._flipY && !this._curtains._glState.flipY) {
            this._curtains._glState.flipY = this._flipY;
            this._curtains.gl.pixelStorei(this._curtains.gl.UNPACK_FLIP_Y_WEBGL, this._flipY);
        }

        // check if the video is actually really playing
        if(this.type === "video" && this.source && this.source.readyState >= this.source.HAVE_CURRENT_DATA) {
            this._willUpdate = true;
        }

        if(this._forceUpdate || (this._willUpdate && this.shouldUpdate)) {
            this._update();
        }

        // reset the video willUpdate flag
        if(this.type === "video") {
            this._willUpdate = false;
        }

        this._forceUpdate = false;
    }
};


/***
 Restore a WebGL texture that is a copy
 Depending on whether it's a copy from start or not, just reset its uniforms or run the full init
 And finally copy our original texture back again
 ***/
Curtains.Texture.prototype._restoreFromTexture = function() {
    if(this._initFromTexture) {
        this._setTextureUniforms();
    }
    else {
        this._init();
    }

    this.setFromTexture(this._originalTexture);
};


/***
 Restore our WebGL texture
 If it is an original texture, just re run the init function and eventually reset its source
 If it is a texture set from another texture, wait for the original texture to be ready first
 ***/
Curtains.Texture.prototype._restoreContext = function() {
    // avoid binding that texture before reseting it
    this._canDraw = false;
    this._sampler.isActive = false;

    // this is an original texture, reset it right away
    if(!this._originalTexture) {
        this._init();

        if(this.source) {
            // cache again if it is an image
            if(this.type === "image") {
                this._curtains._imageCache.push(this);
            }

            this.setSource(this.source);
            // force update
            this.needUpdate();
        }
    }
    else {
        // here we will have to wait for the original texture to be ready before resetting our copy
        var self = this;

        // original texture is not ready yet, wait for it!
        if(!this._originalTexture._canDraw) {
            var textureReadyInterval = setInterval(function() {
                if(self._originalTexture._canDraw) {
                    self._restoreFromTexture();
                    clearInterval(textureReadyInterval);
                }
            }, 16);
        }
        else {
            // original texture has been resetted already, wait a tick and restore this one
            setTimeout(function() {
                self._restoreFromTexture();
            }, 0);
        }
    }
};


/***
 This is used to destroy a texture and free the memory space
 Usually used on a plane/shader pass/render target removal
 ***/
Curtains.Texture.prototype._dispose = function() {
    if(this.type === "video") {
        // remove event listeners
        this.source.removeEventListener("canplaythrough", this._onSourceLoadedHandler, false);
        this.source.removeEventListener("error", this._parent._sourceLoadError, false);

        // empty source to properly delete video element and free the memory
        this.source.pause();
        this.source.removeAttribute("src");
        this.source.load();

        // clear source
        this.source = null;
    }
    else if(this.type === "canvas") {
        // clear all canvas states
        this.source.width = this.source.width;

        // clear source
        this.source = null;
    }
    else if(this.type === "image" && this._curtains._isDestroying) {
        // delete image only if we're destroying the context (keep in cache otherwise)
        this.source.removeEventListener("load", this._onSourceLoadedHandler, false);
        this.source.removeEventListener("error", this._parent._sourceLoadError, false);

        // clear source
        this.source = null;
    }

    var gl = this._curtains.gl;

    // do not delete original texture if this texture is a copy, or image texture if we're not destroying the context
    var shouldDelete = gl && !this._originalTexture && (this.type !== "image" || this._curtains._isDestroying);
    if(shouldDelete) {
        gl.activeTexture(gl.TEXTURE0 + this.index);
        gl.bindTexture(gl.TEXTURE_2D, null);
        gl.deleteTexture(this._sampler.texture);
    }

    // decrease textures loaded
    this._parent._loadingManager && this._parent._loadingManager.sourcesLoaded--;
};
Name	Size	Permission	Action
curtains.js	172281 bytes	0644
curtains.min.js	71246 bytes	0644
File Content: curtains.js

File Content: `curtains.js`
