847eb6c48e
Fixed issue where alpha not being set correctly in canvas spriteBatch Fixed issue where previous stage events did not get removed correctly
552 lines
16 KiB
HTML
552 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.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/WebGLFastSpriteBatch.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.WebGLFastSpriteBatch = function(gl)
|
|
{
|
|
|
|
|
|
this.vertSize = 10;
|
|
this.maxSize = 6000;//Math.pow(2, 16) / this.vertSize;
|
|
this.size = this.maxSize;
|
|
|
|
// 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.maxSize * 6;
|
|
|
|
//vertex data
|
|
this.vertices = new Float32Array(numVerts);
|
|
//index data
|
|
this.indices = new Uint16Array(numIndices);
|
|
|
|
this.vertexBuffer = null;
|
|
this.indexBuffer = null;
|
|
|
|
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.currentBlendMode = 0;
|
|
this.renderSession = null;
|
|
|
|
|
|
this.shader = null;
|
|
|
|
this.tempMatrix = PIXI.mat3.create();
|
|
|
|
this.setContext(gl);
|
|
};
|
|
|
|
PIXI.WebGLFastSpriteBatch.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.WebGLFastSpriteBatch.prototype.begin = function(spriteBatch, renderSession)
|
|
{
|
|
this.renderSession = renderSession;
|
|
this.shader = this.renderSession.shaderManager.fastShader;
|
|
|
|
PIXI.mat3.transpose(spriteBatch.worldTransform, this.tempMatrix);
|
|
|
|
// console.log(this.tempMatrix)
|
|
this.start();
|
|
};
|
|
|
|
PIXI.WebGLFastSpriteBatch.prototype.end = function()
|
|
{
|
|
this.flush();
|
|
};
|
|
|
|
|
|
PIXI.WebGLFastSpriteBatch.prototype.render = function(spriteBatch)
|
|
{
|
|
|
|
var children = spriteBatch.children;
|
|
var sprite = children[0];
|
|
|
|
// if the uvs have not updated then no point rendering just yet!
|
|
|
|
// check texture.
|
|
if(!sprite.texture._uvs)return;
|
|
|
|
this.currentBaseTexture = sprite.texture.baseTexture;
|
|
// check blend mode
|
|
if(sprite.blendMode !== this.currentBlendMode)
|
|
{
|
|
this.setBlendMode(sprite.blendMode);
|
|
}
|
|
|
|
for(var i=0,j= children.length; i<j; i++)
|
|
{
|
|
this.renderSprite(children[i]);
|
|
}
|
|
|
|
this.flush();
|
|
};
|
|
|
|
PIXI.WebGLFastSpriteBatch.prototype.renderSprite = function(sprite)
|
|
{
|
|
//sprite = children[i];
|
|
|
|
// TODO trim??
|
|
if(sprite.texture.baseTexture !== this.currentBaseTexture)
|
|
{
|
|
this.currentBaseTexture = sprite.texture.baseTexture;
|
|
this.flush();
|
|
|
|
if(!sprite.texture._uvs)return;
|
|
}
|
|
|
|
var uvs, verticies = this.vertices, width, height, w0, w1, h0, h1, index;
|
|
|
|
uvs = sprite.texture._uvs;
|
|
|
|
|
|
width = sprite.texture.frame.width;
|
|
height = sprite.texture.frame.height;
|
|
|
|
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 - sprite.anchor.x * trim.realWidth;
|
|
w0 = w1 + sprite.texture.frame.width;
|
|
|
|
h1 = trim.y - sprite.anchor.y * trim.realHeight;
|
|
h0 = h1 + sprite.texture.frame.height;
|
|
}
|
|
else
|
|
{
|
|
w0 = (sprite.texture.frame.width ) * (1-sprite.anchor.x);
|
|
w1 = (sprite.texture.frame.width ) * -sprite.anchor.x;
|
|
|
|
h0 = sprite.texture.frame.height * (1-sprite.anchor.y);
|
|
h1 = sprite.texture.frame.height * -sprite.anchor.y;
|
|
}
|
|
|
|
index = this.currentBatchSize * 4 * this.vertSize;
|
|
|
|
// xy
|
|
verticies[index++] = w1;
|
|
verticies[index++] = h1;
|
|
|
|
verticies[index++] = sprite.position.x;
|
|
verticies[index++] = sprite.position.y;
|
|
|
|
//scale
|
|
verticies[index++] = sprite.scale.x;
|
|
verticies[index++] = sprite.scale.y;
|
|
|
|
//rotation
|
|
verticies[index++] = sprite.rotation;
|
|
|
|
// uv
|
|
verticies[index++] = uvs[0];
|
|
verticies[index++] = uvs[1];
|
|
// color
|
|
verticies[index++] = sprite.alpha;
|
|
|
|
|
|
// xy
|
|
verticies[index++] = w0;
|
|
verticies[index++] = h1;
|
|
|
|
verticies[index++] = sprite.position.x;
|
|
verticies[index++] = sprite.position.y;
|
|
|
|
//scale
|
|
verticies[index++] = sprite.scale.x;
|
|
verticies[index++] = sprite.scale.y;
|
|
|
|
//rotation
|
|
verticies[index++] = sprite.rotation;
|
|
|
|
// uv
|
|
verticies[index++] = uvs[2];
|
|
verticies[index++] = uvs[3];
|
|
// color
|
|
verticies[index++] = sprite.alpha;
|
|
|
|
|
|
// xy
|
|
verticies[index++] = w0;
|
|
verticies[index++] = h0;
|
|
|
|
verticies[index++] = sprite.position.x;
|
|
verticies[index++] = sprite.position.y;
|
|
|
|
//scale
|
|
verticies[index++] = sprite.scale.x;
|
|
verticies[index++] = sprite.scale.y;
|
|
|
|
//rotation
|
|
verticies[index++] = sprite.rotation;
|
|
|
|
// uv
|
|
verticies[index++] = uvs[4];
|
|
verticies[index++] = uvs[5];
|
|
// color
|
|
verticies[index++] = sprite.alpha;
|
|
|
|
|
|
|
|
|
|
// xy
|
|
verticies[index++] = w1;
|
|
verticies[index++] = h0;
|
|
|
|
verticies[index++] = sprite.position.x;
|
|
verticies[index++] = sprite.position.y;
|
|
|
|
//scale
|
|
verticies[index++] = sprite.scale.x;
|
|
verticies[index++] = sprite.scale.y;
|
|
|
|
//rotation
|
|
verticies[index++] = sprite.rotation;
|
|
|
|
// uv
|
|
verticies[index++] = uvs[6];
|
|
verticies[index++] = uvs[7];
|
|
// color
|
|
verticies[index++] = sprite.alpha;
|
|
|
|
// increment the batchs
|
|
this.currentBatchSize++;
|
|
|
|
if(this.currentBatchSize >= this.size)
|
|
{
|
|
this.flush();
|
|
}
|
|
};
|
|
|
|
PIXI.WebGLFastSpriteBatch.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
|
|
|
|
if(!this.currentBaseTexture._glTextures[gl.id])PIXI.createWebGLTexture(this.currentBaseTexture, gl);
|
|
|
|
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);
|
|
}
|
|
|
|
|
|
// 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.WebGLFastSpriteBatch.prototype.stop = function()
|
|
{
|
|
this.flush();
|
|
};
|
|
|
|
PIXI.WebGLFastSpriteBatch.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 matrix
|
|
gl.uniformMatrix3fv(this.shader.uMatrix, false, this.tempMatrix);
|
|
|
|
// set the pointers
|
|
var stride = this.vertSize * 4;
|
|
|
|
gl.vertexAttribPointer(this.shader.aVertexPosition, 2, gl.FLOAT, false, stride, 0);
|
|
gl.vertexAttribPointer(this.shader.aPositionCoord, 2, gl.FLOAT, false, stride, 2 * 4);
|
|
gl.vertexAttribPointer(this.shader.aScale, 2, gl.FLOAT, false, stride, 4 * 4);
|
|
gl.vertexAttribPointer(this.shader.aRotation, 1, gl.FLOAT, false, stride, 6 * 4);
|
|
gl.vertexAttribPointer(this.shader.aTextureCoord, 2, gl.FLOAT, false, stride, 7 * 4);
|
|
gl.vertexAttribPointer(this.shader.colorAttribute, 1, gl.FLOAT, false, stride, 9 * 4);
|
|
|
|
// set the blend mode..
|
|
if(this.currentBlendMode !== PIXI.blendModes.NORMAL)
|
|
{
|
|
this.setBlendMode(PIXI.blendModes.NORMAL);
|
|
}
|
|
};
|
|
|
|
PIXI.WebGLFastSpriteBatch.prototype.setBlendMode = function(blendMode)
|
|
{
|
|
this.flush();
|
|
|
|
this.currentBlendMode = blendMode;
|
|
|
|
var blendModeWebGL = PIXI.blendModesWebGL[this.currentBlendMode];
|
|
this.gl.blendFunc(blendModeWebGL[0], blendModeWebGL[1]);
|
|
};
|
|
|
|
|
|
|
|
</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>
|