pixi.js/docs/files/src_pixi_renderers_webgl_WebGLRenderer.js.html at c6e6f7458e92941daf45cd7a3be5fa47c142f591

Fork: 0
mark / pixi.js
Find file
Newer
Older
pixi.js / docs / files / src_pixi_renderers_webgl_WebGLRenderer.js.html
Mat Groves on 24 Jun 2013 14 KB WebGL Render Bug Fix
Raw Blame History
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>src&#x2F;pixi&#x2F;renderers&#x2F;webgl&#x2F;WebGLRenderer.js - Pixi.JS</title>
    <link rel="stylesheet" href="http:&#x2F;&#x2F;yui.yahooapis.com&#x2F;3.8.0&#x2F;build&#x2F;cssgrids&#x2F;cssgrids-min.css">
    <link rel="stylesheet" href="..&#x2F;assets/vendor/prettify/prettify-min.css">
    <link rel="stylesheet" href="..&#x2F;assets/css/main.css" id="site_styles">
    <link rel="shortcut icon" type="image/png" href="..&#x2F;assets/favicon.png">
    <script src="http:&#x2F;&#x2F;yui.yahooapis.com&#x2F;combo?3.8.0&#x2F;build&#x2F;yui&#x2F;yui-min.js"></script>
</head>
<body class="yui3-skin-sam">

<div id="doc">
    <div id="hd" class="yui3-g header">
        <div class="yui3-u-3-4">
            
                <h1><img src="http:&#x2F;&#x2F;www.goodboydigital.com&#x2F;pixijs&#x2F;logo_small.png" title="Pixi.JS"></h1>
            
        </div>
        <div class="yui3-u-1-4 version">
            <em>API Docs for: 1.3.0</em>
        </div>
    </div>
    <div id="bd" class="yui3-g">

        <div class="yui3-u-1-4">
            <div id="docs-sidebar" class="sidebar apidocs">
                <div id="api-list">
    <h2 class="off-left">APIs</h2>
    <div id="api-tabview" class="tabview">
        <ul class="tabs">
            <li><a href="#api-classes">Classes</a></li>
            <li><a href="#api-modules">Modules</a></li>
        </ul>

        <div id="api-tabview-filter">
            <input type="search" id="api-filter" placeholder="Type to filter APIs">
        </div>

        <div id="api-tabview-panel">
            <ul id="api-classes" class="apis classes">
            
                <li><a href="..&#x2F;classes/AssetLoader.html">AssetLoader</a></li>
            
                <li><a href="..&#x2F;classes/BaseTexture.html">BaseTexture</a></li>
            
                <li><a href="..&#x2F;classes/BitmapFontLoader.html">BitmapFontLoader</a></li>
            
                <li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
            
                <li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
            
                <li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
            
                <li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
            
                <li><a href="..&#x2F;classes/DisplayObject.html">DisplayObject</a></li>
            
                <li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
            
                <li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
            
                <li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
            
                <li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>
            
                <li><a href="..&#x2F;classes/InteractionManager.html">InteractionManager</a></li>
            
                <li><a href="..&#x2F;classes/JsonLoader.html">JsonLoader</a></li>
            
                <li><a href="..&#x2F;classes/MovieClip.html">MovieClip</a></li>
            
                <li><a href="..&#x2F;classes/Point.html">Point</a></li>
            
                <li><a href="..&#x2F;classes/Polygon.html">Polygon</a></li>
            
                <li><a href="..&#x2F;classes/Rectangle.html">Rectangle</a></li>
            
                <li><a href="..&#x2F;classes/RenderTexture.html">RenderTexture</a></li>
            
                <li><a href="..&#x2F;classes/Spine.html">Spine</a></li>
            
                <li><a href="..&#x2F;classes/Sprite.html">Sprite</a></li>
            
                <li><a href="..&#x2F;classes/SpriteSheetLoader.html">SpriteSheetLoader</a></li>
            
                <li><a href="..&#x2F;classes/Stage.html">Stage</a></li>
            
                <li><a href="..&#x2F;classes/Text.html">Text</a></li>
            
                <li><a href="..&#x2F;classes/Texture.html">Texture</a></li>
            
                <li><a href="..&#x2F;classes/TilingSprite.html">TilingSprite</a></li>
            
                <li><a href="..&#x2F;classes/WebGLBatch.html">WebGLBatch</a></li>
            
                <li><a href="..&#x2F;classes/WebGLRenderer.html">WebGLRenderer</a></li>
            
            </ul>

            <ul id="api-modules" class="apis modules">
            
                <li><a href="..&#x2F;modules/PIXI.html">PIXI</a></li>
            
            </ul>
        </div>
    </div>
