DOMMatrix Perf with Canvas2D and WebGL

JavaScript performance comparison

Test case created by stasm

Preparation code


      
      <script>
Benchmark.prototype.setup = function() {
  function multiply(a, b) {
      var temparray = [];
      temparray[0] = a[0] * b[0] + a[1] * b[2];
      temparray[1] = a[0] * b[1] + a[1] * b[3];
      temparray[2] = a[2] * b[0] + a[3] * b[2];
      temparray[3] = a[2] * b[1] + a[3] * b[3];
      temparray[4] = a[4] * b[0] + a[5] * b[2] + b[4];
      temparray[5] = a[4] * b[1] + a[5] * b[3] + b[5];
    
      b[0] = temparray[0];
      b[1] = temparray[1];
      b[2] = temparray[2];
      b[3] = temparray[3];
      b[4] = temparray[4];
      b[5] = temparray[5];
      return b;
    }
    
    function rotate(a, angle) {
      angle *= Math.PI / 180;
      var rotateArray = [];
      rotateArray[0] = Math.cos(angle);
      rotateArray[1] = Math.sin(angle);
      rotateArray[2] = -Math.sin(angle);
      rotateArray[3] = Math.cos(angle);
      rotateArray[4] = 0;
      rotateArray[5] = 0;
    
      return multiply(rotateArray, a);
    }
    
    function scale(a, s) {
      a[0] *= s;
      a[1] *= s;
      a[2] *= s;
      a[3] *= s;
      a[4] *= s;
      a[5] *= s;
    
      return a;
    }
    
    function translate(a, x, y) {
      a[4] += a[0] * x + a[2] * y;
      a[5] += a[1] * x + a[3] * y;
    
      return a;
    }
    
    var multiplyArray = new Float32Array(6);
    
    function multiplyFA(a, b) {
      multiplyArray[0] = a[0] * b[0] + a[1] * b[2];
      multiplyArray[1] = a[0] * b[1] + a[1] * b[3];
      multiplyArray[2] = a[2] * b[0] + a[3] * b[2];
      multiplyArray[3] = a[2] * b[1] + a[3] * b[3];
      multiplyArray[4] = a[4] * b[0] + a[5] * b[2] + b[4];
      multiplyArray[5] = a[4] * b[1] + a[5] * b[3] + b[5];
    
      b[0] = multiplyArray[0];
      b[1] = multiplyArray[1];
      b[2] = multiplyArray[2];
      b[3] = multiplyArray[3];
      b[4] = multiplyArray[4];
      b[5] = multiplyArray[5];
      return b;
    }
    
    var rotateArray = new Float32Array(6);
    
    function rotateFA(a, angle) {
      angle *= Math.PI / 180;
    
      rotateArray[0] = Math.cos(angle);
      rotateArray[1] = Math.sin(angle);
      rotateArray[2] = -Math.sin(angle);
      rotateArray[3] = Math.cos(angle);
      rotateArray[4] = 0;
      rotateArray[5] = 0;
    
      return multiplyFA(rotateArray, a);
    }
    
    var ctx = document.createElement('canvas').getContext('2d');
    var gl = document.createElement('canvas').getContext('webgl');
  

};
</script>

Test runner

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

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
Native
var m = new DOMMatrix();
m.a = 3;
m.b = -4;
m.c = 5;
m.d = -6;
m.e = 7;
m.f = -8;

var x = 100000;
while (x--) {
    m.translateSelf(10, -10);
    m.rotateSelf(5);
}
pending…
Native + Canvas2D
var m = new DOMMatrix();
m.a = 3;
m.b = -4;
m.c = 5;
m.d = -6;
m.e = 7;
m.f = -8;

var x = 100000;
while (x--) {
    m.translateSelf(10, -10);
    m.rotateSelf(5);
    ctx.setTransform(m);
}
pending…
Native + WebGL
var m = new DOMMatrix();
m.a = 3;
m.b = -4;
m.c = 5;
m.d = -6;
m.e = 7;
m.f = -8;

var x = 100000;
while (x--) {
    m.translateSelf(10, -10);
    m.rotateSelf(5);
    gl.uniform2fv(null, m.toFloat32Array());
}
pending…
JS equivalent with Array
var n = [];
n[0] = 3;
n[1] = -4;
n[2] = 5;
n[3] = -6;
n[4] = 7;
n[5] = -8;

var x = 100000;
while (x--) {
    n = translate(n, 10, -10);
    n = rotate(n, 5);
}
pending…
JS equivalent with Array + Canvas2D
var n = [];
n[0] = 3;
n[1] = -4;
n[2] = 5;
n[3] = -6;
n[4] = 7;
n[5] = -8;

var x = 100000;
while (x--) {
    n = translate(n, 10, -10);
    n = rotate(n, 5);
    ctx.setTransform(n[0], n[1], n[2], n[3], n[4], n[5]);
}
pending…
JS equivalent with Array + WebGL
var n = [];
n[0] = 3;
n[1] = -4;
n[2] = 5;
n[3] = -6;
n[4] = 7;
n[5] = -8;

var x = 100000;
while (x--) {
    n = translate(n, 10, -10);
    n = rotate(n, 5);
    gl.uniform2fv(null, n);
}
pending…
JS equivalent with FloatArray
var n = new Float32Array(6);
n[0] = 3;
n[1] = -4;
n[2] = 5;
n[3] = -6;
n[4] = 7;
n[5] = -8;

var x = 100000;
while (x--) {
    n = translate(n, 10, -10);
    n = rotateFA(n, 5);
}
pending…
JS equivalent with FloatArray + Canvas2D
var n = new Float32Array(6);
n[0] = 3;
n[1] = -4;
n[2] = 5;
n[3] = -6;
n[4] = 7;
n[5] = -8;

var x = 100000;
while (x--) {
    n = translate(n, 10, -10);
    n = rotateFA(n, 5);
    ctx.setTransform(n[0], n[1], n[2], n[3], n[4], n[5]);
}
pending…
JS equivalent with FloatArray + WebGL
var n = new Float32Array(6);
n[0] = 3;
n[1] = -4;
n[2] = 5;
n[3] = -6;
n[4] = 7;
n[5] = -8;

var x = 100000;
while (x--) {
    n = translate(n, 10, -10);
    n = rotateFA(n, 5);
    gl.uniform2fv(null, n);
}
pending…

You can edit these tests or add even more tests to this page by appending /edit to the URL.

0 Comments