From 822fc052eeed3dac6152c7e3e9f06dae1ac62c75 Mon Sep 17 00:00:00 2001 From: Felipe Alfonso Date: Tue, 23 Jan 2018 13:38:58 -0300 Subject: [PATCH] Sprite batching --- src/renderer/webgl/WebGLRenderer.js | 8 +- .../webgl/pipelines/TextureTintPipeline.js | 117 +++++++++++++++++- 2 files changed, 119 insertions(+), 6 deletions(-) diff --git a/src/renderer/webgl/WebGLRenderer.js b/src/renderer/webgl/WebGLRenderer.js index a13dcd383..a6341688a 100644 --- a/src/renderer/webgl/WebGLRenderer.js +++ b/src/renderer/webgl/WebGLRenderer.js @@ -204,13 +204,11 @@ var WebGLRenderer = new Class({ return this; }, - setPipeline: function (pipelineName, overrideProgram) + setPipeline: function (pipelineInstance, overrideProgram) { - var pipeline = this.getPipeline(pipelineName); - - if (this.currentPipeline !== pipeline) + if (this.currentPipeline !== pipelineInstance) { - this.currentPipeline = pipeline; + this.currentPipeline = pipelineInstance; this.currentPipeline.bind(overrideProgram); } diff --git a/src/renderer/webgl/pipelines/TextureTintPipeline.js b/src/renderer/webgl/pipelines/TextureTintPipeline.js index 50be5cea8..c5e414b82 100644 --- a/src/renderer/webgl/pipelines/TextureTintPipeline.js +++ b/src/renderer/webgl/pipelines/TextureTintPipeline.js @@ -93,7 +93,7 @@ var TextureTintPipeline = new Class({ drawBlitter: function (blitter, camera) { - this.renderer.setPipeline('TextureTintPipeline', blitter.shader); + this.renderer.setPipeline(this); var vertexViewF32 = this.vertexViewF32; var vertexViewU32 = this.vertexViewU32; @@ -191,6 +191,121 @@ var TextureTintPipeline = new Class({ this.vertexCount = (batchSize * 6); this.flush(); } + }, + + batchSprite: function (sprite, camera) + { + this.renderer.setPipeline(this); + + if (this.vertexCount + 6 > this.vertexCapacity) + { + this.flush(); + } + + var vertexViewF32 = this.vertexViewF32; + var vertexViewU32 = this.vertexViewU32; + var shader = this.currentProgram; + 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 frame = sprite.frame; + var texture = frame.texture.source[frame.sourceIndex].glTexture; + var forceFlipY = (texture.isRenderTexture ? true : false); + var flipX = sprite.flipX; + var flipY = sprite.flipY ^ forceFlipY; + var uvs = frame.uvs; + var width = frame.width * (flipX ? -1.0 : 1.0); + var height = frame.height * (flipY ? -1.0 : 1.0); + var x = -sprite.displayOriginX + frame.x + ((frame.width) * (flipX ? 1.0 : 0.0)); + var y = -sprite.displayOriginY + frame.y + ((frame.height) * (flipY ? 1.0 : 0.0)); + var xw = x + width; + var yh = y + height; + var translateX = sprite.x - camera.scrollX * sprite.scrollFactorX; + var translateY = sprite.y - camera.scrollY * sprite.scrollFactorY; + var scaleX = sprite.scaleX; + var scaleY = sprite.scaleY; + var rotation = -sprite.rotation; + var alphaTL = sprite._alphaTL; + var alphaTR = sprite._alphaTR; + var alphaBL = sprite._alphaBL; + var alphaBR = sprite._alphaBR; + var tintTL = sprite._tintTL; + var tintTR = sprite._tintTR; + var tintBL = sprite._tintBL; + var tintBR = sprite._tintBR; + var sr = Math.sin(rotation); + var cr = Math.cos(rotation); + var sra = cr * scaleX; + var srb = -sr * scaleX; + var src = sr * scaleY; + var srd = cr * scaleY; + var sre = translateX; + var srf = translateY; + var cma = cameraMatrix[0]; + var cmb = cameraMatrix[1]; + var cmc = cameraMatrix[2]; + var cmd = cameraMatrix[3]; + var cme = cameraMatrix[4]; + var cmf = cameraMatrix[5]; + var mva = sra * cma + srb * cmc; + var mvb = sra * cmb + srb * cmd; + var mvc = src * cma + srd * cmc; + var mvd = src * cmb + srd * cmd; + var mve = sre * cma + srf * cmc + cme; + var mvf = sre * cmb + srf * cmd + cmf; + var tx0 = x * mva + y * mvc + mve; + var ty0 = x * mvb + y * mvd + mvf; + var tx1 = x * mva + yh * mvc + mve; + var ty1 = x * mvb + yh * mvd + mvf; + var tx2 = xw * mva + yh * mvc + mve; + var ty2 = xw * mvb + yh * mvd + mvf; + var tx3 = xw * mva + y * mvc + mve; + var ty3 = xw * mvb + y * mvd + mvf; + var getTint = Utils.getTintAppendFloatAlpha; + var tint0 = getTint(tintTL, alphaTL); + var tint1 = getTint(tintTR, alphaTR); + var tint2 = getTint(tintBL, alphaBL); + var tint3 = getTint(tintBR, alphaBR); + + renderer.setTexture2D(frame.texture.source[frame.sourceIndex].glTexture, 0); + + vertexViewF32[0] = tx0; + vertexViewF32[1] = ty0; + vertexViewF32[2] = uvs.x0; + vertexViewF32[3] = uvs.y0; + vertexViewU32[4] = tint0; + vertexViewF32[5] = tx1; + vertexViewF32[6] = ty1; + vertexViewF32[7] = uvs.x1; + vertexViewF32[8] = uvs.y1; + vertexViewU32[9] = tint1; + vertexViewF32[10] = tx2; + vertexViewF32[11] = ty2; + vertexViewF32[12] = uvs.x2; + vertexViewF32[13] = uvs.y2; + vertexViewU32[14] = tint2; + vertexViewF32[15] = tx0; + vertexViewF32[16] = ty0; + vertexViewF32[17] = uvs.x0; + vertexViewF32[18] = uvs.y0; + vertexViewU32[19] = tint0; + vertexViewF32[20] = tx2; + vertexViewF32[21] = ty2; + vertexViewF32[22] = uvs.x2; + vertexViewF32[23] = uvs.y2; + vertexViewU32[24] = tint2; + vertexViewF32[25] = tx3; + vertexViewF32[26] = ty3; + vertexViewF32[27] = uvs.x3; + vertexViewF32[28] = uvs.y3; + vertexViewU32[29] = tint3; + + this.vertexCount += 6; + } });