Skip to content

Implementation of auto batch #3265

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 17 commits into from
Apr 20, 2016
Merged

Implementation of auto batch #3265

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
400859e
Draft implementation of auto batch
pandamicro Apr 9, 2016
b845a16
Bind attribute MVMAT and Fix matrix attribute set issue
pandamicro Apr 11, 2016
66231d5
Improve auto batch implementation
pandamicro Apr 11, 2016
cf37f56
Improve details and add comments & Add reference to @Heishe
pandamicro Apr 11, 2016
4d689aa
Merge branch 'develop' of git://github.com/cocos2d/cocos2d-html5 into…
pandamicro Apr 12, 2016
f8f873e
Small performance improvement for auto batching
pandamicro Apr 12, 2016
d6ec37d
Refactor auto batching implementation (support buffer cache)
pandamicro Apr 13, 2016
95aed33
Auto batch v3 and v4 with activation flags
pandamicro Apr 13, 2016
8e2507d
Fix Autobatch v4
pandamicro Apr 14, 2016
8201f3e
Fix transform issue with first sprite batched
pandamicro Apr 14, 2016
eb590d7
Disable autobatch v4 on mobile devices
pandamicro Apr 14, 2016
a459947
Rearrange auto batch flags: ACTIVATE_AUTO_BATCH + CACHING_BUFFER
pandamicro Apr 15, 2016
3b9b712
Add SimplePool and fix status sync issue with sprite in auto batch
pandamicro Apr 16, 2016
4cf480e
Auto batch v5
pandamicro Apr 17, 2016
d0e3ea6
Activate CACHING_BUFFER by default
pandamicro Apr 17, 2016
c7a0c05
Fix GLProgram's uniform cache issue
pandamicro Apr 18, 2016
5c252e6
Use only one index buffer for auto batching
pandamicro Apr 18, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 0 additions & 15 deletions cocos2d/core/base-nodes/CCNodeCanvasRenderCmd.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,9 +57,6 @@ cc.Node.RenderCmd = function(renderable){
this._cascadeOpacityEnabledDirty = false;

this._curLevel = -1;

// this._minZ = 0;
// this._maxZ = 0;
};

