RenderTexture update

RenderTexture added (webGL and Canvas)
WebGL Render rearchitected - a little faster :)
Pivot added to DisplayObject
docs updated
grunt file updated
This commit is contained in:
Mat Groves 2013-05-22 18:44:20 +01:00
parent ba5a79c606
commit 88b863155a
82 changed files with 14133 additions and 6332 deletions

View file

@ -0,0 +1,708 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>src&#x2F;pixi&#x2F;renderers&#x2F;WebGLRenderGroup.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.0.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/CanvasRenderer.html">CanvasRenderer</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/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/MovieClip.html">MovieClip</a></li>
<li><a href="..&#x2F;classes/Point.html">Point</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/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;WebGLRenderGroup.js</h1>
<div class="file">
<pre class="code prettyprint linenums">
&#x2F;**
* @author Mat Groves http:&#x2F;&#x2F;matgroves.com&#x2F; @Doormat23
*&#x2F;
&#x2F;**
* A WebGLBatch Enables a group of sprites to be drawn using the same settings.
* if a group of sprites all have the same baseTexture and blendMode then they can be grouped into a batch. All the sprites in a batch can then be drawn in one go by the GPU which is hugely efficient. ALL sprites in the webGL renderer are added to a batch even if the batch only contains one sprite. Batching is handled automatically by the webGL renderer. A good tip is: the smaller the number of batchs there are, the faster the webGL renderer will run.
* @class WebGLBatch
* @param an instance of the webGL context
* @return {PIXI.renderers.WebGLBatch} WebGLBatch {@link PIXI.renderers.WebGLBatch}
*&#x2F;
PIXI.WebGLRenderGroup = function(gl)
{
this.gl = gl;
this.root;
this.backgroundColor;
this.batchs = [];
this.toRemove = [];
}
&#x2F;&#x2F; constructor
PIXI.WebGLRenderGroup.constructor = PIXI.WebGLRenderGroup;
PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject)
{
&#x2F;&#x2F; has this changed??
if(this.root)this.removeDisplayObjectAndChildren(this.root);
&#x2F;&#x2F;console.log(&quot;!!!&quot;);
&#x2F;&#x2F; TODO what if its already has an object? should remove it
this.root = displayObject;
&#x2F;&#x2F;displayObject.__renderGroup = this;
this.addDisplayObjectAndChildren(displayObject);
&#x2F;&#x2F;displayObject
}
PIXI.WebGLRenderGroup.prototype.render = function(renderTexture)
{
var gl = this.gl;
for (var i=0; i &lt; this.toRemove.length; i++)
{
this.removeDisplayObjectAndChildren(this.toRemove[i]);
};
this.toRemove = [];
this.checkVisibility(this.root, this.root.visible);
&#x2F;&#x2F; will render all the elements in the group
var renderable;
for (var i=0; i &lt; this.batchs.length; i++)
{
renderable = this.batchs[i];
if(renderable instanceof PIXI.WebGLBatch)
{
this.batchs[i].render();
}
else if(renderable instanceof PIXI.TilingSprite)
{
if(renderable.visible)this.renderTilingSprite(renderable);
}
else if(renderable instanceof PIXI.Strip)
{
if(renderable.visible)this.renderStrip(renderable);
}
}
}
PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, renderTexture)
{
var gl = this.gl;
this.checkVisibility(displayObject, displayObject.visible);
&#x2F;&#x2F;console.log(&quot;SPECIFIC&quot;);
&#x2F;&#x2F; to do!
&#x2F;&#x2F; render part of the scene...
var startIndex;
var startBatchIndex;
var endIndex;
var endBatchIndex;
&#x2F;&#x2F; get NEXT Renderable!
var nextRenderable = displayObject.renderable ? displayObject : this.getNextRenderable(displayObject);
var startBatch = nextRenderable.batch;
if(nextRenderable instanceof PIXI.Sprite)
{
startBatch = nextRenderable.batch;
var head = startBatch.head;
var next = head;
&#x2F;&#x2F; ok now we have the batch.. need to find the start index!
if(head == nextRenderable)
{
startIndex = 0;
}
else
{
startIndex = 1;
while(head.__next != nextRenderable)
{
startIndex++;
head = head.__next;
}
}
}
else
{
startBatch = nextRenderable;
}
&#x2F;&#x2F; Get the LAST renderable object
var lastRenderable = displayObject;
var endBatch;
var lastItem = displayObject;
while(lastItem.children.length &gt; 0)
{
lastItem = lastItem.children[lastItem.children.length-1];
if(lastItem.renderable)lastRenderable = lastItem;
}
if(lastRenderable instanceof PIXI.Sprite)
{
endBatch = lastRenderable.batch;
var head = endBatch.head;
if(head == lastRenderable)
{
endIndex = 0;
}
else
{
endIndex = 1;
while(head.__next != lastRenderable)
{
endIndex++;
head = head.__next;
}
}
}
else
{
endBatch = lastRenderable;
}
&#x2F;&#x2F; now we have first and last!
startBatchIndex = this.batchs.indexOf(startBatch);
endBatchIndex = this.batchs.indexOf(endBatch);
&#x2F;&#x2F; DO the first batch
if(startBatch instanceof PIXI.WebGLBatch)
{
startBatch.render(startIndex);
}
else if(startBatch instanceof PIXI.TilingSprite)
{
if(startBatch.visible)this.renderTilingSprite(startBatch);
}
else if(startBatch instanceof PIXI.Strip)
{
if(startBatch.visible)this.renderStrip(startBatch);
}
&#x2F;&#x2F; DO the middle batchs..
for (var i=startBatchIndex+1; i &lt; endBatchIndex; i++)
{
renderable = this.batchs[i];
if(renderable instanceof PIXI.WebGLBatch)
{
this.batchs[i].render();
}
else if(renderable instanceof PIXI.TilingSprite)
{
if(renderable.visible)this.renderTilingSprite(renderable);
}
else if(renderable instanceof PIXI.Strip)
{
if(renderable.visible)this.renderStrip(renderable);
}
}
&#x2F;&#x2F; DO the last batch..
if(endBatch instanceof PIXI.WebGLBatch)
{
endBatch.render(0, endIndex+1);
}
else if(endBatch instanceof PIXI.TilingSprite)
{
if(endBatch.visible)this.renderTilingSprite(endBatch);
}
else if(endBatch instanceof PIXI.Strip)
{
if(endBatch.visible)this.renderStrip(endBatch);
}
}
PIXI.WebGLRenderGroup.prototype.checkVisibility = function(displayObject, globalVisible)
{
&#x2F;&#x2F; give the dp a refference to its renderGroup...
var children = displayObject.children;
&#x2F;&#x2F;displayObject.worldVisible = globalVisible;
for (var i=0; i &lt; children.length; i++)
{
var child = children[i];
&#x2F;&#x2F; TODO optimize... shouldt need to loop through everything all the time
child.worldVisible = child.visible &amp;&amp; globalVisible;
&#x2F;&#x2F; everything should have a batch!
&#x2F;&#x2F; time to see whats new!
if(child.textureChange)
{
child.textureChange = false;
if(child.worldVisible)
{
this.removeDisplayObject(child)
this.addDisplayObject(child)
}
&#x2F;&#x2F; update texture!!
}
if(child.children.length &gt; 0)
{
this.checkVisibility(child, child.worldVisible);
}
};
}
PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject)
{
&#x2F;&#x2F; add a child to the render group..
displayObject.batch = null;
displayObject.__renderGroup = this;
&#x2F;&#x2F;displayObject.cacheVisible = true;
if(!displayObject.renderable)return;
&#x2F;&#x2F; while looping below THE OBJECT MAY NOT HAVE BEEN ADDED
&#x2F;&#x2F;displayObject.__inWebGL = true;
var previousSprite = this.getPreviousRenderable(displayObject);
var nextSprite = this.getNextRenderable(displayObject);
&#x2F;*
* so now we have the next renderable and the previous renderable
*
*&#x2F;
if(displayObject instanceof PIXI.Sprite)
{
var previousBatch
var nextBatch
&#x2F;&#x2F;console.log( previousSprite)
if(previousSprite instanceof PIXI.Sprite)
{
previousBatch = previousSprite.batch;
if(previousBatch)
{
if(previousBatch.texture == displayObject.texture.baseTexture &amp;&amp; previousBatch.blendMode == displayObject.blendMode)
{
previousBatch.insertAfter(displayObject, previousSprite);
return;
}
}
}
else
{
&#x2F;&#x2F; TODO reword!
previousBatch = previousSprite;
}
if(nextSprite)
{
if(nextSprite instanceof PIXI.Sprite)
{
nextBatch = nextSprite.batch;
&#x2F;&#x2F;batch may not exist if item was added to the display list but not to the webGL
if(nextBatch)
{
if(nextBatch.texture == displayObject.texture.baseTexture &amp;&amp; nextBatch.blendMode == displayObject.blendMode)
{
nextBatch.insertBefore(displayObject, nextSprite);
return;
}
else
{
if(nextBatch == previousBatch)
{
&#x2F;&#x2F; THERE IS A SPLIT IN THIS BATCH! &#x2F;&#x2F;
var splitBatch = previousBatch.split(nextSprite);
&#x2F;&#x2F; COOL!
&#x2F;&#x2F; add it back into the array
&#x2F;*
* OOPS!
* seems the new sprite is in the middle of a batch
* lets split it..
*&#x2F;
var batch = PIXI.WebGLRenderer.getBatch();
var index = this.batchs.indexOf( previousBatch );
batch.init(displayObject);
this.batchs.splice(index+1, 0, batch, splitBatch);
return;
}
}
}
}
else
{
&#x2F;&#x2F; TODO re-word!
nextBatch = nextSprite;
}
}
&#x2F;*
* looks like it does not belong to any batch!
* but is also not intersecting one..
* time to create anew one!
*&#x2F;
var batch = PIXI.WebGLRenderer.getBatch();
batch.init(displayObject);
if(previousBatch) &#x2F;&#x2F; if this is invalid it means
{
var index = this.batchs.indexOf( previousBatch );
this.batchs.splice(index+1, 0, batch);
}
else
{
this.batchs.push(batch);
}
}
else if(displayObject instanceof PIXI.TilingSprite)
{
&#x2F;&#x2F; add to a batch!!
this.initTilingSprite(displayObject);
this.batchs.push(displayObject);
}
else if(displayObject instanceof PIXI.Strip)
{
&#x2F;&#x2F; add to a batch!!
this.initStrip(displayObject);
this.batchs.push(displayObject);
}
&#x2F;&#x2F; if its somthing else... then custom codes!
this.batchUpdate = true;
}
PIXI.WebGLRenderGroup.prototype.addDisplayObjectAndChildren = function(displayObject)
{
&#x2F;&#x2F; TODO - this can be faster - but not as important right now
this.addDisplayObject(displayObject);
var children = displayObject.children;
for (var i=0; i &lt; children.length; i++)
{
this.addDisplayObjectAndChildren(children[i]);
};
}
PIXI.WebGLRenderGroup.prototype.removeDisplayObject = function(displayObject)
{
&#x2F;&#x2F; loop through children..
&#x2F;&#x2F; display object &#x2F;&#x2F;
&#x2F;&#x2F; add a child from the render group..
&#x2F;&#x2F; remove it and all its children!
&#x2F;&#x2F;displayObject.cacheVisible = false;&#x2F;&#x2F;displayObject.visible;
displayObject.__renderGroup = null;
if(!displayObject.renderable)return;
&#x2F;*
* removing is a lot quicker..
*
*&#x2F;
var batchToRemove;
if(displayObject instanceof PIXI.Sprite)
{
&#x2F;&#x2F; should always have a batch!
var batch = displayObject.batch;
if(!batch)return; &#x2F;&#x2F; this means the display list has been altered befre rendering
batch.remove(displayObject);
if(batch.size==0)
{
batchToRemove = batch;
}
}
else
{
batchToRemove = displayObject;
}
&#x2F;*
* Looks like there is somthing that needs removing!
*&#x2F;
if(batchToRemove)
{
var index = this.batchs.indexOf( batchToRemove );
if(index == -1)return;&#x2F;&#x2F; this means it was added then removed before rendered
&#x2F;&#x2F; ok so.. check to see if you adjacent batchs should be joined.
&#x2F;&#x2F; TODO may optimise?
if(index == 0 || index == this.batchs.length-1)
{
&#x2F;&#x2F; wha - eva! just get of the empty batch!
this.batchs.splice(index, 1);
if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove);
return;
}
if(this.batchs[index-1] instanceof PIXI.WebGLBatch &amp;&amp; this.batchs[index+1] instanceof PIXI.WebGLBatch)
{
if(this.batchs[index-1].texture == this.batchs[index+1].texture &amp;&amp; this.batchs[index-1].blendMode == this.batchs[index+1].blendMode)
{
&#x2F;&#x2F;console.log(&quot;MERGE&quot;)
this.batchs[index-1].merge(this.batchs[index+1]);
if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove);
PIXI.WebGLRenderer.returnBatch(this.batchs[index+1]);
this.batchs.splice(index, 2);
return;
}
}
this.batchs.splice(index, 1);
if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove);
}
}
PIXI.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren = function(displayObject)
{
&#x2F;&#x2F; TODO - this can be faster - but not as important right now
if(displayObject.__renderGroup != this)return;
this.removeDisplayObject(displayObject);
var children = displayObject.children;
for (var i=0; i &lt; children.length; i++)
{
this.removeDisplayObjectAndChildren(children[i]);
};
}
&#x2F;**
* @private
*&#x2F;
PIXI.WebGLRenderGroup.prototype.getNextRenderable = function(displayObject)
{
&#x2F;*
* LOOK FOR THE NEXT SPRITE
* This part looks for the closest next sprite that can go into a batch
* it keeps looking until it finds a sprite or gets to the end of the display
* scene graph
*
* These look a lot scarier than the actually are...
*&#x2F;
var nextSprite = displayObject;
do
{
&#x2F;&#x2F; moving forward!
&#x2F;&#x2F; if it has no children..
if(nextSprite.children.length == 0)
{
&#x2F;&#x2F; go along to the parent..
while(nextSprite.childIndex == nextSprite.parent.children.length-1)
{
nextSprite = nextSprite.parent;
if(nextSprite == this.root)&#x2F;&#x2F;displayObject.stage)
{
nextSprite = null
break;
}
}
if(nextSprite)nextSprite = nextSprite.parent.children[nextSprite.childIndex+1];
}
else
{
nextSprite = nextSprite.children[0];
}
if(!nextSprite)break;
}
while(!nextSprite.renderable || !nextSprite.__renderGroup)
return nextSprite;
}
PIXI.WebGLRenderGroup.prototype.getPreviousRenderable = function(displayObject)
{
&#x2F;*
* LOOK FOR THE PREVIOUS SPRITE
* This part looks for the closest previous sprite that can go into a batch
* It keeps going back until it finds a sprite or the stage
*&#x2F;
var previousSprite = displayObject;
do
{
if(previousSprite.childIndex == 0)
{
previousSprite = previousSprite.parent;
}
else
{
previousSprite = previousSprite.parent.children[previousSprite.childIndex-1];
&#x2F;&#x2F; what if the bloop has children???
while(previousSprite.children.length != 0)
{
&#x2F;&#x2F; keep diggin till we get to the last child
previousSprite = previousSprite.children[previousSprite.children.length-1];
}
}
if(previousSprite == this.root)break;
}
while(!previousSprite.renderable || !previousSprite.__renderGroup);
return previousSprite;
}
</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>