Run results for: Multiplying lists of vectors - SoA vs AoS vs interlaced array - local

What's the fastest way to process a list of vectors? Do you go the OO route, with an array of Vector() objects? Do you create a new data structure, using Float32Arrays for x, y, and z? Do you create a single Float32Array and interlace values for x, y, and z within it? Let's find out!

Run details:

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Mobile Safari/537.36

Browser: Chrome Mobile 117

Operating system: Android

Device Platform: Mobile

Date tested: 2 years ago

Benchmark engine: Benchmark.js

SoA

96/s

Interlaced Array - with loop unrolling

84/s

Interlaced Array - no loop unrolling

69/s

SoA - one component per loop

68/s

AoS

4/s

View exact numbers

Test name	Executions per second
✓ SoA	96 Ops/sec
Interlaced Array - with loop unrolling	84 Ops/sec
Interlaced Array - no loop unrolling	69 Ops/sec
SoA - one component per loop	68 Ops/sec
AoS	4 Ops/sec

Script Preparation code:

var N = 1000000

var x = new Float32Array(N);
var y = new Float32Array(N);
var z = new Float32Array(N);

var interlaced = new Float32Array(3*N);

var vectors = [];

for (var i = 0, li=x.length; i < li; ++i) {
	x[i] = Math.random();
	y[i] = Math.random();
	z[i] = Math.random();
	vectors.push( {x:Math.random(), y:Math.random(), z:Math.random()} );
}

for (var i = 0, li=interlaced.length; i < li; ++i) {
	interlaced[i] = Math.random();
}

Tests:

AoS
var vector; for (var i = 0, li=vectors.length; i < li; ++i) { vector = vectors[i]; vector.x = 2 * vector.x; vector.y = 2 * vector.y; vector.z = 2 * vector.z; }
SoA
let x1 = x; let y1 = y; let z1 = z; for (var i = 0, li=x1.length; i < li; ++i) { x1[i] = 2 * x1[i]; y1[i] = 2 * y1[i]; z1[i] = 2 * z1[i]; }
SoA - one component per loop
let x2 = x; let y2 = y; let z2 = z; for (var i = 0, li=x2.length; i < li; ++i) { x2[i] = 2 * x2[i]; } for (var i = 0, li=y2.length; i < li; ++i) { y2[i] = 2 * y2[i]; } for (var i = 0, li=z2.length; i < li; ++i) { z2[i] = 2 * z2[i]; }
Interlaced Array - no loop unrolling
let interlaced2 = interlaced; for (var i = 0, li=interlaced2.length; i < li; ++i) { interlaced2[i] = 2*interlaced2[i]; }
Interlaced Array - with loop unrolling
let interlaced3 = interlaced; for (var i = 0, li=interlaced3.length; i < li; i+=3) { interlaced3[i] = 2*interlaced3[i]; interlaced3[i+1] = 2*interlaced3[i+1]; interlaced3[i+2] = 2*interlaced3[i+2]; }