Fully working sci-fly demo using a single gl draw to blit all of the tiles at once. Theoretically extremely fast (requires testing). Works here in FireFox and Chrome at 60 fps on an i7 4770 with Nvidia 780 GTX drawing typically 1989 tiles per frame.

Author: pjbaron

src/pixi/extras/Tilemap.js

@@ -235,86 +235,95 @@ PIXI.Tilemap.prototype._renderVisibleLayer = function( _layer, renderSession )
 {
   var gl = renderSession.gl;
   var shader = renderSession.shaderManager.tilemapShader;
-//  this.shaders.setProgram(this.shaders.blitShaderProgram, _textureNumber);
 
+  // calculate visible tile extents
   var firstX = Math.max(Math.floor(this.scrollX / this.tileWide), 0);
   var lastX = Math.min(firstX + Math.ceil(this.game.width / this.tileWide) + 1, this.mapWide);
   var firstY = Math.max(Math.floor(this.scrollY / this.tileHigh), 0);
   var lastY = Math.min(firstY + Math.ceil(this.game.height / this.tileHigh) + 1, this.mapHigh);
-  var len = (lastX - firstX) * (lastY - firstY);
 
+  // TODO: switch to game.width or PIXI equivalent
   var screenWide2 = gl.drawingBufferWidth * 0.5;
   var screenHigh2 = gl.drawingBufferHeight * 0.5;
 
   // calculate inverse to avoid division in loop
   var iWide = 1.0 / screenWide2;
   var iHigh = 1.0 / screenHigh2;
 
-  var scale = 1.0;
-  var wide = this.tileWide * scale * 0.5 / screenWide2;
-  var high = this.tileHigh * scale * 0.5 / screenHigh2;
+  // scale tile dimensions for drawing surface size (this shader doesn't do any conversion)
+  var wide = this.tileWide * 0.5 / screenWide2;
+  var high = this.tileHigh * 0.5 / screenHigh2;
 
-  var old_t;
-  var old_r;
-
-  var c = 0;
   var buffer = this.buffer;
+  var oldT, oldR;
+  var c = 0;
+
+  // for all tiles in the visible screen area
   for(var ty = firstY; ty < lastY; ty++)
   {
+    // local row pointer to speed up x access
     var layerRow = _layer.data[ty];
-    var sy = ty * this.tileHigh;
+
+    // calculate screen position of centre of this tile (in pixels)
+    var sy = ty * this.tileHigh + this.tileHigh * 0.5;
 
     for(var tx = firstX; tx < lastX; tx++)
     {
+      // get the tile index from the map
       var tile = layerRow[tx].index - 1;
 
+      // if it's not an empty tile...
       if ( tile >= 0 )
       {
-        var sx = tx * this.tileWide;
+        var sx = tx * this.tileWide + this.tileWide * 0.5;
 
+        // calculate the source position of this tile index (in whole tiles)
         var tmx = tile % this.texTilesWide;
         var tmy = Math.floor(tile / this.texTilesWide);
 
-        // from blitSimpleDrawAnimImages
+        // calculate the uv values for each corner of the tile in the source
         var uvl = tmx * this.scalex;
         var uvr = uvl + this.scalex;
         var uvt = tmy * this.scaley;
         var uvb = uvt + this.scaley;
 
-        //this._renderTile(gl, shader, bi, x * this.tileWide, y * this.tileHigh, tile);
-
+        // calculate the destination location of the tile in screen units (-1..1)
         var x = sx * iWide - 1;
         var y = 1 - sy * iHigh;
+
+        // calculate the bottom-left corner of the tile in screen units
         var l = x - wide;
         var b = y + high;
 
+        // for every tile except the first one...
         if ( c > 0 )
         {
-          // degenerate triangle: repeat the last vertex
-          buffer[ c     ] = old_r;
-          buffer[ c + 1 ] = old_t;
-          // repeat the next vertex
+          // add a degenerate triangle: repeat the last vertex
+          buffer[ c     ] = oldR;
+          buffer[ c + 1 ] = oldT;
+          // then repeat the next vertex
           buffer[ c + 4 ] = l;
           buffer[ c + 5 ] = b;
-          // texture coordinates
+          // pad with texture coordinates (probably not needed)
           buffer[ c + 2 ] = buffer[ c + 6 ] = uvl;
           buffer[ c + 3 ] = buffer[ c + 7 ] = uvt;
 
+          // advance the buffer index
           c += 8;
         }
 
-        // screen destination position
+        // screen destination into the VBO
         // l, b,    0,1
         // l, t,    4,5
         // r, b,    8,9
         // r, t,    12,13
 
         buffer[ c     ] = buffer[ c + 4 ] = l;
         buffer[ c + 1 ] = buffer[ c + 9 ] = b;
-        buffer[ c + 8 ] = buffer[ c + 12] = old_r = x + wide;
-        buffer[ c + 5 ] = buffer[ c + 13] = old_t = y - high;
+        buffer[ c + 8 ] = buffer[ c + 12] = oldR = x + wide;
+        buffer[ c + 5 ] = buffer[ c + 13] = oldT = y - high;
 
-        // texture source position
+        // texture source position into the VBO
         // l, b,    2,3
         // l, t,    6,7
         // r, b,    10,11
@@ -324,14 +333,23 @@ PIXI.Tilemap.prototype._renderVisibleLayer = function( _layer, renderSession )
         buffer[ c + 10] = buffer[ c + 14] = uvr;    // r
         buffer[ c + 7 ] = buffer[ c + 15] = uvb;    // b
 
+        // advance the buffer index
         c += 16;
       }
     }
   }
 
+  // set the scroll offset (in screen units)
+  gl.uniform2f( shader.uScrollOffset, this.scrollX * iWide, -this.scrollY * iHigh );
+
+  // upload the VBO
   gl.bufferData( gl.ARRAY_BUFFER, buffer, gl.STATIC_DRAW );
+
+  // prepare the shader attributes
   gl.vertexAttribPointer( shader.aPosition, 4, gl.FLOAT, false, 0, 0 );
-  gl.drawArrays(gl.TRIANGLE_STRIP, 0, len * 6 - 2);
+
+  // draw the entire VBO in one call
+  gl.drawArrays(gl.TRIANGLE_STRIP, 0, (lastX - firstX) * (lastY - firstY) * 6 - 2);   // 4 + 2 (vertices + degenerates)
 };
 
 

