Static BitmapText rendering. Added rect culling to TextureTintPipeline

src/gameobjects/bitmaptext/static/BitmapTextWebGLRenderer.js

@@ -12,178 +12,7 @@ var BitmapTextWebGLRenderer = function (renderer, gameObject, interpolationPerce
         return;
     }
 
-    var textureFrame = gameObject.frame;
+    renderer.pipelines.TextureTintPipeline.batchBitmapText(this, camera);
-    var cameraScrollX = camera.scrollX * gameObject.scrollFactorX;
-    var cameraScrollY = camera.scrollY * gameObject.scrollFactorY;
-    var chars = gameObject.fontData.chars;
-    var lineHeight = gameObject.fontData.lineHeight;
-    var spriteBatch = renderer.spriteBatch;
-    var alpha = gameObject.alpha;
-    var tintTL = gameObject._tintTL;
-    var tintTR = gameObject._tintTR;
-    var tintBL = gameObject._tintBL;
-    var tintBR = gameObject._tintBR;
-    var vertexDataBuffer = spriteBatch.vertexDataBuffer;
-    var vertexBuffer = vertexDataBuffer.floatView;
-    var vertexBufferU32 = vertexDataBuffer.uintView;
-    var vertexOffset = 0;
-    var srcX = gameObject.x;
-    var srcY = gameObject.y;
-    var textureData = gameObject.texture.source[textureFrame.sourceIndex];
-    var textureX = textureFrame.cutX;
-    var textureY = textureFrame.cutY;
-    var textureWidth = textureData.width;
-    var textureHeight = textureData.height;
-    var texture = textureData.glTexture;
-    var xAdvance = 0;
-    var yAdvance = 0;
-    var indexCount = 0;
-    var charCode = 0;
-    var glyph = null;
-    var glyphX = 0;
-    var glyphY = 0;
-    var glyphW = 0;
-    var glyphH = 0;
-    var x = 0;
-    var y = 0;
-    var xw = 0;
-    var yh = 0;
-    var umin = 0;
-    var umax = 0;
-    var vmin = 0;
-    var vmax = 0;
-    var lastGlyph = null;
-    var lastCharCode = 0;
-    var tempMatrixMatrix = tempMatrix.matrix;
-    var cameraMatrix = camera.matrix.matrix;
-    var mva, mvb, mvc, mvd, mve, mvf, tx0, ty0, tx1, ty1, tx2, ty2, tx3, ty3;
-    var sra, srb, src, srd, sre, srf, cma, cmb, cmc, cmd, cme, cmf;
-    var scale = (gameObject.fontSize / gameObject.fontData.size);
-    var renderTarget = gameObject.renderTarget;
-
-    tempMatrix.applyITRS(
-        (srcX - cameraScrollX) + textureFrame.x, (srcY - cameraScrollY) + textureFrame.y,
-        -gameObject.rotation,
-        gameObject.scaleX, gameObject.scaleY
-    );
-
-    sra = tempMatrixMatrix[0];
-    srb = tempMatrixMatrix[1];
-    src = tempMatrixMatrix[2];
-    srd = tempMatrixMatrix[3];
-    sre = tempMatrixMatrix[4];
-    srf = tempMatrixMatrix[5];
-
-    cma = cameraMatrix[0];
-    cmb = cameraMatrix[1];
-    cmc = cameraMatrix[2];
-    cmd = cameraMatrix[3];
-    cme = cameraMatrix[4];
-    cmf = cameraMatrix[5];
-
-    mva = sra * cma + srb * cmc;
-    mvb = sra * cmb + srb * cmd;
-    mvc = src * cma + srd * cmc;
-    mvd = src * cmb + srd * cmd;
-    mve = sre * cma + srf * cmc + cme;
-    mvf = sre * cmb + srf * cmd + cmf;
-
-    for (var index = 0; index < textLength; ++index)
-    {
-        charCode = text.charCodeAt(index);
-
-        if (charCode === 10)
-        {
-            xAdvance = 0;
-            indexCount = 0;
-            yAdvance += lineHeight;
-            lastGlyph = null;
-            continue;
-        }
-
-        glyph = chars[charCode];
-
-        if (!glyph)
-        {
-            continue;
-        }
-
-        glyphX = textureX + glyph.x;
-        glyphY = textureY + glyph.y;
-        glyphW = glyph.width;
-        glyphH = glyph.height;
-        x = (indexCount + glyph.xOffset + xAdvance) * scale;
-        y = (glyph.yOffset + yAdvance) * scale;
-
-        if (lastGlyph !== null)
-        {
-            var kerningOffset = glyph.kerning[lastCharCode];
-            x += (kerningOffset !== undefined) ? kerningOffset : 0;
-        }
-
-        xAdvance += glyph.xAdvance;
-        indexCount += 1;
-        lastGlyph = glyph;
-        lastCharCode = charCode;
-
-        //  Nothing to render or a space? Then skip to the next glyph
-        if (glyphW === 0 || glyphH === 0 || charCode === 32)
-        {
-            continue;
-        }
-
-        xw = x + glyphW * scale;
-        yh = y + glyphH * scale;
-        tx0 = x * mva + y * mvc + mve;
-        ty0 = x * mvb + y * mvd + mvf;
-        tx1 = x * mva + yh * mvc + mve;
-        ty1 = x * mvb + yh * mvd + mvf;
-        tx2 = xw * mva + yh * mvc + mve;
-        ty2 = xw * mvb + yh * mvd + mvf;
-        tx3 = xw * mva + y * mvc + mve;
-        ty3 = xw * mvb + y * mvd + mvf;
-        umin = glyphX / textureWidth;
-        umax = (glyphX + glyphW) / textureWidth;
-        vmin = glyphY / textureHeight;
-        vmax = (glyphY + glyphH) / textureHeight;
-
-        if (spriteBatch.elementCount >= spriteBatch.maxParticles)
-        {
-            spriteBatch.flush();
-        }
-
-        renderer.setRenderer(spriteBatch, texture, renderTarget);
-        vertexOffset = vertexDataBuffer.allocate(24);
-        spriteBatch.elementCount += 6;
-
-        vertexBuffer[vertexOffset++] = tx0;
-        vertexBuffer[vertexOffset++] = ty0;
-        vertexBuffer[vertexOffset++] = umin;
-        vertexBuffer[vertexOffset++] = vmin;
-        vertexBufferU32[vertexOffset++] = tintTL;
-        vertexBuffer[vertexOffset++] = alpha;
-
-        vertexBuffer[vertexOffset++] = tx1;
-        vertexBuffer[vertexOffset++] = ty1;
-        vertexBuffer[vertexOffset++] = umin;
-        vertexBuffer[vertexOffset++] = vmax;
-        vertexBufferU32[vertexOffset++] = tintBL;
-        vertexBuffer[vertexOffset++] = alpha;
-
-        vertexBuffer[vertexOffset++] = tx2;
-        vertexBuffer[vertexOffset++] = ty2;
-        vertexBuffer[vertexOffset++] = umax;
-        vertexBuffer[vertexOffset++] = vmax;
-        vertexBufferU32[vertexOffset++] = tintTR;
-        vertexBuffer[vertexOffset++] = alpha;
-
-        vertexBuffer[vertexOffset++] = tx3;
-        vertexBuffer[vertexOffset++] = ty3;
-        vertexBuffer[vertexOffset++] = umax;
-        vertexBuffer[vertexOffset++] = vmin;
-        vertexBufferU32[vertexOffset++] = tintBR;
-        vertexBuffer[vertexOffset++] = alpha;
-    }
 };
 
 module.exports = BitmapTextWebGLRenderer;

