Vector Operations - Prototype vs Typed Array vs Array vs Inline

JavaScript performance comparison

Revision 3 of this test case created by Justin

Info

Comparison of vector operations using the prototype, arrays, typed arrays and inline versions of the above.

Preparation code

<script src="https://rawgithub.com/toji/gl-matrix/v2.2.0/dist/gl-matrix.js"></script>
<script>

    // vector prototype

    function vecA( x, y ) {
        this.x = x || 0;
        this.y = y || 0;
    }

    vecA.prototype = {
        set: function( x, y ) { this.x = x; this.y = y; },
        add: function( v ) { this.x += v.x; this.y += v.y; },
        sub: function( v ) { this.x -= v.x; this.y -= v.y; },
        mul: function( f ) { this.x *= f; this.y *= f; }
    };

    // vector typed array (thanks @mraleph for the 32 vs 64 tips)

    var vecB = {
        create: function( x, y ) { return new Float64Array([ x || 0, y || 0 ]); },
        set: function( a, x, y ) { a[0] = x; a[1] = y; },
        add: function( a, b ) { a[0] += b[0]; a[1] += b[1]; },
        sub: function( a, b ) { a[0] -= b[0]; a[1] -= b[1]; },
        mul: function( a, f ) { a[0] *= f; a[1] *= f; }
    };

    // vector regular array

    var vecC = {
        create: function( x, y ) { return [ x || 0, y || 0 ]; },
        set: function( a, x, y ) { a[0] = x; a[1] = y; },
        add: function( a, b ) { a[0] += b[0]; a[1] += b[1]; },
        sub: function( a, b ) { a[0] -= b[0]; a[1] -= b[1]; },
        mul: function( a, f ) { a[0] *= f; a[1] *= f; }
    };

    Benchmark.prototype.setup = function() {
        // create vectors (only testing ops, don't care about construction)

        var posA = new vecA( 1.2, 2.3 );
        var velA = new vecA( 3.4, 4.5 );

        var posB = vecB.create( 1.2, 2.3 );
        var velB = vecB.create( 3.4, 4.5 );

        var posC = vecC.create( 1.2, 2.3 );
        var velC = vecC.create( 3.4, 4.5 );

        var posD = { x: 1.2, y: 2.3 };
        var velD = { x: 3.4, y: 4.5 };

        var posE = new Float64Array([ 1.2, 2.3 ]);
        var velE = new Float64Array([ 3.4, 4.5 ]);

        var posF = [ 1.2, 2.3 ];
        var velF = [ 3.4, 4.5 ];

        var posG = vec2.fromValues( 1.2, 2.3 );
        var velG = vec2.fromValues( 3.4, 4.5 );
    }

</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Prototype
velA.set(1.3, 2.4);
velA.mul(0.567);
posA.add(velA);
velA.sub(posA);
pending…
Float64Array
vecB.set(velB, 1.3, 2.4);
vecB.mul(velB, 0.567);
vecB.add(posB, velB);
vecB.sub(velB, posB);
pending…
Array
vecC.set(velC, 1.3, 2.4);
vecC.mul(velC, 0.567);
vecC.add(posC, velC);
vecC.sub(velC, posC);
pending…
Object (inline)
velD.x = 1.3; velD.y = 2.4;
velD.x *= 0.567; velD.y *= 0.567;
posD.x += velD.x; posD.y += velD.y;
velD.x -= posD.x; velD.y -= posD.y;
pending…
Float64Array (inline)
velE[0] = 1.3; velE[1] = 2.4;
velE[0] *= 0.567; velE[1] *= 0.567;
posE[0] += velE[0]; posE[1] += velE[1];
velE[0] -= posE[0]; velE[1] -= posE[1];
pending…
Array (inline)
velF[0] = 1.3; velF[1] = 2.4;
velF[0] *= 0.567; velF[1] *= 0.567;
posF[0] += velF[0]; posF[1] += velF[1];
velF[0] -= posF[0]; velF[1] -= posF[1];
pending…
GL Matrix
vec2.set( velG, 1.3, 2.4 );
vec2.scale( velG, velG, 0.567 );
vec2.add( posG, posG, velG );
vec2.subtract( velG, velG, posG );
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment