
Fixed issue where alpha not being set correctly in canvas spriteBatch Fixed issue where previous stage events did not get removed correctly
607 lines
18 KiB
HTML
607 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>src/pixi/renderers/webgl/utils/WebGLSpriteBatch.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">
|
|
|
|
<div id="doc">
|
|
<div id="hd" class="yui3-g header">
|
|
<div class="yui3-u-3-4">
|
|
|
|
<h1><img src="http://www.goodboydigital.com/pixijs/logo_small.png" title="pixi.js"></h1>
|
|
|
|
</div>
|
|
<div class="yui3-u-1-4 version">
|
|
<em>API Docs for: 1.4.3</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="../classes/AbstractFilter.html">AbstractFilter</a></li>
|
|
|
|
<li><a href="../classes/AlphaMaskFilter.html">AlphaMaskFilter</a></li>
|
|
|
|
<li><a href="../classes/AssetLoader.html">AssetLoader</a></li>
|
|
|
|
<li><a href="../classes/AtlasLoader.html">AtlasLoader</a></li>
|
|
|
|
<li><a href="../classes/BaseTexture.html">BaseTexture</a></li>
|
|
|
|
<li><a href="../classes/BitmapFontLoader.html">BitmapFontLoader</a></li>
|
|
|
|
<li><a href="../classes/BitmapText.html">BitmapText</a></li>
|
|
|
|
<li><a href="../classes/BlurFilter.html">BlurFilter</a></li>
|
|
|
|
<li><a href="../classes/CanvasGraphics.html">CanvasGraphics</a></li>
|
|
|
|
<li><a href="../classes/CanvasRenderer.html">CanvasRenderer</a></li>
|
|
|
|
<li><a href="../classes/Circle.html">Circle</a></li>
|
|
|
|
<li><a href="../classes/ColorMatrixFilter.html">ColorMatrixFilter</a></li>
|
|
|
|
<li><a href="../classes/ColorStepFilter.html">ColorStepFilter</a></li>
|
|
|
|
<li><a href="../classes/DisplacementFilter.html">DisplacementFilter</a></li>
|
|
|
|
<li><a href="../classes/DisplayObject.html">DisplayObject</a></li>
|
|
|
|
<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>
|
|
|
|
<li><a href="../classes/Graphics.html">Graphics</a></li>
|
|
|
|
<li><a href="../classes/GrayFilter.html">GrayFilter</a></li>
|
|
|
|
<li><a href="../classes/ImageLoader.html">ImageLoader</a></li>
|
|
|
|
<li><a href="../classes/InvertFilter.html">InvertFilter</a></li>
|
|
|
|
<li><a href="../classes/JsonLoader.html">JsonLoader</a></li>
|
|
|
|
<li><a href="../classes/MovieClip.html">MovieClip</a></li>
|
|
|
|
<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>
|
|
|
|
<li><a href="../classes/Polygon.html">Polygon</a></li>
|
|
|
|
<li><a href="../classes/PolyK._convex.html">PolyK._convex</a></li>
|
|
|
|
<li><a href="../classes/PolyK._PointInTriangle.html">PolyK._PointInTriangle</a></li>
|
|
|
|
<li><a href="../classes/PolyK.AjaxRequest.html">PolyK.AjaxRequest</a></li>
|
|
|
|
<li><a href="../classes/PolyK.InteractionData.html">PolyK.InteractionData</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/TwistFilter.html">TwistFilter</a></li>
|
|
|
|
<li><a href="../classes/WebGLRenderer.html">WebGLRenderer</a></li>
|
|
|
|
</ul>
|
|
|
|
<ul id="api-modules" class="apis modules">
|
|
|
|
<li><a href="../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/pixi/renderers/webgl/utils/WebGLSpriteBatch.js</h1>
|
|
|
|
<div class="file">
|
|
<pre class="code prettyprint linenums">
|
|
/**
|
|
* @author Mat Groves
|
|
*
|
|
* Big thanks to the very clever Matt DesLauriers <mattdesl> https://github.com/mattdesl/
|
|
* for creating the original pixi version!
|
|
*
|
|
* Heavily inspired by LibGDX's WebGLSpriteBatch:
|
|
* https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/WebGLSpriteBatch.java
|
|
*/
|
|
|
|
PIXI.WebGLSpriteBatch = function(gl)
|
|
{
|
|
|
|
|
|
this.vertSize = 6;
|
|
this.size = 10000;//Math.pow(2, 16) / this.vertSize;
|
|
|
|
// console.log(this.size);
|
|
//the total number of floats in our batch
|
|
var numVerts = this.size * 4 * this.vertSize;
|
|
//the total number of indices in our batch
|
|
var numIndices = this.size * 6;
|
|
|
|
//vertex data
|
|
this.vertices = new Float32Array(numVerts);
|
|
//index data
|
|
this.indices = new Uint16Array(numIndices);
|
|
|
|
this.lastIndexCount = 0;
|
|
|
|
for (var i=0, j=0; i < numIndices; i += 6, j += 4)
|
|
{
|
|
this.indices[i + 0] = j + 0;
|
|
this.indices[i + 1] = j + 1;
|
|
this.indices[i + 2] = j + 2;
|
|
this.indices[i + 3] = j + 0;
|
|
this.indices[i + 4] = j + 2;
|
|
this.indices[i + 5] = j + 3;
|
|
}
|
|
|
|
|
|
this.drawing = false;
|
|
this.currentBatchSize = 0;
|
|
this.currentBaseTexture = null;
|
|
|
|
this.setContext(gl);
|
|
};
|
|
|
|
PIXI.WebGLSpriteBatch.prototype.setContext = function(gl)
|
|
{
|
|
this.gl = gl;
|
|
|
|
// create a couple of buffers
|
|
this.vertexBuffer = gl.createBuffer();
|
|
this.indexBuffer = gl.createBuffer();
|
|
|
|
// 65535 is max index, so 65535 / 6 = 10922.
|
|
|
|
|
|
//upload the index data
|
|
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
|
|
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.indices, gl.STATIC_DRAW);
|
|
|
|
gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
|
|
gl.bufferData(gl.ARRAY_BUFFER, this.vertices, gl.DYNAMIC_DRAW);
|
|
|
|
this.currentBlendMode = 99999;
|
|
};
|
|
|
|
PIXI.WebGLSpriteBatch.prototype.begin = function(renderSession)
|
|
{
|
|
this.renderSession = renderSession;
|
|
this.shader = this.renderSession.shaderManager.defaultShader;
|
|
|
|
this.start();
|
|
};
|
|
|
|
PIXI.WebGLSpriteBatch.prototype.end = function()
|
|
{
|
|
this.flush();
|
|
};
|
|
|
|
|
|
PIXI.WebGLSpriteBatch.prototype.render = function(sprite)
|
|
{
|
|
// check texture..
|
|
if(sprite.texture.baseTexture !== this.currentBaseTexture || this.currentBatchSize >= this.size)
|
|
{
|
|
this.flush();
|
|
this.currentBaseTexture = sprite.texture.baseTexture;
|
|
}
|
|
|
|
|
|
// check blend mode
|
|
if(sprite.blendMode !== this.currentBlendMode)
|
|
{
|
|
this.setBlendMode(sprite.blendMode);
|
|
}
|
|
|
|
// get the uvs for the texture
|
|
var uvs = sprite._uvs || sprite.texture._uvs;
|
|
// if the uvs have not updated then no point rendering just yet!
|
|
if(!uvs)return;
|
|
|
|
// get the sprites current alpha
|
|
var alpha = sprite.worldAlpha;
|
|
var tint = sprite.tint;
|
|
|
|
var verticies = this.vertices;
|
|
|
|
var width = sprite.texture.frame.width;
|
|
var height = sprite.texture.frame.height;
|
|
|
|
// TODO trim??
|
|
var aX = sprite.anchor.x;
|
|
var aY = sprite.anchor.y;
|
|
|
|
var w0, w1, h0, h1;
|
|
|
|
if (sprite.texture.trimmed)
|
|
{
|
|
// if the sprite is trimmed then we need to add the extra space before transforming the sprite coords..
|
|
var trim = sprite.texture.trim;
|
|
|
|
w1 = trim.x - aX * trim.realWidth;
|
|
w0 = w1 + width;
|
|
|
|
h1 = trim.y - aY * trim.realHeight;
|
|
h0 = h1 + height;
|
|
}
|
|
else
|
|
{
|
|
w0 = (width ) * (1-aX);
|
|
w1 = (width ) * -aX;
|
|
|
|
h0 = height * (1-aY);
|
|
h1 = height * -aY;
|
|
}
|
|
|
|
var index = this.currentBatchSize * 4 * this.vertSize;
|
|
|
|
var worldTransform = sprite.worldTransform;
|
|
|
|
var a = worldTransform[0];
|
|
var b = worldTransform[3];
|
|
var c = worldTransform[1];
|
|
var d = worldTransform[4];
|
|
var tx = worldTransform[2];
|
|
var ty = worldTransform[5];
|
|
|
|
// xy
|
|
verticies[index++] = a * w1 + c * h1 + tx;
|
|
verticies[index++] = d * h1 + b * w1 + ty;
|
|
// uv
|
|
verticies[index++] = uvs[0];
|
|
verticies[index++] = uvs[1];
|
|
// color
|
|
verticies[index++] = alpha;
|
|
verticies[index++] = tint;
|
|
|
|
// xy
|
|
verticies[index++] = a * w0 + c * h1 + tx;
|
|
verticies[index++] = d * h1 + b * w0 + ty;
|
|
// uv
|
|
verticies[index++] = uvs[2];
|
|
verticies[index++] = uvs[3];
|
|
// color
|
|
verticies[index++] = alpha;
|
|
verticies[index++] = tint;
|
|
|
|
// xy
|
|
verticies[index++] = a * w0 + c * h0 + tx;
|
|
verticies[index++] = d * h0 + b * w0 + ty;
|
|
// uv
|
|
verticies[index++] = uvs[4];
|
|
verticies[index++] = uvs[5];
|
|
// color
|
|
verticies[index++] = alpha;
|
|
verticies[index++] = tint;
|
|
|
|
// xy
|
|
verticies[index++] = a * w1 + c * h0 + tx;
|
|
verticies[index++] = d * h0 + b * w1 + ty;
|
|
// uv
|
|
verticies[index++] = uvs[6];
|
|
verticies[index++] = uvs[7];
|
|
// color
|
|
verticies[index++] = alpha;
|
|
verticies[index++] = tint;
|
|
|
|
// increment the batchsize
|
|
this.currentBatchSize++;
|
|
|
|
|
|
};
|
|
|
|
PIXI.WebGLSpriteBatch.prototype.renderTilingSprite = function(tilingSprite)
|
|
{
|
|
var texture = tilingSprite.tilingTexture;
|
|
|
|
if(texture.baseTexture !== this.currentBaseTexture || this.currentBatchSize >= this.size)
|
|
{
|
|
this.flush();
|
|
this.currentBaseTexture = texture.baseTexture;
|
|
}
|
|
|
|
// check blend mode
|
|
if(tilingSprite.blendMode !== this.currentBlendMode)
|
|
{
|
|
this.setBlendMode(tilingSprite.blendMode);
|
|
}
|
|
|
|
// set the textures uvs temporarily
|
|
// TODO create a separate texture so that we can tile part of a texture
|
|
|
|
if(!tilingSprite._uvs)tilingSprite._uvs = new Float32Array(8);
|
|
|
|
var uvs = tilingSprite._uvs;
|
|
|
|
var offsetX = tilingSprite.tilePosition.x/texture.baseTexture.width;
|
|
var offsetY = tilingSprite.tilePosition.y/texture.baseTexture.height;
|
|
|
|
var scaleX = (tilingSprite.width / texture.baseTexture.width) / (tilingSprite.tileScale.x * tilingSprite.tileScaleOffset.x);
|
|
var scaleY = (tilingSprite.height / texture.baseTexture.height) / (tilingSprite.tileScale.y * tilingSprite.tileScaleOffset.y);
|
|
|
|
uvs[0] = 0 - offsetX;
|
|
uvs[1] = 0 - offsetY;
|
|
|
|
uvs[2] = (1 * scaleX) - offsetX;
|
|
uvs[3] = 0 - offsetY;
|
|
|
|
uvs[4] = (1 * scaleX) - offsetX;
|
|
uvs[5] = (1 * scaleY) - offsetY;
|
|
|
|
uvs[6] = 0 - offsetX;
|
|
uvs[7] = (1 *scaleY) - offsetY;
|
|
|
|
|
|
// get the tilingSprites current alpha
|
|
var alpha = tilingSprite.worldAlpha;
|
|
var tint = tilingSprite.tint;
|
|
|
|
var verticies = this.vertices;
|
|
|
|
var width = tilingSprite.width;
|
|
var height = tilingSprite.height;
|
|
|
|
// TODO trim??
|
|
var aX = tilingSprite.anchor.x; // - tilingSprite.texture.trim.x
|
|
var aY = tilingSprite.anchor.y; //- tilingSprite.texture.trim.y
|
|
var w0 = width * (1-aX);
|
|
var w1 = width * -aX;
|
|
|
|
var h0 = height * (1-aY);
|
|
var h1 = height * -aY;
|
|
|
|
var index = this.currentBatchSize * 4 * this.vertSize;
|
|
|
|
var worldTransform = tilingSprite.worldTransform;
|
|
|
|
var a = worldTransform[0];
|
|
var b = worldTransform[3];
|
|
var c = worldTransform[1];
|
|
var d = worldTransform[4];
|
|
var tx = worldTransform[2];
|
|
var ty = worldTransform[5];
|
|
|
|
// xy
|
|
verticies[index++] = a * w1 + c * h1 + tx;
|
|
verticies[index++] = d * h1 + b * w1 + ty;
|
|
// uv
|
|
verticies[index++] = uvs[0];
|
|
verticies[index++] = uvs[1];
|
|
// color
|
|
verticies[index++] = alpha;
|
|
verticies[index++] = tint;
|
|
|
|
// xy
|
|
verticies[index++] = a * w0 + c * h1 + tx;
|
|
verticies[index++] = d * h1 + b * w0 + ty;
|
|
// uv
|
|
verticies[index++] = uvs[2];
|
|
verticies[index++] = uvs[3];
|
|
// color
|
|
verticies[index++] = alpha;
|
|
verticies[index++] = tint;
|
|
|
|
// xy
|
|
verticies[index++] = a * w0 + c * h0 + tx;
|
|
verticies[index++] = d * h0 + b * w0 + ty;
|
|
// uv
|
|
verticies[index++] = uvs[4];
|
|
verticies[index++] = uvs[5];
|
|
// color
|
|
verticies[index++] = alpha;
|
|
verticies[index++] = tint;
|
|
|
|
// xy
|
|
verticies[index++] = a * w1 + c * h0 + tx;
|
|
verticies[index++] = d * h0 + b * w1 + ty;
|
|
// uv
|
|
verticies[index++] = uvs[6];
|
|
verticies[index++] = uvs[7];
|
|
// color
|
|
verticies[index++] = alpha;
|
|
verticies[index++] = tint;
|
|
|
|
// increment the batchs
|
|
this.currentBatchSize++;
|
|
};
|
|
|
|
PIXI.WebGLSpriteBatch.prototype.flush = function()
|
|
{
|
|
// If the batch is length 0 then return as there is nothing to draw
|
|
if (this.currentBatchSize===0)return;
|
|
|
|
var gl = this.gl;
|
|
|
|
// bind the current texture
|
|
gl.bindTexture(gl.TEXTURE_2D, this.currentBaseTexture._glTextures[gl.id] || PIXI.createWebGLTexture(this.currentBaseTexture, gl));
|
|
|
|
// upload the verts to the buffer
|
|
|
|
if(this.currentBatchSize > ( this.size * 0.5 ) )
|
|
{
|
|
gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertices);
|
|
}
|
|
else
|
|
{
|
|
var view = this.vertices.subarray(0, this.currentBatchSize * 4 * this.vertSize);
|
|
|
|
gl.bufferSubData(gl.ARRAY_BUFFER, 0, view);
|
|
}
|
|
|
|
// var view = this.vertices.subarray(0, this.currentBatchSize * 4 * this.vertSize);
|
|
//gl.bufferSubData(gl.ARRAY_BUFFER, 0, view);
|
|
|
|
// now draw those suckas!
|
|
gl.drawElements(gl.TRIANGLES, this.currentBatchSize * 6, gl.UNSIGNED_SHORT, 0);
|
|
|
|
// then reset the batch!
|
|
this.currentBatchSize = 0;
|
|
|
|
// increment the draw count
|
|
this.renderSession.drawCount++;
|
|
};
|
|
|
|
|
|
PIXI.WebGLSpriteBatch.prototype.stop = function()
|
|
{
|
|
this.flush();
|
|
};
|
|
|
|
PIXI.WebGLSpriteBatch.prototype.start = function()
|
|
{
|
|
var gl = this.gl;
|
|
|
|
// bind the main texture
|
|
gl.activeTexture(gl.TEXTURE0);
|
|
|
|
// bind the buffers
|
|
gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
|
|
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
|
|
|
|
// set the projection
|
|
var projection = this.renderSession.projection;
|
|
gl.uniform2f(this.shader.projectionVector, projection.x, projection.y);
|
|
|
|
// set the pointers
|
|
var stride = this.vertSize * 4;
|
|
gl.vertexAttribPointer(this.shader.aVertexPosition, 2, gl.FLOAT, false, stride, 0);
|
|
gl.vertexAttribPointer(this.shader.aTextureCoord, 2, gl.FLOAT, false, stride, 2 * 4);
|
|
gl.vertexAttribPointer(this.shader.colorAttribute, 2, gl.FLOAT, false, stride, 4 * 4);
|
|
|
|
// set the blend mode..
|
|
if(this.currentBlendMode !== PIXI.blendModes.NORMAL)
|
|
{
|
|
this.setBlendMode(PIXI.blendModes.NORMAL);
|
|
}
|
|
};
|
|
|
|
PIXI.WebGLSpriteBatch.prototype.setBlendMode = function(blendMode)
|
|
{
|
|
this.flush();
|
|
|
|
this.currentBlendMode = blendMode;
|
|
|
|
var blendModeWebGL = PIXI.blendModesWebGL[this.currentBlendMode];
|
|
this.gl.blendFunc(blendModeWebGL[0], blendModeWebGL[1]);
|
|
};
|
|
|
|
PIXI.WebGLSpriteBatch.prototype.destroy = function()
|
|
{
|
|
|
|
this.vertices = null;
|
|
this.indices = null;
|
|
|
|
this.gl.deleteBuffer( this.vertexBuffer );
|
|
this.gl.deleteBuffer( this.indexBuffer );
|
|
|
|
this.currentBaseTexture = null;
|
|
|
|
this.gl = null;
|
|
};
|
|
|
|
|
|
</pre>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="../assets/vendor/prettify/prettify-min.js"></script>
|
|
<script>prettyPrint();</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>
|