src/gameobjects/index.js

@@ -11,7 +11,7 @@ var GameObjects = {
 
     Components: require('./components'),
 
-    //BitmapText: require('./bitmaptext/static/BitmapText'),
+    BitmapText: require('./bitmaptext/static/BitmapText'),
     Blitter: require('./blitter/Blitter'),
     //Container: require('./container/Container'),
     //DynamicBitmapText: require('./bitmaptext/dynamic/DynamicBitmapText'),
@@ -44,7 +44,7 @@ var GameObjects = {
         //PathFollower: require('./pathfollower/PathFollowerFactory'),
         Sprite: require('./sprite/SpriteFactory'),
         //Sprite3D: require('./sprite3d/Sprite3DFactory'),
-        //StaticBitmapText: require('./bitmaptext/static/BitmapTextFactory'),
+        StaticBitmapText: require('./bitmaptext/static/BitmapTextFactory'),
         //Text: require('./text/static/TextFactory'),
         //Tilemap: require('./tilemap/TilemapFactory'),
         //TileSprite: require('./tilesprite/TileSpriteFactory'),
@@ -61,7 +61,7 @@ var GameObjects = {
         //Particles: require('./particles/ParticleManagerCreator'),
         Sprite: require('./sprite/SpriteCreator'),
         //Sprite3D: require('./sprite3d/Sprite3DCreator'),
-        //StaticBitmapText: require('./bitmaptext/static/BitmapTextCreator'),
+        StaticBitmapText: require('./bitmaptext/static/BitmapTextCreator'),
         //Text: require('./text/static/TextCreator'),
         //Tilemap: require('./tilemap/TilemapCreator'),
         //TileSprite: require('./tilesprite/TileSpriteCreator'),

src/renderer/webgl/WebGLRenderer.js

@@ -204,6 +204,40 @@ var WebGLRenderer = new Class({
         return this;
     },
 
+    beginScissor: function (x, y, width, height)
+    {
+        var gl = this.gl;
+        var scissorState = this.currentScissorState;
+
+        if (!x !== 0 || y !== 0 || width !== gl.canvas.width || height !== gl.canvas.height) 
+        {
+                return;
+        }
+        
+        if (!scissorState.enabled)
+        {
+            gl.enable(gl.SCISSOR_TEST);
+            scissorState.enabled = true;
+        }
+
+        scissorState.x = x;
+        scissorState.y = gl.drawingBufferHeight - y - height;
+        scissorState.width = width;
+        scissorState.height = height;
+        gl.scissor(scissorState.x, scissorState.y, scissorState.width, scissorState.height);
+    },
+
+    endScissor: function ()
+    {
+        var gl = this.gl;
+        var scissorState = this.currentScissorState;
+
+        if (scissorState.enabled)
+        {
+            gl.disable(gl.SCISSOR_TEST);
+        }
+    },
+
     setPipeline: function (pipelineInstance, overrideProgram)
     {
         if (this.currentPipeline !== pipelineInstance)
@@ -511,21 +545,8 @@ var WebGLRenderer = new Class({
         var gl = this.gl;
         var list = children.list;
         var childCount = list.length;
-        var scissorEnabled = (camera.x !== 0 || camera.y !== 0 || camera.width !== gl.canvas.width || camera.height !== gl.canvas.height);
-        var pipeline = null;
 
-        this.currentScissorState.enabled = scissorEnabled;
+        this.beginScissor(camera.x, camera.y, camera.width, camera.height);
-
-        if (scissorEnabled)
-        {
-            gl.enable(gl.SCISSOR_TEST);
-            this.currentScissorState.x = camera.x;
-            this.currentScissorState.y = gl.drawingBufferHeight - camera.y - camera.height;
-            this.currentScissorState.width = camera.width;
-            this.currentScissorState.height = camera.height;
-
-            gl.scissor(this.currentScissorState.x, this.currentScissorState.y, this.currentScissorState.width, this.currentScissorState.height);
-        }
 
         for (var index = 0; index < childCount; ++index)
         {
@@ -552,20 +573,10 @@ var WebGLRenderer = new Class({
             {
                 child.mask.postRenderWebGL(this, child);
             }
-
-            pipeline = this.currentPipeline;
-
         }
 
-        if (pipeline && pipeline.vertexCount > 0)
+        this.flush();
-        {
+        this.endScissor();
-            pipeline.flush();
-        }
-
-        if (scissorEnabled)
-        {
-            gl.disable(gl.SCISSOR_TEST);
-        }
     },
 
     postRender: function ()

src/renderer/webgl/pipelines/TextureTintPipeline.js

@@ -102,6 +102,10 @@ var TextureTintPipeline = new Class({
         var list = blitter.getRenderList();
         var length = list.length;
         var cameraMatrix = camera.matrix.matrix;
+        var cameraWidth = camera.width + 50;
+        var cameraHeight = camera.height + 50;
+        var cameraX = -50;
+        var cameraY = -50;
         var a = cameraMatrix[0];
         var b = cameraMatrix[1];
         var c = cameraMatrix[2];
@@ -119,6 +123,7 @@ var TextureTintPipeline = new Class({
         {
             var batchSize = Math.min(length, 2000);
             var vertexOffset = 0;
+            var vertexCount = 0;
 
             for (var index = 0; index < batchSize; ++index)
             {
@@ -135,60 +140,65 @@ var TextureTintPipeline = new Class({
                 var y = blitterY + bob.y + frame.y - cameraScrollY + (height * ((flipY) ? 1.0 : 0.0));
                 var xw = x + width;                
                 var yh = y + height;
-                var tx = x * a + y * c + e;
+                var tx0 = x * a + y * c + e;
-                var ty = x * b + y * d + f;
+                var ty0 = x * b + y * d + f;
-                var txw = xw * a + yh * c + e;
+                var tx1 = xw * a + yh * c + e;
-                var tyh = xw * b + yh * d + f;
+                var ty1 = xw * b + yh * d + f;
+
+                if ((tx0 < cameraX || tx0 > cameraWidth || ty0 < cameraX || ty0 > cameraHeight) &&
+                    (tx1 < cameraY || tx1 > cameraWidth || ty1 < cameraY || ty1 > cameraHeight))
+                {
+                    continue;
+                }
 
                 // Bind Texture if texture wasn't bound.
                 // This needs to be here because of multiple
                 // texture atlas.
                 renderer.setTexture2D(frame.texture.source[frame.sourceIndex].glTexture, 0);
             
-                vertexViewF32[vertexOffset + 0] = tx;
+                vertexViewF32[vertexOffset + 0] = tx0;
-                vertexViewF32[vertexOffset + 1] = ty;
+                vertexViewF32[vertexOffset + 1] = ty0;
                 vertexViewF32[vertexOffset + 2] = uvs.x0;
                 vertexViewF32[vertexOffset + 3] = uvs.y0;
                 vertexViewU32[vertexOffset + 4] = tint;
-
+                vertexViewF32[vertexOffset + 5] = tx0;
-                vertexViewF32[vertexOffset + 5] = tx;
+                vertexViewF32[vertexOffset + 6] = ty1;
-                vertexViewF32[vertexOffset + 6] = tyh;
                 vertexViewF32[vertexOffset + 7] = uvs.x1;
                 vertexViewF32[vertexOffset + 8] = uvs.y1;
                 vertexViewU32[vertexOffset + 9] = tint;
-
+                vertexViewF32[vertexOffset + 10] = tx1;
-                vertexViewF32[vertexOffset + 10] = txw;
+                vertexViewF32[vertexOffset + 11] = ty1;
-                vertexViewF32[vertexOffset + 11] = tyh;
                 vertexViewF32[vertexOffset + 12] = uvs.x2;
                 vertexViewF32[vertexOffset + 13] = uvs.y2;
                 vertexViewU32[vertexOffset + 14] = tint;
-
+                vertexViewF32[vertexOffset + 15] = tx0;
-                vertexViewF32[vertexOffset + 15] = tx;
+                vertexViewF32[vertexOffset + 16] = ty0;
-                vertexViewF32[vertexOffset + 16] = ty;
                 vertexViewF32[vertexOffset + 17] = uvs.x0;
                 vertexViewF32[vertexOffset + 18] = uvs.y0;
                 vertexViewU32[vertexOffset + 19] = tint;
-
+                vertexViewF32[vertexOffset + 20] = tx1;
-                vertexViewF32[vertexOffset + 20] = txw;
+                vertexViewF32[vertexOffset + 21] = ty1;
-                vertexViewF32[vertexOffset + 21] = tyh;
                 vertexViewF32[vertexOffset + 22] = uvs.x2;
                 vertexViewF32[vertexOffset + 23] = uvs.y2;
                 vertexViewU32[vertexOffset + 24] = tint;
-
+                vertexViewF32[vertexOffset + 25] = tx1;
-                vertexViewF32[vertexOffset + 25] = txw;
+                vertexViewF32[vertexOffset + 26] = ty0;
-                vertexViewF32[vertexOffset + 26] = ty;
                 vertexViewF32[vertexOffset + 27] = uvs.x3;
                 vertexViewF32[vertexOffset + 28] = uvs.y3;
                 vertexViewU32[vertexOffset + 29] = tint;
 
                 vertexOffset += 30;
+                vertexCount += 6;
             }
 
             batchOffset += batchSize;
             length -= batchSize;
 
-            this.vertexCount = (batchSize * 6);
+            if (vertexCount <= this.vertexCapacity)
-            this.flush();
+            {
+                this.vertexCount = vertexCount;
+                this.flush();
+            }
         }
     },
 
@@ -206,12 +216,10 @@ var TextureTintPipeline = new Class({
         var vertexViewU32 = this.vertexViewU32;
         var renderer = this.renderer;
         var cameraMatrix = camera.matrix.matrix;
-        var a = cameraMatrix[0];
+        var cameraWidth = camera.width + 50;
-        var b = cameraMatrix[1];
+        var cameraHeight = camera.height + 50;
-        var c = cameraMatrix[2];
+        var cameraX = -50;
-        var d = cameraMatrix[3];
+        var cameraY = -50;
-        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);
@@ -271,6 +279,14 @@ var TextureTintPipeline = new Class({
         var tint3 = getTint(tintBR, alphaBR);
         var vertexOffset = 0;
 
+        if ((tx0 < cameraX || tx0 > cameraWidth || ty0 < cameraY || ty0 > cameraHeight) &&
+            (tx1 < cameraX || tx1 > cameraWidth || ty1 < cameraY || ty1 > cameraHeight) &&
+            (tx2 < cameraX || tx2 > cameraWidth || ty2 < cameraY || ty2 > cameraHeight) &&
+            (tx3 < cameraX || tx3 > cameraWidth || ty3 < cameraY || ty3 > cameraHeight))
+        {
+            return;
+        }
+
         renderer.setTexture2D(texture, 0);
 
         vertexOffset = this.vertexCount * this.vertexComponentCount;
@@ -364,7 +380,7 @@ var TextureTintPipeline = new Class({
         var mve = sre * cma + srf * cmc + cme;
         var mvf = sre * cmb + srf * cmd + cmf;
         var vertexOffset = 0;
-        
+
         renderer.setTexture2D(texture, 0);
         vertexOffset = this.vertexCount * this.vertexComponentCount;
 
@@ -386,6 +402,203 @@ var TextureTintPipeline = new Class({
         }
 
         this.vertexCount += vertexCount;
+    },
+
+    batchBitmapText: function (bitmapText, camera)
+    {
+        this.renderer.setPipeline(this);
+
+        if (this.vertexCount + 6 > this.vertexCapacity)
+        {
+            this.flush();
+        }
+
+        var text = bitmapText.text;
+        var textLength = text.length;
+        var getTint = Utils.getTintAppendFloatAlpha;
+        var vertexViewF32 = this.vertexViewF32;
+        var vertexViewU32 = this.vertexViewU32;
+        var renderer = this.renderer;
+        var cameraMatrix = camera.matrix.matrix;
+        var cameraWidth = camera.width + 50;
+        var cameraHeight = camera.height + 50;
+        var cameraX = -50;
+        var cameraY = -50;
+        var frame = bitmapText.frame;
+        var textureSource = bitmapText.texture.source[frame.sourceIndex];
+        var cameraScrollX = camera.scrollX * bitmapText.scrollFactorX;
+        var cameraScrollY = camera.scrollY * bitmapText.scrollFactorY;
+        var fontData = bitmapText.fontData;
+        var lineHeight = fontData.lineHeight;
+        var scale = (bitmapText.fontSize / fontData.size);
+        var chars = fontData.chars;
+        var alpha = bitmapText.alpha;
+        var tint0 = getTint(bitmapText._tintTL, alpha);
+        var tint1 = getTint(bitmapText._tintTR, alpha);
+        var tint2 = getTint(bitmapText._tintBL, alpha);
+        var tint3 = getTint(bitmapText._tintBR, alpha);
+        var srcX = bitmapText.x;
+        var srcY = bitmapText.y;
+        var textureX = frame.cutX;
+        var textureY = frame.cutY;
+        var textureWidth = textureSource.width;
+        var textureHeight = textureSource.height;
+        var texture = textureSource.glTexture;
+        var xAdvance = 0;
+        var yAdvance = 0;
+        var indexCount = 0;
+        var charCode = 0;
+        var glyph = null;
+        var glyphX = 0;
+        var glyphY = 0;
+        var glyphW = 0;
+        var glyphH = 0;
+        var x = 0;
+        var y = 0;
+        var xw = 0;
+        var yh = 0;
+        var umin = 0;
+        var umax = 0;
+        var vmin = 0;
+        var vmax = 0;
+        var lastGlyph = null;
+        var lastCharCode = 0;
+        var translateX = (srcX - cameraScrollX) + frame.x;
+        var translateY = (srcY - cameraScrollY) + frame.y;
+        var rotation = -bitmapText.rotation;
+        var scaleX = bitmapText.scaleX;
+        var scaleY = bitmapText.scaleY;
+        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 vertexOffset = 0;
+
+        renderer.setTexture2D(texture, 0);
+
+        for (var index = 0; index < textLength; ++index)
+        {
+            charCode = text.charCodeAt(index);
+
+            if (charCode === 10)
+            {
+                xAdvance = 0;
+                indexCount = 0;
+                yAdvance += lineHeight;
+                lastGlyph = null;
+                continue;
+            }
+
+            glyph = chars[charCode];
+
+            if (!glyph)
+            {
+                continue;
+            }
+
+            glyphX = textureX + glyph.x;
+            glyphY = textureY + glyph.y;
+            glyphW = glyph.width;
+            glyphH = glyph.height;
+            x = (indexCount + glyph.xOffset + xAdvance) * scale;
+            y = (glyph.yOffset + yAdvance) * scale;
+
+            if (lastGlyph !== null)
+            {
+                var kerningOffset = glyph.kerning[lastCharCode];
+                x += (kerningOffset !== undefined) ? kerningOffset : 0;
+            }
+
+            xAdvance += glyph.xAdvance;
+            indexCount += 1;
+            lastGlyph = glyph;
+            lastCharCode = charCode;
+
+            //  Nothing to render or a space? Then skip to the next glyph
+            if (glyphW === 0 || glyphH === 0 || charCode === 32)
+            {
+                continue;
+            }
+
+            xw = x + glyphW * scale;
+            yh = y + glyphH * scale;
+            tx0 = x * mva + y * mvc + mve;
+            ty0 = x * mvb + y * mvd + mvf;
+            tx1 = x * mva + yh * mvc + mve;
+            ty1 = x * mvb + yh * mvd + mvf;
+            tx2 = xw * mva + yh * mvc + mve;
+            ty2 = xw * mvb + yh * mvd + mvf;
+            tx3 = xw * mva + y * mvc + mve;
+            ty3 = xw * mvb + y * mvd + mvf;
+            umin = glyphX / textureWidth;
+            umax = (glyphX + glyphW) / textureWidth;
+            vmin = glyphY / textureHeight;
+            vmax = (glyphY + glyphH) / textureHeight;
+
+            if ((tx0 < cameraX || tx0 > cameraWidth || ty0 < cameraY || ty0 > cameraHeight) &&
+                (tx1 < cameraX || tx1 > cameraWidth || ty1 < cameraY || ty1 > cameraHeight) &&
+                (tx2 < cameraX || tx2 > cameraWidth || ty2 < cameraY || ty2 > cameraHeight) &&
+                (tx3 < cameraX || tx3 > cameraWidth || ty3 < cameraY || ty3 > cameraHeight))
+            {
+                continue;
+            }
+
+            if (this.vertexCount + 6 > this.vertexCapacity)
+            {
+                this.flush();
+            }
+            
+            vertexOffset = this.vertexCount * this.vertexComponentCount;
+
+            vertexViewF32[vertexOffset + 0] = tx0;
+            vertexViewF32[vertexOffset + 1] = ty0;
+            vertexViewF32[vertexOffset + 2] = umin;
+            vertexViewF32[vertexOffset + 3] = vmin;
+            vertexViewU32[vertexOffset + 4] = tint0;
+            vertexViewF32[vertexOffset + 5] = tx1;
+            vertexViewF32[vertexOffset + 6] = ty1;
+            vertexViewF32[vertexOffset + 7] = umin;
+            vertexViewF32[vertexOffset + 8] = vmax;
+            vertexViewU32[vertexOffset + 9] = tint1;
+            vertexViewF32[vertexOffset + 10] = tx2;
+            vertexViewF32[vertexOffset + 11] = ty2;
+            vertexViewF32[vertexOffset + 12] = umax;
+            vertexViewF32[vertexOffset + 13] = vmax;
+            vertexViewU32[vertexOffset + 14] = tint2;
+            vertexViewF32[vertexOffset + 15] = tx0;
+            vertexViewF32[vertexOffset + 16] = ty0;
+            vertexViewF32[vertexOffset + 17] = umin;
+            vertexViewF32[vertexOffset + 18] = vmin;
+            vertexViewU32[vertexOffset + 19] = tint0;
+            vertexViewF32[vertexOffset + 20] = tx2;
+            vertexViewF32[vertexOffset + 21] = ty2;
+            vertexViewF32[vertexOffset + 22] = umax;
+            vertexViewF32[vertexOffset + 23] = vmax;
+            vertexViewU32[vertexOffset + 24] = tint2;
+            vertexViewF32[vertexOffset + 25] = tx3;
+            vertexViewF32[vertexOffset + 26] = ty3;
+            vertexViewF32[vertexOffset + 27] = umax;
+            vertexViewF32[vertexOffset + 28] = vmin;
+            vertexViewU32[vertexOffset + 29] = tint3;
+        
+            this.vertexCount += 6;
+        }
     }
 });