Skip to content

Commit 36bd917

Browse files
jowensjowens
committed
populated examples using reduce as template
1 parent b5ea22e commit 36bd917

2 files changed

Lines changed: 127 additions & 4 deletions

File tree

‎examples/scan_example.html‎

Lines changed: 64 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,75 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html>
33
<head>
44
<meta charset="utf-8" />
55
<title>Standalone WebGPU Scan/Reduce Primitive Test</title>
66
<link rel="stylesheet" href="gridwise.css" />
7+
<link
8+
rel="stylesheet"
9+
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css"
10+
/>
711
</head>
812
<body>
9-
<h1>Scan / Reduce Example</h1>
13+
<h1>WebGPU Scan / Reduce Primitive Example</h1>
14+
<p>
15+
This example calls Gridwise's <code>scan</code> primitive. You can look
16+
at your developer console and see the input and output of this primitive,
17+
and whether the output matches what is expected (in which case the
18+
developer console will indicate "Validation passed").
19+
</p>
20+
<p>
21+
It computes an exclusive prefix-sum (scan) over an input array of
22+
2<sup>24</sup> i32s, producing an output array of the same length.
23+
In an exclusive scan, output element <em>i</em> is the sum of all input
24+
elements before position <em>i</em>; the first output element is always
25+
the identity value (0 for addition).
26+
<a
27+
href="https://github.com/gridwise-webgpu/gridwise/blob/main/examples/scan_example.mjs"
28+
>The entire JS source file is in github.</a
29+
>
30+
While the entire file contains substantial WebGPU and input-output setup
31+
boilerplate, the important parts follow.
32+
</p>
33+
<p>
34+
First, we declare the scan primitive. We configure its datatype (i32),
35+
the binary operation (sum), and the scan type (exclusive).
36+
</p>
37+
<pre><code class="language-javascript">const datatype = "i32";
38+
const binop = new BinOpAdd({ datatype });
39+
const scanType = "exclusive";
40+
const dldfscanPrimitive = new DLDFScan({
41+
device,
42+
binop,
43+
type: scanType,
44+
datatype,
45+
});
46+
const primitive = dldfscanPrimitive;</code></pre>
47+
<p>
48+
We have declared buffers (using WebGPU's <code>device.createBuffer</code>)
49+
called <code>memsrcBuffer</code> and <code>memdestBuffer</code>. For scan,
50+
the output buffer is the same size as the input. We then call the
51+
primitive's <code>execute</code> procedure (note that
52+
<code>execute</code> is an <code>async</code> call):
53+
</p>
54+
<pre><code class="language-javascript">await primitive.execute({
55+
inputBuffer: memsrcBuffer,
56+
outputBuffer: memdestBuffer,
57+
});</code></pre>
58+
<p>We then read back the result from the GPU and validate it.</p>
59+
<p>
60+
Your developer console should show a result that allows you to inspect the
61+
input and output, and prints "Validation passed" if the output matches the
62+
(CPU-computed) reference. It should look something like:
63+
</p>
64+
<pre><code>input array Int32Array(16777216) [11, 12, 13, 14, ...]
65+
output Int32Array(16777216) [0, 11, 23, 36, ...]
66+
Validation passed
67+
</code></pre>
1068
<div id="plot"></div>
69+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
70+
<script>
71+
hljs.highlightAll();
72+
</script>
1173
<script src="scan_example.mjs" type="module"></script>
1274
</body>
1375
</html>

‎examples/sort_example.html‎

Lines changed: 63 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,74 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html>
33
<head>
44
<meta charset="utf-8" />
55
<title>Standalone WebGPU Sort Primitive Test</title>
66
<link rel="stylesheet" href="gridwise.css" />
7+
<link
8+
rel="stylesheet"
9+
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css"
10+
/>
711
</head>
812
<body>
9-
<h1>Sort Example</h1>
13+
<h1>WebGPU Sort Primitive Example</h1>
14+
<p>
15+
This example calls Gridwise's <code>sort</code> primitive. You can look at
16+
your developer console and see the input and output of this primitive, and
17+
whether the output matches what is expected (in which case the developer
18+
console will indicate "Validation passed").
19+
</p>
20+
<p>
21+
It sorts an array of 2<sup>24</sup> random i32 values in ascending order
22+
using the OneSweep radix sort algorithm.
23+
<a
24+
href="https://github.com/gridwise-webgpu/gridwise/blob/main/examples/sort_example.mjs"
25+
>The entire JS source file is in github.</a
26+
>
27+
While the entire file contains substantial WebGPU and input-output setup
28+
boilerplate, the important parts follow.
29+
</p>
30+
<p>
31+
First, we declare the sort primitive. We configure its datatype (i32), the
32+
input length, and set <code>copyOutputToTemp</code> to
33+
<code>true</code> so the sorted result is written to a separate
34+
destination buffer rather than overwriting the input.
35+
</p>
36+
<pre><code class="language-javascript">const datatype = "i32";
37+
const sortKeysPrimitive = new OneSweepSort({
38+
device,
39+
datatype,
40+
inputLength: inputLength,
41+
copyOutputToTemp: true,
42+
});
43+
const primitive = sortKeysPrimitive;</code></pre>
44+
<p>
45+
We have declared buffers (using WebGPU's <code>device.createBuffer</code>)
46+
called <code>memsrcBuffer</code> and <code>memdestBuffer</code>. Sort
47+
operates on <code>keysInOut</code> (the input, which may be modified in
48+
place during sorting) and <code>keysTemp</code> (the destination buffer
49+
that holds the final sorted output when <code>copyOutputToTemp</code> is
50+
true). We then call the primitive's <code>execute</code> procedure (note
51+
that <code>execute</code> is an <code>async</code> call):
52+
</p>
53+
<pre><code class="language-javascript">await primitive.execute({
54+
keysInOut: memsrcBuffer,
55+
keysTemp: memdestBuffer,
56+
});</code></pre>
57+
<p>We then read back the result from the GPU and validate it.</p>
58+
<p>
59+
Your developer console should show a result that allows you to inspect the
60+
input and output, and prints "Validation passed" if the output is
61+
correctly sorted. It should look something like:
62+
</p>
63+
<pre><code>input array Int32Array(16777216) [random values...]
64+
output Int32Array(16777216) [sorted values in ascending order...]
65+
Validation passed
66+
</code></pre>
1067
<div id="plot"></div>
68+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
69+
<script>
70+
hljs.highlightAll();
71+
</script>
1172
<script src="sort_example.mjs" type="module"></script>
1273
</body>
1374
</html>

0 commit comments

Comments
 (0)