-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
84 lines (71 loc) · 2.8 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
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>Fluid Simulation</title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body id="fluidsim" class="w-screen h-screen flex items-center justify-center flex-col m-0">
<style>
body {
background-color: #1a1a1a;
}
a {
text-decoration: underline;
}
</style>
<script type="module">
import init from "./pkg/fluidsim.js";
init()
.then(() => {
console.log("loaded!");
})
.catch(() => {
console.log("failure?");
setTimeout(() => {
if (document.querySelectorAll("canvas").length == 0) {
document.getElementById("help").style.display = "block";
document.getElementById("onboard-help").style.display = "none";
}
}, 500)
});
</script>
<script>
window.addEventListener("load", () => {
const ua = navigator.userAgent;
if (ua.includes("Mobile")) {
document.getElementById("help").innerHTML = "This demo does not support mobile devices.";
} else if (ua.includes("Firefox")) {
document.getElementById("help").innerHTML = "Firefox has not yet added WebGPU Buffer support.<br><br>For this reason, only supports Chrome and<br>Chrome-based browsers (Edge, Opera, etc.) are supported.";
} else if (ua.includes("Edg")) {
const repl = document.getElementById("help").innerHTML.replaceAll("chrome", "edge");
document.getElementById("help").innerHTML = repl;
} else if (ua.includes("Linux") && ua.includes("Chrome")) {
const ihtml = document.getElementById("help").innerHTML;
document.getElementById("help").innerHTML = ihtml + "<br><br>Linux requires <a href='https://github.com/gpuweb/gpuweb/wiki/Implementation-Status#chromium-chrome-edge-etc'>extra steps</a>.";
} else if (ua.includes("CrOS")) {
const ihtml = document.getElementById("help").innerHTML;
document.getElementById("help").innerHTML = ihtml.replaceAll("browser", "device");
} else if (!ua.includes("Chrome")) {
const ihtml = document.getElementById("help").innerHTML;
document.getElementById("help").innerHTML = "Your browser has not implemented WebGPU or is out of date.";
}
});
</script>
<p id="help" class="mb-4 text-white text-2xl text-center" style="display: none;">
<b class="font-extrabold">Update your browser</b>, then go to
<span style="background-color: #101010;" class="py-1 pl-2 pr-1 rounded-sm text-xl">
chrome://flags
</span>,<br>
<b class="font-extrabold">search for</b> and enable
<span style="background-color: #101010;" class="py-1 pl-2 pr-1 rounded-sm text-xl">
Unsafe WebGPU Support
</span>,<br>
then restart your browser.
</p>
<p id="onboard-help" class="mb-4 text-white text-2xl text-center" style="display: none;">
Click on the window, then click space to start.
You can interact with the mouse.
</p>
</body>
</html>