Removed MeshCamera, updated Mesh to focus on ortho projections

src/gameobjects/mesh/Mesh.js

@@ -7,6 +7,7 @@
 var AnimationState = require('../../animations/AnimationState');
 var Class = require('../../utils/Class');
 var Components = require('../components');
+var DegToRad = require('../../math/DegToRad');
 var Face = require('../../geom/mesh/Face');
 var GameObject = require('../GameObject');
 var GameObjectEvents = require('../events');
@@ -15,7 +16,6 @@ var GetColor = require('../../display/color/GetColor');
 var GetFastValue = require('../../utils/object/GetFastValue');
 var Matrix4 = require('../../math/Matrix4');
 var Vector3 = require('../../math/Vector3');
-var MeshCamera = require('./MeshCamera');
 var MeshRender = require('./MeshRender');
 var StableSort = require('../../utils/array/StableSort');
 var Vertex = require('../../geom/mesh/Vertex');
@@ -103,21 +103,6 @@ var Mesh = new Class({
 
         GameObject.call(this, scene, 'Mesh');
 
-        /**
-         * A Camera which can be used to control the view of all faces within this Mesh.
-         *
-         * It will default to have an fov of 45 and be positioned at 0, 0, 0,
-         * with a near of 0.001 and far of 1000.
-         *
-         * You can change all of these by using the methods and properties available
-         * in the `MeshCamera` class, of which this is an instance.
-         *
-         * @name Phaser.GameObjects.Mesh#camera
-         * @type {Phaser.GameObjects.MeshCamera}
-         * @since 3.50.0
-         */
-        this.camera = new MeshCamera(45, 0, 0, 0, 0.001, 1000);
-
         /**
          * The Animation State of this Mesh.
          *
@@ -213,11 +198,15 @@ var Mesh = new Class({
         this.hideCCW = true;
 
         /**
-         * A Vector3 containing the 3D position of the model data in this Mesh.
+         * A Vector3 containing the 3D position of the vertices in this Mesh.
          *
-         * Changing the values of this property will move all vertices that have been
+         * Modifying the components of this property will allow you to reposition where
-         * added to this Mesh. Rather than change the model position, you can also
+         * the vertices are rendered within the Mesh. This happens in the `preUpdate` phase,
-         * change the Camera position, depending on the effect you require.
+         * where each vertex is transformed using the view and projection matrices.
+         *
+         * Changing this property will impact all vertices being rendered by this Mesh.
+         *
+         * You can also adjust the 'view' by using the `pan` methods.
          *
          * @name Phaser.Geom.Mesh.Model#modelPosition
          * @type {Phaser.Math.Vector3}
@@ -226,11 +215,13 @@ var Mesh = new Class({
         this.modelPosition = new Vector3();
 
         /**
-         * A Vector3 containing the 3D scale of the model data in this Mesh.
+         * A Vector3 containing the 3D scale of the vertices in this Mesh.
          *
-         * Changing the values of this property will scale all vertices that have been
+         * Modifying the components of this property will allow you to scale
-         * added to this Mesh. Rather than change the model scale, you can also
+         * the vertices within the Mesh. This happens in the `preUpdate` phase,
-         * change the Camera zoom, depending on the effect you require.
+         * where each vertex is transformed using the view and projection matrices.
+         *
+         * Changing this property will impact all vertices being rendered by this Mesh.
          *
          * @name Phaser.Geom.Mesh.Model#modelScale
          * @type {Phaser.Math.Vector3}
@@ -239,11 +230,13 @@ var Mesh = new Class({
         this.modelScale = new Vector3(1, 1, 1);
 
         /**
-         * A Vector3 containing the 3D rotation of the model data in this Mesh.
+         * A Vector3 containing the 3D rotation of the vertices in this Mesh.
          *
-         * Changing the values of this property will rotate all vertices that have been
+         * Modifying the components of this property will allow you to rotate
-         * added to this Mesh. Rather than change the model rotation, you can also
+         * the vertices within the Mesh. This happens in the `preUpdate` phase,
-         * change the Camera rotation, depending on the effect you require.
+         * where each vertex is transformed using the view and projection matrices.
+         *
+         * Changing this property will impact all vertices being rendered by this Mesh.
          *
          * @name Phaser.Geom.Mesh.Model#modelRotation
          * @type {Phaser.Math.Vector3}
@@ -255,14 +248,14 @@ var Mesh = new Class({
          * An internal cache, used to compare position, rotation, scale and face data
          * each frame, to avoid math calculations in `preUpdate`.
          *
-         * cache structure = position xyz | rotation xyz | scale xyz | face count
+         * Cache structure = position xyz | rotation xyz | scale xyz | face count | view
          *
          * @name Phaser.Geom.Mesh.Model#dirtyCache
          * @type {number[]}
          * @private
          * @since 3.50.0
          */
-        this.dirtyCache = [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ];
+        this.dirtyCache = [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ];
 
         /**
          * The transformation matrix for this Mesh.
@@ -274,33 +267,45 @@ var Mesh = new Class({
         this.transformMatrix = new Matrix4();
 
         /**
-         * Internal cached value.
+         * The view position for this Mesh.
          *
-         * @name Phaser.GameObjects.Mesh#_prevWidth
+         * Use the methods`panX`, `panY` and `panZ` to adjust the view.
-         * @type {number}
+         *
-         * @private
+         * @name Phaser.Geom.Mesh.Model#viewPosition
+         * @type {Phaser.Math.Vector3}
          * @since 3.50.0
          */
-        this._prevWidth = 0;
+        this.viewPosition = new Vector3();
 
         /**
-         * Internal cached value.
+         * The view matrix for this Mesh.
          *
-         * @name Phaser.GameObjects.Mesh#_prevHeight
+         * @name Phaser.Geom.Mesh.Model#viewMatrix
-         * @type {number}
+         * @type {Phaser.Math.Matrix4}
-         * @private
          * @since 3.50.0
          */
-        this._prevHeight = 0;
+        this.viewMatrix = new Matrix4();
+
+        /**
+         * The projection matrix for this Mesh.
+         *
+         * Update it with the `updateProjectionMatix` method.
+         *
+         * @name Phaser.Geom.Mesh.Model#projectionMatrix
+         * @type {Phaser.Math.Matrix4}
+         * @since 3.50.0
+         */
+        this.projectionMatrix = new Matrix4();
 
         var renderer = scene.sys.renderer;
 
         this.setPosition(x, y);
         this.setTexture(texture, frame);
         this.setSize(renderer.width, renderer.height);
-
         this.initPipeline();
 
+        this.updateProjectionMatrix(renderer.width, renderer.height, 45, 0.01, 1000);
+
         if (vertices)
         {
             this.addVertices(vertices, uvs, indicies, colors, alphas);
@@ -322,6 +327,82 @@ var Mesh = new Class({
         this.scene.sys.updateList.remove(this);
     },
 
+    /**
+     * Translates the view position of this Mesh on the x axis by the given amount.
+     *
+     * @method Phaser.GameObjects.Mesh#panX
+     * @since 3.50.0
+     *
+     * @param {number} v - The amount to pan by.
+     */
+    panX: function (v)
+    {
+        this.viewPosition.addScale(Vector3.LEFT, v);
+
+        this.dirtyCache[10] = 1;
+
+        return this;
+    },
+
+    /**
+     * Translates the view position of this Mesh on the y axis by the given amount.
+     *
+     * @method Phaser.GameObjects.Mesh#panY
+     * @since 3.50.0
+     *
+     * @param {number} v - The amount to pan by.
+     */
+    panY: function (v)
+    {
+        this.viewPosition.y += Vector3.DOWN.y * v;
+
+        this.dirtyCache[10] = 1;
+
+        return this;
+    },
+
+    /**
+     * Translates the view position of this Mesh on the z axis by the given amount.
+     *
+     * @method Phaser.GameObjects.Mesh#panZ
+     * @since 3.50.0
+     *
+     * @param {number} v - The amount to pan by.
+     */
+    panZ: function (amount)
+    {
+        this.viewPosition.z += amount;
+
+        this.dirtyCache[10] = 1;
+
+        return this;
+    },
+
+    /**
+     * Builds a new projection matrix from the given values.
+     *
+     * @method Phaser.GameObjects.Mesh#updateProjectionMatrix
+     * @since 3.50.0
+     *
+     * @param {number} width - The width of the renderer.
+     * @param {number} height - The height of the renderer.
+     * @param {number} [fov=45] - The field of view, in degrees.
+     * @param {number} [near=0.01] - The near value of the view.
+     * @param {number} [fofarv=1000] - The far value of the view.
+     */
+    updateProjectionMatrix: function (width, height, fov, near, far)
+    {
+        if (fov === undefined) { fov = 45; }
+        if (near === undefined) { near = 0.01; }
+        if (far === undefined) { far = 1000; }
+
+        this.projectionMatrix.perspective(DegToRad(fov), width / height, near, far);
+
+        this.dirtyCache[10] = 1;
+
+        return this;
+    },
+
     /**
      * Iterates and destroys all current Faces in this Mesh, then resets the
      * `faces` and `vertices` arrays.
@@ -1105,26 +1186,27 @@ var Mesh = new Class({
     {
         this.anims.update(time, delta);
 
-        var camera = this.camera;
+        var dirty = this.dirtyCache;
 
-        if (!camera.dirty && !this.isDirty())
+        if (!dirty[10] && !this.isDirty())
         {
-            //  If neither the camera or the mesh is dirty we can bail out and save lots of math
+            //  If neither the view or the mesh is dirty we can bail out and save lots of math
             return;
         }
 
         var width = this.width;
         var height = this.height;
 
-        if (camera.dirty || width !== this._prevWidth || height !== this._prevHeight)
+        var viewMatrix = this.viewMatrix;
+        var viewPosition = this.viewPosition;
+
+        if (dirty[10])
         {
-            //  Mesh has resized, flow that down to the Camera
+            viewMatrix.identity();
-            camera.update(width, height);
+            viewMatrix.translate(viewPosition);
+            viewMatrix.invert();
 
-            this._prevWidth = width;
+            dirty[10] = 0;
-            this._prevHeight = height;
-
-            camera.dirty = false;
         }
 
         var transformMatrix = this.transformMatrix;
@@ -1133,11 +1215,11 @@ var Mesh = new Class({
             this.modelRotation,
             this.modelPosition,
             this.modelScale,
-            camera.viewMatrix,
+            this.viewMatrix,
-            camera.projectionMatrix
+            this.projectionMatrix
         );
 
-        var z = camera.position.z;
+        var z = viewPosition.z;
 
         var vertices = this.vertices;
 

src/gameobjects/mesh/MeshCamera.js

@@ -1,302 +0,0 @@
-/**
- * @author       Richard Davey <rich@photonstorm.com>
- * @copyright    2020 Photon Storm Ltd.
- * @license      {@link https://opensource.org/licenses/MIT|MIT License}
- */
-
-var Class = require('../../utils/Class');
-var DegToRad = require('../../math/DegToRad');
-var Matrix4 = require('../../math/Matrix4');
-var Vector3 = require('../../math/Vector3');
-var Vector4 = require('../../math/Vector4');
-
-/**
- * @classdesc
- * The Mesh Camera.
- *
- * @class MeshCamera
- * @memberof Phaser.GameObjects
- * @constructor
- * @since 3.50.0
- */
-var MeshCamera = new Class({
-
-    initialize:
-
-    function MeshCamera (fov, x, y, z, near, far)
-    {
-        this.dirty = true;
-        this.aspectRatio = 1;
-
-        this._fov = fov;
-        this._near = near;
-        this._far = far;
-
-        this.position = new Vector3(x, y, z);
-        this.rotation = new Vector3();
-
-        this.forward = new Vector4();
-        this.up = new Vector4(); //  What the up direction is, invert to get bottom
-        this.right = new Vector4();	//  What the right direction is, invert to get left
-
-        this.matView = new Matrix4();
-        this.viewMatrix = new Matrix4();
-        this.projectionMatrix = new Matrix4();
-
-        this.mode = MeshCamera.MODE_ORBIT;
-    },
-
-    panX: function (v)
-    {
-        this.position.addScale(this.right, v);
-
-        this.updateViewMatrix();
-    },
-
-    panY: function (v)
-    {
-        this.position.y += this.up.y * v;
-
-        if (this.mode !== MeshCamera.MODE_ORBIT)
-        {
-            //  Can only move up and down the y axix in orbit mode
-            this.position.x += this.up.x * v;
-            this.position.z += this.up.z * v;
-        }
-
-        this.updateViewMatrix();
-    },
-
-    panZ: function (v)
-    {
-        // this.updateViewMatrix();
-
-        if (this.mode === MeshCamera.MODE_ORBIT)
-        {
-            //  orbit mode does translate after rotate, so only need to set Z, the rotate will handle the rest.
-            this.position.z += v;
-        }
-        else
-        {
-            //  In freemode to move forward, we need to move based on our forward which is relative to our current rotation
-            this.position.addScale(this.forward, v);
-        }
-
-        this.updateViewMatrix();
-    },
-
-    //  To have different modes of movements, this function handles the view matrix update for the transform object.
-    updateViewMatrix: function ()
-    {
-        var d = Math.PI / 180;
-        var matView = this.matView;
-        var rotation = this.rotation;
-
-        matView.identity();
-
-        //  Optimize camera transform update, no need for scale nor rotateZ
-        if (this.mode === MeshCamera.MODE_FREE)
-        {
-            matView.translate(this.position);
-            matView.rotateX(rotation.x * d);
-            matView.rotateY(rotation.y * d);
-        }
-        else
-        {
-            matView.rotateX(rotation.x * d);
-            matView.rotateY(rotation.y * d);
-            matView.translate(this.position);
-        }
-
-        this.updateDirection();
-
-        this.viewMatrix.copy(matView);
-        this.viewMatrix.invert();
-
-        this.dirty = true;
-    },
-
-    update: function (width, height)
-    {
-        this.aspectRatio = width / height;
-
-        this.updateViewMatrix();
-
-        this.projectionMatrix.perspective(DegToRad(this._fov), this.aspectRatio, this._near, this._far);
-    },
-
-    updateDirection: function ()
-    {
-        var matView = this.matView;
-
-        this.forward.set(0, 0, 1, 0).transformMat4(matView);
-        this.up.set(0, 1, 0, 0).transformMat4(matView);
-        this.right.set(1, 0, 0, 0).transformMat4(matView);
-    },
-
-    reset: function ()
-    {
-        this.position.set();
-        this.rotation.set();
-
-        this.updateViewMatrix();
-    },
-
-    fov: {
-
-        get: function ()
-        {
-            return this._fov;
-        },
-
-        set: function (value)
-        {
-            if (value > 0 && value < 180)
-            {
-                this._fov = value;
-                this.dirty = true;
-            }
-        }
-
-    },
-
-    near: {
-
-        get: function ()
-        {
-            return this._near;
-        },
-
-        set: function (value)
-        {
-            if (value > 0)
-            {
-                this._near = value;
-                this.dirty = true;
-            }
-        }
-
-    },
-
-    far: {
-
-        get: function ()
-        {
-            return this._far;
-        },
-
-        set: function (value)
-        {
-            if (value > 0)
-            {
-                this._far = value;
-                this.dirty = true;
-            }
-        }
-
-    },
-
-    x: {
-
-        get: function ()
-        {
-            return this.position.x;
-        },
-
-        set: function (value)
-        {
-            this.position.x = value;
-            this.updateViewMatrix();
-        }
-
-    },
-
-    y: {
-
-        get: function ()
-        {
-            return this.position.y;
-        },
-
-        set: function (value)
-        {
-            this.position.y = value;
-            this.updateViewMatrix();
-        }
-
-    },
-
-    z: {
-
-        get: function ()
-        {
-            return this.position.z;
-        },
-
-        set: function (value)
-        {
-            this.position.z = value;
-            this.updateViewMatrix();
-        }
-
-    },
-
-    rotationX: {
-
-        get: function ()
-        {
-            return this.rotation.x;
-        },
-
-        set: function (value)
-        {
-            this.rotation.x = value;
-            this.updateViewMatrix();
-        }
-
-    },
-
-    rotationY: {
-
-        get: function ()
-        {
-            return this.rotation.y;
-        },
-
-        set: function (value)
-        {
-            this.rotation.y = value;
-            this.updateViewMatrix();
-        }
-
-    },
-
-    rotationZ: {
-
-        get: function ()
-        {
-            return this.rotation.z;
-        },
-
-        set: function (value)
-        {
-            this.rotation.z = value;
-            this.updateViewMatrix();
-        }
-
-    },
-
-    destroy: function ()
-    {
-        //  TODO - Needed?
-    }
-
-});
-
-// Allows free movement of position and rotation
-MeshCamera.MODE_FREE = 0;
-
-// Movement is locked to rotate around the origin
-MeshCamera.MODE_ORBIT = 1;
-
-module.exports = MeshCamera;

src/gameobjects/mesh/MeshWebGLRenderer.js

@@ -53,7 +53,7 @@ var MeshWebGLRenderer = function (renderer, src, camera, parentMatrix)
     var e = calcMatrix.e;
     var f = calcMatrix.f;
 
-    var z = src.camera.position.z;
+    var z = src.viewPosition.z;
 
     var roundPixels = camera.roundPixels;
     var alpha = camera.alpha * src.alpha;