Vector Operations - Prototype vs Typed Array vs Array vs Inline

JavaScript performance comparison

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( posB, posB, velB );
vec2.subtract( velB, velB, posB );
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