1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<style>
.slidecontainer {
width: 800px;
}
.slider {
width: 800px;
}
div.options {
width: 250px;
margin: 50px;
display: inline;
}
</style>
<!-- Based on: https://github.com/timhutton/sdl-canvas-wasm -->
<body>
<!-- Create the canvas that the C++ code will draw into -->
<canvas id="canvas" oncontextmenu="event.preventDefault()"></canvas>
<p>
<div class="options" id="link_simd_threads"><a href="index.html?simd&threads">multi-threaded SIMD</a></div>
<div class="options" id="link_simd"><a href="index.html?simd">single-threaded SIMD</a></div>
<div class="options" id="link_threads"><a href="index.html?threads">multi-threaded scalar</a></div>
<div class="options" id="link"><a href="index.html">single-threaded scalar</a></div>
</p>
<p>Note that for any mode other than single-threaded scalar to work, you may need to turn on experimental web assembly features in your browser. In chrome this can be done in chrome://flags</p>
<p id="runtime">Runtime: </p>
<div class="slidecontainer" id="threads_div">
Threads: <output id="show_threads" name="show_threads" for="threads">8</output>
<input type="range" min="1" max="32" value="8" class="slider" id="threads"
oninput="show_threads.value=threads.value">
</div>
<!-- Workaround for cross-origin isolation, see
https://developer.chrome.com/blog/enabling-shared-array-buffer/
https://dev.to/stefnotch/enabling-coop-coep-without-touching-the-server-2d3n
-->
<script type='module' src="./main.js">
</script>
<!-- Allow the C++ to access the canvas element -->
<script type='text/javascript'>
var Module = {
canvas: (function() { return document.getElementById('canvas'); })(),
};
</script>
<!-- Add the appropriate javascript glue code as generated by Emscripten -->
<script type='text/javascript'>
var s = document.createElement('script');
const urlParams = new URLSearchParams(window.location.search);
if (urlParams.has('simd')) {
if (urlParams.has('threads')) {
document.getElementById('link_simd_threads').style.backgroundColor='lightgray';
s.setAttribute('src', 'js/index_simd_threads.js');
} else {
document.getElementById('link_simd').style.backgroundColor='lightgray';
s.setAttribute('src', 'js/index_simd.js');
}
} else {
if (urlParams.has('threads')) {
document.getElementById('link_threads').style.backgroundColor='lightgray';
s.setAttribute('src', 'js/index_threads.js');
} else {
document.getElementById('link').style.backgroundColor='lightgray';
s.setAttribute('src', 'js/index.js');
}
}
document.body.appendChild(s);
if (!urlParams.has('threads')) {
document.getElementById('threads_div').style.display = 'none';
document.getElementById('threads').value = '1';
}
</script>
</body>
</html>
|