</div>

            </div>
        </div>
        <div class="yui3-u-3-4">
                <div id="api-options">
        Show:
        <label for="api-show-inherited">
            <input type="checkbox" id="api-show-inherited" checked>
            Inherited
        </label>

        <label for="api-show-protected">
            <input type="checkbox" id="api-show-protected">
            Protected
        </label>

        <label for="api-show-private">
            <input type="checkbox" id="api-show-private">
            Private
        </label>
        <label for="api-show-deprecated">
            <input type="checkbox" id="api-show-deprecated">
            Deprecated
        </label>

    </div>


            <div class="apidocs">
                <div id="docs-main">
                    <div class="content">
                        <h1 class="file-heading">File: src&#x2F;pixi&#x2F;renderers&#x2F;webgl&#x2F;WebGLRenderer.js</h1>

<div class="file">
    <pre class="code prettyprint linenums">
&#x2F;**
 * @author Mat Groves http:&#x2F;&#x2F;matgroves.com&#x2F; @Doormat23
 *&#x2F;

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

&#x2F;&#x2F; an instance of the gl context..
&#x2F;&#x2F; only one at the moment :&#x2F;
PIXI.gl;

&#x2F;**
 * 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&#x27;s or Sprite Cloud&#x27;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
 * 
 *&#x2F;
