improve the Matrix mat3 parallelograms perspective

Would you like this feature?

  • Yes

    Votes: 4 50.0%
  • No

    Votes: 4 50.0%
  • Yes but not important

    Votes: 0 0.0%

  • Total voters
    8

Jonforum

Veteran
Veteran
Joined
Mar 28, 2016
Messages
1,617
Reaction score
1,426
First Language
French
Primarily Uses
RMMV
Description of the Feature:
note: am not talking about skew(ax, ay); that make only parrallal perspective.

Improve Sprites Matrix with mat3.
For map a texture to quad:
need storing all four vertices in each of them and bilinear interpolation in the shader.

Mockups:
Avaible live demo example here! REAL 3D with only X and Y no need Z
http://mathinsight.org/linear_transformations_map_parallelograms_parallelepipeds#map2D

also here what am talking about, i make a small gif with photoshop.




Code for Implementation:
PHP:
define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var Matrix3 = {};
    exports.default = Matrix3;
    /**
     * Set the components of a mat3 to the given values
     *
     * @param {mat3} out the receiving matrix
     * @param {Number} m00 Component in column 0, row 0 position (index 0)
     * @param {Number} m01 Component in column 0, row 1 position (index 1)
     * @param {Number} m02 Component in column 0, row 2 position (index 2)
     * @param {Number} m10 Component in column 1, row 0 position (index 3)
     * @param {Number} m11 Component in column 1, row 1 position (index 4)
     * @param {Number} m12 Component in column 1, row 2 position (index 5)
     * @param {Number} m20 Component in column 2, row 0 position (index 6)
     * @param {Number} m21 Component in column 2, row 1 position (index 7)
     * @param {Number} m22 Component in column 2, row 2 position (index 8)
     * @returns {mat3} out
     */
    Matrix3.create = function (m00, m01, m02, m10, m11, m12, m20, m21, m22, out) {
        out = out || new Float32Array(9);
        out[0] = m00;
        out[1] = m01;
        out[2] = m02;
        out[3] = m10;
        out[4] = m11;
        out[5] = m12;
        out[6] = m20;
        out[7] = m21;
        out[8] = m22;
        return out;
    };
    Matrix3.multiply = function (a, b, out) {
        var a00 = a[0];
        var a01 = a[1];
        var a02 = a[2];
        var a10 = a[3];
        var a11 = a[4];
        var a12 = a[5];
        var a20 = a[6];
        var a21 = a[7];
        var a22 = a[8];
        var b00 = b[0];
        var b01 = b[1];
        var b02 = b[2];
        var b10 = b[3];
        var b11 = b[4];
        var b12 = b[5];
        var b20 = b[6];
        var b21 = b[7];
        var b22 = b[8];
        out[0] = b00 * a00 + b01 * a10 + b02 * a20;
        out[1] = b00 * a01 + b01 * a11 + b02 * a21;
        out[2] = b00 * a02 + b01 * a12 + b02 * a22;
        out[3] = b10 * a00 + b11 * a10 + b12 * a20;
        out[4] = b10 * a01 + b11 * a11 + b12 * a21;
        out[5] = b10 * a02 + b11 * a12 + b12 * a22;
        out[6] = b20 * a00 + b21 * a10 + b22 * a20;
        out[7] = b20 * a01 + b21 * a11 + b22 * a21;
        out[8] = b20 * a02 + b21 * a12 + b22 * a22;
        return out;
    };
    Matrix3.squareToQuadrilateral = function (x0, y0, x1, y1, x2, y2, x3, y3, out) {
        var sx = x0 - x1 + x2 - x3;
        var sy = y0 - y1 + y2 - y3;
        if (sx === 0.0 && sy === 0.0) {
            out = Matrix3.create(x1 - x0, y1 - y0, 0.0, x2 - x1, y2 - y1, 0.0, x0, y0, 1.0, out);
        }
        else {
            var dx1 = x1 - x2;
            var dy1 = y1 - y2;
            var dx2 = x3 - x2;
            var dy2 = y3 - y2;
            var denominator = dx1 * dy2 - dx2 * dy1;
            var a13 = (sx * dy2 - dx2 * sy) / denominator;
            var a23 = (dx1 * sy - sx * dy1) / denominator;
            out = Matrix3.create(x1 - x0 + a13 * x1, y1 - y0 + a13 * y1, a13, x3 - x0 + a23 * x3, y3 - y0 + a23 * y3, a23, x0, y0, 1.0, out);
        }
        return out;
    };
    Matrix3.quadrilateralToSquare = function (x0, y0, x1, y1, x2, y2, x3, y3, out) {
        // const sToq = Matrix3.squareToQuadrilateral(x0, y0, x1, y1, x2, y2, x3, y3);
        // const qToS = new Float32Array(9);
        // Matrix3.adjoint(qToS, sToq);
        // console.log(qToS)
        // return qToS;
        out = Matrix3.squareToQuadrilateral(x0, y0, x1, y1, x2, y2, x3, y3, out);
        // invert through adjoint
        var a = out[0];
        var d = out[1];
        var g = out[2];
        var b = out[3];
        var e = out[4];
        var h = out[5];
        var c = out[6];
        var f = out[7];
        var A = e - f * h;
        var B = c * h - b;
        var C = b * f - c * e;
        var D = f * g - d;
        var E = a - c * g;
        var F = c * d - a * f;
        var G = d * h - e * g;
        var H = b * g - a * h;
        var I = a * e - b * d;
        // Probably unnecessary since 'I' is also scaled by the determinant,
        //   and 'I' scales the homogeneous coordinate, which, in turn,
        //   scales the X,Y coordinates.
        // Determinant  =   a * (e - f * h) + b * (f * g - d) + c * (d * h - e * g);
        var det = a * A + b * D + c * G;
        out[0] = A / det;
        out[1] = D / det;
        out[2] = G / det;
        out[3] = B / det;
        out[4] = E / det;
        out[5] = H / det;
        out[6] = C / det;
        out[7] = F / det;
        out[8] = I / det;
        // console.log(out)
        return out;
    };
    Matrix3.perspective = function (fromQuad, toQuad, out) {
        var qToS = Matrix3.quadrilateralToSquare(fromQuad[0], fromQuad[1], fromQuad[2], fromQuad[3], fromQuad[4], fromQuad[5], fromQuad[6], fromQuad[7]);
        var sToQ = Matrix3.squareToQuadrilateral(toQuad[0], toQuad[1], toQuad[2], toQuad[3], toQuad[4], toQuad[5], toQuad[6], toQuad[7]);
        out = out || new Float32Array(9);
        Matrix3.multiply(qToS, sToQ, out);
        return out;
    };
    Matrix3.perspectiveTransfromPoint = function (mat, x, y) {
        var a = x * mat[0] + y * mat[1] + mat[2];
        var b = x * mat[3] + y * mat[4] + mat[5];
        var c = x * mat[6] + y * mat[7] + mat[8];
        return [a / c, b / c];
    };
    Matrix3.adjoint = function (a, out) {
        out = out || new Float32Array(9);
        var a00 = a[0];
        var a01 = a[1];
        var a02 = a[2];
        var a10 = a[3];
        var a11 = a[4];
        var a12 = a[5];
        var a20 = a[6];
        var a21 = a[7];
        var a22 = a[8];
        out[0] = (a11 * a22 - a12 * a21);
        out[1] = (a02 * a21 - a01 * a22);
        out[2] = (a01 * a12 - a02 * a11);
        out[3] = (a12 * a20 - a10 * a22);
        out[4] = (a00 * a22 - a02 * a20);
        out[5] = (a02 * a10 - a00 * a12);
        out[6] = (a10 * a21 - a11 * a20);
        out[7] = (a01 * a20 - a00 * a21);
        out[8] = (a00 * a11 - a01 * a10);
        return out;
    };
    Matrix3.invert = function (a, out) {
        out = out || new Float32Array(9);
        var a00 = a[0];
        var a01 = a[1];
        var a02 = a[2];
        var a10 = a[3];
        var a11 = a[4];
        var a12 = a[5];
        var a20 = a[6];
        var a21 = a[7];
        var a22 = a[8];
        var b01 = a22 * a11 - a12 * a21;
        var b11 = -a22 * a10 + a12 * a20;
        var b21 = a21 * a10 - a11 * a20;
        // Calculate the determinant
        var det = a00 * b01 + a01 * b11 + a02 * b21;
        if (!det) {
            return null;
        }
        det = 1.0 / det;
        out[0] = b01 * det;
        out[1] = (-a22 * a01 + a02 * a21) * det;
        out[2] = (a12 * a01 - a02 * a11) * det;
        out[3] = b11 * det;
        out[4] = (a22 * a00 - a02 * a20) * det;
        out[5] = (-a12 * a00 + a02 * a10) * det;
        out[6] = b21 * det;
        out[7] = (-a21 * a00 + a01 * a20) * det;
        out[8] = (a11 * a00 - a01 * a10) * det;
        return out;
    };
    Matrix3.str = function (a) {
        return 'mat3(' + a[0] + ', ' + a[1] + ', ' + a[2] + ', '
            + a[3] + ', ' + a[4] + ', ' + a[5] + ', '
            + a[6] + ', ' + a[7] + ', ' + a[8] + ')';
    };
});
Why is this feature good?
*fake 3D without Z ! only with XY scale matrix pixi
*This will create 3d fake perspective, much like Mario paper or mario rpg engine.
*An easy-to-use matrix to control the perspective of sprites
*Ideally to offer more creativity.
*Animation, Map Zoom, radiant Blur, parralaxe will be isane with perspective !

