-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
101 lines (88 loc) · 3.58 KB
/
index.html
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
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>GPU.js Raytracer</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<style type="text/css" media="all">
body {
font-family: 'Open Sans', sans-serif;
}
.flex-container {
display: -ms-flex;
display: -webkit-flex;
display: flex;
}
.flex-container div.left-col {
margin-left: 10px;
margin-right: 10px;
width: 40%;
}
.flex-container div.right-col {
width: 60%;
}
ul {
padding-left: 10px;
list-style: none;
}
span.canvas {
padding-left: 2px;
padding-right: 2px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="left-col">
<p>A parallel raytracer built with TypeScript and <a href="http://gpu.rocks">GPU.js</a> (WebGL/GLSL).</p>
<p>GitHub: <a href="http://github.com/jin/raytracer">http://github.com/jin/raytracer</a></p>
<p>Press W, A, S, D to move the camera around.</p>
<p>
<h3>Current mode</h3>
<span id="mode">GPU</span>
<input type="button" value="Switch mode" onclick="store.dispatch(toggleModeAction())" />
</p>
<p>
<h3>FPS</h3><span id="fps">Loading..</span>
<input type="button" value="Pause" onclick="togglePause(this)" />
</p>
<p>
<h3>Number of spheres</h3>
<span id="sphere-count">4</span> <input type="range" name="points" min="1" max="30" value="4" onchange="updateSphereSlider(this)">
</p>
<p>
<h3>Grid dimension</h3>
<span id="grid-dimension">2</span> <input type="range" name="points" min="1" max="4" value="2" id="dimension-slider" onchange="updateDimension(this)">
</p>
<p>
<!-- Capped at 4. -->
<!-- WARNING: Too many active WebGL contexts. Oldest context will be lost. -->
<p>
The canvas is 640px by 640px. Each canvas object is controlled by a single GPU.js kernel and a single thread is spawned for each pixel to compute the color of the pixel.
</p>
<p>
Increase the dimensions of the grid to break the canvas up into tiles, so that there are multiple kernels controlling multiple tiles. With this approach, the kernels will run sequentially, computing one canvas after another. <br />
</p>
</p>
<p>
<h3>Benchmark</h3>
<div>
<input type="button" value="Benchmark" onclick="benchmark(this)" />
</div>
Benchmark the performance of the parallelized GPU and sequential CPU kernels.
This will render 30 frames each and compute min, max, median frame rendering durations, and speedups. <br />
</p>
<div id="speedup"></div>
<div id="results"></div>
</div>
<div class="right-col" id="canvas-container"></div>
</div>
<!-- Generate the canvas elements based on the kernel dimensions -->
<script src="vendor/react-15.0.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="vendor/react-dom-15.0.2.min.js" type="text/javascript" charset="utf-8"></script>
<!-- <script src="vendor/redux.min.js" type="text/javascript" charset="utf-8"></script> -->
<script src="vendor/gpu.js" type="text/javascript" charset="utf-8"></script>
<script src="public/app.js?nocache" type="text/javascript" charset="utf-8" async></script>
</body>
</html>