PIXI.WebGLRenderer = function(width, height, view, transparent)
{
	&#x2F;&#x2F; do a catch.. only 1 webGL renderer..

	&#x2F;&#x2F;console.log(transparent)
	this.transparent = !!transparent;
	
	this.width = width || 800;
	this.height = height || 600;
	
	this.view = view || document.createElement( &#x27;canvas&#x27; ); 
    this.view.width = this.width;
	this.view.height = this.height;
	
	&#x2F;&#x2F; deal with losing context..	
    var scope = this;
	this.view.addEventListener(&#x27;webglcontextlost&#x27;, function(event) { scope.handleContextLost(event); }, false)
	this.view.addEventListener(&#x27;webglcontextrestored&#x27;, function(event) { scope.handleContextRestored(event); }, false)

	this.batchs = [];
	
	try 
 	{
        PIXI.gl = this.gl = this.view.getContext(&quot;experimental-webgl&quot;,  {  	
    		 alpha: this.transparent,
    		 antialias:true, &#x2F;&#x2F; SPEED UP??
    		 premultipliedAlpha:false
        });
    } 
    catch (e) 
    {
    	throw new Error(&quot; This browser does not support webGL. Try using the canvas renderer&quot; + this);
    }
    
    PIXI.initPrimitiveShader();
    PIXI.initDefaultShader();
    PIXI.initDefaultStripShader();
    
    PIXI.activateDefaultShader();
    
    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); 
    
    PIXI.projection = new PIXI.Point(400, 300);
    
    this.resize(this.width, this.height);
    this.contextLost = false;
    
    this.stageRenderGroup = new PIXI.WebGLRenderGroup(this.gl);
}

&#x2F;&#x2F; constructor
PIXI.WebGLRenderer.constructor = PIXI.WebGLRenderer;

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

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


&#x2F;**
 * @private
 *&#x2F;



&#x2F;**
 * Renders the stage to its webGL view
 * @method render
 * @param stage {Stage} the PIXI.Stage element to be rendered
 *&#x2F;
PIXI.WebGLRenderer.prototype.render = function(stage)
{
	if(this.contextLost)return;
	
	
	&#x2F;&#x2F; if rendering a new stage clear the batchs..
	if(this.__stage !== stage)
	{
		&#x2F;&#x2F; TODO make this work
		&#x2F;&#x2F; dont think this is needed any more?
		&#x2F;&#x2F;if(this.__stage)this.checkVisibility(this.__stage, false)
		
		this.__stage = stage;
		this.stageRenderGroup.setRenderable(stage);
	}
	
	&#x2F;&#x2F; TODO not needed now... 
	&#x2F;&#x2F; update children if need be
	&#x2F;&#x2F; best to remove first!
	&#x2F;*for (var i=0; i &lt; stage.__childrenRemoved.length; i++)
	{
		var group = stage.__childrenRemoved[i].__renderGroup
		if(group)group.removeDisplayObject(stage.__childrenRemoved[i]);
	}*&#x2F;

	&#x2F;&#x2F; update any textures	
	PIXI.WebGLRenderer.updateTextures();
		
	&#x2F;&#x2F; recursivly loop through all items!
	&#x2F;&#x2F;this.checkVisibility(stage, true);
	
	&#x2F;&#x2F; update the scene graph	
	stage.updateTransform();
	
	var gl = this.gl;
	
	&#x2F;&#x2F; -- Does this need to be set every frame? -- &#x2F;&#x2F;
	gl.colorMask(true, true, true, this.transparent); 
	gl.viewport(0, 0, this.width, this.height);	
	
	&#x2F;&#x2F; set the correct matrix..	
   &#x2F;&#x2F;	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);

	&#x2F;&#x2F; HACK TO TEST
	&#x2F;&#x2F;PIXI.projectionMatrix = this.projectionMatrix;
	
	this.stageRenderGroup.backgroundColor = stage.backgroundColorSplit;
	this.stageRenderGroup.render(PIXI.projection);
	
	&#x2F;&#x2F; interaction
	&#x2F;&#x2F; run interaction!
	if(stage.interactive)
	{
		&#x2F;&#x2F;need to add some events!
		if(!stage._interactiveEventsAdded)
		{
			stage._interactiveEventsAdded = true;
			stage.interactionManager.setTarget(this);
		}
	}
	
	&#x2F;&#x2F; after rendering lets confirm all frames that have been uodated..
	if(PIXI.Texture.frameUpdates.length &gt; 0)
	{
		for (var i=0; i &lt; PIXI.Texture.frameUpdates.length; i++) 
		{
		  	PIXI.Texture.frameUpdates[i].updateFrame = false;
		};
		
		PIXI.Texture.frameUpdates = [];
	}
}

&#x2F;**
 * @private
 *&#x2F;

PIXI.WebGLRenderer.updateTextures = function()
{
	for (var i=0; i &lt; PIXI.texturesToUpdate.length; i++) this.updateTexture(PIXI.texturesToUpdate[i]);
	for (var i=0; i &lt; 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);
		
		&#x2F;&#x2F; 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);
	}
}

&#x2F;**
 * 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
 *&#x2F;
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);	
	
	&#x2F;&#x2F;var projectionMatrix = this.projectionMatrix;
	
	PIXI.projection.x =  this.width&#x2F;2;
	PIXI.projection.y =  this.height&#x2F;2;
	
&#x2F;&#x2F;	projectionMatrix[0] = 2&#x2F;this.width;
&#x2F;&#x2F;	projectionMatrix[5] = -2&#x2F;this.height;
&#x2F;&#x2F;	projectionMatrix[12] = -1;
&#x2F;&#x2F;	projectionMatrix[13] = 1;
}

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

&#x2F;**
 * @private
 *&#x2F;
PIXI.WebGLRenderer.prototype.handleContextRestored = function(event)
{
	this.gl = this.view.getContext(&quot;experimental-webgl&quot;,  {  	
		alpha: true
    });
        
	this.initShaders();	
	
	for(var key in PIXI.TextureCache) 
	{
        	var texture = PIXI.TextureCache[key].baseTexture;
        	texture._glTexture = null;
        	PIXI.WebGLRenderer.updateTexture(texture);
	};
	
	for (var i=0; i &lt;  this.batchs.length; i++) 
	{
		this.batchs[i].restoreLostContext(this.gl)&#x2F;&#x2F;
		this.batchs[i].dirty = true;
	};
	
	PIXI._restoreBatchs(this.gl);
	
	this.contextLost = false;
}


    </pre>
</div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="..&#x2F;assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script src="..&#x2F;assets/js/yui-prettify.js"></script>
<script src="..&#x2F;assets/../api.js"></script>
<script src="..&#x2F;assets/js/api-filter.js"></script>
<script src="..&#x2F;assets/js/api-list.js"></script>
<script src="..&#x2F;assets/js/api-search.js"></script>
<script src="..&#x2F;assets/js/apidocs.js"></script>
</body>
</html>