digitarald/index.html

## index.html
<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<title>Famous test</title>
		<meta name="viewport" content="width=device-width, maximum-scale=1, user-scalable=no" />
		<style>
			html, body {
				margin: 0;
				padding: 0;
				overflow: hidden;
				width: 480px;
				height: 320px;
			}
			.surface {
				position: absolute;
				-webkit-transform-origin: center center;
				transform-origin: center center;
				-webkit-backface-visibility: hidden;
				backface-visibility: hidden;
				top: -2rem;
				left: -2rem;
				height: 4rem;
				width: 4rem;
				background-color: #000;
				opacity: 0.4;
			}
		</style>
	</head>
	<body>
		<script type="text/javascript" src="https://rawgithub.com/toji/gl-matrix/master/dist/gl-matrix.js"></script>
		<script type="text/javascript" src="index.js"></script>
	</body>
</html>

## index.js
(function() {
	'use strict';

	var body = document.body;
	var maxWidth = body.offsetWidth;
	var maxHeight = body.offsetHeight;

	var benchMax = location.hash.substr(1);
	if (benchMax) {
		benchMax = Number(benchMax);
	} else {
		benchMax = 200;
	}

	/**
	 * Create surfaces
	 */
	var surfaces = [];
	for (var i = 0; i < benchMax; i++) {
		var matrix = mat4.create();
		mat4.translate(matrix, matrix, [Math.random() * maxWidth, Math.random() * maxHeight, 0]);
		mat4.rotateX(matrix, matrix, Math.random() * Math.PI / 2);
		mat4.rotateY(matrix, matrix, Math.random() * Math.PI / 2);

		var element = document.createElement('div');
		element.classList.add('surface');
		apply3DMatrix(element, matrix);
		body.appendChild(element);

		surfaces.push({
			matrix: matrix,
			element: element
		});
	}

	/**
	 * Animate surfaces
	 */
	function tick(now) {
		var dt = (now - past) / 1000;
		past = now;
		for (var i = 0, l = surfaces.length; i < l; i++) {
			var matrix = surfaces[i].matrix;
			var element = surfaces[i].element;
			update3DMatrix(matrix, dt);
			apply3DMatrixFor(element, matrix);
		}

		requestAnimationFrame(tick);
	}

	var speed = Math.PI / 4;
	function update3DMatrix(matrix, dt) {
		mat4.rotateZ(matrix, matrix, speed * dt);
	}

	// Slow for loop, will not JIT
	function apply3DMatrixFor(element, matrix) {
		element.style.transform = stringify3DMatrix(matrix);
	}

	function stringify3DMatrix(m) {
		var result = 'matrix3d(';
		for (var i = 0; i < 15; i++) {
			result += (m[i] < 0.000001 && m[i] > -0.000001) ? '0,' : m[i] + ',';
		}
		result += m[15] + ')';
		return result;
	}

	function apply3DMatrix(element, m) {
		element.style.transform = 'matrix3d(' + m[0] + ',' + m[1] + ',' +
			m[2] + ',' + m[3] + ',' + m[4] + ',' + m[5] + ',' + m[6] + ',' +
			m[7] + ',' + m[8] + ',' + m[9] + ',' + m[10] + ',' + m[11] + ',' +
			m[12] + ',' + [13] + ',' + m[14] + ',' + m[15] + ')';
		debugger;
	}

	var past = performance.now();
	requestAnimationFrame(tick);
})();
	<!DOCTYPE HTML>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Famous test</title>
	<meta name="viewport" content="width=device-width, maximum-scale=1, user-scalable=no" />
	<style>
	html, body {
	margin: 0;
	padding: 0;
	overflow: hidden;
	width: 480px;
	height: 320px;
	}
	.surface {
	position: absolute;
	-webkit-transform-origin: center center;
	transform-origin: center center;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	top: -2rem;
	left: -2rem;
	height: 4rem;
	width: 4rem;
	background-color: #000;
	opacity: 0.4;
	}
	</style>
	</head>
	<body>
	<script type="text/javascript" src="https://rawgithub.com/toji/gl-matrix/master/dist/gl-matrix.js"></script>
	<script type="text/javascript" src="index.js"></script>
	</body>
	</html>
	(function() {
	'use strict';

	var body = document.body;
	var maxWidth = body.offsetWidth;
	var maxHeight = body.offsetHeight;

	var benchMax = location.hash.substr(1);
	if (benchMax) {
	benchMax = Number(benchMax);
	} else {
	benchMax = 200;
	}

	/**
	* Create surfaces
	*/
	var surfaces = [];
	for (var i = 0; i < benchMax; i++) {
	var matrix = mat4.create();
	mat4.translate(matrix, matrix, [Math.random() * maxWidth, Math.random() * maxHeight, 0]);
	mat4.rotateX(matrix, matrix, Math.random() * Math.PI / 2);
	mat4.rotateY(matrix, matrix, Math.random() * Math.PI / 2);

	var element = document.createElement('div');
	element.classList.add('surface');
	apply3DMatrix(element, matrix);
	body.appendChild(element);

	surfaces.push({
	matrix: matrix,
	element: element
	});
	}

	/**
	* Animate surfaces
	*/
	function tick(now) {
	var dt = (now - past) / 1000;
	past = now;
	for (var i = 0, l = surfaces.length; i < l; i++) {
	var matrix = surfaces[i].matrix;
	var element = surfaces[i].element;
	update3DMatrix(matrix, dt);
	apply3DMatrixFor(element, matrix);
	}

	requestAnimationFrame(tick);
	}

	var speed = Math.PI / 4;
	function update3DMatrix(matrix, dt) {
	mat4.rotateZ(matrix, matrix, speed * dt);
	}

	// Slow for loop, will not JIT
	function apply3DMatrixFor(element, matrix) {
	element.style.transform = stringify3DMatrix(matrix);
	}

	function stringify3DMatrix(m) {
	var result = 'matrix3d(';
	for (var i = 0; i < 15; i++) {
	result += (m[i] < 0.000001 && m[i] > -0.000001) ? '0,' : m[i] + ',';
	}
	result += m[15] + ')';
	return result;
	}

	function apply3DMatrix(element, m) {
	element.style.transform = 'matrix3d(' + m[0] + ',' + m[1] + ',' +
	m[2] + ',' + m[3] + ',' + m[4] + ',' + m[5] + ',' + m[6] + ',' +
	m[7] + ',' + m[8] + ',' + m[9] + ',' + m[10] + ',' + m[11] + ',' +
	m[12] + ',' + [13] + ',' + m[14] + ',' + m[15] + ')';
	debugger;
	}

	var past = performance.now();
	requestAnimationFrame(tick);
	})();