성능 어디까지 가봤니?

아래의 코드는 jui 성능 튜닝하면서 얻은 아이디어이다.

특정 연산에서 쓰고 버려질 배열 객체를 캐쉬 형태로 하나만 선언하는것이 좋다는 이야기 .

jui.define("util.math", [ "util.base" ], function(_) {

    function matrix3d(a, b, m) {
        m = m || new Float32Array(4);

        var a0 = a[0], a1 = a[1], a2 = a[2], a3 = a[3];
        var b0 = b[0], b1 = b[1], b2 = b[2], b3 = b[3];

        var a00 = a0[0], a01 = a0[1], a02 = a0[2], a03 = a0[3];
        var a10 = a1[0], a11 = a1[1], a12 = a1[2], a13 = a1[3];
        var a20 = a2[0], a21 = a2[1], a22 = a2[2], a23 = a2[3];
        var a30 = a3[0], a31 = a3[1], a32 = a3[2], a33 = a3[3];

        m[0] = a00 * b0 + a01 * b1 + a02 * b2  + a03 * b3;
        m[1] = a10 * b0 + a11 * b1 + a12 * b2  + a13 * b3;
        m[2] = a20 * b0 + a21 * b1 + a22 * b2  + a23 * b3;
        m[3] = a30 * b0 + a31 * b1 + a32 * b2  + a33 * b3;

        return m;
    }

    function deepMatrix3d(a, b, nm) {
        nm = nm || [
            new Float32Array(4),
            new Float32Array(4),
            new Float32Array(4),
            new Float32Array(4)
        ];

        var a0 = a[0], a1 = a[1], a2 = a[2], a3 = a[3];
        var b0 = b[0], b1 = b[1], b2 = b[2], b3 = b[3];

        var a00 = a0[0], a01 = a0[1], a02 = a0[2], a03 = a0[3];
        var a10 = a1[0], a11 = a1[1], a12 = a1[2], a13 = a1[3];
        var a20 = a2[0], a21 = a2[1], a22 = a2[2], a23 = a2[3];
        var a30 = a3[0], a31 = a3[1], a32 = a3[2], a33 = a3[3];

        var b00 = b0[0], b01 = b0[1], b02 = b0[2], b03 = b0[3];
        var b10 = b1[0], b11 = b1[1], b12 = b1[2], b13 = b1[3];
        var b20 = b2[0], b21 = b2[1], b22 = b2[2], b23 = b2[3];
        var b30 = b3[0], b31 = b3[1], b32 = b3[2], b33 = b3[3];

        nm[0][0] = a00 * b00 + a01 * b10 + a02 * b20  + a03 * b30;
        nm[1][0] = a10 * b00 + a11 * b10 + a12 * b20  + a13 * b30;
        nm[2][0] = a20 * b00 + a21 * b10 + a22 * b20  + a23 * b30;
        nm[3][0] = a30 * b00 + a31 * b10 + a32 * b20  + a33 * b30;

        nm[0][1] = a00 * b01 + a01 * b11 + a02 * b21  + a03 * b31;
        nm[1][1] = a10 * b01 + a11 * b11 + a12 * b21  + a13 * b31;
        nm[2][1] = a20 * b01 + a21 * b11 + a22 * b21  + a23 * b31;
        nm[3][1] = a30 * b01 + a31 * b11 + a32 * b21  + a33 * b31;

        nm[0][2] = a00 * b02 + a01 * b12 + a02 * b22  + a03 * b32;
        nm[1][2] = a10 * b02 + a11 * b12 + a12 * b22  + a13 * b32;
        nm[2][2] = a20 * b02 + a21 * b12 + a22 * b22  + a23 * b32;
        nm[3][2] = a30 * b02 + a31 * b12 + a32 * b22  + a33 * b32;

        nm[0][3] = a00 * b03 + a01 * b13 + a02 * b23  + a03 * b33;
        nm[1][3] = a10 * b03 + a11 * b13 + a12 * b23  + a13 * b33;
        nm[2][3] = a20 * b03 + a21 * b13 + a22 * b23  + a23 * b33;
        nm[3][3] = a30 * b03 + a31 * b13 + a32 * b23  + a33 * b33;

        return nm;
    }
        matrix3d: function(a, b,nm) {
            if(b[0] instanceof Array || b[0] instanceof Float32Array) {
                return deepMatrix3d(a, b,nm);
            }

            return matrix3d(a, b, nm);
        },

        this.opArray = new Array(6);
        this.opFloat = new Float32Array(4);
        this.opFloat2 = new Float32Array(4);

        for(var i = 0, len = this.opArray.length; i < len; i++) {
            this.opArray[i] = [
                new Float32Array(4),
                new Float32Array(4),
                new Float32Array(4),
                new Float32Array(4)
            ];
        }


        this.rotate = function(width, height, depth, degree) {
            var p = this.perspective,
                cx = width / 2,
                cy = height / 2,
                cz = depth / 2,
                maxDepth = Math.max(width, height, depth),
                t = new Transform(this.vertices),
                m = t.matrix("move3d", cx, cy, cz);

            // 폴리곤 이동 및 각도 변경
            math.matrix3d(m, t.matrix("rotate3dx", degree.x), this.opArray[0]);
            math.matrix3d(this.opArray[0], t.matrix("rotate3dy", degree.y), this.opArray[1]);
            math.matrix3d(this.opArray[1], t.matrix("rotate3dz", degree.z), this.opArray[2]);
            math.matrix3d(this.opArray[2], t.matrix("move3d", -cx, -cy, -cz), this.opArray[3]);


            //this.vertices = t.custom(m);

            var firstM = t.matrix("move3d", cx, cy, maxDepth/2);
            var lastM = t.matrix("move3d", -cx, -cy, -maxDepth/2);

            for (var i = 0, count = this.vertices.length; i < count; i++) {
                math.matrix3d(this.opArray[3], this.vertices[i], this.opFloat);

                var far = Math.abs(this.opFloat[2] - maxDepth),
                    s = math.scaleValue(far, 0, maxDepth, p, 1);


                // 폴리곤 스케일 변경
                math.matrix3d(firstM, t.matrix("scale3d", s, s, s), this.opArray[4]);
                math.matrix3d(this.opArray[4], lastM, this.opArray[5]);


                if (this.clone) {
                    this.clone[i].set(math.matrix3d(this.opArray[5], this.opFloat, this.opFloat2));
                } else {
                    this.vertices[i].set(math.matrix3d(this.opArray[5], this.opFloat, this.opFloat2));
                }


                // 벡터 객체 생성 및 갱신
                if(_.typeCheck("array", this.vectors)) {
                    if(this.vectors[i] == null) {
                        this.vectors[i] = new Vector(this.vertices[i][0], this.vertices[i][1], this.vertices[i][2]);
                    } else {
                        this.vectors[i].x = this.vertices[i][0];
                        this.vectors[i].y = this.vertices[i][1];
                        this.vectors[i].z = this.vertices[i][2];
                    }
                }
            }
        }