cc.Node.RenderCmd.prototype = {
Expand Down Expand Up @@ -384,8 +381,6 @@ cc.Node.RenderCmd.prototype = {
var node = this._node;
var i, children = node._children, child, cmd;
var len = children.length;
// var minZ = Number.MAX_VALUE;
// var maxZ = -Number.MAX_VALUE;
if (len > 0) {
node.sortAllChildren();
// draw children zOrder < 0
Expand All @@ -394,8 +389,6 @@ cc.Node.RenderCmd.prototype = {
if (child._localZOrder < 0) {
cmd = child._renderCmd;
cmd.visit(this);
// minZ = Math.min(minZ, child._minZ);
// maxZ = Math.max(maxZ, child._maxZ);
}
else {
break;
Expand All @@ -406,19 +399,11 @@ cc.Node.RenderCmd.prototype = {
node._vertexZ = z;
renderer.assignedZ += renderer.assignedZStep;

// minZ = Math.min(minZ,z);
// maxZ = Math.max(maxZ,z);

renderer.pushRenderCommand(this);
for (; i < len; i++) {
child = children[i];
child._renderCmd.visit(this);
// minZ = Math.min(minZ, child._minZ);
// maxZ = Math.max(maxZ, child._maxZ);
}

// node._minZ = minZ;
// node._maxZ = maxZ;
} else {
node._vertexZ = renderer.assignedZ;
renderer.assignedZ += renderer.assignedZStep;
Expand Down
106 changes: 56 additions & 50 deletions cocos2d/core/renderer/RendererWebGL.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,9 +59,49 @@ var _batchedInfo = {
_batchBufferPool = new cc.SimplePool(),
_orderDirtyInFrame = false,
_bufferError = false,
_prevRenderCmds = [];
_prevRenderCmds = [],
_quadIndexBuffer = {
buffer: null,
maxQuads: 0
};

// Inspired from @Heishe's gotta-batch-them-all branch
// https://github.com/Talisca/cocos2d-html5/commit/de731f16414eb9bcaa20480006897ca6576d362c
function updateQuadIndexBuffer (numQuads) {
if (!_quadIndexBuffer.buffer) {
return;
}
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, _quadIndexBuffer.buffer);

var indices = new Uint16Array(numQuads * 6);
var currentQuad = 0;
for (var i = 0, len = numQuads * 6; i < len; i += 6) {
indices[i] = currentQuad + 0;
indices[i + 1] = currentQuad + 1;
indices[i + 2] = currentQuad + 2;
indices[i + 3] = currentQuad + 1;
indices[i + 4] = currentQuad + 2;
indices[i + 5] = currentQuad + 3;
currentQuad += 4;
}
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
}

// Inspired from @Heishe's gotta-batch-them-all branch
// https://github.com/Talisca/cocos2d-html5/commit/de731f16414eb9bcaa20480006897ca6576d362c
function getQuadIndexBuffer (numQuads) {
if (_quadIndexBuffer.buffer === null) {
_quadIndexBuffer.buffer = gl.createBuffer();
}

if (_quadIndexBuffer.maxQuads < numQuads) {
updateQuadIndexBuffer(numQuads);
}

return _quadIndexBuffer.buffer;
}

function createVirtualBuffer (buffer, vertexOffset, matrixOrigin, matrixOffset, indexOffset, totalBufferSize, totalIndexSize, count, data) {
function createVirtualBuffer (buffer, vertexOffset, matrixOrigin, matrixOffset, totalBufferSize, count, data) {
data = data || new Uint32Array(totalBufferSize / 4);
var vBuf = {
// The object contains real WebGL buffers, it's created or retrieved via getBatchBuffer
Expand All @@ -74,12 +114,8 @@ function createVirtualBuffer (buffer, vertexOffset, matrixOrigin, matrixOffset,
matrixOrigin: matrixOrigin,
// The start offset after the origin of matrix data in the vertex buffer, in bytes
matrixOffset: matrixOffset,
// The start offset in the index buffer
indexOffset: indexOffset,
// Total vertex array buffer size, including vertex data and matrix data, in bytes
totalBufferSize: totalBufferSize,
// Index array size
totalIndexSize: totalIndexSize,
// Render command count
count: count
};
Expand Down Expand Up @@ -225,39 +261,35 @@ return {

// Auto batch implementation inspired from @Heishe 's PR
// Ref: https://github.com/cocos2d/cocos2d-html5/pull/3248
createBatchBuffer: function (bufferSize, indexSize) {
createBatchBuffer: function (bufferSize) {
var arrayBuffer = gl.createBuffer();
var elementBuffer = gl.createBuffer();

this.initBatchBuffers(arrayBuffer, elementBuffer, bufferSize, indexSize);
this.initBatchBuffers(arrayBuffer, bufferSize);

return {arrayBuffer: arrayBuffer, elementBuffer: elementBuffer, bufferSize: bufferSize, indexSize: indexSize};
return {arrayBuffer: arrayBuffer, bufferSize: bufferSize};
},

// Auto batch implementation inspired from @Heishe 's PR
// Ref: https://github.com/cocos2d/cocos2d-html5/pull/3248
initBatchBuffers: function (arrayBuffer, elementBuffer, bufferSize, indexSize) {
initBatchBuffers: function (arrayBuffer, bufferSize) {
gl.bindBuffer(gl.ARRAY_BUFFER, arrayBuffer);
gl.bufferData(gl.ARRAY_BUFFER, bufferSize, gl.DYNAMIC_DRAW);

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, elementBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indexSize, gl.DYNAMIC_DRAW);
},

// Auto batch implementation inspired from @Heishe 's PR
// Ref: https://github.com/cocos2d/cocos2d-html5/pull/3248

// Returns an object with {arrayBuffer, elementBuffer, size},
// Returns an object with {arrayBuffer, size},
// where size denotes how many unit fit in the buffer (no need for bufferData if it's already big enough, bufferSubData enough)
getBatchBuffer: function(bufferSize, indexSize)
getBatchBuffer: function(bufferSize)
{
if (_batchBufferPool.size() > 0) {
var minSize = Number.MAX_VALUE;
var minBufIndex = -1;

var buf = _batchBufferPool.find(function (i, buf) {
// Find available buffer with suitable size
if (buf.bufferSize >= bufferSize && buf.indexSize >= indexSize) {
if (buf.bufferSize >= bufferSize) {
return true;
}

Expand All @@ -272,14 +304,13 @@ return {
});

if (buf) {
this.initBatchBuffers(buf.arrayBuffer, buf.elementBuffer, bufferSize, indexSize);
this.initBatchBuffers(buf.arrayBuffer, bufferSize);
buf.bufferSize = bufferSize;
buf.indexSize = indexSize;
return buf;
}
}

return this.createBatchBuffer(bufferSize, indexSize);
return this.createBatchBuffer(bufferSize);
},

_refreshVirtualBuffers: function () {
Expand Down Expand Up @@ -346,15 +377,11 @@ return {
else if (count > 1) {
// First command in buffer
cmd1 = _prevRenderCmds[i];
// Last command in buffer
cmd2 = _prevRenderCmds[end-1];
newBuf = createVirtualBuffer(currBuf.buffer,
cmd1._vertexOffset,
currBuf.matrixOrigin,
cmd1._matrixOffset,
cmd1._indexOffset,
currBuf.totalBufferSize,
cmd2._indexOffset - cmd1._indexOffset + cmd2.indicesPerUnit,
count,
currBuf.dataArray);
for (; i < end; ++i) {
Expand Down Expand Up @@ -468,7 +495,6 @@ return {

var matrixOrigin = cmd.vertexBytesPerUnit;
var totalBufferSize = cmd.bytesPerUnit;
var totalIndexSize = cmd.indicesPerUnit;

// Forward search and collect batch informations
cmd = renderCmds[last];
Expand All @@ -489,7 +515,6 @@ return {
else {
matrixOrigin += cmd.vertexBytesPerUnit;
totalBufferSize += cmd.bytesPerUnit;
totalIndexSize += cmd.indicesPerUnit;
}
++last;
cmd = renderCmds[last];
Expand All @@ -501,16 +526,14 @@ return {
return count;
}

var buffer = this.getBatchBuffer(totalBufferSize, totalIndexSize * 2); // *2 because we use shorts for indices
var buffer = this.getBatchBuffer(totalBufferSize);

// Create a virtual buffer
var vbuffer = createVirtualBuffer(buffer,
0,
matrixOrigin,
0,
0,
totalBufferSize,
totalIndexSize,
count);
_currentBuffer = vbuffer;
var uploadBuffer = vbuffer.dataArray;
Expand All @@ -524,7 +547,7 @@ return {
gl.bindBuffer(gl.ARRAY_BUFFER, vbuffer.buffer.arrayBuffer);

// Fill in vertex data command by command
var i, index = 0;
var i;
for (i = first; i < last; ++i) {
cmd = renderCmds[i];
cmd.batchVertexBuffer(uploadBuffer, vertexDataOffset, totalVertexData, matrixDataOffset);
Expand All @@ -533,36 +556,18 @@ return {
cmd._vBuffer = vbuffer;
cmd._vertexOffset = vertexDataOffset;
cmd._matrixOffset = matrixDataOffset;
cmd._indexOffset = index;
}
if (cmd._savedDirtyFlag) {
cmd._savedDirtyFlag = false;
}

vertexDataOffset += cmd.vertexBytesPerUnit / 4;
matrixDataOffset += cmd.matrixBytesPerUnit / 4;
index += cmd.indicesPerUnit;
}

// Submit vertex data in one bufferSubData call
gl.bufferSubData(gl.ARRAY_BUFFER, 0, uploadBuffer);

// Bind element buffer
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, vbuffer.buffer.elementBuffer);

var indices = new Uint16Array(totalIndexSize);

// Fill in element buffer command by command
var currentVertex = 0;
for (i = first; i < last; ++i) {
cmd = renderCmds[i];
cmd.batchIndexBuffer(indices, cmd._indexOffset, currentVertex);

currentVertex += cmd.verticesPerUnit;
}

gl.bufferSubData(gl.ELEMENT_ARRAY_BUFFER, 0, indices);

if (!CACHING_BUFFER) {
_batchBufferPool.put(buffer);
}
Expand Down Expand Up @@ -603,8 +608,9 @@ return {
gl.vertexAttribPointer(cc.VERTEX_ATTRIB_MVMAT0 + i, 4, gl.FLOAT, false, bytesPerRow * 4, matrixOffset + bytesPerRow * i); //stride is one row
}

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, _currentBuffer.buffer.elementBuffer);
gl.drawElements(gl.TRIANGLES, _currentBuffer.totalIndexSize, gl.UNSIGNED_SHORT, _currentBuffer.indexOffset);
var elemBuffer = getQuadIndexBuffer(count);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool now you just using one index buffer everywhere, very clever!
But my question is, how to change the rendering order without customizing index buffer? using z buffer?

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, elemBuffer);
gl.drawElements(gl.TRIANGLES, count * 6, gl.UNSIGNED_SHORT, 0);

for (i = 0; i < 4; ++i) {
gl.disableVertexAttribArray(cc.VERTEX_ATTRIB_MVMAT0 + i);
Expand Down
12 changes: 0 additions & 12 deletions cocos2d/core/sprites/CCSpriteWebGLRenderCmd.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,6 @@
this._vBuffer = null;
this._vertexOffset = 0;
this._matrixOffset = 0;
this._indexOffset = 0;

if (!proto.batchShader) {
proto.batchShader = cc.shaderCache.programForKey(cc.SHADER_POSITION_TEXTURECOLORALPHATEST_BATCHED);
Expand Down Expand Up @@ -555,15 +554,4 @@
buffer[offset3 + i] = val;
}
};

proto.batchIndexBuffer = function (indices, index, vertexIndex) {
// Fill in index buffer, we split quad into two triangles
// because only triangles can be batched
indices[index] = vertexIndex + 0;
indices[index + 1] = vertexIndex + 1;
indices[index + 2] = vertexIndex + 2;
indices[index + 3] = vertexIndex + 1;
indices[index + 4] = vertexIndex + 2;
indices[index + 5] = vertexIndex + 3;
};
})();
2 changes: 1 addition & 1 deletion cocos2d/core/utils/CCProfiler.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ cc.profiler = (function () {
};

var analyseFPS = function (fps) {
var lastId = i = LEVELS.length - 1, ratio, average = 0;
var lastId = LEVELS.length - 1, i = lastId, ratio, average = 0;
_analyseCount++;
_totalFPS += fps;

Expand Down
2 changes: 1 addition & 1 deletion cocos2d/core/utils/CCSimplePool.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ cc.SimplePool.prototype = {
},

put: function (obj) {
if (obj && this._pool.indexOf(obj) !== -1) {
if (obj && this._pool.indexOf(obj) === -1) {
this._pool.unshift(obj);
}
},
Expand Down