Removed global scene graph. New system works with camera system

v3/src/camera/Camera.js

@@ -1,4 +1,4 @@
-var Transform = require('../components/Transform');
+var Transform2DMatrix = require('../components/Transform2DMatrix').Transform2DMatrix;
 
 var Camera = function (x, y, width, height)
 {
@@ -7,13 +7,11 @@ var Camera = function (x, y, width, height)
     this.width = width;
     this.height = height;
 
-    this.state = null;
-    this.statePositionX = 0.0;
-    this.statePositionY = 0.0;
     this.scrollX = 0.0;
     this.scrollY = 0.0;
     this.zoom = 1.0;
     this.rotation = 0.0;
+    this.matrix = new Transform2DMatrix(1, 0, 0, 1, 0, 0);
 
     // shake
     this._shakeDuration = 0.0;
@@ -165,24 +163,10 @@ Camera.prototype = {
 
     preRender: function ()
     {
-        var state = this.state;
+        this.matrix.loadIdentity().
-        var stateTransform = state.sys.transform;
+                    translate(this.x + this._shakeOffsetX, this.y + this._shakeOffsetY).
-
+                    rotate(this.rotation).
-        this.statePositionX = stateTransform.positionX;
+                    scale(this.zoom, this.zoom);
-        this.statePositionY = stateTransform.positionY;
-
-        stateTransform.positionX = this.statePositionX + this.x;
-        stateTransform.positionY = this.statePositionY + this.y;
-        
-        Transform.updateRoot(stateTransform, -this.scrollX + this._shakeOffsetX, -this.scrollY + this._shakeOffsetY, this.zoom, this.rotation);
-    },
-
-    postRender: function ()
-    {
-        var stateTransform = this.state.sys.transform;
-
-        stateTransform.positionX = this.statePositionX;
-        stateTransform.positionY = this.statePositionY;
     },
 
     destroy: function ()

v3/src/components/Transform.js

@@ -262,4 +262,4 @@ Object.defineProperties(Transform.prototype,{
 	}
 });
 
-module.exports = Transform;
+//module.exports = Transform;

v3/src/components/Transform2DMatrix.js

@@ -0,0 +1,186 @@
+var mathCos = Math.cos;
+var mathSin = Math.sin;
+var mathSqrt = Math.sqrt;
+var mathAcos = Math.acos;
+var mathAtan = Math.atan;
+
+var Transform2DMatrix = function (a, b, c, d, tx, ty) 
+{
+    a = typeof a === 'number' ? a : 1;
+    b = typeof b === 'number' ? b : 0;
+    c = typeof c === 'number' ? c : 0;
+    d = typeof d === 'number' ? d : 1;
+    tx = typeof tx === 'number' ? tx : 0;
+    ty = typeof ty === 'number' ? ty : 0;
+
+    this.matrix = new Float32Array([a, b, c, d, tx, ty]);
+    this.decomposedMatrix = {
+        translateX: 0,
+        translateY: 0,
+        scaleX: 1,
+        scaleY: 1,
+        rotation: 0
+    };
+};
+
+Transform2DMatrix.prototype.loadIdentity = function ()
+{
+    var matrix = this.matrix;
+    
+    matrix[0] = 1;
+    matrix[1] = 0;
+    matrix[2] = 0;
+    matrix[3] = 1;
+    matrix[4] = 0;
+    matrix[5] = 0;
+
+    return this;
+};
+
+Transform2DMatrix.prototype.translate = function (x, y)
+{
+    var matrix = this.matrix;
+
+    matrix[4] = matrix[0] * x + matrix[2] * y + matrix[4];
+    matrix[5] = matrix[1] * x + matrix[3] * y + matrix[5];
+
+    return this;
+};
+
+Transform2DMatrix.prototype.scale = function (x, y)
+{
+    var matrix = this.matrix;
+
+    matrix[0] = matrix[0] * x;
+    matrix[1] = matrix[1] * x;
+    matrix[2] = matrix[2] * y;
+    matrix[3] = matrix[3] * y;
+
+    return this;
+};
+
+Transform2DMatrix.prototype.rotate = function (radian)
+{
+    var matrix = this.matrix;
+    var a = matrix[0];
+    var b = matrix[1];
+    var c = matrix[2];
+    var d = matrix[3];
+    var sr = mathSin(radian);
+    var cr = mathCos(radian);
+
+    matrix[0] = a * cr + c * sr;
+    matrix[1] = b * cr + d * sr;
+    matrix[2] = a * -sr + c * cr;
+    matrix[3] = b * -sr + d * cr;
+
+    return this;
+};
+
+Transform2DMatrix.prototype.multiply = function (otherMatrix)
+{
+    var matrix = this.matrix;
+    var a0 = matrix[0];
+    var b0 = matrix[1];
+    var c0 = matrix[2];
+    var d0 = matrix[3];
+    var tx0 = matrix[4];
+    var ty0 = matrix[5];
+    var a1 = otherMatrix[0];
+    var b1 = otherMatrix[1];
+    var c1 = otherMatrix[2];
+    var d1 = otherMatrix[3];
+    var tx1 = otherMatrix[4];
+    var ty1 = otherMatrix[5];
+
+    matrix[0] = a1 * a0 + b1 * c0;
+    matrix[1] = a1 * b0 + b1 * d0;
+    matrix[2] = c1 * a0 + d1 * c0;
+    matrix[3] = c1 * b0 + d1 * d0;
+    matrix[4] = tx1 * a0 + ty1 * c0 + tx0;
+    matrix[5] = tx1 * b0 + ty1 * d0 + ty0;
+
+    return this;
+};
+
+Transform2DMatrix.prototype.transform = function (a, b, c, d, tx, ty)
+{
+    var matrix = this.matrix;
+    var a0 = matrix[0];
+    var b0 = matrix[1];
+    var c0 = matrix[2];
+    var d0 = matrix[3];
+    var tx0 = matrix[4];
+    var ty0 = matrix[5];
+
+    matrix[0] = a * a0 + b * c0;
+    matrix[1] = a * b0 + b * d0;
+    matrix[2] = c * a0 + d * c0;
+    matrix[3] = c * b0 + d * d0;
+    matrix[4] = tx * a0 + ty * c0 + tx0;
+    matrix[5] = tx * b0 + ty * d0 + ty0;
+
+    return this;
+};
+
+Transform2DMatrix.prototype.setTransform = function (a, b, c, d, tx, ty)
+{
+    var matrix = this.matrix;
+
+    matrix[0] = a;
+    matrix[1] = b;
+    matrix[2] = c;
+    matrix[3] = d;
+    matrix[4] = tx;
+    matrix[5] = ty;
+
+    return this;
+};
+
+Transform2DMatrix.prototype.decomposeMatrix = function ()
+{
+    var decomposedMatrix = this.decomposedMatrix;
+    var matrix = this.matrix;
+    var a = matrix[0];
+    var b = matrix[1];
+    var c = matrix[2];
+    var d = matrix[3];
+    var a2 = a * a;
+    var b2 = b * b;
+    var c2 = c * c;
+    var d2 = d * d;
+    var sx = mathSqrt(a2 + c2);
+    var sy = mathSqrt(b2 + d2);
+
+    decomposedMatrix.translateX = matrix[4];
+    decomposedMatrix.translateY = matrix[5];
+    decomposedMatrix.scaleX = sx;
+    decomposedMatrix.scaleY = sy;
+    decomposedMatrix.rotation = mathAcos(a / sx) * (mathAtan(-c / a) < 0 ? -1 : 1);
+
+    return decomposedMatrix;
+};
+
+Transform2DMatrix.prototype.fromTransform2D = function (transform2D)
+{
+    this.loadIdentity().
+        translate(transform2D.x, transform2D.y).
+        rotate(transform2D.angle).
+        scale(transform2D.scaleX, transform2D.scaleY);
+
+    return this;
+};
+
+var Transform2D = function (x, y)
+{
+    this.x = x;
+    this.y = y;
+    this.scaleX = 1;
+    this.scaleY = 1;
+    this.angle = 0;
+};
+
+module.exports = {
+    Transform2DMatrix: Transform2DMatrix,
+    Transform2D: Transform2D
+};

v3/src/components/index.js

@@ -5,6 +5,8 @@ module.exports = {
     Children: require('./Children'),
     Color: require('./Color'),
     Data: require('./Data'),
-    Transform: require('./Transform')
+    //Transform: require('./Transform')
+    Transform2D: require('./Transform2DMatrix').Transform2D,
+    Transform2DMatrix: require('./Transform2DMatrix').Transform2DMatrix
 
 };

v3/src/device/Features.js

@@ -171,7 +171,7 @@ function init ()
         return false;
     };
 
