Static Tilemap Culling

Author: bitnenfer

v3/src/checksum.js

@@ -1,4 +1,4 @@
 var CHECKSUM = {
-build: 'db055440-5835-11e7-821c-f3e448a2ca69'
+build: '4b54cc50-5861-11e7-9b35-1d9d7e24430e'
 };
 module.exports = CHECKSUM;

v3/src/gameobjects/tilemap/static/StaticTilemap.js

@@ -43,14 +43,16 @@ var StaticTilemap = new Class({
         this.mapHeight = mapHeight;
         this.dirty = true;
         this.vertexCount = 0;
+        this.cullStart = 0;
+        this.cullEnd = 0;
         this.setTexture(texture, frame);
         this.setPosition(x, y);
         this.setSizeToFrame();
         this.setOrigin();
         this.setSize(tileWidth * mapWidth, tileHeight * mapHeight);
     },
 
-    upload: function (scrollX, scrollY) 
+    upload: function (camera) 
     {
         if (this.gl)
         {
@@ -147,10 +149,52 @@ var StaticTilemap = new Class({
 
                 this.dirty = false;
             }
-            this.tilemapRenderer.shader.setConstantFloat2(this.tilemapRenderer.scrollLocation, -scrollX, -scrollY);
+            this.tilemapRenderer.shader.setConstantFloat2(this.tilemapRenderer.scrollLocation, -camera.scrollX, -camera.scrollY);
             this.tilemapRenderer.shader.setConstantFloat2(this.tilemapRenderer.scrollFactorLocation, this.scrollFactorX, this.scrollFactorY);
             this.tilemapRenderer.shader.setConstantFloat2(this.tilemapRenderer.tilemapPositionLocation, this.x, this.y);
         }
+    },
+
+    getTotalTileCount: function ()
+    {
+        return this.mapData.length;
+    },
+
+    getVisibleTileCount: function (camera)
+    {
+        this.cull(camera);
+        return (this.cullEnd - this.cullStart) / 6;
+    },
+
+    cull: function (camera)
+    {
+        this.cullStart = 0;
+        this.cullEnd = 0;
+        var tileWidth = this.tileWidth;
+        var tileHeight = this.tileHeight;
+        var pixelX = this.x - (camera.scrollX * this.scrollFactorX);
+        var pixelY = this.y - (camera.scrollY * this.scrollFactorY);
+        var pixelWidth = this.mapWidth * tileWidth;
+        var pixelHeight = this.mapHeight * tileHeight;
+
+        if (pixelX < camera.width + tileWidth &&
+            pixelX + pixelWidth > -tileWidth &&
+            pixelY < camera.height + tileHeight &&
+            pixelY + pixelHeight > -tileHeight)
+        {
+            var interX = Math.max(pixelX, -tileWidth);
+            var interY = Math.max(pixelY, -tileHeight);
+            var interWidth = Math.min(pixelX + pixelWidth, camera.width + tileWidth) - interX;
+            var interHeight = Math.min(pixelY + pixelHeight, camera.height + tileHeight) - interY;
+
+            interX = ((interX + (camera.scrollX * this.scrollFactorX)) / tileWidth)|0;
+            interY = ((interY + (camera.scrollY * this.scrollFactorY)) / tileHeight)|0;
+            interWidth = (interWidth / tileWidth)|0;
+            interHeight = (interHeight / tileHeight)|0;
+
+            this.cullStart = (interY * this.mapWidth + interX) * 6;
+            this.cullEnd = ((interY + interHeight) * this.mapWidth + interX) * 6;
+        }
     }
 
 });

v3/src/gameobjects/tilemap/static/StaticTilemapWebGLRenderer.js

@@ -11,7 +11,7 @@ var StaticTilemapWebGLRenderer = function (renderer, src, interpolationPercentag
 
     renderer.setRenderer(gameObject.tilemapRenderer, frame.texture.source[frame.sourceIndex].glTexture, gameObject.renderTarget);
     gameObject.tilemapRenderer.bind();
-    gameObject.upload(camera.scrollX * src.scrollFactorX, camera.scrollY * src.scrollFactorY);
+    gameObject.upload(camera);
     gameObject.vbo.bind();
     gl.drawArrays(gl.TRIANGLES, 0, gameObject.vertexCount);
 };