src/pixi/renderers/webgl/shaders/TilemapShader.js

@@ -40,46 +40,16 @@ PIXI.TilemapShader = function(gl)
 
     this.vertexSrc = [
         "  precision lowp float;",
+        "  uniform vec2 uScrollOffset;",
         "  attribute vec4 aPosition;",
         "  varying vec2 vTexCoord;",
         "  void main(void) {",
         "    gl_Position.zw = vec2(1, 1);",
-        "    gl_Position.xy = aPosition.xy;",
+        "    gl_Position.xy = aPosition.xy - uScrollOffset;",
         "    vTexCoord = aPosition.zw;",
         "  }"
         ];
 
-    /**
-     * The fragment shader.
-     * @property fragmentSrc
-     * @type Array
-    this.fragmentSrc = [
-        "  precision mediump float;",
-        "  uniform sampler2D uImageSampler;",
-        "  varying vec2 vTexCoord;",
-        "  void main(void) {",
-        "    gl_FragColor = texture2D(uImageSampler, vTexCoord);",
-        "  }"
-    ];
-     */
-    
-    /**
-     * The vertex shader.
-     * @property vertexSrc
-     * @type Array
-    this.vertexSrc = [
-        "  uniform vec2 uScreenPosition;",
-        "  attribute vec4 aPosition;",
-        "  uniform mat3 uProjectionMatrix;",
-        "  varying vec2 vTexCoord;",
-        "  void main(void) {",
-        "    vec3 pos = uProjectionMatrix * (vec3(aPosition.xy, 1) + vec3(uScreenPosition, 0));",
-        "    gl_Position = vec4(pos.xy, 1, 1);",
-        "    vTexCoord = aPosition.zw;",
-        "  }"
-    ];
-     */
-
     /**
      * A local texture counter for multi-texture shaders.
      * @property textureCount
@@ -107,12 +77,11 @@ PIXI.TilemapShader.prototype.init = function()
 
     // get and store the attributes
     this.aPosition = gl.getAttribLocation(program, 'aPosition');
-    // this.uProjectionMatrix = gl.getUniformLocation(program, 'uProjectionMatrix');
-    // this.uScreenPosition = gl.getUniformLocation(program, 'uScreenPosition');
     this.uSampler = gl.getUniformLocation(program, 'uImageSampler');
+    this.uScrollOffset = gl.getUniformLocation(program, 'uScrollOffset');
 
-//    this.attributes = [this.aScreenPosition, this.aPosition, this.uProjectionMatrix, this.uSampler];
     this.attributes = [this.aPosition, this.uSampler];
+    this.uniforms = [this.uScrollOffset];
 
     this.program = program;
 };