Run results for: Mat3 Multiplication

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36

Browser: Chrome 73

Operating system: Windows

Device Platform: Desktop

Date tested: 5 years ago

Test name	Executions per second
Store values in consts first	7123050.0 Ops/sec
Store values in consts first (arranged)	7171672.0 Ops/sec
Access values directly	6249706.0 Ops/sec

Script Preparation code:

class Mat3_Consts extends Float32Array {
  constructor() {
    super(9);
    
    this[0] = Math.random();
    this[1] = Math.random();
    this[2] = Math.random();
    this[3] = Math.random();
    this[4] = Math.random();
    this[5] = Math.random();
    this[6] = Math.random();
    this[7] = Math.random();
    this[8] = Math.random();
  }

  mul(that) {
    const x1 = this[0];
    const x2 = this[1];
    const x3 = this[2];
    const y1 = this[3];
    const y2 = this[4];
    const y3 = this[5];
    const z1 = this[6];
    const z2 = this[7];
    const z3 = this[8];
    const a1 = that[0];
    const a2 = that[1];
    const a3 = that[2];
    const b1 = that[3];
    const b2 = that[4];
    const b3 = that[5];
    const c1 = that[6];
    const c2 = that[7];
    const c3 = that[8];

    this[0] = x1 * a1 + x2 * b1 + x3 * c1;
    this[1] = x1 * a2 + x2 * b2 + x3 * c2;
    this[2] = x1 * a3 + x2 * b3 + x3 * c3;
    this[3] = y1 * a1 + y2 * b1 + y3 * c1;
    this[4] = y1 * a2 + y2 * b2 + y3 * c2;
    this[5] = y1 * a3 + y2 * b3 + y3 * c3;
    this[6] = z1 * a1 + z2 * b1 + z3 * c1;
    this[7] = z1 * a2 + z2 * b2 + z3 * c2;
    this[8] = z1 * a3 + z2 * b3 + z3 * c3;
    return this;
  }
}

class Mat3_ConstsArranged extends Float32Array {
  constructor() {
    super(9);
    
    this[0] = Math.random();
    this[1] = Math.random();
    this[2] = Math.random();
    this[3] = Math.random();
    this[4] = Math.random();
    this[5] = Math.random();
    this[6] = Math.random();
    this[7] = Math.random();
    this[8] = Math.random();
  }

  mul(that) {
    const x1 = this[0];
    const a1 = that[0];
    
    const x2 = this[1];
    const b1 = that[3];
    
    const x3 = this[2];
    const c1 = that[6];
    
    const y1 = this[3];
    const a2 = that[1];
    
    const y2 = this[4];
    const b2 = that[4];
    
    const y3 = this[5];
    const c2 = that[7];
    
    const z1 = this[6];
    const a3 = that[2];
    
    const z2 = this[7];
    const b3 = that[5];
    
    const z3 = this[8];
    const c3 = that[8];

    this[0] = x1 * a1 + x2 * b1 + x3 * c1;
    this[1] = x1 * a2 + x2 * b2 + x3 * c2;
    this[2] = x1 * a3 + x2 * b3 + x3 * c3;
    this[3] = y1 * a1 + y2 * b1 + y3 * c1;
    this[4] = y1 * a2 + y2 * b2 + y3 * c2;
    this[5] = y1 * a3 + y2 * b3 + y3 * c3;
    this[6] = z1 * a1 + z2 * b1 + z3 * c1;
    this[7] = z1 * a2 + z2 * b2 + z3 * c2;
    this[8] = z1 * a3 + z2 * b3 + z3 * c3;
    return this;
  }
}

class Mat3_Accesses extends Float32Array {
  constructor() {
    super(9);
    
    this[0] = Math.random();
    this[1] = Math.random();
    this[2] = Math.random();
    this[3] = Math.random();
    this[4] = Math.random();
    this[5] = Math.random();
    this[6] = Math.random();
    this[7] = Math.random();
    this[8] = Math.random();
  }

  mul(that) {
    this[0] = this[0] * that[0] + this[1] * that[3] + this[2] * that[6];
    this[1] = this[0] * that[1] + this[1] * that[4] + this[2] * that[7];
    this[2] = this[0] * that[2] + this[1] * that[5] + this[2] * that[8];
    this[3] = this[3] * that[0] + this[4] * that[3] + this[5] * that[6];
    this[4] = this[3] * that[1] + this[4] * that[4] + this[5] * that[7];
    this[5] = this[3] * that[2] + this[4] * that[5] + this[5] * that[8];
    this[6] = this[6] * that[0] + this[7] * that[3] + this[8] * that[6];
    this[7] = this[6] * that[1] + this[7] * that[4] + this[8] * that[7];
    this[8] = this[6] * that[2] + this[7] * that[5] + this[8] * that[8];
    return this;
  }
}




var MatA1 = new Mat3_Consts();
var MatA2 = new Mat3_Consts();

var MatB1 = new Mat3_ConstsArranged();
var MatB2 = new Mat3_ConstsArranged();

var MatC1 = new Mat3_Accesses();
var MatC2 = new Mat3_Accesses();

Tests:

Store values in consts first
MatA1.mul(MatA2);
Store values in consts first (arranged)
MatB1.mul(MatB2);
Access values directly
MatC1.mul(MatC2)

Run results for: Mat3 Multiplication

Store values in consts first

Store values in consts first (arranged)

Access values directly