-    Features.webGL = testWebGL();
+    Features.webGL = true;//testWebGL();
 
     Features.worker = !!window['Worker'];
 

v3/src/gameobjects/GameObject.js

@@ -39,9 +39,7 @@ var GameObject = function (state, x, y, texture, frame, parent)
     this.frame = frame;
 
     //  All GameObjects have the following components, always:
-    this.transform = new Component.Transform(this, this.state.sys.transform);
+    this.transform = new Component.Transform2D(x, y);
-    this.transform.positionX = x;
-    this.transform.positionY = y;
 
     this.anchor = new Component.Anchor();
 
@@ -112,13 +110,12 @@ Object.defineProperties(GameObject.prototype, {
 
         get: function ()
         {
-            return this.transform.positionX;
+            return this.transform.x;
         },
 
         set: function (value)
         {
-            this.transform.positionX = value;
+            this.transform.x = value;
-            this.transform.dirtyLocal = true;
         }
 
     },
@@ -129,13 +126,12 @@ Object.defineProperties(GameObject.prototype, {
 
         get: function ()
         {
-            return this.transform.positionY;
+            return this.transform.y;
         },
 
         set: function (value)
         {
-            this.transform.positionY = value;
+            this.transform.y = value;
-            this.transform.dirtyLocal = true;
         }
 
     },
@@ -153,7 +149,6 @@ Object.defineProperties(GameObject.prototype, {
         {
             this.transform.scaleX = value;
             this.transform.scaleY = value;
-            this.transform.dirtyLocal = true;
         }
 
     },
@@ -170,7 +165,6 @@ Object.defineProperties(GameObject.prototype, {
         set: function (value)
         {
             this.transform.scaleX = value;
-            this.transform.dirtyLocal = true;
         }
 
     },
@@ -187,7 +181,6 @@ Object.defineProperties(GameObject.prototype, {
         set: function (value)
         {
             this.transform.scaleY = value;
-            this.transform.dirtyLocal = true;
         }
 
     },
@@ -198,13 +191,12 @@ Object.defineProperties(GameObject.prototype, {
 
         get: function ()
         {
-            return this.transform.rotation;
+            return this.transform.angle;
         },
 
         set: function (value)
         {
-            this.transform.rotation = value;
+            this.transform.angle = value;
-            this.transform.dirtyLocal = true;
         }
 
     },
@@ -215,14 +207,13 @@ Object.defineProperties(GameObject.prototype, {
 
         get: function ()
         {
-            return WrapAngle(this.transform.rotation * MATH_CONST.RAD_TO_DEG);
+            return WrapAngle(this.transform.angle * MATH_CONST.RAD_TO_DEG);
         },
 
         set: function (value)
         {
             //  value is in degrees
-            this.transform.rotation = WrapAngle(value * MATH_CONST.DEG_TO_RAD);
+            this.transform.angle = WrapAngle(value * MATH_CONST.DEG_TO_RAD);
-            this.transform.dirtyLocal = true;
         }
 
     },

v3/src/gameobjects/image/ImageWebGLRenderer.js

@@ -1,109 +1,84 @@
 
-var ImageWebGLRenderer = function (renderer, src, interpolationPercentage)
+var ImageWebGLRenderer = function (renderer, src, interpolationPercentage, camera)
 {
     var frame = src.frame;
-    // var alpha = src.color.worldAlpha * 255 << 24;
-
     var alpha = 16777216;
-
+    var transform2D = src.transform;
-    //  Skip rendering?
-
-    // if (src.skipRender || !src.visible || alpha === 0 || !frame.cutWidth || !frame.cutHeight)
-    // {
-    //     return;
-    // }
-
-    // var verts = src.transform.getVertexData(interpolationPercentage, renderer);
-    // var index = src.frame.source.glTextureIndex;
-    // var tint = src.color._glTint;
-    // var bg = src.color._glBg;
-    // renderer.batch.add(frame.source, src.blendMode, verts, frame.uvs, index, alpha, tint, bg);
-
-    // Not inlined
-    //renderer.setBlendMode(src.color._blendMode);
-    //renderer.spriteBatch.add(
-    //    src.frame,
-    //    src.anchorX, src.anchorY,
-    //    transform.worldMatrix.matrix,
-    //    src.color._glTint
-    //);
-
-    /*******************/
-
-    // Inline spriteBatch.add gives a huge boost
-    var transform = src.transform;
     var spriteBatch = renderer.spriteBatch;
     var anchorX = src.anchorX;
     var anchorY = src.anchorY;
-    var matrix = transform.worldMatrix;
     var vertexColor = src.color._glTint;
-
-    //renderer.setBlendMode(src.color._blendMode);
-    renderer.setBatch(spriteBatch, frame.texture.source[frame.sourceIndex].glTexture);
-    // The user must check if the buffers are full before flushing
-    // this is to give freedom of when should the renderer flush. var vertexDataBuffer = this.vertexDataBuffer;
     var vertexDataBuffer = spriteBatch.vertexDataBuffer;
     var vertexBufferF32 = vertexDataBuffer.floatView;
     var vertexBufferU32 = vertexDataBuffer.uintView;
-    var vertexOffset = vertexDataBuffer.allocate(44);
+    var vertexOffset = vertexDataBuffer.allocate(40);
     var uvs = frame.uvs;
     var width = frame.width;
     var height = frame.height;
+    var translateX = transform2D.x - camera.scrollX;
+    var translateY = transform2D.y - camera.scrollY;
+    var scaleX = transform2D.scaleX;
+    var scaleY = transform2D.scaleY;
+    var rotation = transform2D.angle;
+    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 x = width * -anchorX + frame.x;
     var y = height * -anchorY + frame.y;
-    var a = matrix[0];
-    var b = matrix[1];
-    var c = matrix[2];
-    var d = matrix[3];
-    var tx = matrix[4];
-    var ty = matrix[5];
     var xw = x + width;
     var yh = y + height;
+    var tx = x * a + y * c + e;
+    var ty = x * b + y * d + f;
+    var txw = xw * a + yh * c + e;
+    var tyh = xw * b + yh * d + f;
 
-    vertexBufferF32[vertexOffset++] = x;
+    renderer.setBatch(spriteBatch, frame.texture.source[frame.sourceIndex].glTexture);
-    vertexBufferF32[vertexOffset++] = y;
+
+    vertexBufferF32[vertexOffset++] = tx;
+    vertexBufferF32[vertexOffset++] = ty;
     vertexBufferF32[vertexOffset++] = uvs.x0;
     vertexBufferF32[vertexOffset++] = uvs.y0;
-    vertexBufferF32[vertexOffset++] = a;
+    vertexBufferF32[vertexOffset++] = translateX;
-    vertexBufferF32[vertexOffset++] = b;
+    vertexBufferF32[vertexOffset++] = translateY;
-    vertexBufferF32[vertexOffset++] = c;
+    vertexBufferF32[vertexOffset++] = scaleX;
-    vertexBufferF32[vertexOffset++] = d;
+    vertexBufferF32[vertexOffset++] = scaleY;
-    vertexBufferF32[vertexOffset++] = tx;
+    vertexBufferF32[vertexOffset++] = rotation;
-    vertexBufferF32[vertexOffset++] = ty;
     vertexBufferU32[vertexOffset++] = vertexColor.topLeft;
-    vertexBufferF32[vertexOffset++] = x;
+    vertexBufferF32[vertexOffset++] = tx;
-    vertexBufferF32[vertexOffset++] = yh;
+    vertexBufferF32[vertexOffset++] = tyh;
     vertexBufferF32[vertexOffset++] = uvs.x1;
     vertexBufferF32[vertexOffset++] = uvs.y1;
-    vertexBufferF32[vertexOffset++] = a;
+    vertexBufferF32[vertexOffset++] = translateX;
-    vertexBufferF32[vertexOffset++] = b;
+    vertexBufferF32[vertexOffset++] = translateY;
-    vertexBufferF32[vertexOffset++] = c;
+    vertexBufferF32[vertexOffset++] = scaleX;
-    vertexBufferF32[vertexOffset++] = d;
+    vertexBufferF32[vertexOffset++] = scaleY;
-    vertexBufferF32[vertexOffset++] = tx;
+    vertexBufferF32[vertexOffset++] = rotation;
-    vertexBufferF32[vertexOffset++] = ty;
     vertexBufferU32[vertexOffset++] = vertexColor.bottomLeft;
-    vertexBufferF32[vertexOffset++] = xw;
+    vertexBufferF32[vertexOffset++] = txw;
-    vertexBufferF32[vertexOffset++] = yh;
+    vertexBufferF32[vertexOffset++] = tyh;
     vertexBufferF32[vertexOffset++] = uvs.x2;
     vertexBufferF32[vertexOffset++] = uvs.y2;
-    vertexBufferF32[vertexOffset++] = a;
+    vertexBufferF32[vertexOffset++] = translateX;
-    vertexBufferF32[vertexOffset++] = b;
+    vertexBufferF32[vertexOffset++] = translateY;
-    vertexBufferF32[vertexOffset++] = c;
+    vertexBufferF32[vertexOffset++] = scaleX;
-    vertexBufferF32[vertexOffset++] = d;
+    vertexBufferF32[vertexOffset++] = scaleY;
-    vertexBufferF32[vertexOffset++] = tx;
+    vertexBufferF32[vertexOffset++] = rotation;
-    vertexBufferF32[vertexOffset++] = ty;
     vertexBufferU32[vertexOffset++] = vertexColor.bottomRight;
-    vertexBufferF32[vertexOffset++] = xw;
+    vertexBufferF32[vertexOffset++] = txw;
-    vertexBufferF32[vertexOffset++] = y;
+    vertexBufferF32[vertexOffset++] = ty;
     vertexBufferF32[vertexOffset++] = uvs.x3;
     vertexBufferF32[vertexOffset++] = uvs.y3;
-    vertexBufferF32[vertexOffset++] = a;
+    vertexBufferF32[vertexOffset++] = translateX;
-    vertexBufferF32[vertexOffset++] = b;
+    vertexBufferF32[vertexOffset++] = translateY;
-    vertexBufferF32[vertexOffset++] = c;
+    vertexBufferF32[vertexOffset++] = scaleX;
-    vertexBufferF32[vertexOffset++] = d;
+    vertexBufferF32[vertexOffset++] = scaleY;
-    vertexBufferF32[vertexOffset++] = tx;
+    vertexBufferF32[vertexOffset++] = rotation;
-    vertexBufferF32[vertexOffset++] = ty;
     vertexBufferU32[vertexOffset++] = vertexColor.topRight;
+
     spriteBatch.elementCount += 6;
 };
 

v3/src/renderer/webgl/WebGLRenderer.js

@@ -12,7 +12,6 @@ var BlitterBatch = require('./batches/blitter/BlitterBatch');
 var AAQuadBatch = require('./batches/aaquad/AAQuadBatch');
 var SpriteBatch = require('./batches/sprite/SpriteBatch');
 var BlendModes = require('../BlendModes');
-var Transform = require('../../components/Transform');
 
 var WebGLRenderer = function (game)
 {
@@ -207,7 +206,7 @@ WebGLRenderer.prototype = {
      *   by the amount of time that will be simulated the next time update()
      *   runs. Useful for interpolating frames.
      */
-    render: function (state, flatRenderArray, interpolationPercentage, camera)
+    render: function (state, children, interpolationPercentage, camera)
     {
         //  Could move to the State Systems or MainLoop
         var gl = this.gl;
@@ -248,7 +247,7 @@ WebGLRenderer.prototype = {
                 this.blendMode = newBlendMode;
             }
             // drawing child
-            child.renderWebGL(this, child, interpolationPercentage);
+            child.renderWebGL(this, child, interpolationPercentage, camera);
             batch = this.batch;
             if (batch && batch.isFull())
             {

v3/src/renderer/webgl/batches/sprite/SpriteBatch.js

@@ -69,12 +69,10 @@ SpriteBatch.prototype = {
         var attribArray = [
             CreateAttribDesc(gl, program, 'a_position', 2, gl.FLOAT, false, CONST.VERTEX_SIZE, 0),
             CreateAttribDesc(gl, program, 'a_tex_coord', 2, gl.FLOAT, false, CONST.VERTEX_SIZE, 8),
-            CreateAttribDesc(gl, program, 'transform_a', 1, gl.FLOAT, false, CONST.VERTEX_SIZE, 16),
+            CreateAttribDesc(gl, program, 'a_translate', 2, gl.FLOAT, false, CONST.VERTEX_SIZE, 16),
-            CreateAttribDesc(gl, program, 'transform_b', 1, gl.FLOAT, false, CONST.VERTEX_SIZE, 20),
+            CreateAttribDesc(gl, program, 'a_scale', 2, gl.FLOAT, false, CONST.VERTEX_SIZE, 24),
-            CreateAttribDesc(gl, program, 'transform_c', 1, gl.FLOAT, false, CONST.VERTEX_SIZE, 24),
+            CreateAttribDesc(gl, program, 'a_rotation', 1, gl.FLOAT, false, CONST.VERTEX_SIZE, 32),
-            CreateAttribDesc(gl, program, 'transform_d', 1, gl.FLOAT, false, CONST.VERTEX_SIZE, 28),
+            CreateAttribDesc(gl, program, 'a_color', 3, gl.UNSIGNED_BYTE, true, CONST.VERTEX_SIZE, 36)
-            CreateAttribDesc(gl, program, 'transform_t', 2, gl.FLOAT, false, CONST.VERTEX_SIZE, 32),
-            CreateAttribDesc(gl, program, 'a_color', 3, gl.UNSIGNED_BYTE, true, CONST.VERTEX_SIZE, 40)
         ];
         var vertexArray = new VertexArray(CreateBuffer(gl, gl.ARRAY_BUFFER, gl.STREAM_DRAW, null, vertexDataBuffer.getByteCapacity()), attribArray);
         var viewMatrixLocation = gl.getUniformLocation(program, 'u_view_matrix');
@@ -114,7 +112,7 @@ SpriteBatch.prototype = {
         return (this.vertexDataBuffer.getByteLength() >= this.vertexDataBuffer.getByteCapacity());
     },
 
-    add: function (frame, anchorX, anchorY, matrix, vertexColor)
+    add: function (frame, anchorX, anchorY, transform2D, vertexColor, camera)
     {
         this.manager.setBatch(this, frame.texture.source[frame.sourceIndex].glTexture);
 
@@ -127,61 +125,68 @@ SpriteBatch.prototype = {
         var uvs = frame.uvs;
         var width = frame.width;
         var height = frame.height;
+        var translateX = transform2D.x - camera.scrollX;
+        var translateY = transform2D.y - camera.scrollY;
+        var scaleX = transform2D.scaleX;
+        var scaleY = transform2D.scaleY;
+        var rotation = transform2D.angle;
+        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 x = width * -anchorX + frame.x;
         var y = height * -anchorY + frame.y;
-        var a = matrix[0];
+        var xw = x + width;
-        var b = matrix[1];
+        var yh = y + height;
-        var c = matrix[2];
+        var tx = x * a + y * c + e;
-        var d = matrix[3];
+        var ty = x * b + y * d + f;
-        var tx = matrix[4];
+        var txw = xw * a + yh * c + e;
-        var ty = matrix[5];
+        var tyh = xw * b + yh * d + f;
         
-        vertexBufferF32[vertexOffset++] = x;
+        vertexBufferF32[vertexOffset++] = tx;
-        vertexBufferF32[vertexOffset++] = y;
+        vertexBufferF32[vertexOffset++] = ty;
         vertexBufferF32[vertexOffset++] = uvs.x0;
         vertexBufferF32[vertexOffset++] = uvs.y0;
-        vertexBufferF32[vertexOffset++] = a;
+        vertexBufferF32[vertexOffset++] = translateX;
-        vertexBufferF32[vertexOffset++] = b;
+        vertexBufferF32[vertexOffset++] = translateY;
-        vertexBufferF32[vertexOffset++] = c;
+        vertexBufferF32[vertexOffset++] = scaleX;
-        vertexBufferF32[vertexOffset++] = d;
+        vertexBufferF32[vertexOffset++] = scaleY;
-        vertexBufferF32[vertexOffset++] = tx;
+        vertexBufferF32[vertexOffset++] = rotation;
-        vertexBufferF32[vertexOffset++] = ty;
         vertexBufferU32[vertexOffset++] = vertexColor.topLeft;
 
-        vertexBufferF32[vertexOffset++] = x;
+        vertexBufferF32[vertexOffset++] = tx;
-        vertexBufferF32[vertexOffset++] = y + height;
+        vertexBufferF32[vertexOffset++] = tyh;
         vertexBufferF32[vertexOffset++] = uvs.x1;
         vertexBufferF32[vertexOffset++] = uvs.y1;
-        vertexBufferF32[vertexOffset++] = a;
+        vertexBufferF32[vertexOffset++] = translateX;
-        vertexBufferF32[vertexOffset++] = b;
+        vertexBufferF32[vertexOffset++] = translateY;
-        vertexBufferF32[vertexOffset++] = c;
+        vertexBufferF32[vertexOffset++] = scaleX;
-        vertexBufferF32[vertexOffset++] = d;
+        vertexBufferF32[vertexOffset++] = scaleY;
-        vertexBufferF32[vertexOffset++] = tx;
+        vertexBufferF32[vertexOffset++] = rotation;
-        vertexBufferF32[vertexOffset++] = ty;
         vertexBufferU32[vertexOffset++] = vertexColor.bottomLeft;
     
-        vertexBufferF32[vertexOffset++] = x + width;
+        vertexBufferF32[vertexOffset++] = txw;
-        vertexBufferF32[vertexOffset++] = y + height;
+        vertexBufferF32[vertexOffset++] = tyh;
         vertexBufferF32[vertexOffset++] = uvs.x2;
         vertexBufferF32[vertexOffset++] = uvs.y2;
-        vertexBufferF32[vertexOffset++] = a;
+        vertexBufferF32[vertexOffset++] = translateX;
-        vertexBufferF32[vertexOffset++] = b;
+        vertexBufferF32[vertexOffset++] = translateY;
-        vertexBufferF32[vertexOffset++] = c;
+        vertexBufferF32[vertexOffset++] = scaleX;
-        vertexBufferF32[vertexOffset++] = d;
+        vertexBufferF32[vertexOffset++] = scaleY;
-        vertexBufferF32[vertexOffset++] = tx;
+        vertexBufferF32[vertexOffset++] = rotation;
-        vertexBufferF32[vertexOffset++] = ty;
         vertexBufferU32[vertexOffset++] = vertexColor.bottomRight;
 
-        vertexBufferF32[vertexOffset++] = x + width;
+        vertexBufferF32[vertexOffset++] = txw;
-        vertexBufferF32[vertexOffset++] = y;
+        vertexBufferF32[vertexOffset++] = ty;
         vertexBufferF32[vertexOffset++] = uvs.x3;
         vertexBufferF32[vertexOffset++] = uvs.y3;
-        vertexBufferF32[vertexOffset++] = a;
+        vertexBufferF32[vertexOffset++] = translateX;
-        vertexBufferF32[vertexOffset++] = b;
+        vertexBufferF32[vertexOffset++] = translateY;
-        vertexBufferF32[vertexOffset++] = c;
+        vertexBufferF32[vertexOffset++] = scaleX;
-        vertexBufferF32[vertexOffset++] = d;
+        vertexBufferF32[vertexOffset++] = scaleY;
-        vertexBufferF32[vertexOffset++] = tx;
+        vertexBufferF32[vertexOffset++] = rotation;
-        vertexBufferF32[vertexOffset++] = ty;
         vertexBufferU32[vertexOffset++] = vertexColor.topRight;
 
         this.elementCount += CONST.SPRITE_INDEX_COUNT;

v3/src/renderer/webgl/batches/sprite/VertexShader.js

@@ -2,19 +2,17 @@ module.exports = [
     'uniform mat4 u_view_matrix;',
     'attribute vec2 a_position;',
     'attribute vec2 a_tex_coord;',
-    'attribute float transform_a;',
+    'attribute vec2 a_translate;',
-    'attribute float transform_b;',
+    'attribute vec2 a_scale;',
-    'attribute float transform_c;',
+    'attribute float a_rotation;',
-    'attribute float transform_d;',
-    'attribute vec2 transform_t;',
     'attribute vec3 a_color;',
     'varying vec2 v_tex_coord;',
     'varying vec3 v_color;',
     'void main () {',
-    '   vec2 t_position;',
+    '   float c = cos(a_rotation);',
-    '   t_position.x = a_position.x * transform_a + a_position.y * transform_c;',
+    '   float s = sin(a_rotation);',
-    '   t_position.y = a_position.x * transform_b + a_position.y * transform_d;',
+    '   vec2 t_position = vec2(a_position.x * c - a_position.y * s, a_position.x * s + a_position.y * c);',
-    '   gl_Position = u_view_matrix * vec4(t_position + transform_t, 1.0, 1.0);',
+    '   gl_Position = u_view_matrix * vec4(t_position * a_scale + a_translate, 1.0, 1.0);',
     '   v_tex_coord = a_tex_coord;',
     '   v_color = a_color;',
     '}'

v3/src/renderer/webgl/batches/sprite/const.js

@@ -4,13 +4,13 @@ var VertexShader = require('./VertexShader');
 var CONST = {
 
     // VERTEX_SIZE = (sizeof(vec2) * 4) + (sizeof(float) + sizeof(uint32))
-    VERTEX_SIZE: 44,
+    VERTEX_SIZE: 40,
     INDEX_SIZE: 2,
     SPRITE_VERTEX_COUNT: 4,
     SPRITE_INDEX_COUNT: 6,
 
     // How many 32-bit components does the vertex have.
-    SPRITE_VERTEX_COMPONENT_COUNT: 11,
+    SPRITE_VERTEX_COMPONENT_COUNT: 10,
 
     // Can't be bigger since index are 16-bit
     MAX_SPRITES: 2000,

v3/src/state/Systems.js

@@ -92,7 +92,7 @@ Systems.prototype = {
         this.children = new Component.Children(this.state);
         this.color = new Component.Color(this.state);
         this.data = new Component.Data(this.state);
-        this.transform = new Component.Transform(this.state);
+        //this.transform = new Component.Transform(this.state);
 
         this.inject();
     },
@@ -113,7 +113,7 @@ Systems.prototype = {
         this.state.state = this.stateManager;
 
         this.state.cameras = this.cameras;
-        this.state.transform = this.transform;
+        //this.state.transform = this.transform;
 
         this.state.cache = this.game.cache;
         this.state.textures = this.game.textures;
@@ -139,7 +139,7 @@ Systems.prototype = {
             return;
         }
 
-        this.cameras.render(renderer, this.transform.flatRenderArray, interpolation);
+        this.cameras.render(renderer, this.children, interpolation);
     }
 };
 

v3/src/state/systems/CameraManager.js

@@ -84,7 +84,7 @@ CameraManager.prototype = {
         }
     },
 
-    render: function (renderer, flatRenderArray, interpolation)
+    render: function (renderer, children, interpolation)
     {
         var cameras = this.cameras;
 
@@ -94,9 +94,7 @@ CameraManager.prototype = {
 
             camera.preRender();
 
-            renderer.render(this.state, flatRenderArray, interpolation, camera);
+            renderer.render(this.state, children, interpolation, camera);
-
-            camera.postRender();
         }
 
     },