Vector Operations - Prototype vs Float32Array vs Array vs Inline

JavaScript performance comparison

Revision 5 of this test case created

Info

Testing the speed of some basic vector operations using the prototype, arrays, typed arrays and inline objects / typed arrays.

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->64 tip re JIT)

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)
glMatrix.setMatrixArrayType(Array);
    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…
Typed Array
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…
Inline Object
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…
Inline Typed Array
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…
Inline Array
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 (Array)
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