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

Docs updated

Browse source 
Fixed issue where alpha not being set correctly in canvas spriteBatch
Fixed issue where previous stage events did not get removed correctly
This commit is contained in:
Mat Groves 2014-01-28 00:08:50 +00:00
parent 9dbf8b47c1
commit 847eb6c48e
140 changed files with 12651 additions and 2435 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -19,7 +19,7 @@
</div>
<div class="yui3-u-1-4 version">
<em>API Docs for: 1.4.0</em>
<em>API Docs for: 1.4.3</em>
</div>
</div>
<div id="bd" class="yui3-g">
@ -73,6 +73,8 @@
<li><a href="../classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="../classes/DotScreenFilter.html">DotScreenFilter</a></li>
<li><a href="../classes/Ellipse.html">Ellipse</a></li>
<li><a href="../classes/EventTarget.html">EventTarget</a></li>
@ -91,6 +93,8 @@
<li><a href="../classes/PixelateFilter.html">PixelateFilter</a></li>
<li><a href="../classes/PIXI.PixiFastShader.html">PIXI.PixiFastShader</a></li>
<li><a href="../classes/PIXI.PixiShader.html">PIXI.PixiShader</a></li>
<li><a href="../classes/Point.html">Point</a></li>
@ -115,9 +119,9 @@
<li><a href="../classes/Spine.html">Spine</a></li>
<li><a href="../classes/SpriteSheetLoader.html">SpriteSheetLoader</a></li>
<li><a href="../classes/Sprite.html">Sprite</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>
@ -127,6 +131,8 @@
<li><a href="../classes/TilingSprite.html">TilingSprite</a></li>
<li><a href="../classes/TwistFilter.html">TwistFilter</a></li>
<li><a href="../classes/WebGLRenderer.html">WebGLRenderer</a></li>
</ul>
@ -178,17 +184,11 @@
* @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 = null;
PIXI.glContexts = []; // this is where we store the webGL contexts for easy access.
/**
* 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.
* the WebGLRenderer draws the stage and all its content onto a webGL enabled canvas. This renderer
* should be used for browsers that support webGL. This Render works by automatically managing webGLBatch&#x27;s.
* 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 :)
*
@ -197,7 +197,7 @@ PIXI.gl = null;
* @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=false {Boolean} the transparency of the render view, default false
* @param transparent=false {Boolean} If the render view is transparent, default false
* @param antialias=false {Boolean} sets antialias (only applicable in chrome at the moment)
*
*/
@ -218,16 +218,17 @@ PIXI.WebGLRenderer = function(width, height, view, transparent, antialias)
this.view.height = this.height;
// 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 = [];
this.contextLost = this.handleContextLost.bind(this);
this.contextRestoredLost = this.handleContextRestored.bind(this);
// console.log(this.handleContextRestored)
this.view.addEventListener(&#x27;webglcontextlost&#x27;, this.contextLost, false);
this.view.addEventListener(&#x27;webglcontextrestored&#x27;, this.contextRestoredLost, false);
this.options = {
alpha: this.transparent,
antialias:!!antialias, // SPEED UP??
premultipliedAlpha:false,
premultipliedAlpha:!!transparent,
stencil:true
};
@ -247,14 +248,29 @@ PIXI.WebGLRenderer = function(width, height, view, transparent, antialias)
var gl = this.gl;
this.glContextId = gl.id = PIXI.WebGLRenderer.glContextId ++;
PIXI.glContexts[this.glContextId] = gl;
if(!PIXI.blendModesWebGL)
{
PIXI.blendModesWebGL = [];
PIXI.blendModesWebGL[PIXI.blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
PIXI.blendModesWebGL[PIXI.blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA];
PIXI.blendModesWebGL[PIXI.blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA];
PIXI.blendModesWebGL[PIXI.blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE];
PIXI.blendModesWebGL[PIXI.blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
PIXI.blendModesWebGL[PIXI.blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA];
PIXI.blendModesWebGL[PIXI.blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA];
PIXI.blendModesWebGL[PIXI.blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE];
PIXI.blendModesWebGL[PIXI.blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
PIXI.blendModesWebGL[PIXI.blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
PIXI.blendModesWebGL[PIXI.blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
PIXI.blendModesWebGL[PIXI.blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
PIXI.blendModesWebGL[PIXI.blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
PIXI.blendModesWebGL[PIXI.blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
PIXI.blendModesWebGL[PIXI.blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
PIXI.blendModesWebGL[PIXI.blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
PIXI.blendModesWebGL[PIXI.blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
PIXI.blendModesWebGL[PIXI.blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
PIXI.blendModesWebGL[PIXI.blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
PIXI.blendModesWebGL[PIXI.blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
PIXI.blendModesWebGL[PIXI.blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
}
@ -287,8 +303,6 @@ PIXI.WebGLRenderer = function(width, height, view, transparent, antialias)
gl.useProgram(this.shaderManager.defaultShader.program);
PIXI.WebGLRenderer.gl = gl;
gl.disable(gl.DEPTH_TEST);
gl.disable(gl.CULL_FACE);
@ -310,7 +324,7 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
if(this.contextLost)return;
// if rendering a new stage clear the batchs..
// if rendering a new stage clear the batches..
if(this.__stage !== stage)
{
// TODO make this work
@ -327,13 +341,22 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
var gl = this.gl;
// -- Does this need to be set every frame? -- //
gl.colorMask(true, true, true, this.transparent);
//gl.colorMask(true, true, true, this.transparent);
gl.viewport(0, 0, this.width, this.height);
// make sure we are bound to the main frame buffer
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], !this.transparent);
if(this.transparent)
{
gl.clearColor(0, 0, 0, 0);
}
else
{
gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], 1);
}
gl.clear(gl.COLOR_BUFFER_BIT);
// this.projection.x = this.width/2;
@ -374,7 +397,7 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
*/
};
PIXI.WebGLRenderer.prototype.renderDisplayObject = function(displayObject, projection)
PIXI.WebGLRenderer.prototype.renderDisplayObject = function(displayObject, projection, buffer)
{
// reset the render session data..
this.renderSession.drawCount = 0;
@ -387,7 +410,7 @@ PIXI.WebGLRenderer.prototype.renderDisplayObject = function(displayObject, proje
this.spriteBatch.begin(this.renderSession);
// start the filter manager
this.filterManager.begin(this.renderSession, null);
this.filterManager.begin(this.renderSession, buffer);
// render the scene!
displayObject._renderWebGL(this.renderSession);
@ -418,58 +441,11 @@ PIXI.WebGLRenderer.updateTextures = function()
for (i = 0; i &lt; PIXI.texturesToDestroy.length; i++)
PIXI.WebGLRenderer.destroyTexture(PIXI.texturesToDestroy[i]);
PIXI.texturesToUpdate = [];
PIXI.texturesToDestroy = [];
PIXI.Texture.frameUpdates = [];
PIXI.texturesToUpdate.length = 0;
PIXI.texturesToDestroy.length = 0;
PIXI.Texture.frameUpdates.length = 0;
};
/**
* 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 = this.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, texture.scaleMode === PIXI.BaseTexture.SCALE_MODE.LINEAR ? gl.LINEAR : gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === PIXI.BaseTexture.SCALE_MODE.LINEAR ? gl.LINEAR : gl.NEAREST);
// 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);
}
};
*/
/**
* Destroys a loaded webgl texture
*
@ -480,13 +456,19 @@ PIXI.WebGLRenderer.updateTexture = function(texture)
PIXI.WebGLRenderer.destroyTexture = function(texture)
{
//TODO break this out into a texture manager...
var gl = PIXI.gl;
if(texture._glTexture)
for (var i = texture._glTextures.length - 1; i &gt;= 0; i--)
{
texture._glTexture = gl.createTexture();
gl.deleteTexture(gl.TEXTURE_2D, texture._glTexture);
var glTexture = texture._glTextures[i];
var gl = PIXI.glContexts[i];
if(gl &amp;&amp; glTexture)
{
gl.deleteTexture(glTexture);
}
}
texture._glTextures.length = 0;
};
PIXI.WebGLRenderer.updateTextureFrame = function(texture)
@ -531,8 +513,8 @@ PIXI.createWebGLTexture = function(texture, gl)
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, texture.scaleMode === PIXI.BaseTexture.SCALE_MODE.LINEAR ? gl.LINEAR : gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === PIXI.BaseTexture.SCALE_MODE.LINEAR ? gl.LINEAR : gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === PIXI.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === PIXI.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST);
// reguler...
@ -549,6 +531,37 @@ PIXI.createWebGLTexture = function(texture, gl)
gl.bindTexture(gl.TEXTURE_2D, null);
}
return texture._glTextures[gl.id];
};
PIXI.updateWebGLTexture = function(texture, gl)
{
if( texture._glTextures[gl.id] )
{
gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]);
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, texture.scaleMode === PIXI.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === PIXI.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST);
// 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);
}
};
/**
@ -619,6 +632,37 @@ PIXI.WebGLRenderer.prototype.handleContextRestored = function()
};
PIXI.WebGLRenderer.prototype.destroy = function()
{
// deal with losing context..
// remove listeners
this.view.removeEventListener(&#x27;webglcontextlost&#x27;, this.contextLost);
this.view.removeEventListener(&#x27;webglcontextrestored&#x27;, this.contextRestoredLost);
PIXI.glContexts[this.glContextId] = null;
this.projection = null;
this.offset = null;
// time to create the render managers! each one focuses on managine a state in webGL
this.shaderManager.destroy();
this.spriteBatch.destroy();
this.maskManager.destroy();
this.filterManager.destroy();
this.shaderManager = null;
this.spriteBatch = null;
this.maskManager = null;
this.filterManager = null;
this.gl = null;
//
this.renderSession = null;
};
PIXI.WebGLRenderer.glContextId = 0;
</pre>