Static Tilemap WebGL Renderer now applies camera transform matrix correctly

Author: bitnenfer

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

@@ -162,9 +162,19 @@ var StaticTilemap = new Class({
 
                 this.dirty = false;
             }
-            this.tilemapRenderer.shader.setConstantFloat2(this.tilemapRenderer.scrollLocation, -camera.scrollX, -camera.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);
+            var cmat = camera.matrix.matrix;
+
+            this.tilemapRenderer.shader.setConstantMatrix3x3(
+                this.tilemapRenderer.cameraTransformLocation,
+                [
+                    cmat[0], cmat[1], 0.0, 
+                    cmat[2], cmat[3], 0.0,
+                    cmat[4], cmat[5], 1.0
+                ]
+            );
         }
         else if (this.dirty && !this.gl)
         {

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

@@ -9,7 +9,7 @@ var StaticTilemapCanvasRenderer = function (renderer, gameObject, interpolationP
 
     gameObject.upload(camera);
 
-    var tiles = camera.cullTilemap(gameObject);
+    var tiles = gameObject.tiles;
     var tileWidth = gameObject.tileWidth;
     var tileHeight = gameObject.tileHeight;
     var frame = gameObject.frame;

v3/src/renderer/canvas/CanvasRenderer.js

@@ -180,7 +180,7 @@ var CanvasRenderer = new Class({
         if (!camera.transparent)
         {
             ctx.fillStyle = camera.backgroundColor.rgba;
-            ctx.fillRect(0, 0, camera.width, camera.height);
+            ctx.fillRect(camera.x, camera.y, camera.width, camera.height);
         }
 
         if (this.currentAlpha !== 1)

v3/src/renderer/webgl/renderers/tilemaprenderer/TilemapRenderer.js

@@ -50,12 +50,14 @@ var TilemapRenderer = new Class({
         var scrollLocation = shader.getUniformLocation('u_scroll');
         var scrollFactorLocation = shader.getUniformLocation('u_scroll_factor');
         var tilemapPositionLocation = shader.getUniformLocation('u_tilemap_position');
+        var cameraTransformLocation = shader.getUniformLocation('u_camera_matrix');
 
         this.shader = shader;
         this.viewMatrixLocation = viewMatrixLocation;
         this.scrollLocation = scrollLocation;
         this.scrollFactorLocation = scrollFactorLocation;
         this.tilemapPositionLocation = tilemapPositionLocation;
+        this.cameraTransformLocation = cameraTransformLocation;
 
         this.resize(this.width, this.height, this.game.config.resolution);
     },

v3/src/renderer/webgl/shaders/TilemapShader.js

@@ -1,23 +1,36 @@
 module.exports = {
     vert: [
-        'uniform mat4 u_view_matrix;',
-        'uniform vec2 u_scroll;',
-        'uniform vec2 u_scroll_factor;',
-        'uniform vec2 u_tilemap_position;',
-        'attribute vec2 a_position;',
-        'attribute vec2 a_tex_coord;',
-        'varying vec2 v_tex_coord;',
-        'void main () {',
-        '   gl_Position = u_view_matrix * vec4(u_tilemap_position + a_position + (u_scroll * u_scroll_factor), 1.0, 1.0);',
-        '   v_tex_coord = a_tex_coord;',
-        '}'
+    'precision mediump float;',
+    '',
+    'uniform mat4 u_view_matrix;',
+    'uniform mat3 u_camera_matrix;',
+    'uniform vec2 u_scroll;',
+    'uniform vec2 u_scroll_factor;',
+    'uniform vec2 u_tilemap_position;',
+    '',
+    'attribute vec2 a_position;',
+    'attribute vec2 a_tex_coord;',
+    'varying vec2 v_tex_coord;',
+    '',
+    'void main()',
+    '{',
+    '    vec2 position = u_tilemap_position + a_position;',
+    '    ',
+    '    position = position - (u_scroll * u_scroll_factor);',
+    '    position = (u_camera_matrix * vec3(position, 1.0)).xy;',
+    '    ',
+    '    gl_Position = u_view_matrix * vec4(position, 1.0, 1.0);',
+    '    v_tex_coord = a_tex_coord;',
+    '}',
+    ''
     ].join('\n'),
     frag: [
-        'precision mediump float;',
-        'uniform sampler2D u_sampler2D;',
-        'varying vec2 v_tex_coord;',
-        'void main() {',
-        '   gl_FragColor = texture2D(u_sampler2D, v_tex_coord);',
-        '}'
+    'precision mediump float;',
+    'uniform sampler2D u_sampler2D;',
+    'varying vec2 v_tex_coord;',
+    'void main()',
+    '{',
+    '    gl_FragColor = texture2D(u_sampler2D, v_tex_coord);',
+    '}'
     ].join('\n')
 };