jeena/pixi.js
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

Docs updated

Browse source
This commit is contained in:
Mat Groves 2013-11-02 11:37:42 +00:00
parent a46b74f8ca
commit 6c762fb396
119 changed files with 38715 additions and 9039 deletions
Download patch file Download diff file Expand all files Collapse all files

418
docs/files/src_pixi_renderers_webgl_WebGLRenderer.js.html
View file

@ -2,12 +2,12 @@
<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>
<title>src/pixi/renderers/webgl/WebGLRenderer.js - Pixi.JS</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/3.9.1/build/cssgrids/cssgrids-min.css">
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
<link rel="stylesheet" href="../assets/css/main.css" id="site_styles">
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
<script src="http://yui.yahooapis.com/combo?3.9.1/build/yui/yui-min.js"></script>
</head>
<body class="yui3-skin-sam">
@ -15,7 +15,7 @@
<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>
<h1><img src="http://www.goodboydigital.com/pixijs/logo_small.png" title="Pixi.JS"></h1>
</div>
<div class="yui3-u-1-4 version">
@ -41,71 +41,95 @@
<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="../classes/AbstractFilter.html">AbstractFilter</a></li>
<li><a href="..&#x2F;classes/BaseTexture.html">BaseTexture</a></li>
<li><a href="../classes/AssetLoader.html">AssetLoader</a></li>
<li><a href="..&#x2F;classes/BitmapFontLoader.html">BitmapFontLoader</a></li>
<li><a href="../classes/BaseTexture.html">BaseTexture</a></li>
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="../classes/BitmapFontLoader.html">BitmapFontLoader</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="../classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="../classes/BlurFilter.html">BlurFilter</a></li>
<li><a href="..&#x2F;classes/Circle.html">Circle</a></li>
<li><a href="../classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
<li><a href="../classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/DisplayObject.html">DisplayObject</a></li>
<li><a href="../classes/Circle.html">Circle</a></li>
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="../classes/ColorMatrixFilter.html">ColorMatrixFilter</a></li>
<li><a href="..&#x2F;classes/Ellipse.html">Ellipse</a></li>
<li><a href="../classes/CustomRenderable.html">CustomRenderable</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="../classes/DisplacementFilter.html">DisplacementFilter</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="../classes/DisplayObject.html">DisplayObject</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>
<li><a href="../classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/InteractionManager.html">InteractionManager</a></li>
<li><a href="../classes/Ellipse.html">Ellipse</a></li>
<li><a href="..&#x2F;classes/JsonLoader.html">JsonLoader</a></li>
<li><a href="../classes/EventTarget.html">EventTarget</a></li>
<li><a href="..&#x2F;classes/MovieClip.html">MovieClip</a></li>
<li><a href="../classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/Point.html">Point</a></li>
<li><a href="../classes/GreyFilter.html">GreyFilter</a></li>
<li><a href="..&#x2F;classes/Polygon.html">Polygon</a></li>
<li><a href="../classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/Rectangle.html">Rectangle</a></li>
<li><a href="../classes/InvertFilter.html">InvertFilter</a></li>
<li><a href="..&#x2F;classes/RenderTexture.html">RenderTexture</a></li>
<li><a href="../classes/JsonLoader.html">JsonLoader</a></li>
<li><a href="..&#x2F;classes/Spine.html">Spine</a></li>
<li><a href="../classes/MovieClip.html">MovieClip</a></li>
<li><a href="..&#x2F;classes/Sprite.html">Sprite</a></li>
<li><a href="../classes/PixelateFilter.html">PixelateFilter</a></li>
<li><a href="..&#x2F;classes/SpriteSheetLoader.html">SpriteSheetLoader</a></li>
<li><a href="../classes/Point.html">Point</a></li>
<li><a href="..&#x2F;classes/Stage.html">Stage</a></li>
<li><a href="../classes/Polygon.html">Polygon</a></li>
<li><a href="..&#x2F;classes/Text.html">Text</a></li>
<li><a href="../classes/PolyK._convex.html">PolyK._convex</a></li>
<li><a href="..&#x2F;classes/Texture.html">Texture</a></li>
<li><a href="../classes/PolyK._PointInTriangle.html">PolyK._PointInTriangle</a></li>
<li><a href="..&#x2F;classes/TilingSprite.html">TilingSprite</a></li>
<li><a href="../classes/PolyK.AjaxRequest.html">PolyK.AjaxRequest</a></li>
<li><a href="..&#x2F;classes/WebGLBatch.html">WebGLBatch</a></li>
<li><a href="../classes/PolyK.InteractionData.html">PolyK.InteractionData</a></li>
<li><a href="..&#x2F;classes/WebGLRenderer.html">WebGLRenderer</a></li>
<li><a href="../classes/PolyK.InteractionManager.html">PolyK.InteractionManager</a></li>
<li><a href="../classes/Rectangle.html">Rectangle</a></li>
<li><a href="../classes/RenderTexture.html">RenderTexture</a></li>
<li><a href="../classes/SepiaFilter.html">SepiaFilter</a></li>
<li><a href="../classes/Spine.html">Spine</a></li>
<li><a href="../classes/Sprite.html">Sprite</a></li>
<li><a href="../classes/SpriteSheetLoader.html">SpriteSheetLoader</a></li>
<li><a href="../classes/Stage.html">Stage</a></li>
<li><a href="../classes/Text.html">Text</a></li>
<li><a href="../classes/Texture.html">Texture</a></li>
<li><a href="../classes/TilingSprite.html">TilingSprite</a></li>
<li><a href="../classes/WebGLBatch.html">WebGLBatch</a></li>
<li><a href="../classes/WebGLRenderer.html">WebGLRenderer</a></li>
</ul>
<ul id="api-modules" class="apis modules">
<li><a href="..&#x2F;modules/PIXI.html">PIXI</a></li>
<li><a href="../modules/PIXI.html">PIXI</a></li>
</ul>
</div>
@ -142,102 +166,121 @@
<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>
<h1 class="file-heading">File: src/pixi/renderers/webgl/WebGLRenderer.js</h1>
<div class="file">
<pre class="code prettyprint linenums">
&#x2F;**
* @author Mat Groves http:&#x2F;&#x2F;matgroves.com&#x2F; @Doormat23
*&#x2F;
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
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;
// an instance of the gl context..
// only one at the moment :/
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
/**
* 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 width=0 {Number} the width of the canvas view
* @param height=0 {Number} the height of the canvas view
* @param view {Canvas} the canvas to use as a view, optional
* @param transparent {Boolean} the transparency of the render view, default false
* @default false
* @param transparent=false {Boolean} the transparency of the render view, default false
* @param antialias=false {Boolean} sets antialias (only applicable in chrome at the moment)
*
*&#x2F;
PIXI.WebGLRenderer = function(width, height, view, transparent)
*/
PIXI.WebGLRenderer = function(width, height, view, transparent, antialias)
{
&#x2F;&#x2F; do a catch.. only 1 webGL renderer..
// 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..
// 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 = [];
var options = {
alpha: this.transparent,
antialias:!!antialias, // SPEED UP??
premultipliedAlpha:false,
stencil:true
}
//try &#x27;experimental-webgl&#x27;
try {
PIXI.gl = this.gl = this.view.getContext(&quot;experimental-webgl&quot;, options);
} catch (e) {
//try &#x27;webgl&#x27;
try {
PIXI.gl = this.gl = this.view.getContext(&quot;webgl&quot;, options);
} catch (e) {
// fail, not able to get a context
throw new Error(&quot; This browser does not support webGL. Try using the canvas renderer&quot; + this);
}
}
PIXI.initDefaultShaders();
try
{
PIXI.gl = this.gl = this.view.getContext(&quot;experimental-webgl&quot;, {
alpha: this.transparent,
antialias:true, &#x2F;&#x2F; SPEED UP??
premultipliedAlpha:false,
stencil:true
});
}
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();
// PIXI.activateDefaultShader();
var gl = this.gl;
PIXI.WebGLRenderer.gl = gl;
gl.useProgram(PIXI.defaultShader.program);
PIXI.WebGLRenderer.gl = gl;
this.batch = new PIXI.WebGLBatch(gl);
gl.disable(gl.DEPTH_TEST);
gl.disable(gl.CULL_FACE);
&#x2F;&#x2F;
gl.enable(gl.BLEND);
gl.colorMask(true, true, true, this.transparent);
PIXI.projection = new PIXI.Point(400, 300);
PIXI.offset = new PIXI.Point(0, 0);
// TODO remove thease globals..
this.resize(this.width, this.height);
this.contextLost = false;
//PIXI.pushShader(PIXI.defaultShader);
this.stageRenderGroup = new PIXI.WebGLRenderGroup(this.gl);
}
&#x2F;&#x2F; constructor
PIXI.WebGLRenderer.constructor = PIXI.WebGLRenderer;
// constructor
PIXI.WebGLRenderer.prototype.constructor = PIXI.WebGLRenderer;
&#x2F;**
/**
* Gets a new WebGLBatch from the pool
*
* @static
* @method getBatch
* @return {WebGLBatch}
* @private
*&#x2F;
*/
PIXI.WebGLRenderer.getBatch = function()
{
if(PIXI._batchs.length == 0)
@ -250,86 +293,72 @@ PIXI.WebGLRenderer.getBatch = function()
}
}
&#x2F;**
/**
* Puts a batch back into the pool
*
* @static
* @method returnBatch
* @param batch {WebGLBatch} The batch to return
* @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;
* @param stage {Stage} the Stage element to be rendered
*/
PIXI.WebGLRenderer.prototype.render = function(stage)
{
if(this.contextLost)return;
&#x2F;&#x2F; if rendering a new stage clear the batchs..
// 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)
// TODO make this work
// dont think this is needed any more?
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
// 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
// update the scene graph
PIXI.visibleCount++;
stage.updateTransform();
var gl = this.gl;
&#x2F;&#x2F; -- Does this need to be set every frame? -- &#x2F;&#x2F;
// -- Does this need to be set every frame? -- //
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;
// HACK TO TEST
this.stageRenderGroup.backgroundColor = stage.backgroundColorSplit;
PIXI.projection.x = this.width/2;
PIXI.projection.y = -this.height/2;
this.stageRenderGroup.render(PIXI.projection);
&#x2F;&#x2F; interaction
&#x2F;&#x2F; run interaction!
// interaction
// run interaction!
if(stage.interactive)
{
&#x2F;&#x2F;need to add some events!
//need to add some events!
if(!stage._interactiveEventsAdded)
{
stage._interactiveEventsAdded = true;
@ -337,7 +366,7 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
}
}
&#x2F;&#x2F; after rendering lets confirm all frames that have been uodated..
// 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++)
@ -349,38 +378,51 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
}
}
&#x2F;**
/**
* Updates the textures loaded into this webgl renderer
*
* @static
* @method updateTextures
* @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]);
//TODO break this out into a texture manager...
for (var i=0; i &lt; PIXI.texturesToUpdate.length; i++) PIXI.WebGLRenderer.updateTexture(PIXI.texturesToUpdate[i]);
for (var i=0; i &lt; PIXI.texturesToDestroy.length; i++) PIXI.WebGLRenderer.destroyTexture(PIXI.texturesToDestroy[i]);
PIXI.texturesToUpdate = [];
PIXI.texturesToDestroy = [];
}
/**
* Updates a loaded webgl texture
*
* @static
* @method updateTexture
* @param texture {Texture} The texture to update
* @private
*/
PIXI.WebGLRenderer.updateTexture = function(texture)
{
//TODO break this out into a texture manager...
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...
// reguler...
if(!texture._powerOf2)
{
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
@ -391,16 +433,23 @@ PIXI.WebGLRenderer.updateTexture = function(texture)
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)
/**
* Destroys a loaded webgl texture
*
* @method destroyTexture
* @param texture {Texture} The texture to update
* @private
*/
PIXI.WebGLRenderer.destroyTexture = function(texture)
{
var gl = this.gl;
//TODO break this out into a texture manager...
var gl = PIXI.gl;
if(texture._glTexture)
{
texture._glTexture = gl.createTexture();
@ -408,72 +457,83 @@ PIXI.WebGLRenderer.prototype.destroyTexture = function(texture)
}
}
&#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);
//var projectionMatrix = this.projectionMatrix;
PIXI.projection.x = this.width/2;
PIXI.projection.y = -this.height/2;
&#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;
//PIXI.size.x = this.width/2;
//PIXI.size.y = -this.height/2;
// projectionMatrix[0] = 2/this.width;
// projectionMatrix[5] = -2/this.height;
// projectionMatrix[12] = -1;
// projectionMatrix[13] = 1;
}
&#x2F;**
/**
* Handles a lost webgl context
*
* @method handleContextLost
* @param event {Event}
* @private
*&#x2F;
*/
PIXI.WebGLRenderer.prototype.handleContextLost = function(event)
{
event.preventDefault();
this.contextLost = true;
}
&#x2F;**
/**
* Handles a restored webgl context
*
* @method handleContextRestored
* @param event {Event}
* @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].restoreLostContext(this.gl)//
this.batchs[i].dirty = true;
};
PIXI._restoreBatchs(this.gl);
this.contextLost = false;
}
</pre>
</div>
@ -483,13 +543,13 @@ PIXI.WebGLRenderer.prototype.handleContextRestored = function(event)
</div>
</div>
</div>
<script src="..&#x2F;assets/vendor/prettify/prettify-min.js"></script>
<script src="../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>
<script src="../assets/js/yui-prettify.js"></script>
<script src="../assets/../api.js"></script>
<script src="../assets/js/api-filter.js"></script>
<script src="../assets/js/api-list.js"></script>
<script src="../assets/js/api-search.js"></script>
<script src="../assets/js/apidocs.js"></script>
</body>
</html>