Cameras working with BlitterBatch

This commit is contained in:
Felipe Alfonso 2017-02-21 16:21:03 -03:00
parent fbb591fd94
commit 1a0f4119c6
5 changed files with 73 additions and 135 deletions

View file

@ -1,4 +1,4 @@
var CHECKSUM = {
build: '2d175030-f855-11e6-8baa-a7d5f1237a30'
build: '9824f700-f86a-11e6-b8eb-f13c1d2880b2'
};
module.exports = CHECKSUM;

View file

@ -1,8 +1,17 @@
var BlitterWebGLRenderer = function (renderer, src, interpolationPercentage)
var BlitterWebGLRenderer = function (renderer, src, interpolationPercentage, camera)
{
var worldAlpha = src.color.worldAlpha;
var list = src.getRenderList();
var blitterBatch = renderer.blitterBatch;
var cameraMatrix = camera.matrix.matrix;
var a = cameraMatrix[0];
var b = cameraMatrix[1];
var c = cameraMatrix[2];
var d = cameraMatrix[3];
var e = cameraMatrix[4];
var f = cameraMatrix[5];
var cameraScrollX = camera.scrollX;
var cameraScrollY = camera.scrollY;
// Skip rendering?
if (src.skipRender || !src.visible || worldAlpha === 0 || list.length === 0)
@ -12,11 +21,57 @@ var BlitterWebGLRenderer = function (renderer, src, interpolationPercentage)
// Render bobs
for (var i = 0; i < list.length; i++)
for (var i = 0, l = list.length; i < l; i++)
{
var bob = list[i];
var frame = bob.frame;
var alpha = bob.alpha;
var vertexDataBuffer = blitterBatch.vertexDataBuffer;
var vertexBuffer = vertexDataBuffer.floatView;
var vertexOffset = 0;
var uvs = frame.uvs;
var width = frame.width;
var height = frame.height;
var x = bob.x + frame.x - cameraScrollX;
var y = bob.y + frame.y - cameraScrollY;
var xw = x + width;
var yh = y + height;
var tx = x * a + y * c + e;
var ty = x * b + y * d + f;
var txw = xw * a + yh * c + e;
var tyh = xw * b + yh * d + f;
renderer.blitterBatch.add(bob.x, bob.y, bob.frame, bob.alpha);
if (blitterBatch.elementCount >= blitterBatch.maxParticles)
{
blitterBatch.flush();
}
renderer.setBatch(blitterBatch, frame.texture.source[frame.sourceIndex].glTexture);
vertexOffset = vertexDataBuffer.allocate(20);
blitterBatch.elementCount += 6;
x += frame.x;
y += frame.y;
vertexBuffer[vertexOffset++] = tx;
vertexBuffer[vertexOffset++] = ty;
vertexBuffer[vertexOffset++] = uvs.x0;
vertexBuffer[vertexOffset++] = uvs.y0;
vertexBuffer[vertexOffset++] = alpha;
vertexBuffer[vertexOffset++] = tx;
vertexBuffer[vertexOffset++] = tyh;
vertexBuffer[vertexOffset++] = uvs.x1;
vertexBuffer[vertexOffset++] = uvs.y1;
vertexBuffer[vertexOffset++] = alpha;
vertexBuffer[vertexOffset++] = txw;
vertexBuffer[vertexOffset++] = tyh;
vertexBuffer[vertexOffset++] = uvs.x2;
vertexBuffer[vertexOffset++] = uvs.y2;
vertexBuffer[vertexOffset++] = alpha;
vertexBuffer[vertexOffset++] = txw;
vertexBuffer[vertexOffset++] = ty;
vertexBuffer[vertexOffset++] = uvs.x3;
vertexBuffer[vertexOffset++] = uvs.y3;
vertexBuffer[vertexOffset++] = alpha;
}
};

View file

