-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
83 lines (67 loc) · 2.39 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
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Fable RayTracer</title>
</head>
<body>
<canvas id="scene" width="512" height="512"></canvas>
<canvas id="animated" width="128" height="128"></canvas>
<pre id="results"></pre>
<script type="module">
import init from "./pkg/fable_raytracer.js";
const wasm = await init();
function measureTime(f) {
const t0 = performance.now();
let res = f();
const t1 = performance.now();
return [res, t1 - t0];
}
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
const [x, y, w, h] = [0, 0, 1024, 1024];
const [xa, ya, wa, ha] = [0, 0, 128, 128];
const len = w * h * 4;
const lenAni = wa * ha * 4;
const scene = document.getElementById("scene");
const animated = document.getElementById("animated");
const results = document.getElementById("results");
const offscreen = document.createElement("canvas");
offscreen.width = w;
offscreen.height = h;
const ctx = scene.getContext("2d");
const ctxAni = animated.getContext("2d");
const ctxOff = offscreen.getContext("2d");
const offset = wasm.get_buffer_offset();
const maxLen = wasm.get_buffer_length();
const data = new Uint8ClampedArray(wasm.memory.buffer, offset, len);
const imageData = new ImageData(data, w, h);
const dataAni = new Uint8ClampedArray(wasm.memory.buffer, offset, lenAni);
const imageDataAni = new ImageData(dataAni, wa, ha);
async function bench() {
results.innerText = "Raytracer running...";
await sleep(10);
const [_, elapsed] = measureTime(() => wasm.render_scene(x, y, w, h, 0.0));
results.innerText = "Ray tracing done:\n" +
` - image rendered at 2x for super-sampled anti-aliasing\n` +
` - rendered image size: (${w}x${h})\n - elapsed: ${elapsed} ms`;
ctxOff.putImageData(imageData, 0, 0);
ctx.drawImage(offscreen, 0, 0, 512, 512);
}
let degrees = 720;
function render() {
let angle = degrees * Math.PI / 180;
wasm.render_scene(xa, ya, wa, ha, angle);
ctxAni.putImageData(imageDataAni, 0, 0);
if (degrees > 0) {
degrees = degrees - 1;
requestAnimationFrame(render);
}
}
await bench();
requestAnimationFrame(render);
</script>
</body>
</html>