Deploying to gh-pages from @ efa5a41 🚀

greggman · May 14, 2024 · a6db22c · a6db22c
1 parent efd35ee
commit a6db22c
Show file tree

Hide file tree

Showing 30 changed files with 928 additions and 46 deletions.
diff --git a/README.md b/README.md
@@ -437,6 +437,8 @@ import { createTextureFromImage } from 'webgpu-utils';
 * [cube-map](examples/cube-map.html)
 * [instancing](examples/instancing.html)
 * [primitives](examples/primitives.html)
+* [stencil](examples/stencil.html)
+* [stencil-cube](examples/stencil-cube.html)
 
 ## Development
 

diff --git a/dist/1.x/webgpu-utils.js b/dist/1.x/webgpu-utils.js
diff --git a/dist/1.x/webgpu-utils.module.js b/dist/1.x/webgpu-utils.module.js
diff --git a/docs/index.html b/docs/index.html
@@ -106,6 +106,8 @@ <h2>webgpu-utils</h2></div>
 <li><a href="examples/cube-map.html">cube-map</a></li>
 <li><a href="examples/instancing.html">instancing</a></li>
 <li><a href="examples/primitives.html">primitives</a></li>
+<li><a href="examples/stencil.html">stencil</a></li>
+<li><a href="examples/stencil-cube.html">stencil-cube</a></li>
 </ul>
 <a id="md:development" class="tsd-anchor"></a><h2><a href="#md:development">Development</a></h2><pre><code><span class="hl-2">git</span><span class="hl-1"> </span><span class="hl-2">clone</span><span class="hl-1"> </span><span class="hl-9">https</span><span class="hl-1">:</span><span class="hl-7">//github.com/greggman/webgpu-utils.git</span><br/><span class="hl-2">cd</span><span class="hl-1"> </span><span class="hl-2">webgpu</span><span class="hl-1">-</span><span class="hl-2">utils</span><br/><span class="hl-2">npm</span><span class="hl-1"> </span><span class="hl-2">ci</span><br/><span class="hl-2">npm</span><span class="hl-1"> </span><span class="hl-2">start</span>
 </code><button>Copy</button></pre>

diff --git a/examples/2d-array.html b/examples/2d-array.html
@@ -8,6 +8,7 @@
   <body>
     <canvas></canvas>
     <div id="b"><a href="https://github.com/greggman/webgpu-utils.org">webgpu-utils</a> - 2d-array texture</div>
+    <div id="fail" style="display: none;"><div id="fail-msg"></div></div>
     <script type="module" src="2d-array.js"></script>
   </body>
 </html>
diff --git a/examples/2d-array.js b/examples/2d-array.js
@@ -257,10 +257,10 @@ async function main() {
 }
 
 function fail(msg) {
-  const elem = document.createElement('p');
-  elem.textContent = msg;
-  elem.style.color = 'red';
-  document.body.appendChild(elem);
+  const elem = document.querySelector('#fail');
+  elem.style.display = '';
+  elem.children[0].textContent = msg;
 }
 
+
 main();
diff --git a/examples/background.html b/examples/background.html
@@ -7,6 +7,7 @@
   </head>
   <body>
     <canvas></canvas>
+    <div id="fail" style="display: none;"><div id="fail-msg"></div></div>
     <script type="module" src="background.js"></script>
   </body>
 </html>
diff --git a/examples/background.js b/examples/background.js
@@ -404,10 +404,10 @@ async function main() {
 }
 
 function fail(msg) {
-  const elem = document.createElement('p');
-  elem.textContent = msg;
-  elem.style.color = 'red';
-  document.body.appendChild(elem);
+  const elem = document.querySelector('#fail');
+  elem.style.display = '';
+  elem.children[0].textContent = msg;
 }
 
+
 main();
diff --git a/examples/bind-group-layouts.html b/examples/bind-group-layouts.html
@@ -8,6 +8,7 @@
   <body>
     <canvas></canvas>
     <div id="b"><a href="https://github.com/greggman/webgpu-utils.org">webgpu-utils</a> - 2d-array texture</div>
+    <div id="fail" style="display: none;"><div id="fail-msg"></div></div>
     <script type="module" src="bind-group-layouts.js"></script>
   </body>
 </html>
diff --git a/examples/bind-group-layouts.js b/examples/bind-group-layouts.js
@@ -241,10 +241,10 @@ async function main() {
 }
 
 function fail(msg) {
-  const elem = document.createElement('p');
-  elem.textContent = msg;
-  elem.style.color = 'red';
-  document.body.appendChild(elem);
+  const elem = document.querySelector('#fail');
+  elem.style.display = '';
+  elem.children[0].textContent = msg;
 }
 
+
 main();
diff --git a/examples/cube-map.html b/examples/cube-map.html
@@ -8,6 +8,7 @@
   <body>
     <canvas></canvas>
     <div id="b"><a href="https://github.com/greggman/webgpu-utils.org">webgpu-utils</a> - cube-map</div>
