Skip to content

Commit deb0be7

Browse files
recprecp
committed
update webgpu gallery
1 parent b796364 commit deb0be7

21 files changed

Lines changed: 343 additions & 17 deletions

‎gallery.css‎

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,28 @@ a:focus-visible, button:focus-visible { outline: 2px solid var(--copper-bright);
106106
.runtime-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
107107

108108
.sample-workbench { width: min(1440px, calc(100% - 72px)); margin-inline: auto; padding: 72px 0 150px; }
109+
.stage { position: relative; }
109110
.stage canvas { display: block; width: 100%; height: min(68vh, 720px); min-height: 480px; border: 1px solid var(--line); border-radius: 10px; }
111+
.debug-overlay {
112+
position: absolute;
113+
top: 16px;
114+
right: 16px;
115+
min-width: 154px;
116+
padding: 13px 14px;
117+
display: grid;
118+
gap: 5px;
119+
color: var(--stone);
120+
background: rgba(11, 11, 10, .86);
121+
border: 1px solid rgba(255, 255, 255, .12);
122+
border-radius: 9px;
123+
box-shadow: 0 12px 36px rgba(0, 0, 0, .28);
124+
backdrop-filter: blur(12px);
125+
font: 10px/1.3 var(--mono);
126+
pointer-events: none;
127+
}
128+
.debug-overlay[hidden] { display: none; }
129+
.debug-overlay b { color: var(--paper); font-size: 13px; font-weight: 600; }
130+
.debug-overlay small { margin-top: 3px; color: var(--stone-dark); }
110131
.stage-meta { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 10px 0; }
111132
.stage-meta p { max-width: 760px; margin: 0; color: var(--stone); font-size: 13px; line-height: 1.5; }
112133
.stage-meta p .project-link { color: var(--link-blue); }
@@ -122,7 +143,9 @@ a:focus-visible, button:focus-visible { outline: 2px solid var(--copper-bright);
122143
.source-tabs { display: flex; padding: 0 22px; border-bottom: 1px solid var(--line); }
123144
.source-tabs button { padding: 16px 14px 14px; color: var(--stone-dark); background: none; border: 0; border-bottom: 2px solid transparent; font: 10px/1 var(--mono); cursor: pointer; }
124145
.source-tabs button[aria-selected="true"] { color: var(--copper-bright); border-bottom-color: var(--copper); }
125-
#source-code { max-height: 760px; overflow: auto; margin: 0; padding: 34px 24px 48px; color: #d8d1c6; background: #0e0e0c; font: 12px/1.75 var(--mono); tab-size: 2; }
146+
#source-code { max-height: 760px; overflow: auto; display: grid; grid-template-columns: max-content minmax(0, 1fr); margin: 0; padding: 0; color: #d8d1c6; background: #0e0e0c; font: 12px/1.75 var(--mono); tab-size: 2; }
147+
#source-code code { min-width: max-content; padding: 34px 24px 48px; white-space: pre; }
148+
.line-numbers { position: sticky; left: 0; z-index: 1; padding: 34px 14px 48px 18px; color: #4c4b46; background: #0b0b09; border-right: 1px solid #20201c; text-align: right; user-select: none; }
126149
.syntax-comment { color: #686860; font-style: italic; }
127150
.syntax-keyword { color: #ef7c32; }
128151
.syntax-type { color: #e9b979; }

‎gpu-compute-webgpu-usl-shell.html‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width,initial-scale=1">
6+
<link rel="icon" href="data:,">
7+
<link rel="stylesheet" href="gallery.css?v=4">
8+
<title>Compute handoff · GPU + USL</title>
9+
</head>
10+
<body class="sample-page"
11+
data-c-source="sources/compute.c"
12+
data-usl-source="sources/compute.usl"
13+
data-wgsl-source="sources/compute.wgsl">
14+
<header class="sample-head">
15+
<a class="back-link" href="index.html"><span>←</span> Sample index</a>
16+
<div class="sample-heading">
17+
<p>Compute / storage buffer</p>
18+
<h1>Compute handoff</h1>
19+
</div>
20+
<div class="runtime-badge"><i></i> WebGPU live</div>
21+
</header>
22+
23+
<main class="sample-workbench">
24+
<section class="stage" aria-label="Live WebGPU output">
25+
<canvas id="canvas" oncontextmenu="event.preventDefault()"></canvas>
26+
<aside class="debug-overlay" hidden aria-live="off"></aside>
27+
<div class="stage-meta">
28+
<p>Compute writes the vertex stream; render consumes it in the same command buffer without readback.</p>
29+
<div id="status">GPU: loading sample</div>
30+
</div>
31+
</section>
32+
33+
<section class="source-panel" aria-labelledby="source-title">
34+
<header class="source-head">
35+
<div>
36+
<p class="eyebrow">Artifact inspection</p>
37+
<h2 id="source-title">Source path</h2>
38+
</div>
39+
<button class="copy-button" type="button">Copy</button>
40+
</header>
41+
<div class="source-tabs" role="tablist" aria-label="Source language">
42+
<button id="tab-c" role="tab" aria-selected="true"
43+
aria-controls="source-code" data-source="c">GPU C</button>
44+
<button id="tab-usl" role="tab" aria-selected="false"
45+
aria-controls="source-code" data-source="usl">USL</button>
46+
<button id="tab-wgsl" role="tab" aria-selected="false"
47+
aria-controls="source-code" data-source="wgsl">Generated WGSL</button>
48+
</div>
49+
<pre id="source-code" role="tabpanel" aria-labelledby="tab-c"
50+
tabindex="0"><span class="line-numbers" aria-hidden="true"></span><code>Loading source…</code></pre>
51+
</section>
52+
</main>
53+
54+
<script src="sample.js?v=3" defer></script>
55+
{{{ SCRIPT }}}
56+
</body>
57+
</html>

‎gpu-compute-webgpu-usl.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!doctypehtml><html lang=en><head><meta charset=utf-8><meta content="width=device-width,initial-scale=1"name=viewport><link href=data:, rel=icon><link href="gallery.css?v=3"rel=stylesheet><title>Compute handoff · GPU + USL</title></head><body class=sample-page data-c-source=sources/compute.c data-usl-source=sources/compute.usl data-wgsl-source=sources/compute.wgsl><header class=sample-head><a class=back-link href=index.html><span>←</span> Sample index</a><div class=sample-heading><p>Compute / storage buffer</p><h1>Compute handoff</h1></div><div class=runtime-badge><i></i> WebGPU live</div></header><main class=sample-workbench><section class=stage aria-label="Live WebGPU output"><canvas id=canvas oncontextmenu=event.preventDefault()></canvas><div class=stage-meta><p>Compute writes the vertex stream; render consumes it in the same command buffer without readback.</p><div id=status>GPU: loading sample</div></div></section><section class=source-panel aria-labelledby=source-title><header class=source-head><div><p class=eyebrow>Artifact inspection</p><h2 id=source-title>Source path</h2></div><button class=copy-button type=button>Copy</button></header><div class=source-tabs aria-label="Source language"role=tablist><button aria-controls=source-code aria-selected=true data-source=c id=tab-c role=tab>GPU C</button> <button aria-controls=source-code aria-selected=false data-source=usl id=tab-usl role=tab>USL</button> <button aria-controls=source-code aria-selected=false data-source=wgsl id=tab-wgsl role=tab>Generated WGSL</button></div><pre aria-labelledby=tab-c id=source-code role=tabpanel tabindex=0><code>Loading source…</code></pre></section></main><script src="sample.js?v=2"defer></script><script src=gpu-compute-webgpu-usl.js async></script></body></html>
1+
<!doctypehtml><html lang=en><head><meta charset=utf-8><meta content="width=device-width,initial-scale=1"name=viewport><link href=data:, rel=icon><link href="gallery.css?v=4"rel=stylesheet><title>Compute handoff · GPU + USL</title></head><body class=sample-page data-c-source=sources/compute.c data-usl-source=sources/compute.usl data-wgsl-source=sources/compute.wgsl><header class=sample-head><a class=back-link href=index.html><span>←</span> Sample index</a><div class=sample-heading><p>Compute / storage buffer</p><h1>Compute handoff</h1></div><div class=runtime-badge><i></i> WebGPU live</div></header><main class=sample-workbench><section class=stage aria-label="Live WebGPU output"><canvas id=canvas oncontextmenu=event.preventDefault()></canvas><aside aria-live=off class=debug-overlay hidden></aside><div class=stage-meta><p>Compute writes the vertex stream; render consumes it in the same command buffer without readback.</p><div id=status>GPU: loading sample</div></div></section><section class=source-panel aria-labelledby=source-title><header class=source-head><div><p class=eyebrow>Artifact inspection</p><h2 id=source-title>Source path</h2></div><button class=copy-button type=button>Copy</button></header><div class=source-tabs aria-label="Source language"role=tablist><button aria-controls=source-code aria-selected=true data-source=c id=tab-c role=tab>GPU C</button> <button aria-controls=source-code aria-selected=false data-source=usl id=tab-usl role=tab>USL</button> <button aria-controls=source-code aria-selected=false data-source=wgsl id=tab-wgsl role=tab>Generated WGSL</button></div><pre aria-labelledby=tab-c id=source-code role=tabpanel tabindex=0><span aria-hidden=true class=line-numbers></span><code>Loading source…</code></pre></section></main><script src="sample.js?v=3"defer></script><script src=gpu-compute-webgpu-usl.js async></script></body></html>

‎gpu-compute-webgpu-usl.wasm‎

1.21 KB
Binary file not shown.

‎gpu-indexed-depth-webgpu-usl-shell.html‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width,initial-scale=1">
6+
<link rel="icon" href="data:,">
7+
<link rel="stylesheet" href="gallery.css?v=4">
8+
<title>Indexed depth · GPU + USL</title>
9+
</head>
10+
<body class="sample-page"
11+
data-c-source="sources/indexed-depth.c"
12+
data-usl-source="sources/indexed-depth.usl"
13+
data-wgsl-source="sources/indexed-depth.wgsl">
14+
<header class="sample-head">
15+
<a class="back-link" href="index.html"><span>←</span> Sample index</a>
16+
<div class="sample-heading">
17+
<p>Render / index + depth</p>
18+
<h1>Indexed depth</h1>
19+
</div>
20+
<div class="runtime-badge"><i></i> WebGPU live</div>
21+
</header>
22+
23+
<main class="sample-workbench">
24+
<section class="stage" aria-label="Live WebGPU output">
25+
<canvas id="canvas" oncontextmenu="event.preventDefault()"></canvas>
26+
<aside class="debug-overlay" hidden aria-live="off"></aside>
27+
<div class="stage-meta">
28+
<p>One indexed draw validates the depth texture, pipeline, attachment, and occlusion path.</p>
29+
<div id="status">GPU: loading sample</div>
30+
</div>
31+
</section>
32+
33+
<section class="source-panel" aria-labelledby="source-title">
34+
<header class="source-head">
35+
<div>
36+
<p class="eyebrow">Artifact inspection</p>
37+
<h2 id="source-title">Source path</h2>
38+
</div>
39+
<button class="copy-button" type="button">Copy</button>
40+
</header>
41+
<div class="source-tabs" role="tablist" aria-label="Source language">
42+
<button id="tab-c" role="tab" aria-selected="true"
43+
aria-controls="source-code" data-source="c">GPU C</button>
44+
<button id="tab-usl" role="tab" aria-selected="false"
45+
aria-controls="source-code" data-source="usl">USL</button>
46+
<button id="tab-wgsl" role="tab" aria-selected="false"
47+
aria-controls="source-code" data-source="wgsl">Generated WGSL</button>
48+
</div>
49+
<pre id="source-code" role="tabpanel" aria-labelledby="tab-c"
50+
tabindex="0"><span class="line-numbers" aria-hidden="true"></span><code>Loading source…</code></pre>
51+
</section>
52+
</main>
53+
54+
<script src="sample.js?v=3" defer></script>
55+
{{{ SCRIPT }}}
56+
</body>
57+
</html>

‎gpu-indexed-depth-webgpu-usl.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!doctypehtml><html lang=en><head><meta charset=utf-8><meta content="width=device-width,initial-scale=1"name=viewport><link href=data:, rel=icon><link href="gallery.css?v=3"rel=stylesheet><title>Indexed depth · GPU + USL</title></head><body class=sample-page data-c-source=sources/indexed-depth.c data-usl-source=sources/indexed-depth.usl data-wgsl-source=sources/indexed-depth.wgsl><header class=sample-head><a class=back-link href=index.html><span>←</span> Sample index</a><div class=sample-heading><p>Render / index + depth</p><h1>Indexed depth</h1></div><div class=runtime-badge><i></i> WebGPU live</div></header><main class=sample-workbench><section class=stage aria-label="Live WebGPU output"><canvas id=canvas oncontextmenu=event.preventDefault()></canvas><div class=stage-meta><p>One indexed draw validates the depth texture, pipeline, attachment, and occlusion path.</p><div id=status>GPU: loading sample</div></div></section><section class=source-panel aria-labelledby=source-title><header class=source-head><div><p class=eyebrow>Artifact inspection</p><h2 id=source-title>Source path</h2></div><button class=copy-button type=button>Copy</button></header><div class=source-tabs aria-label="Source language"role=tablist><button aria-controls=source-code aria-selected=true data-source=c id=tab-c role=tab>GPU C</button> <button aria-controls=source-code aria-selected=false data-source=usl id=tab-usl role=tab>USL</button> <button aria-controls=source-code aria-selected=false data-source=wgsl id=tab-wgsl role=tab>Generated WGSL</button></div><pre aria-labelledby=tab-c id=source-code role=tabpanel tabindex=0><code>Loading source…</code></pre></section></main><script src="sample.js?v=2"defer></script><script src=gpu-indexed-depth-webgpu-usl.js async></script></body></html>
1+
<!doctypehtml><html lang=en><head><meta charset=utf-8><meta content="width=device-width,initial-scale=1"name=viewport><link href=data:, rel=icon><link href="gallery.css?v=4"rel=stylesheet><title>Indexed depth · GPU + USL</title></head><body class=sample-page data-c-source=sources/indexed-depth.c data-usl-source=sources/indexed-depth.usl data-wgsl-source=sources/indexed-depth.wgsl><header class=sample-head><a class=back-link href=index.html><span>←</span> Sample index</a><div class=sample-heading><p>Render / index + depth</p><h1>Indexed depth</h1></div><div class=runtime-badge><i></i> WebGPU live</div></header><main class=sample-workbench><section class=stage aria-label="Live WebGPU output"><canvas id=canvas oncontextmenu=event.preventDefault()></canvas><aside aria-live=off class=debug-overlay hidden></aside><div class=stage-meta><p>One indexed draw validates the depth texture, pipeline, attachment, and occlusion path.</p><div id=status>GPU: loading sample</div></div></section><section class=source-panel aria-labelledby=source-title><header class=source-head><div><p class=eyebrow>Artifact inspection</p><h2 id=source-title>Source path</h2></div><button class=copy-button type=button>Copy</button></header><div class=source-tabs aria-label="Source language"role=tablist><button aria-controls=source-code aria-selected=true data-source=c id=tab-c role=tab>GPU C</button> <button aria-controls=source-code aria-selected=false data-source=usl id=tab-usl role=tab>USL</button> <button aria-controls=source-code aria-selected=false data-source=wgsl id=tab-wgsl role=tab>Generated WGSL</button></div><pre aria-labelledby=tab-c id=source-code role=tabpanel tabindex=0><span aria-hidden=true class=line-numbers></span><code>Loading source…</code></pre></section></main><script src="sample.js?v=3"defer></script><script src=gpu-indexed-depth-webgpu-usl.js async></script></body></html>

‎gpu-indexed-depth-webgpu-usl.wasm‎

1.19 KB
Binary file not shown.

‎gpu-instancing-webgpu-usl-shell.html‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width,initial-scale=1">
66
<link rel="icon" href="data:,">
7-
<link rel="stylesheet" href="gallery.css?v=3">
7+
<link rel="stylesheet" href="gallery.css?v=4">
88
<title>Instancing · GPU + USL</title>
99
</head>
1010
<body class="sample-page"
@@ -23,6 +23,7 @@ <h1>Instancing</h1>
2323
<main class="sample-workbench">
2424
<section class="stage" aria-label="Live WebGPU output">
2525
<canvas id="canvas" oncontextmenu="event.preventDefault()"></canvas>
26+
<aside class="debug-overlay" hidden aria-live="off"></aside>
2627
<div class="stage-meta">
2728
<p>Two dynamic uniform slices drive eight instances without rebuilding the bind group.</p>
2829
<div id="status">GPU: loading sample</div>
@@ -46,11 +47,11 @@ <h2 id="source-title">Source path</h2>
4647
aria-controls="source-code" data-source="wgsl">Generated WGSL</button>
4748
</div>
4849
<pre id="source-code" role="tabpanel" aria-labelledby="tab-c"
49-
tabindex="0"><code>Loading source…</code></pre>
50+
tabindex="0"><span class="line-numbers" aria-hidden="true"></span><code>Loading source…</code></pre>
5051
</section>
5152
</main>
5253

53-
<script src="sample.js?v=2" defer></script>
54+
<script src="sample.js?v=3" defer></script>
5455
{{{ SCRIPT }}}
5556
</body>
5657
</html>

‎gpu-instancing-webgpu-usl.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!doctypehtml><html lang=en><head><meta charset=utf-8><meta content="width=device-width,initial-scale=1"name=viewport><link href=data:, rel=icon><link href="gallery.css?v=3"rel=stylesheet><title>Instancing · GPU + USL</title></head><body class=sample-page data-c-source=sources/instancing.c data-usl-source=sources/instancing.usl data-wgsl-source=sources/instancing.wgsl><header class=sample-head><a class=back-link href=index.html><span>←</span> Sample index</a><div class=sample-heading><p>Render / instances + offsets</p><h1>Instancing</h1></div><div class=runtime-badge><i></i> WebGPU live</div></header><main class=sample-workbench><section class=stage aria-label="Live WebGPU output"><canvas id=canvas oncontextmenu=event.preventDefault()></canvas><div class=stage-meta><p>Two dynamic uniform slices drive eight instances without rebuilding the bind group.</p><div id=status>GPU: loading sample</div></div></section><section class=source-panel aria-labelledby=source-title><header class=source-head><div><p class=eyebrow>Artifact inspection</p><h2 id=source-title>Source path</h2></div><button class=copy-button type=button>Copy</button></header><div class=source-tabs aria-label="Source language"role=tablist><button aria-controls=source-code aria-selected=true data-source=c id=tab-c role=tab>GPU C</button> <button aria-controls=source-code aria-selected=false data-source=usl id=tab-usl role=tab>USL</button> <button aria-controls=source-code aria-selected=false data-source=wgsl id=tab-wgsl role=tab>Generated WGSL</button></div><pre aria-labelledby=tab-c id=source-code role=tabpanel tabindex=0><code>Loading source…</code></pre></section></main><script src="sample.js?v=2"defer></script><script src=gpu-instancing-webgpu-usl.js async></script></body></html>
1+
<!doctypehtml><html lang=en><head><meta charset=utf-8><meta content="width=device-width,initial-scale=1"name=viewport><link href=data:, rel=icon><link href="gallery.css?v=4"rel=stylesheet><title>Instancing · GPU + USL</title></head><body class=sample-page data-c-source=sources/instancing.c data-usl-source=sources/instancing.usl data-wgsl-source=sources/instancing.wgsl><header class=sample-head><a class=back-link href=index.html><span>←</span> Sample index</a><div class=sample-heading><p>Render / instances + offsets</p><h1>Instancing</h1></div><div class=runtime-badge><i></i> WebGPU live</div></header><main class=sample-workbench><section class=stage aria-label="Live WebGPU output"><canvas id=canvas oncontextmenu=event.preventDefault()></canvas><aside aria-live=off class=debug-overlay hidden></aside><div class=stage-meta><p>Two dynamic uniform slices drive eight instances without rebuilding the bind group.</p><div id=status>GPU: loading sample</div></div></section><section class=source-panel aria-labelledby=source-title><header class=source-head><div><p class=eyebrow>Artifact inspection</p><h2 id=source-title>Source path</h2></div><button class=copy-button type=button>Copy</button></header><div class=source-tabs aria-label="Source language"role=tablist><button aria-controls=source-code aria-selected=true data-source=c id=tab-c role=tab>GPU C</button> <button aria-controls=source-code aria-selected=false data-source=usl id=tab-usl role=tab>USL</button> <button aria-controls=source-code aria-selected=false data-source=wgsl id=tab-wgsl role=tab>Generated WGSL</button></div><pre aria-labelledby=tab-c id=source-code role=tabpanel tabindex=0><span aria-hidden=true class=line-numbers></span><code>Loading source…</code></pre></section></main><script src="sample.js?v=3"defer></script><script src=gpu-instancing-webgpu-usl.js async></script></body></html>

‎gpu-instancing-webgpu-usl.wasm‎

36 Bytes
Binary file not shown.

0 commit comments

Comments
 (0)