# src/pixi/renderers/WebGLRenderer.js - Pixi.JS

#

API Docs for: 1.0.0
Show: Inherited Protected Private Deprecated

# File: src/pixi/renderers/WebGLRenderer.js

    /**
     * @author Mat Groves http://matgroves.com/ @Doormat23
     */

    PIXI._defaultFrame = new PIXI.Rectangle(0,0,1,1);

    // an instance of the gl context..
    // only one at the moment :/
    PIXI.gl;

    /**
     * the WebGLRenderer is draws the stage and all its content onto a webGL enabled canvas. This renderer should be used for browsers support webGL. This Render works by automatically managing webGLBatchs. So no need for Sprite Batch's or Sprite Cloud's
     * Dont forget to add the view to your DOM or you will not see anything :)
     * @class WebGLRenderer
     * @constructor
     * @param width {Number} the width of the canvas view
     * @default 0
     * @param height {Number} the height of the canvas view
     * @default 0
     * @param view {Canvas} the canvas to use as a view, optional
     * @param transparent {Boolean} the transparency of the render view, default false
     * @default false
     *
     */
    PIXI.WebGLRenderer = function(width, height, view, transparent)
    {
    	// do a catch.. only 1 webGL renderer..

    	//console.log(transparent)
    	this.transparent = !!transparent;

    	this.width = width || 800;
    	this.height = height || 600;

    	this.view = view || document.createElement( 'canvas' );
        this.view.width = this.width;
    	this.view.height = this.height;

    	// deal with losing context..
        var scope = this;
    	this.view.addEventListener('webglcontextlost', function(event) { scope.handleContextLost(event); }, false)
    	this.view.addEventListener('webglcontextrestored', function(event) { scope.handleContextRestored(event); }, false)

    	this.batchs = [];

    	try
     	{
            PIXI.gl = this.gl = this.view.getContext("experimental-webgl",  {
        		 alpha: this.transparent,
        		 antialias:false, // SPEED UP??
        		 premultipliedAlpha:true
            });
        }
        catch (e)
        {
        	throw new Error(" This browser does not support webGL. Try using the canvas renderer" + this);
        }

        this.initShaders();

        var gl = this.gl;
        PIXI.WebGLRenderer.gl = gl;

        this.batch = new PIXI.WebGLBatch(gl);
       	gl.disable(gl.DEPTH_TEST);
       	gl.disable(gl.CULL_FACE);
        gl.enable(gl.BLEND);
        gl.colorMask(true, true, true, this.transparent);

        this.projectionMatrix =  PIXI.mat4.create();
        this.resize(this.width, this.height);
        this.contextLost = false;

        this.stageRenderGroup = new PIXI.WebGLRenderGroup(this.gl);
    }

    // constructor
    PIXI.WebGLRenderer.constructor = PIXI.WebGLRenderer;

    /**
     * @private
     */
    PIXI.WebGLRenderer.getBatch = function()
    {
    	if(PIXI._batchs.length == 0)
    	{
    		return new PIXI.WebGLBatch(PIXI.WebGLRenderer.gl);
    	}
    	else
    	{
    		return PIXI._batchs.pop();
    	}
    }

    /**
     * @private
     */
    PIXI.WebGLRenderer.returnBatch = function(batch)
    {
    	batch.clean();
    	PIXI._batchs.push(batch);
    }

    /**
     * @private
     */
    PIXI.WebGLRenderer.prototype.initShaders = function()
    {
    	var gl = this.gl;
    	var fragmentShader = PIXI.CompileFragmentShader(gl, PIXI.shaderFragmentSrc);
    	var vertexShader = PIXI.CompileVertexShader(gl, PIXI.shaderVertexSrc);

    	PIXI.shaderProgram = gl.createProgram();

    	var shaderProgram = PIXI.shaderProgram;

        gl.attachShader(shaderProgram, vertexShader);
        gl.attachShader(shaderProgram, fragmentShader);
        gl.linkProgram(shaderProgram);

        if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
            alert("Could not initialise shaders");
        }

        gl.useProgram(shaderProgram);

        shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
        gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);

        shaderProgram.textureCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextureCoord");
        gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute);

    	shaderProgram.colorAttribute = gl.getAttribLocation(shaderProgram, "aColor");
        gl.enableVertexAttribArray(shaderProgram.colorAttribute);

        shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
        shaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, "uSampler");
    }

    /**
     * Renders the stage to its webGL view
     * @method render
     * @param stage {Stage} the PIXI.Stage element to be rendered
     */
    PIXI.WebGLRenderer.prototype.render = function(stage)
    {
    	if(this.contextLost)return;

    	// if rendering a new stage clear the batchs..
    	if(this.__stage !== stage)
    	{
    		// TODO make this work
    		// dont think this is needed any more?
    		//if(this.__stage)this.checkVisibility(this.__stage, false)

    		this.__stage = stage;
    		this.stageRenderGroup.setRenderable(stage);
    	}

    	// TODO not needed now...
    	// update children if need be
    	// best to remove first!
    	/*for (var i=0; i < stage.__childrenRemoved.length; i++)
    	{
    		var group = stage.__childrenRemoved[i].__renderGroup
    		if(group)group.removeDisplayObject(stage.__childrenRemoved[i]);
    	}*/

    	// update any textures
    	PIXI.WebGLRenderer.updateTextures();

    	// recursivly loop through all items!
    	//this.checkVisibility(stage, true);

    	// update the scene graph
    	stage.updateTransform();

    	var gl = this.gl;

    	// -- Does this need to be set every frame? -- //
    	gl.colorMask(true, true, true, this.transparent);
    	gl.viewport(0, 0, this.width, this.height);

    	// set the correct matrix..
       // gl.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform, false, this.projectionMatrix);

       	gl.bindFramebuffer(gl.FRAMEBUFFER, null);

    	gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], this.transparent);
    	gl.clear(gl.COLOR_BUFFER_BIT);

    	this.stageRenderGroup.backgroundColor = stage.backgroundColorSplit;
    	this.stageRenderGroup.render(this.projectionMatrix);

    	// interaction
    	// run interaction!
    	if(stage.interactive)
    	{
    		//need to add some events!
    		if(!stage._interactiveEventsAdded)
    		{
    			stage._interactiveEventsAdded = true;
    			stage.interactionManager.setTarget(this);
    		}
    	}

    	// after rendering lets confirm all frames that have been uodated..
    	if(PIXI.Texture.frameUpdates.length > 0)
    	{
    		for (var i=0; i < PIXI.Texture.frameUpdates.length; i++)
    		{
    		  	PIXI.Texture.frameUpdates[i].updateFrame = false;
    		};

    		PIXI.Texture.frameUpdates = [];
    	}
    }

    /**
     * @private
     */

    PIXI.WebGLRenderer.updateTextures = function()
    {
    	for (var i=0; i < PIXI.texturesToUpdate.length; i++) this.updateTexture(PIXI.texturesToUpdate[i]);
    	for (var i=0; i < PIXI.texturesToDestroy.length; i++) this.destroyTexture(PIXI.texturesToDestroy[i]);
    	PIXI.texturesToUpdate = [];
    	PIXI.texturesToDestroy = [];
    }

    PIXI.WebGLRenderer.updateTexture = function(texture)
    {
    	var gl = PIXI.gl;

    	if(!texture._glTexture)
    	{
    		texture._glTexture = gl.createTexture();
    	}

    	if(texture.hasLoaded)
    	{
    		gl.bindTexture(gl.TEXTURE_2D, texture._glTexture);
    	 	gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);

    		gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source);
    		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
    		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);

    		// reguler...

    		if(!texture._powerOf2)
    		{
    			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);
    		}
    		else
    		{
    			gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
    			gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
    		}

    		gl.bindTexture(gl.TEXTURE_2D, null);
    	}

    }

    PIXI.WebGLRenderer.prototype.destroyTexture = function(texture)
    {
    	var gl = this.gl;

    	if(texture._glTexture)
    	{
    		texture._glTexture = gl.createTexture();
    		gl.deleteTexture(gl.TEXTURE_2D, texture._glTexture);
    	}
    }

    /**
     * resizes the webGL view to the specified width and height
     * @method resize
     * @param width {Number} the new width of the webGL view
     * @param height {Number} the new height of the webGL view
     */
    PIXI.WebGLRenderer.prototype.resize = function(width, height)
    {
    	this.width = width;
    	this.height = height;

    	this.view.width = width;
    	this.view.height = height;

    	this.gl.viewport(0, 0, this.width, this.height);

    	var projectionMatrix = this.projectionMatrix;

    	projectionMatrix[0] = 2/this.width;
    	projectionMatrix[5] = -2/this.height;
    	projectionMatrix[12] = -1;
    	projectionMatrix[13] = 1;
    }

    /**
     * @private
     */
    PIXI.WebGLRenderer.prototype.handleContextLost = function(event)
    {
    	event.preventDefault();
    	this.contextLost = true;
    }

    /**
     * @private
     */
    PIXI.WebGLRenderer.prototype.handleContextRestored = function(event)
    {
    	this.gl = this.view.getContext("experimental-webgl",  {
    		alpha: true
        });

    	this.initShaders();

    	for (var i=0; i < PIXI.TextureCache.length; i++)
    	{
    		this.updateTexture(PIXI.TextureCache[i]);
    	};

    	for (var i=0; i <  this.batchs.length; i++)
    	{
    		this.batchs[i].restoreLostContext(this.gl)//
    		this.batchs[i].dirty = true;
    	};

    	PIXI._restoreBatchs(this.gl);

    	this.contextLost = false;
    }