diff --git a/v3/src/camera/Camera.js b/v3/src/camera/Camera.js index ddc61ca50..c57a3fda4 100644 --- a/v3/src/camera/Camera.js +++ b/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; - var stateTransform = state.sys.transform; - - this.statePositionX = stateTransform.positionX; - 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; + this.matrix.loadIdentity(). + translate(this.x + this._shakeOffsetX, this.y + this._shakeOffsetY). + rotate(this.rotation). + scale(this.zoom, this.zoom); }, destroy: function () diff --git a/v3/src/components/Transform.js b/v3/src/components/Transform.js index f9f8d2756..27c532416 100644 --- a/v3/src/components/Transform.js +++ b/v3/src/components/Transform.js @@ -262,4 +262,4 @@ Object.defineProperties(Transform.prototype,{ } }); -module.exports = Transform; +//module.exports = Transform; diff --git a/v3/src/components/Transform2DMatrix.js b/v3/src/components/Transform2DMatrix.js new file mode 100644 index 000000000..628758c63 --- /dev/null +++ b/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 +}; diff --git a/v3/src/components/index.js b/v3/src/components/index.js index 140ededdb..a6efb8e9d 100644 --- a/v3/src/components/index.js +++ b/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 }; diff --git a/v3/src/device/Features.js b/v3/src/device/Features.js index 31209d8e7..7704aeacf 100644 --- a/v3/src/device/Features.js +++ b/v3/src/device/Features.js @@ -171,7 +171,7 @@ function init () return false; }; - Features.webGL = testWebGL(); + Features.webGL = true;//testWebGL(); Features.worker = !!window['Worker']; diff --git a/v3/src/gameobjects/GameObject.js b/v3/src/gameobjects/GameObject.js index f8443a1c5..8132098a4 100644 --- a/v3/src/gameobjects/GameObject.js +++ b/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.positionX = x; - this.transform.positionY = y; + this.transform = new Component.Transform2D(x, 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.dirtyLocal = true; + this.transform.x = value; } }, @@ -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.dirtyLocal = true; + this.transform.y = value; } }, @@ -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.dirtyLocal = true; + this.transform.angle = value; } }, @@ -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.dirtyLocal = true; + this.transform.angle = WrapAngle(value * MATH_CONST.DEG_TO_RAD); } }, diff --git a/v3/src/gameobjects/image/ImageWebGLRenderer.js b/v3/src/gameobjects/image/ImageWebGLRenderer.js index 77aaff241..b5d432e30 100644 --- a/v3/src/gameobjects/image/ImageWebGLRenderer.js +++ b/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; - - // 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 transform2D = 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; - - vertexBufferF32[vertexOffset++] = x; - vertexBufferF32[vertexOffset++] = y; + 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; + + renderer.setBatch(spriteBatch, frame.texture.source[frame.sourceIndex].glTexture); + + vertexBufferF32[vertexOffset++] = tx; + vertexBufferF32[vertexOffset++] = ty; vertexBufferF32[vertexOffset++] = uvs.x0; vertexBufferF32[vertexOffset++] = uvs.y0; - vertexBufferF32[vertexOffset++] = a; - vertexBufferF32[vertexOffset++] = b; - vertexBufferF32[vertexOffset++] = c; - vertexBufferF32[vertexOffset++] = d; - vertexBufferF32[vertexOffset++] = tx; - vertexBufferF32[vertexOffset++] = ty; + vertexBufferF32[vertexOffset++] = translateX; + vertexBufferF32[vertexOffset++] = translateY; + vertexBufferF32[vertexOffset++] = scaleX; + vertexBufferF32[vertexOffset++] = scaleY; + vertexBufferF32[vertexOffset++] = rotation; vertexBufferU32[vertexOffset++] = vertexColor.topLeft; - vertexBufferF32[vertexOffset++] = x; - vertexBufferF32[vertexOffset++] = yh; + vertexBufferF32[vertexOffset++] = tx; + vertexBufferF32[vertexOffset++] = tyh; vertexBufferF32[vertexOffset++] = uvs.x1; vertexBufferF32[vertexOffset++] = uvs.y1; - vertexBufferF32[vertexOffset++] = a; - vertexBufferF32[vertexOffset++] = b; - vertexBufferF32[vertexOffset++] = c; - vertexBufferF32[vertexOffset++] = d; - vertexBufferF32[vertexOffset++] = tx; - vertexBufferF32[vertexOffset++] = ty; + vertexBufferF32[vertexOffset++] = translateX; + vertexBufferF32[vertexOffset++] = translateY; + vertexBufferF32[vertexOffset++] = scaleX; + vertexBufferF32[vertexOffset++] = scaleY; + vertexBufferF32[vertexOffset++] = rotation; vertexBufferU32[vertexOffset++] = vertexColor.bottomLeft; - vertexBufferF32[vertexOffset++] = xw; - vertexBufferF32[vertexOffset++] = yh; + vertexBufferF32[vertexOffset++] = txw; + vertexBufferF32[vertexOffset++] = tyh; vertexBufferF32[vertexOffset++] = uvs.x2; vertexBufferF32[vertexOffset++] = uvs.y2; - vertexBufferF32[vertexOffset++] = a; - vertexBufferF32[vertexOffset++] = b; - vertexBufferF32[vertexOffset++] = c; - vertexBufferF32[vertexOffset++] = d; - vertexBufferF32[vertexOffset++] = tx; - vertexBufferF32[vertexOffset++] = ty; + vertexBufferF32[vertexOffset++] = translateX; + vertexBufferF32[vertexOffset++] = translateY; + vertexBufferF32[vertexOffset++] = scaleX; + vertexBufferF32[vertexOffset++] = scaleY; + vertexBufferF32[vertexOffset++] = rotation; vertexBufferU32[vertexOffset++] = vertexColor.bottomRight; - vertexBufferF32[vertexOffset++] = xw; - vertexBufferF32[vertexOffset++] = y; + vertexBufferF32[vertexOffset++] = txw; + vertexBufferF32[vertexOffset++] = ty; vertexBufferF32[vertexOffset++] = uvs.x3; vertexBufferF32[vertexOffset++] = uvs.y3; - vertexBufferF32[vertexOffset++] = a; - vertexBufferF32[vertexOffset++] = b; - vertexBufferF32[vertexOffset++] = c; - vertexBufferF32[vertexOffset++] = d; - vertexBufferF32[vertexOffset++] = tx; - vertexBufferF32[vertexOffset++] = ty; + vertexBufferF32[vertexOffset++] = translateX; + vertexBufferF32[vertexOffset++] = translateY; + vertexBufferF32[vertexOffset++] = scaleX; + vertexBufferF32[vertexOffset++] = scaleY; + vertexBufferF32[vertexOffset++] = rotation; vertexBufferU32[vertexOffset++] = vertexColor.topRight; + spriteBatch.elementCount += 6; }; diff --git a/v3/src/renderer/webgl/WebGLRenderer.js b/v3/src/renderer/webgl/WebGLRenderer.js index 5f69578ab..c556c8711 100644 --- a/v3/src/renderer/webgl/WebGLRenderer.js +++ b/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()) { diff --git a/v3/src/renderer/webgl/batches/sprite/SpriteBatch.js b/v3/src/renderer/webgl/batches/sprite/SpriteBatch.js index 9f16f2c14..860a9cc52 100644 --- a/v3/src/renderer/webgl/batches/sprite/SpriteBatch.js +++ b/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, 'transform_b', 1, gl.FLOAT, false, CONST.VERTEX_SIZE, 20), - CreateAttribDesc(gl, program, 'transform_c', 1, gl.FLOAT, false, CONST.VERTEX_SIZE, 24), - CreateAttribDesc(gl, program, 'transform_d', 1, gl.FLOAT, false, CONST.VERTEX_SIZE, 28), - 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) + CreateAttribDesc(gl, program, 'a_translate', 2, gl.FLOAT, false, CONST.VERTEX_SIZE, 16), + CreateAttribDesc(gl, program, 'a_scale', 2, gl.FLOAT, false, CONST.VERTEX_SIZE, 24), + CreateAttribDesc(gl, program, 'a_rotation', 1, gl.FLOAT, false, CONST.VERTEX_SIZE, 32), + CreateAttribDesc(gl, program, 'a_color', 3, gl.UNSIGNED_BYTE, true, CONST.VERTEX_SIZE, 36) ]; 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 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; - vertexBufferF32[vertexOffset++] = y; + vertexBufferF32[vertexOffset++] = tx; + vertexBufferF32[vertexOffset++] = ty; vertexBufferF32[vertexOffset++] = uvs.x0; vertexBufferF32[vertexOffset++] = uvs.y0; - vertexBufferF32[vertexOffset++] = a; - vertexBufferF32[vertexOffset++] = b; - vertexBufferF32[vertexOffset++] = c; - vertexBufferF32[vertexOffset++] = d; - vertexBufferF32[vertexOffset++] = tx; - vertexBufferF32[vertexOffset++] = ty; + vertexBufferF32[vertexOffset++] = translateX; + vertexBufferF32[vertexOffset++] = translateY; + vertexBufferF32[vertexOffset++] = scaleX; + vertexBufferF32[vertexOffset++] = scaleY; + vertexBufferF32[vertexOffset++] = rotation; vertexBufferU32[vertexOffset++] = vertexColor.topLeft; - vertexBufferF32[vertexOffset++] = x; - vertexBufferF32[vertexOffset++] = y + height; + vertexBufferF32[vertexOffset++] = tx; + vertexBufferF32[vertexOffset++] = tyh; vertexBufferF32[vertexOffset++] = uvs.x1; vertexBufferF32[vertexOffset++] = uvs.y1; - vertexBufferF32[vertexOffset++] = a; - vertexBufferF32[vertexOffset++] = b; - vertexBufferF32[vertexOffset++] = c; - vertexBufferF32[vertexOffset++] = d; - vertexBufferF32[vertexOffset++] = tx; - vertexBufferF32[vertexOffset++] = ty; + vertexBufferF32[vertexOffset++] = translateX; + vertexBufferF32[vertexOffset++] = translateY; + vertexBufferF32[vertexOffset++] = scaleX; + vertexBufferF32[vertexOffset++] = scaleY; + vertexBufferF32[vertexOffset++] = rotation; vertexBufferU32[vertexOffset++] = vertexColor.bottomLeft; - vertexBufferF32[vertexOffset++] = x + width; - vertexBufferF32[vertexOffset++] = y + height; + vertexBufferF32[vertexOffset++] = txw; + vertexBufferF32[vertexOffset++] = tyh; vertexBufferF32[vertexOffset++] = uvs.x2; vertexBufferF32[vertexOffset++] = uvs.y2; - vertexBufferF32[vertexOffset++] = a; - vertexBufferF32[vertexOffset++] = b; - vertexBufferF32[vertexOffset++] = c; - vertexBufferF32[vertexOffset++] = d; - vertexBufferF32[vertexOffset++] = tx; - vertexBufferF32[vertexOffset++] = ty; + vertexBufferF32[vertexOffset++] = translateX; + vertexBufferF32[vertexOffset++] = translateY; + vertexBufferF32[vertexOffset++] = scaleX; + vertexBufferF32[vertexOffset++] = scaleY; + vertexBufferF32[vertexOffset++] = rotation; vertexBufferU32[vertexOffset++] = vertexColor.bottomRight; - vertexBufferF32[vertexOffset++] = x + width; - vertexBufferF32[vertexOffset++] = y; + vertexBufferF32[vertexOffset++] = txw; + vertexBufferF32[vertexOffset++] = ty; vertexBufferF32[vertexOffset++] = uvs.x3; vertexBufferF32[vertexOffset++] = uvs.y3; - vertexBufferF32[vertexOffset++] = a; - vertexBufferF32[vertexOffset++] = b; - vertexBufferF32[vertexOffset++] = c; - vertexBufferF32[vertexOffset++] = d; - vertexBufferF32[vertexOffset++] = tx; - vertexBufferF32[vertexOffset++] = ty; + vertexBufferF32[vertexOffset++] = translateX; + vertexBufferF32[vertexOffset++] = translateY; + vertexBufferF32[vertexOffset++] = scaleX; + vertexBufferF32[vertexOffset++] = scaleY; + vertexBufferF32[vertexOffset++] = rotation; vertexBufferU32[vertexOffset++] = vertexColor.topRight; this.elementCount += CONST.SPRITE_INDEX_COUNT; diff --git a/v3/src/renderer/webgl/batches/sprite/VertexShader.js b/v3/src/renderer/webgl/batches/sprite/VertexShader.js index 27b027068..85dd10805 100644 --- a/v3/src/renderer/webgl/batches/sprite/VertexShader.js +++ b/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 float transform_b;', - 'attribute float transform_c;', - 'attribute float transform_d;', - 'attribute vec2 transform_t;', + 'attribute vec2 a_translate;', + 'attribute vec2 a_scale;', + 'attribute float a_rotation;', 'attribute vec3 a_color;', 'varying vec2 v_tex_coord;', 'varying vec3 v_color;', 'void main () {', - ' vec2 t_position;', - ' t_position.x = a_position.x * transform_a + a_position.y * transform_c;', - ' t_position.y = a_position.x * transform_b + a_position.y * transform_d;', - ' gl_Position = u_view_matrix * vec4(t_position + transform_t, 1.0, 1.0);', + ' float c = cos(a_rotation);', + ' float s = sin(a_rotation);', + ' 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 * a_scale + a_translate, 1.0, 1.0);', ' v_tex_coord = a_tex_coord;', ' v_color = a_color;', '}' diff --git a/v3/src/renderer/webgl/batches/sprite/const.js b/v3/src/renderer/webgl/batches/sprite/const.js index d19b26ba7..8552dbcab 100644 --- a/v3/src/renderer/webgl/batches/sprite/const.js +++ b/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, diff --git a/v3/src/state/Systems.js b/v3/src/state/Systems.js index c4ac053e1..82766d524 100644 --- a/v3/src/state/Systems.js +++ b/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); } }; diff --git a/v3/src/state/systems/CameraManager.js b/v3/src/state/systems/CameraManager.js index d57fafce6..0aab296c2 100644 --- a/v3/src/state/systems/CameraManager.js +++ b/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); - - camera.postRender(); + renderer.render(this.state, children, interpolation, camera); } },