improve the Matrix mat3 parallelograms perspective

Discussion in 'Editor Suggestions and Improvement' started by Jonforum, Jul 26, 2017.

?

Would you like this feature?

  1. Yes

    3 vote(s)
    42.9%
  2. No

    4 vote(s)
    57.1%
  3. Yes but not important

    0 vote(s)
    0.0%
  1. Jonforum

    Jonforum Veteran

    Messages:
    1,178
    Likes Received:
    700
    Location:
    Canada / Québec
    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.
    [​IMG]
    [​IMG]


    Code for Implementation:
    PHP:
    define(["require""exports"], function (require, exports) {
        
    "use strict";
        
    Object.defineProperty(exports"__esModule", { valuetrue });
        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 (m00m01m02m10m11m12m20m21m22out) {
            
    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 (about) {
            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 (x0y0x1y1x2y2x3y3out) {
            var 
    sx x0 x1 x2 x3;
            var 
    sy y0 y1 y2 y3;
            if (
    sx === 0.0 && sy === 0.0) {
                
    out Matrix3.create(x1 x0y1 y00.0x2 x1y2 y10.0x0y01.0out);
            }
            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 x1y1 y0 a13 y1a13x3 x0 a23 x3y3 y0 a23 y3a23x0y01.0out);
            }
            return 
    out;
        };
        
    Matrix3.quadrilateralToSquare = function (x0y0x1y1x2y2x3y3out) {
            
    // 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(x0y0x1y1x2y2x3y3out);
            
    // invert through adjoint
            
    var out[0];
            var 
    out[1];
            var 
    out[2];
            var 
    out[3];
            var 
    out[4];
            var 
    out[5];
            var 
    out[6];
            var 
    out[7];
            var 
    h;
            var 
    b;
            var 
    e;
            var 
    d;
            var 
    g;
            var 
    f;
            var 
    g;
            var 
    h;
            var 
    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 G;
            
    out[0] = det;
            
    out[1] = det;
            
    out[2] = det;
            
    out[3] = det;
            
    out[4] = det;
            
    out[5] = det;
            
    out[6] = det;
            
    out[7] = det;
            
    out[8] = det;
            
    // console.log(out)
            
    return out;
        };
        
    Matrix3.perspective = function (fromQuadtoQuadout) {
            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(qToSsToQout);
            return 
    out;
        };
        
    Matrix3.perspectiveTransfromPoint = function (matxy) {
            var 
    mat[0] + mat[1] + mat[2];
            var 
    mat[3] + mat[4] + mat[5];
            var 
    mat[6] + mat[7] + mat[8];
            return [
    cc];
        };
        
    Matrix3.adjoint = function (aout) {
            
    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 (aout) {
            
    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: Jul 27, 2017
    #1
  2. Jonforum

    Jonforum Veteran

    Messages:
    1,178
    Likes Received:
    700
    Location:
    Canada / Québec
    First Language:
    French
    Primarily Uses:
    RMMV
  3. elpeleq42

    elpeleq42 Veteran

    Messages:
    248
    Likes Received:
    96
    Location:
    Brazil
    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!
     
    #3
  4. Jonforum

    Jonforum Veteran

    Messages:
    1,178
    Likes Received:
    700
    Location:
    Canada / Québec
    First Language:
    French
    Primarily Uses:
    RMMV
    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.
     
    #4
  5. elpeleq42

    elpeleq42 Veteran

    Messages:
    248
    Likes Received:
    96
    Location:
    Brazil
    First Language:
    Portuguese(BR)
    Primarily Uses:
    RMMV
    #5
  6. Jonforum

    Jonforum Veteran

    Messages:
    1,178
    Likes Received:
    700
    Location:
    Canada / Québec
    First Language:
    French
    Primarily Uses:
    RMMV

    for topic, no have time, but you will have more answer on and help on Github.
    there are programmer rmmv.
    https://github.com/pixijs/pixi.js/issues
     
    #6

Share This Page