Skip to content

Commit be45d77

Browse files
greggmanphemavax
greggman
authored and
phemavax
committed
update lots-o-images
1 parent 9e3c78f commit be45d77

File tree

6 files changed

+595
-681
lines changed

6 files changed

+595
-681
lines changed

‎lots-o-images/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
</head>
1515
<body>
1616
<h1>Lots-O-Images benchmarks</h1>
17-
<p>These samples attempt to draw as many 32x32 images as possible at 60 frames a second using various techniques.</p>
17+
<p>These samples attempt to draw as many 32x32 images as possible at ~60 frames a second using various techniques.</p>
1818
<p>Before running these tests you should turn off as many other programs as you can</p>
1919
<p>If you are comparing browsers</p>
2020
<ul>

‎lots-o-images/launcher.js

Lines changed: 173 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
'use strict';
2+
3+
/* global twgl, PerfHarness */
4+
5+
function createElem(tag, attrs = {}) {
6+
const elem = document.createElement(tag);
7+
for (const [key, value] of Object.entries(attrs)) {
8+
if (typeof value === 'object') {
9+
for (const [k, v] of Object.entries(value)) {
10+
try {
11+
elem[key][k] = v;
12+
} catch (e) {
13+
debugger; // eslint-disable-line no-debugger
14+
}
15+
}
16+
} else if (elem[key] === undefined) {
17+
elem.setAttribute(key, value);
18+
} else {
19+
elem[key] = value;
20+
}
21+
}
22+
return elem;
23+
}
24+
25+
function addElem(tag, parent, attrs = {}) {
26+
const elem = createElem(tag, attrs);
27+
parent.appendChild(elem);
28+
return elem;
29+
}
30+
31+
function noop() {
32+
}
33+
34+
function addBool(parent, object, propertyName, callback = noop) {
35+
const div = addElem('div', parent, {className:'fps'});
36+
const id = `input-${performance.now()}-${Math.random() * 100000 | 0}`;
37+
const input = addElem('input', div, {
38+
type: 'checkbox',
39+
id,
40+
checked: object[propertyName],
41+
});
42+
addElem('label', div, {
43+
for: id,
44+
textContent: propertyName,
45+
});
46+
input.addEventListener('input', (e) => {
47+
const v = input.checked;
48+
object[propertyName] = v;
49+
callback(v);
50+
});
51+
}
52+
53+
function initialize() {
54+
const canvas = document.querySelector("#canvas");
55+
const fpsElem = document.querySelector("#fps");
56+
const afpsElem = document.querySelector("#afps");
57+
const velElem = document.querySelector("#vel");
58+
const cntElem = document.querySelector("#cnt");
59+
const acntElem = document.querySelector("#acnt");
60+
const targetFPSElem = document.querySelector("#targetFPS");
61+
62+
const query = new URLSearchParams(window.location.search);
63+
function getQueryBool(id) {
64+
const value = (query.get(id) || '').toLowerCase();
65+
return value === 'true' || value === '1';
66+
}
67+
68+
const settings = {
69+
alpha: getQueryBool('alpha'),
70+
antialias: getQueryBool('antialias'),
71+
preserveDrawingBuffer: getQueryBool('preserveDrawingBuffer'),
72+
blend: getQueryBool('blend'),
73+
update: true,
74+
};
75+
76+
function reload() {
77+
const s = new URLSearchParams();
78+
s.set('alpha', settings.alpha);
79+
s.set('antialias', settings.antialias);
80+
s.set('preserveDrawingBuffer', settings.preserveDrawingBuffer);
81+
s.set('blend', settings.blend);
82+
window.location.search = s.toString();
83+
}
84+
85+
const fpsContainer = document.querySelector('#fpsContainer');
86+
addBool(fpsContainer, settings, 'alpha', reload);
87+
addBool(fpsContainer, settings, 'preserveDrawingBuffer', reload);
88+
addBool(fpsContainer, settings, 'antialias', reload);
89+
addBool(fpsContainer, settings, 'blend');
90+
addBool(fpsContainer, settings, 'update');
91+
92+
const targetFPS = 55;
93+
94+
const setTargetFPS = function(targetFPS) {
95+
PerfHarness.setTargetFPS(targetFPS);
96+
targetFPSElem.textContent = targetFPS;
97+
};
98+
99+
$("#targetFPSSlider").slider({
100+
max: 60,
101+
min: 1,
102+
value: targetFPS,
103+
slide: function(event, ui) {
104+
setTargetFPS(ui.value);
105+
},
106+
});
107+
setTargetFPS(targetFPS);
108+
109+
document.querySelector("#title").textContent = document.querySelector("title").textContent;
110+
111+
const ctxOptions = {
112+
alpha: settings.alpha,
113+
antialias: settings.antialias,
114+
preserveDrawingBuffer: settings.preserveDrawingBuffer,
115+
};
116+
const gl = canvas.getContext('webgl', ctxOptions);
117+
if (!gl) {
118+
return false;
119+
}
120+
121+
const app = createApp(gl, settings);
122+
123+
const elapsedTimeHistory = new Array(10).fill(0);
124+
let elapsedTimeTotal = 0;
125+
let elapsedTimeHistoryCursor = 0;
126+
let elapsedTimeAverage = 0;
127+
let direction = 1;
128+
129+
function updateElapsedTimeHistory(elapsedTime) {
130+
elapsedTimeTotal += elapsedTime - elapsedTimeHistory[elapsedTimeHistoryCursor];
131+
elapsedTimeHistory[elapsedTimeHistoryCursor++] = elapsedTime;
132+
elapsedTimeHistoryCursor %= elapsedTimeHistory.length;
133+
elapsedTimeAverage = elapsedTimeTotal / elapsedTimeHistory.length;
134+
}
135+
136+
const numFramesForStable = 1;
137+
let lastDirection = 1;
138+
let sameDirectionCount = 0;
139+
let lastCount = 0;
140+
let directionMark;
141+
function trackCount(count) {
142+
const direction = Math.sign(count - lastCount);
143+
if (direction !== lastDirection) {
144+
sameDirectionCount = 0;
145+
} else {
146+
++sameDirectionCount;
147+
}
148+
lastDirection = direction;
149+
if (sameDirectionCount < numFramesForStable) {
150+
directionMark = "-";
151+
} else {
152+
directionMark = direction > 0 ? '^' : 'v';
153+
}
154+
}
155+
156+
function render(count, averageCount, elapsedTime, velocity) {
157+
updateElapsedTimeHistory(elapsedTime);
158+
trackCount(count);
159+
160+
// Update the FPS timer.
161+
fpsElem.textContent = 1 / elapsedTime | 0;
162+
afpsElem.textContent = 1 / elapsedTimeAverage | 0;
163+
164+
cntElem.textContent = `${count}${directionMark}`;
165+
166+
app.update(elapsedTime, count);
167+
app.render();
168+
}
169+
PerfHarness.start(canvas, render, 60);
170+
return true;
171+
}
172+
173+
initialize();

0 commit comments

Comments
 (0)