-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
117 lines (97 loc) · 4.84 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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="description" content="The WebGPU Samples are a set of WGSL and SPIR-V compatible samples demonstrating the use of the WebGPU API"><meta name="author" content="Austin Eng"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><title>WebGPU Material Point Method</title><link href="https://fonts.googleapis.com/css?family=Inconsolata&display=swap" rel="stylesheet"><link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.css" rel="stylesheet"><link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/theme/monokai.min.css" rel="stylesheet"><style>* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
body {
display: flex;
font-family: 'Inconsolata', monospace;
}
.container {
padding-left: 15px;
padding-right: 15px;
}
a {
text-decoration: none;
}
a:link,
a:visited {
color: #045b88;
}
a:hover {
text-decoration: underline;
}
#panel {
position: relative;
left: 0px;
flex: 1;
max-width: 300px;
height: 100vh;
overflow: auto;
background: slategray;
}
.example-link {
display: block;
padding: 0.3em 0;
}
@media only screen and (max-width: 768px) {
/* More padding on mobile for easier touch screen use */
.example-link {
padding: 0.5em 0;
}
}
.example-link.selected {
color: #ff0000;
}
main {
position: relative;
flex: 1;
height: 100vh;
overflow: auto;
background: black;
color: #ddd;
}
main.no-demo {
background: gray;
}
#intro-text {
display: none;
}
main.no-demo #intro-text {
display: block;
color: #222;
}
#canvas-container {
text-align: center;
position: relative;
margin-top: 10px;
margin-bottom: 30px;
}
.CodeMirror {
height: auto !important;
margin: 1em 0;
}
.CodeMirror-scroll {
height: auto !important;
overflow: visible !important;
}
.shaderEditor::before {
content: "Edit me! (Save to update)";
position: relative;
display: block;
font-weight: bold;
text-align: right;
margin-bottom: -0.5em;
margin-right: 5px;
}
.updateShaderBtn {
position: relative;
left: 100%;
transform: translateX(-108%);
margin-right: 10px;
margin-top: 5px;
cursor: pointer;
}</style></head><body><div id="panel"><div class="container"><h1 id="title"><a href="./#" class="nav-link">WebGPU Material Point Method</a></h1><a href="https://github.com/chetan-parthiban/WebGPUMPM">Github</a><hr/><a class="example-link nav-link" href="?wgsl=0#helloTriangle">helloTriangle</a> <a class="example-link nav-link" href="?wgsl=0#simulation">simulation</a> <a class="example-link nav-link" href="?wgsl=0#amongUs">amongUs</a> <a class="example-link nav-link" href="?wgsl=0#pikachu">pikachu</a> <a class="example-link nav-link" href="?wgsl=0#turkey">turkey</a> <a class="example-link nav-link" href="?wgsl=0#twoHearts">twoHearts</a> <a class="example-link nav-link" href="?wgsl=0#dogTurkeyHeart">dogTurkeyHeart</a> <a class="example-link nav-link" href="?wgsl=0#twoFluids">twoFluids</a></div></div><main class="container"><div id="intro-text"><h1></h1><p>This is an example implementation of the Material Point Method demonstrating the use of the <a href="//webgpu.dev">WebGPU API</a>. Please see the current implementation status of WebGPU <a href="//webgpu.io">webgpu.io</a>. You can click the helloTriangle tab to confirm that WebGPU is working appropriately on your device. The other tabs will let you try out the simulator in a variety of scenes. This code is based on the webgpu-samples repo, which can be found <a href="https://github.com/austinEng/webgpu-samples">here</a>. Thanks to Austin, Kai, and everyone else who provided us with help getting started with WebGPU!</p><p>These samples run in Chrome Canary behind the flag "--enable-unsafe-webgpu". If something isn't working, please file an issue <a href="https://github.com/austinEng/webgpu-samples/issues">here</a>.</p><p id="not-supported" style="display: none">WebGPU is not supported on this platform yet!</p></div><div id="description-container"></div><div id="canvas-container"></div><div id="source-container"><div id="shader-editor"></div><div id="full-source"></div></div></main><script src="dist/main-35a247.js"></script></body></html>