Jan Forst darosh

Notes

inspired by pjanik’s blocks
animation frame and FPS calculation powered by d3.timer
3D based frameworks are producing a lot of DOM elements in SVG renderers thanks to shape triangulation
some test have limited number of objects because of high memory needs or incomplete/reference implementation (triangles)
click run link or run single test in the table
path is using d3-path
stackgl based on this block

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta charset="utf-8">
	<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
	<style>
	text {
	font-size: 14px;
	}

	<!DOCTYPE html>
	<meta charset="UTF-8">
	<body>
	<script src="matter.min.js"></script>
	<script>
	var cfg = {
	w: 960,
	h: 500,
	frameSize: 12,
	grid: 7

	function BenchTwoRectangles(container, width, height, data, params) {
	var self, renderer, objects;

	return self = {
	init: function () {
	renderer = Two.Instances.filter(function (d) {
	return {webgl: 'WebGLRenderer', canvas: 'CanvasRenderer'}[params.renderer] === d.type;
	})[0];

	renderer = renderer \|\| new Two({

	<!DOCTYPE html>
	<meta charset="UTF-8">
	<body style="font-family: sans-serif;">
	<div style="float: left;">
	<div style="width: 478px; height: 478px; position: relative; border: 1px solid #ccc; overflow: hidden;">
	<div style="background-color: rgba(255,0,0,0.5); width: 250px; height: 250px; position: absolute;"></div>
	<div style="background-color: rgba(0,0,255,0.25); width: 250px; height: 250px; position: absolute; left: 125px; top: 125px;"></div>
	<div style="background-color: rgba(0,0,0,0.12); width: 125px; height: 125px; position: absolute; left: 375px; top: 375px;"></div>
	<div style="background-color: rgba(255,255,0,0.5); width: 250px; height: 250px; position: absolute; left: 125px; top: 0; border-radius: 125px;"></div>
	<div style="position: absolute; left: 375px; bottom: 0; color: rgba(0, 0, 0, 0.25); font-size: 36px; line-height: 28px; font-family: Arial; height: 28px;">