@ -1,6 +1,10 @@
var ImageWebGLRenderer = function (renderer, src, interpolationPercentage, camera)
{
//--------------------
// Inlined quad push
//--------------------
var frame = src.frame;
var alpha = 16777216;
var transform2D = src.transform;
@ -11,7 +15,7 @@ var ImageWebGLRenderer = function (renderer, src, interpolationPercentage, camer
var vertexDataBuffer = spriteBatch.vertexDataBuffer;
var vertexBufferF32 = vertexDataBuffer.floatView;
var vertexBufferU32 = vertexDataBuffer.uintView;
var vertexOffset = vertexDataBuffer.allocate(40);
var vertexOffset = 0;
var uvs = frame.uvs;
var width = frame.width;
var height = frame.height;
@ -37,6 +41,8 @@ var ImageWebGLRenderer = function (renderer, src, interpolationPercentage, camer
var tyh = xw * b + yh * d + f;
renderer.setBatch(spriteBatch, frame.texture.source[frame.sourceIndex].glTexture);
vertexOffset = vertexDataBuffer.allocate(40);
spriteBatch.elementCount += 6;
vertexBufferF32[vertexOffset++] = tx;
vertexBufferF32[vertexOffset++] = ty;
@ -78,8 +84,6 @@ var ImageWebGLRenderer = function (renderer, src, interpolationPercentage, camer
vertexBufferF32[vertexOffset++] = scaleY;
vertexBufferF32[vertexOffset++] = rotation;
vertexBufferU32[vertexOffset++] = vertexColor.topRight;
spriteBatch.elementCount += 6;
};
module.exports = ImageWebGLRenderer;

View file

@ -112,52 +112,6 @@ BlitterBatch.prototype = {
return (this.vertexDataBuffer.getByteLength() >= this.vertexDataBuffer.getByteCapacity());
},
add: function (x, y, frame, alpha)
{
this.manager.setBatch(this, frame.texture.source[frame.sourceIndex].glTexture);
if (this.elementCount >= this.maxParticles)
{
this.flush();
}
var vertexDataBuffer = this.vertexDataBuffer;
var vertexBuffer = vertexDataBuffer.floatView;
var vertexOffset = vertexDataBuffer.allocate(CONST.PARTICLE_VERTEX_COMPONENT_COUNT * CONST.PARTICLE_VERTEX_COUNT);
var uvs = frame.uvs;
var width = frame.width;
var height = frame.height;
x += frame.x;
y += frame.y;
vertexBuffer[vertexOffset++] = x;
vertexBuffer[vertexOffset++] = y;
vertexBuffer[vertexOffset++] = uvs.x0;
vertexBuffer[vertexOffset++] = uvs.y0;
vertexBuffer[vertexOffset++] = alpha;
vertexBuffer[vertexOffset++] = x;
vertexBuffer[vertexOffset++] = y + height;
vertexBuffer[vertexOffset++] = uvs.x1;
vertexBuffer[vertexOffset++] = uvs.y1;
vertexBuffer[vertexOffset++] = alpha;
vertexBuffer[vertexOffset++] = x + width;
vertexBuffer[vertexOffset++] = y + height;
vertexBuffer[vertexOffset++] = uvs.x2;
vertexBuffer[vertexOffset++] = uvs.y2;
vertexBuffer[vertexOffset++] = alpha;
vertexBuffer[vertexOffset++] = x + width;
vertexBuffer[vertexOffset++] = y;
vertexBuffer[vertexOffset++] = uvs.x3;
vertexBuffer[vertexOffset++] = uvs.y3;
vertexBuffer[vertexOffset++] = alpha;
this.elementCount += CONST.PARTICLE_INDEX_COUNT;
},
bind: function ()
{
var gl = this.glContext;

View file

@ -112,86 +112,6 @@ SpriteBatch.prototype = {
return (this.vertexDataBuffer.getByteLength() >= this.vertexDataBuffer.getByteCapacity());
},
add: function (frame, anchorX, anchorY, transform2D, vertexColor, camera)
{
this.manager.setBatch(this, frame.texture.source[frame.sourceIndex].glTexture);
// The user must check if the buffers are full before flushing
// this is to give freedom of when should the renderer flush. var vertexDataBuffer = this.vertexDataBuffer;
var vertexDataBuffer = this.vertexDataBuffer;
var vertexBufferF32 = vertexDataBuffer.floatView;
var vertexBufferU32 = vertexDataBuffer.uintView;
var vertexOffset = vertexDataBuffer.allocate(CONST.SPRITE_VERTEX_COMPONENT_COUNT * CONST.SPRITE_VERTEX_COUNT);
var uvs = frame.uvs;
var width = frame.width;
var height = frame.height;
var translateX = transform2D.x - camera.scrollX;
var translateY = transform2D.y - camera.scrollY;
var scaleX = transform2D.scaleX;
var scaleY = transform2D.scaleY;
var rotation = transform2D.angle;
var a = cameraMatrix[0];
var b = cameraMatrix[1];
var c = cameraMatrix[2];
var d = cameraMatrix[3];
var e = cameraMatrix[4];
var f = cameraMatrix[5];
var x = width * -anchorX + frame.x;
var y = height * -anchorY + frame.y;
var xw = x + width;
var yh = y + height;
var tx = x * a + y * c + e;
var ty = x * b + y * d + f;
var txw = xw * a + yh * c + e;
var tyh = xw * b + yh * d + f;
vertexBufferF32[vertexOffset++] = tx;
vertexBufferF32[vertexOffset++] = ty;
vertexBufferF32[vertexOffset++] = uvs.x0;
vertexBufferF32[vertexOffset++] = uvs.y0;
vertexBufferF32[vertexOffset++] = translateX;
vertexBufferF32[vertexOffset++] = translateY;
vertexBufferF32[vertexOffset++] = scaleX;
vertexBufferF32[vertexOffset++] = scaleY;
vertexBufferF32[vertexOffset++] = rotation;
vertexBufferU32[vertexOffset++] = vertexColor.topLeft;
vertexBufferF32[vertexOffset++] = tx;
vertexBufferF32[vertexOffset++] = tyh;
vertexBufferF32[vertexOffset++] = uvs.x1;
vertexBufferF32[vertexOffset++] = uvs.y1;
vertexBufferF32[vertexOffset++] = translateX;
vertexBufferF32[vertexOffset++] = translateY;
vertexBufferF32[vertexOffset++] = scaleX;
vertexBufferF32[vertexOffset++] = scaleY;
vertexBufferF32[vertexOffset++] = rotation;
vertexBufferU32[vertexOffset++] = vertexColor.bottomLeft;
vertexBufferF32[vertexOffset++] = txw;
vertexBufferF32[vertexOffset++] = tyh;
vertexBufferF32[vertexOffset++] = uvs.x2;
vertexBufferF32[vertexOffset++] = uvs.y2;
vertexBufferF32[vertexOffset++] = translateX;
vertexBufferF32[vertexOffset++] = translateY;
vertexBufferF32[vertexOffset++] = scaleX;
vertexBufferF32[vertexOffset++] = scaleY;
vertexBufferF32[vertexOffset++] = rotation;
vertexBufferU32[vertexOffset++] = vertexColor.bottomRight;
vertexBufferF32[vertexOffset++] = txw;
vertexBufferF32[vertexOffset++] = ty;
vertexBufferF32[vertexOffset++] = uvs.x3;
vertexBufferF32[vertexOffset++] = uvs.y3;
vertexBufferF32[vertexOffset++] = translateX;
vertexBufferF32[vertexOffset++] = translateY;
vertexBufferF32[vertexOffset++] = scaleX;
vertexBufferF32[vertexOffset++] = scaleY;
vertexBufferF32[vertexOffset++] = rotation;
vertexBufferU32[vertexOffset++] = vertexColor.topRight;
this.elementCount += CONST.SPRITE_INDEX_COUNT;
},
bind: function ()
{
var gl = this.glContext;
@ -213,6 +133,11 @@ SpriteBatch.prototype = {
flush: function ()
{
if (this.elementCount === 0)
{
return;
}
var gl = this.glContext;
var vertexDataBuffer = this.vertexDataBuffer;