Possible issues with this feature?
nothing i kwow
 
Last edited:

peq42_

Yeet
Veteran
Joined
Feb 5, 2016
Messages
480
Reaction score
286
First Language
Portuguese(BR)
Primarily Uses
RMMV
I would like to see this added in the interface of the engine. Even if i had to pay a bit more to include that.

I know that the engine's focus is 2D RPG, but why not include a little bit of 3D if it isn't that hard? Games would look a lot better, and this function would add many possibilities for plugin makers!
 

Jonforum

Veteran
Veteran
Joined
Mar 28, 2016
Messages
1,617
Reaction score
1,426
First Language
French
Primarily Uses
RMMV
I would like to see this added in the interface of the engine. Even if i had to pay a bit more to include that.

I know that the engine's focus is 2D RPG, but why not include a little bit of 3D if it isn't that hard? Games would look a lot better, and this function would add many possibilities for plugin makers!
its now fully support and easy to add to rmmv , take a look here https://pixijs.github.io/examples/#/projection/plane.js
in the projection section.
 

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

Latest Threads

Latest Posts

Latest Profile Posts

We'll be doing another giveaway of MZ on the stream tomorrow! Thank you SykoGaming for contributing a copy for the community! :D
Sorry guys! Been away for long this time. Got attacked by my anxieties again. At least no more bedbugs. Got logged out of here and layout seems strange now a bit.
My old project is now a sitcom
How to do implementation the social politcal mechanics in rpg maker? Thank you for quick spark of ideas. Fear of going to the thread lol.

Forum statistics

Threads
100,781
Messages
979,471
Members
132,419
Latest member
memakegamemekillminority
Top