+    <div id="fail" style="display: none;"><div id="fail-msg"></div></div>
     <script type="module" src="cube-map.js"></script>
   </body>
 </html>
diff --git a/examples/cube-map.js b/examples/cube-map.js
@@ -190,10 +190,10 @@ async function main() {
 }
 
 function fail(msg) {
-  const elem = document.createElement('p');
-  elem.textContent = msg;
-  elem.style.color = 'red';
-  document.body.appendChild(elem);
+  const elem = document.querySelector('#fail');
+  elem.style.display = '';
+  elem.children[0].textContent = msg;
 }
 
+
 main();
diff --git a/examples/cube.html b/examples/cube.html
@@ -8,6 +8,7 @@
   <body>
     <canvas></canvas>
     <div id="b"><a href="https://github.com/greggman/webgpu-utils.org">webgpu-utils</a> - cube</div>
+    <div id="fail" style="display: none;"><div id="fail-msg"></div></div>
     <script type="module" src="cube.js"></script>
   </body>
 </html>
diff --git a/examples/cube.js b/examples/cube.js
@@ -225,10 +225,10 @@ async function main() {
 }
 
 function fail(msg) {
-  const elem = document.createElement('p');
-  elem.textContent = msg;
-  elem.style.color = 'red';
-  document.body.appendChild(elem);
+  const elem = document.querySelector('#fail');
+  elem.style.display = '';
+  elem.children[0].textContent = msg;
 }
 
+
 main();
diff --git a/examples/examples.css b/examples/examples.css
@@ -20,4 +20,16 @@ canvas {
   width: 100%;
   top: 1em;
   left: 0;
+}
+
+#fail {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: red;
 }
diff --git a/examples/instancing-size-only.html b/examples/instancing-size-only.html
@@ -8,6 +8,7 @@
   <body>
     <canvas></canvas>
     <div id="b"><a href="https://github.com/greggman/webgpu-utils.org">webgpu-utils</a> - instancing (size only)</div>
+    <div id="fail" style="display: none;"><div id="fail-msg"></div></div>
     <script type="module" src="instancing-size-only.js"></script>
   </body>
 </html>
diff --git a/examples/instancing-size-only.js b/examples/instancing-size-only.js
@@ -253,10 +253,10 @@ async function main() {
 }
 
 function fail(msg) {
-  const elem = document.createElement('p');
-  elem.textContent = msg;
-  elem.style.color = 'red';
-  document.body.appendChild(elem);
+  const elem = document.querySelector('#fail');
+  elem.style.display = '';
+  elem.children[0].textContent = msg;
 }
 
+
 main();
diff --git a/examples/instancing.html b/examples/instancing.html
@@ -8,6 +8,7 @@
   <body>
     <canvas></canvas>
     <div id="b"><a href="https://github.com/greggman/webgpu-utils.org">webgpu-utils</a> - instancing</div>
+    <div id="fail" style="display: none;"><div id="fail-msg"></div></div>
     <script type="module" src="instancing.js"></script>
   </body>
 </html>
diff --git a/examples/instancing.js b/examples/instancing.js
@@ -251,10 +251,9 @@ async function main() {
 }
 
 function fail(msg) {
-  const elem = document.createElement('p');
-  elem.textContent = msg;
-  elem.style.color = 'red';
-  document.body.appendChild(elem);
+  const elem = document.querySelector('#fail');
+  elem.style.display = '';
+  elem.children[0].textContent = msg;
 }
 
 main();
diff --git a/examples/primitives.html b/examples/primitives.html
@@ -8,6 +8,7 @@
   <body>
     <canvas></canvas>
     <div id="b"><a href="https://github.com/greggman/webgpu-utils.org">webgpu-utils</a> - primitives</div>
+    <div id="fail" style="display: none;"><div id="fail-msg"></div></div>
     <script type="module" src="primitives.js"></script>
   </body>
 </html>
diff --git a/examples/primitives.js b/examples/primitives.js
@@ -271,10 +271,9 @@ async function main() {
 }
 
 function fail(msg) {
-  const elem = document.createElement('p');
-  elem.textContent = msg;
-  elem.style.color = 'red';
-  document.body.appendChild(elem);
+  const elem = document.querySelector('#fail');
+  elem.style.display = '';
+  elem.children[0].textContent = msg;
 }
 
 main();
diff --git a/examples/stencil-cube.html b/examples/stencil-cube.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>webgpu-utils - stencil cube</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="examples.css">
+  </head>
+  <body>
+    <canvas></canvas>
+    <div id="b"><a href="https://github.com/greggman/webgpu-utils.org">webgpu-utils</a> - stencil cube</div>
+    <script type="module" src="stencil-cube.js"></script>
+  </body>
+</html>