From 203d94740be9c7b1b67bd00b846658c09b57ba63 Mon Sep 17 00:00:00 2001 From: austinEng <2154796+austinEng@users.noreply.github.com> Date: Tue, 5 Mar 2024 16:18:46 +0000 Subject: [PATCH] =?UTF-8?q?Deploying=20to=20gh-pages=20from=20=20@=2059a72?= =?UTF-8?q?9b9654d6d8999fe93633befaf2b04261b6e=20=F0=9F=9A=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 404.html | 4 ++-- .../samples/videoUploadingWebCodecs.json | 1 - .../samples/A-buffer.json | 0 .../samples/animometer.json | 0 .../samples/bitonicSort.json | 0 .../samples/cameras.json | 0 .../samples/computeBoids.json | 0 .../samples/cornell.json | 0 .../samples/cubemap.json | 0 .../samples/deferredRendering.json | 0 .../samples/fractalCube.json | 0 .../samples/gameOfLife.json | 0 .../samples/helloTriangle.json | 0 .../samples/helloTriangleMSAA.json | 0 .../samples/imageBlur.json | 0 .../samples/instancedCube.json | 0 .../samples/normalMap.json | 0 .../samples/particles.json | 0 .../samples/renderBundles.json | 0 .../samples/resizeCanvas.json | 0 .../samples/reversedZ.json | 0 .../samples/rotatingCube.json | 0 .../samples/samplerParameters.json | 0 .../samples/shadowMapping.json | 0 .../samples/skinnedMesh.json | 0 .../samples/texturedCube.json | 0 .../samples/twoCubes.json | 0 .../samples/videoUploading.json | 0 .../samples/worker.json | 0 .../_buildManifest.js | 0 .../_ssgManifest.js | 0 _next/static/chunks/305.b34aadcd4e438a4b.js | 1 + _next/static/chunks/31.21fe9927d47c6537.js | 1 - _next/static/chunks/677.a4711ebf439141d9.js | 1 - ...p-03e4ecd05019c921.js => _app-702590028af5107c.js} | 2 +- _next/static/chunks/webpack-912bc0c2eca5bf7b.js | 1 + _next/static/chunks/webpack-94d205be05a3dcd6.js | 1 - index.html | 2 +- samples/A-buffer.html | 4 ++-- samples/animometer.html | 2 +- samples/bitonicSort.html | 2 +- samples/cameras.html | 2 +- samples/computeBoids.html | 2 +- samples/cornell.html | 2 +- samples/cubemap.html | 2 +- samples/deferredRendering.html | 4 ++-- samples/fractalCube.html | 2 +- samples/gameOfLife.html | 2 +- samples/helloTriangle.html | 2 +- samples/helloTriangleMSAA.html | 2 +- samples/imageBlur.html | 2 +- samples/instancedCube.html | 2 +- samples/normalMap.html | 2 +- samples/particles.html | 2 +- samples/renderBundles.html | 4 ++-- samples/resizeCanvas.html | 2 +- samples/reversedZ.html | 4 ++-- samples/rotatingCube.html | 2 +- samples/samplerParameters.html | 2 +- samples/shadowMapping.html | 2 +- samples/skinnedMesh.html | 2 +- samples/texturedCube.html | 2 +- samples/twoCubes.html | 2 +- samples/videoUploading.html | 2 +- samples/videoUploadingWebCodecs.html | 11 ----------- samples/worker.html | 4 ++-- 66 files changed, 38 insertions(+), 51 deletions(-) delete mode 100644 _next/data/SrBJelSWzyGbgGEj_oc3J/samples/videoUploadingWebCodecs.json rename _next/data/{SrBJelSWzyGbgGEj_oc3J => UR7RN9sVq2YQ1VJuhgdfE}/samples/A-buffer.json (100%) rename _next/data/{SrBJelSWzyGbgGEj_oc3J => UR7RN9sVq2YQ1VJuhgdfE}/samples/animometer.json (100%) rename _next/data/{SrBJelSWzyGbgGEj_oc3J => UR7RN9sVq2YQ1VJuhgdfE}/samples/bitonicSort.json (100%) rename _next/data/{SrBJelSWzyGbgGEj_oc3J => UR7RN9sVq2YQ1VJuhgdfE}/samples/cameras.json (100%) rename _next/data/{SrBJelSWzyGbgGEj_oc3J => UR7RN9sVq2YQ1VJuhgdfE}/samples/computeBoids.json (100%) rename _next/data/{SrBJelSWzyGbgGEj_oc3J => UR7RN9sVq2YQ1VJuhgdfE}/samples/cornell.json (100%) rename _next/data/{SrBJelSWzyGbgGEj_oc3J => UR7RN9sVq2YQ1VJuhgdfE}/samples/cubemap.json (100%) rename _next/data/{SrBJelSWzyGbgGEj_oc3J => UR7RN9sVq2YQ1VJuhgdfE}/samples/deferredRendering.json (100%) rename _next/data/{SrBJelSWzyGbgGEj_oc3J => UR7RN9sVq2YQ1VJuhgdfE}/samples/fractalCube.json (100%) rename _next/data/{SrBJelSWzyGbgGEj_oc3J => UR7RN9sVq2YQ1VJuhgdfE}/samples/gameOfLife.json (100%) rename _next/data/{SrBJelSWzyGbgGEj_oc3J => UR7RN9sVq2YQ1VJuhgdfE}/samples/helloTriangle.json (100%) rename _next/data/{SrBJelSWzyGbgGEj_oc3J => UR7RN9sVq2YQ1VJuhgdfE}/samples/helloTriangleMSAA.json (100%) rename _next/data/{SrBJelSWzyGbgGEj_oc3J => UR7RN9sVq2YQ1VJuhgdfE}/samples/imageBlur.json (100%) rename _next/data/{SrBJelSWzyGbgGEj_oc3J => UR7RN9sVq2YQ1VJuhgdfE}/samples/instancedCube.json (100%) rename _next/data/{SrBJelSWzyGbgGEj_oc3J => UR7RN9sVq2YQ1VJuhgdfE}/samples/normalMap.json (100%) rename _next/data/{SrBJelSWzyGbgGEj_oc3J => UR7RN9sVq2YQ1VJuhgdfE}/samples/particles.json (100%) rename _next/data/{SrBJelSWzyGbgGEj_oc3J => UR7RN9sVq2YQ1VJuhgdfE}/samples/renderBundles.json (100%) rename _next/data/{SrBJelSWzyGbgGEj_oc3J => UR7RN9sVq2YQ1VJuhgdfE}/samples/resizeCanvas.json (100%) rename _next/data/{SrBJelSWzyGbgGEj_oc3J => UR7RN9sVq2YQ1VJuhgdfE}/samples/reversedZ.json (100%) rename _next/data/{SrBJelSWzyGbgGEj_oc3J => UR7RN9sVq2YQ1VJuhgdfE}/samples/rotatingCube.json (100%) rename _next/data/{SrBJelSWzyGbgGEj_oc3J => UR7RN9sVq2YQ1VJuhgdfE}/samples/samplerParameters.json (100%) rename _next/data/{SrBJelSWzyGbgGEj_oc3J => UR7RN9sVq2YQ1VJuhgdfE}/samples/shadowMapping.json (100%) rename _next/data/{SrBJelSWzyGbgGEj_oc3J => UR7RN9sVq2YQ1VJuhgdfE}/samples/skinnedMesh.json (100%) rename _next/data/{SrBJelSWzyGbgGEj_oc3J => UR7RN9sVq2YQ1VJuhgdfE}/samples/texturedCube.json (100%) rename _next/data/{SrBJelSWzyGbgGEj_oc3J => UR7RN9sVq2YQ1VJuhgdfE}/samples/twoCubes.json (100%) rename _next/data/{SrBJelSWzyGbgGEj_oc3J => UR7RN9sVq2YQ1VJuhgdfE}/samples/videoUploading.json (100%) rename _next/data/{SrBJelSWzyGbgGEj_oc3J => UR7RN9sVq2YQ1VJuhgdfE}/samples/worker.json (100%) rename _next/static/{SrBJelSWzyGbgGEj_oc3J => UR7RN9sVq2YQ1VJuhgdfE}/_buildManifest.js (100%) rename _next/static/{SrBJelSWzyGbgGEj_oc3J => UR7RN9sVq2YQ1VJuhgdfE}/_ssgManifest.js (100%) create mode 100644 _next/static/chunks/305.b34aadcd4e438a4b.js delete mode 100644 _next/static/chunks/31.21fe9927d47c6537.js delete mode 100644 _next/static/chunks/677.a4711ebf439141d9.js rename _next/static/chunks/pages/{_app-03e4ecd05019c921.js => _app-702590028af5107c.js} (78%) create mode 100644 _next/static/chunks/webpack-912bc0c2eca5bf7b.js delete mode 100644 _next/static/chunks/webpack-94d205be05a3dcd6.js delete mode 100644 samples/videoUploadingWebCodecs.html diff --git a/404.html b/404.html index cd5167d0..0efda3a0 100644 --- a/404.html +++ b/404.html @@ -1,4 +1,4 @@ -404: This page could not be found

404

This page could not be found.

\ No newline at end of file + }

404

This page could not be found.

\ No newline at end of file diff --git a/_next/data/SrBJelSWzyGbgGEj_oc3J/samples/videoUploadingWebCodecs.json b/_next/data/SrBJelSWzyGbgGEj_oc3J/samples/videoUploadingWebCodecs.json deleted file mode 100644 index e726de6b..00000000 --- a/_next/data/SrBJelSWzyGbgGEj_oc3J/samples/videoUploadingWebCodecs.json +++ /dev/null @@ -1 +0,0 @@ -{"pageProps":{"slug":"videoUploadingWebCodecs"},"__N_SSG":true} \ No newline at end of file diff --git a/_next/data/SrBJelSWzyGbgGEj_oc3J/samples/A-buffer.json b/_next/data/UR7RN9sVq2YQ1VJuhgdfE/samples/A-buffer.json similarity index 100% rename from _next/data/SrBJelSWzyGbgGEj_oc3J/samples/A-buffer.json rename to _next/data/UR7RN9sVq2YQ1VJuhgdfE/samples/A-buffer.json diff --git a/_next/data/SrBJelSWzyGbgGEj_oc3J/samples/animometer.json b/_next/data/UR7RN9sVq2YQ1VJuhgdfE/samples/animometer.json similarity index 100% rename from _next/data/SrBJelSWzyGbgGEj_oc3J/samples/animometer.json rename to _next/data/UR7RN9sVq2YQ1VJuhgdfE/samples/animometer.json diff --git a/_next/data/SrBJelSWzyGbgGEj_oc3J/samples/bitonicSort.json b/_next/data/UR7RN9sVq2YQ1VJuhgdfE/samples/bitonicSort.json similarity index 100% rename from _next/data/SrBJelSWzyGbgGEj_oc3J/samples/bitonicSort.json rename to _next/data/UR7RN9sVq2YQ1VJuhgdfE/samples/bitonicSort.json diff --git a/_next/data/SrBJelSWzyGbgGEj_oc3J/samples/cameras.json b/_next/data/UR7RN9sVq2YQ1VJuhgdfE/samples/cameras.json similarity index 100% rename from _next/data/SrBJelSWzyGbgGEj_oc3J/samples/cameras.json rename to _next/data/UR7RN9sVq2YQ1VJuhgdfE/samples/cameras.json diff --git a/_next/data/SrBJelSWzyGbgGEj_oc3J/samples/computeBoids.json b/_next/data/UR7RN9sVq2YQ1VJuhgdfE/samples/computeBoids.json similarity index 100% rename from _next/data/SrBJelSWzyGbgGEj_oc3J/samples/computeBoids.json rename to _next/data/UR7RN9sVq2YQ1VJuhgdfE/samples/computeBoids.json diff --git a/_next/data/SrBJelSWzyGbgGEj_oc3J/samples/cornell.json b/_next/data/UR7RN9sVq2YQ1VJuhgdfE/samples/cornell.json similarity index 100% rename from _next/data/SrBJelSWzyGbgGEj_oc3J/samples/cornell.json rename to _next/data/UR7RN9sVq2YQ1VJuhgdfE/samples/cornell.json diff --git a/_next/data/SrBJelSWzyGbgGEj_oc3J/samples/cubemap.json b/_next/data/UR7RN9sVq2YQ1VJuhgdfE/samples/cubemap.json similarity index 100% rename from _next/data/SrBJelSWzyGbgGEj_oc3J/samples/cubemap.json rename to _next/data/UR7RN9sVq2YQ1VJuhgdfE/samples/cubemap.json diff --git a/_next/data/SrBJelSWzyGbgGEj_oc3J/samples/deferredRendering.json b/_next/data/UR7RN9sVq2YQ1VJuhgdfE/samples/deferredRendering.json similarity index 100% rename from _next/data/SrBJelSWzyGbgGEj_oc3J/samples/deferredRendering.json rename to _next/data/UR7RN9sVq2YQ1VJuhgdfE/samples/deferredRendering.json diff --git a/_next/data/SrBJelSWzyGbgGEj_oc3J/samples/fractalCube.json b/_next/data/UR7RN9sVq2YQ1VJuhgdfE/samples/fractalCube.json similarity index 100% rename from _next/data/SrBJelSWzyGbgGEj_oc3J/samples/fractalCube.json rename to _next/data/UR7RN9sVq2YQ1VJuhgdfE/samples/fractalCube.json diff --git a/_next/data/SrBJelSWzyGbgGEj_oc3J/samples/gameOfLife.json b/_next/data/UR7RN9sVq2YQ1VJuhgdfE/samples/gameOfLife.json similarity index 100% rename from _next/data/SrBJelSWzyGbgGEj_oc3J/samples/gameOfLife.json rename to _next/data/UR7RN9sVq2YQ1VJuhgdfE/samples/gameOfLife.json diff --git a/_next/data/SrBJelSWzyGbgGEj_oc3J/samples/helloTriangle.json b/_next/data/UR7RN9sVq2YQ1VJuhgdfE/samples/helloTriangle.json similarity index 100% rename from _next/data/SrBJelSWzyGbgGEj_oc3J/samples/helloTriangle.json rename to _next/data/UR7RN9sVq2YQ1VJuhgdfE/samples/helloTriangle.json diff --git a/_next/data/SrBJelSWzyGbgGEj_oc3J/samples/helloTriangleMSAA.json b/_next/data/UR7RN9sVq2YQ1VJuhgdfE/samples/helloTriangleMSAA.json similarity index 100% rename from _next/data/SrBJelSWzyGbgGEj_oc3J/samples/helloTriangleMSAA.json rename to _next/data/UR7RN9sVq2YQ1VJuhgdfE/samples/helloTriangleMSAA.json diff --git a/_next/data/SrBJelSWzyGbgGEj_oc3J/samples/imageBlur.json b/_next/data/UR7RN9sVq2YQ1VJuhgdfE/samples/imageBlur.json similarity index 100% rename from _next/data/SrBJelSWzyGbgGEj_oc3J/samples/imageBlur.json rename to _next/data/UR7RN9sVq2YQ1VJuhgdfE/samples/imageBlur.json diff --git a/_next/data/SrBJelSWzyGbgGEj_oc3J/samples/instancedCube.json b/_next/data/UR7RN9sVq2YQ1VJuhgdfE/samples/instancedCube.json similarity index 100% rename from _next/data/SrBJelSWzyGbgGEj_oc3J/samples/instancedCube.json rename to _next/data/UR7RN9sVq2YQ1VJuhgdfE/samples/instancedCube.json diff --git a/_next/data/SrBJelSWzyGbgGEj_oc3J/samples/normalMap.json b/_next/data/UR7RN9sVq2YQ1VJuhgdfE/samples/normalMap.json similarity index 100% rename from _next/data/SrBJelSWzyGbgGEj_oc3J/samples/normalMap.json rename to _next/data/UR7RN9sVq2YQ1VJuhgdfE/samples/normalMap.json diff --git a/_next/data/SrBJelSWzyGbgGEj_oc3J/samples/particles.json b/_next/data/UR7RN9sVq2YQ1VJuhgdfE/samples/particles.json similarity index 100% rename from _next/data/SrBJelSWzyGbgGEj_oc3J/samples/particles.json rename to _next/data/UR7RN9sVq2YQ1VJuhgdfE/samples/particles.json diff --git a/_next/data/SrBJelSWzyGbgGEj_oc3J/samples/renderBundles.json b/_next/data/UR7RN9sVq2YQ1VJuhgdfE/samples/renderBundles.json similarity index 100% rename from _next/data/SrBJelSWzyGbgGEj_oc3J/samples/renderBundles.json rename to _next/data/UR7RN9sVq2YQ1VJuhgdfE/samples/renderBundles.json diff --git a/_next/data/SrBJelSWzyGbgGEj_oc3J/samples/resizeCanvas.json b/_next/data/UR7RN9sVq2YQ1VJuhgdfE/samples/resizeCanvas.json similarity index 100% rename from _next/data/SrBJelSWzyGbgGEj_oc3J/samples/resizeCanvas.json rename to _next/data/UR7RN9sVq2YQ1VJuhgdfE/samples/resizeCanvas.json diff --git a/_next/data/SrBJelSWzyGbgGEj_oc3J/samples/reversedZ.json b/_next/data/UR7RN9sVq2YQ1VJuhgdfE/samples/reversedZ.json similarity index 100% rename from _next/data/SrBJelSWzyGbgGEj_oc3J/samples/reversedZ.json rename to _next/data/UR7RN9sVq2YQ1VJuhgdfE/samples/reversedZ.json diff --git a/_next/data/SrBJelSWzyGbgGEj_oc3J/samples/rotatingCube.json b/_next/data/UR7RN9sVq2YQ1VJuhgdfE/samples/rotatingCube.json similarity index 100% rename from _next/data/SrBJelSWzyGbgGEj_oc3J/samples/rotatingCube.json rename to _next/data/UR7RN9sVq2YQ1VJuhgdfE/samples/rotatingCube.json diff --git a/_next/data/SrBJelSWzyGbgGEj_oc3J/samples/samplerParameters.json b/_next/data/UR7RN9sVq2YQ1VJuhgdfE/samples/samplerParameters.json similarity index 100% rename from _next/data/SrBJelSWzyGbgGEj_oc3J/samples/samplerParameters.json rename to _next/data/UR7RN9sVq2YQ1VJuhgdfE/samples/samplerParameters.json diff --git a/_next/data/SrBJelSWzyGbgGEj_oc3J/samples/shadowMapping.json b/_next/data/UR7RN9sVq2YQ1VJuhgdfE/samples/shadowMapping.json similarity index 100% rename from _next/data/SrBJelSWzyGbgGEj_oc3J/samples/shadowMapping.json rename to _next/data/UR7RN9sVq2YQ1VJuhgdfE/samples/shadowMapping.json diff --git a/_next/data/SrBJelSWzyGbgGEj_oc3J/samples/skinnedMesh.json b/_next/data/UR7RN9sVq2YQ1VJuhgdfE/samples/skinnedMesh.json similarity index 100% rename from _next/data/SrBJelSWzyGbgGEj_oc3J/samples/skinnedMesh.json rename to _next/data/UR7RN9sVq2YQ1VJuhgdfE/samples/skinnedMesh.json diff --git a/_next/data/SrBJelSWzyGbgGEj_oc3J/samples/texturedCube.json b/_next/data/UR7RN9sVq2YQ1VJuhgdfE/samples/texturedCube.json similarity index 100% rename from _next/data/SrBJelSWzyGbgGEj_oc3J/samples/texturedCube.json rename to _next/data/UR7RN9sVq2YQ1VJuhgdfE/samples/texturedCube.json diff --git a/_next/data/SrBJelSWzyGbgGEj_oc3J/samples/twoCubes.json b/_next/data/UR7RN9sVq2YQ1VJuhgdfE/samples/twoCubes.json similarity index 100% rename from _next/data/SrBJelSWzyGbgGEj_oc3J/samples/twoCubes.json rename to _next/data/UR7RN9sVq2YQ1VJuhgdfE/samples/twoCubes.json diff --git a/_next/data/SrBJelSWzyGbgGEj_oc3J/samples/videoUploading.json b/_next/data/UR7RN9sVq2YQ1VJuhgdfE/samples/videoUploading.json similarity index 100% rename from _next/data/SrBJelSWzyGbgGEj_oc3J/samples/videoUploading.json rename to _next/data/UR7RN9sVq2YQ1VJuhgdfE/samples/videoUploading.json diff --git a/_next/data/SrBJelSWzyGbgGEj_oc3J/samples/worker.json b/_next/data/UR7RN9sVq2YQ1VJuhgdfE/samples/worker.json similarity index 100% rename from _next/data/SrBJelSWzyGbgGEj_oc3J/samples/worker.json rename to _next/data/UR7RN9sVq2YQ1VJuhgdfE/samples/worker.json diff --git a/_next/static/SrBJelSWzyGbgGEj_oc3J/_buildManifest.js b/_next/static/UR7RN9sVq2YQ1VJuhgdfE/_buildManifest.js similarity index 100% rename from _next/static/SrBJelSWzyGbgGEj_oc3J/_buildManifest.js rename to _next/static/UR7RN9sVq2YQ1VJuhgdfE/_buildManifest.js diff --git a/_next/static/SrBJelSWzyGbgGEj_oc3J/_ssgManifest.js b/_next/static/UR7RN9sVq2YQ1VJuhgdfE/_ssgManifest.js similarity index 100% rename from _next/static/SrBJelSWzyGbgGEj_oc3J/_ssgManifest.js rename to _next/static/UR7RN9sVq2YQ1VJuhgdfE/_ssgManifest.js diff --git a/_next/static/chunks/305.b34aadcd4e438a4b.js b/_next/static/chunks/305.b34aadcd4e438a4b.js new file mode 100644 index 00000000..43d95893 --- /dev/null +++ b/_next/static/chunks/305.b34aadcd4e438a4b.js @@ -0,0 +1 @@ +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[305],{5671:function(e,n,t){"use strict";t.d(n,{Tl:function(){return d},hu:function(){return m}});var r=t(5893),a=t(9008),i=t.n(a),o=t(1163),s=t(7294),l=t(9147),c=t.n(l);t(7319);let u=e=>{let n=(0,s.useRef)(null),a=(0,s.useRef)(null),l=(0,s.useMemo)(()=>e.sources.map(e=>{let{name:n,contents:a}=e;return{name:n,...function(e){let n;let a=null;{a=document.createElement("div");let i=t(4631);n=i(a,{lineNumbers:!0,lineWrapping:!0,theme:"monokai",readOnly:!0})}return{Container:function(t){return(0,r.jsx)("div",{...t,children:(0,r.jsx)("div",{ref(t){a&&t&&(t.appendChild(a),n.setOption("value",e))}})})}}}(a)}}),e.sources),u=(0,s.useRef)(null),d=(0,s.useMemo)(()=>{if(e.gui){let n=t(4376),r=new n.GUI({autoPlace:!1});return r.domElement.style.position="relative",r.domElement.style.zIndex="1000",r}},[]),m=(0,s.useRef)(null),p=(0,s.useMemo)(()=>{if(e.stats){let n=t(2792);return new n}},[]),v=(0,o.useRouter)(),g=v.asPath.match(/#([a-zA-Z0-9\.\/]+)/),[f,x]=(0,s.useState)(null),[h,b]=(0,s.useState)(null);return(0,s.useEffect)(()=>{if(g?b(g[1]):b(l[0].name),d&&u.current)for(u.current.appendChild(d.domElement);d.__controllers.length>0;)d.__controllers[0].remove();p&&m.current&&(p.dom.style.position="absolute",p.showPanel(1),m.current.appendChild(p.dom));let t={active:!0},r=()=>{t.active=!1};try{let a=n.current;if(!a)throw Error("The canvas is not available");let i=e.init({canvas:a,pageState:t,gui:d,stats:p});i instanceof Promise&&i.catch(e=>{console.error(e),x(e)})}catch(o){console.error(o),x(o)}return r},[]),(0,r.jsxs)("main",{children:[(0,r.jsxs)(i(),{children:[(0,r.jsx)("style",{dangerouslySetInnerHTML:{__html:"\n .CodeMirror {\n height: auto !important;\n margin: 1em 0;\n }\n\n .CodeMirror-scroll {\n height: auto !important;\n overflow: visible !important;\n }\n "}}),(0,r.jsx)("title",{children:"".concat(e.name," - WebGPU Samples")}),(0,r.jsx)("meta",{name:"description",content:e.description}),(0,r.jsx)("meta",{httpEquiv:"origin-trial",content:e.originTrial})]}),(0,r.jsxs)("div",{children:[(0,r.jsx)("h1",{children:e.name}),(0,r.jsx)("a",{target:"_blank",rel:"noreferrer",href:"https://github.com/".concat("webgpu/webgpu-samples","/tree/main/").concat(e.filename),children:"See it on Github!"}),(0,r.jsx)("p",{children:e.description}),f?(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("p",{children:"Something went wrong. Do your browser and device support WebGPU?"}),(0,r.jsx)("p",{children:"".concat(f)})]}):null]}),(0,r.jsxs)("div",{className:c().canvasContainer,children:[(0,r.jsx)("div",{style:{position:"absolute",left:10},ref:m}),(0,r.jsx)("div",{style:{position:"absolute",right:10},ref:u}),(0,r.jsx)("canvas",{ref:n})]}),(0,r.jsxs)("div",{children:[(0,r.jsx)("nav",{className:c().sourceFileNav,ref:a,children:(0,r.jsx)("div",{className:c().sourceFileScrollContainer,onScroll(e){let n=e.currentTarget,t=n.scrollWidth-n.clientWidth-n.scrollLeft;n.scrollLeft>25?a.current.setAttribute("data-left","true"):a.current.setAttribute("data-left","false"),t>25?a.current.setAttribute("data-right","true"):a.current.setAttribute("data-right","false")},children:(0,r.jsx)("ul",{children:l.map((e,n)=>(0,r.jsx)("li",{children:(0,r.jsx)("a",{href:"#".concat(e.name),"data-active":h==e.name,onClick(){b(e.name)},children:e.name})},n))})})}),l.map((e,n)=>(0,r.jsx)(e.Container,{className:c().sourceFileContainer,"data-active":h==e.name},n))]})]})},d=e=>(0,r.jsx)(u,{...e});function m(e,n){if(!e)throw Error(n)}},3305:function(e,n,t){"use strict";t.r(n),t.d(n,{default:function(){return c}});var r=t(5671),a=t(134),i="@group(0) @binding(1) var mySampler: sampler;\n@group(0) @binding(2) var myTexture: texture_external;\n\n@fragment\nfn main(@location(0) fragUV : vec2) -> @location(0) vec4 {\n return textureSampleBaseClampToEdge(myTexture, mySampler, fragUV);\n}\n",o="src/sample/videoUploading/main.ts";let s=async e=>{let{canvas:n,pageState:t,gui:r}=e,o=document.createElement("video");o.loop=!0,o.autoplay=!0,o.muted=!0,o.src="../assets/video/pano.webm",await o.play();let s=await navigator.gpu.requestAdapter(),l=await s.requestDevice();if(!t.active)return;let c=n.getContext("webgpu"),u=window.devicePixelRatio;n.width=n.clientWidth*u,n.height=n.clientHeight*u;let d=navigator.gpu.getPreferredCanvasFormat();c.configure({device:l,format:d,alphaMode:"premultiplied"});let m=l.createRenderPipeline({layout:"auto",vertex:{module:l.createShaderModule({code:a.Z}),entryPoint:"vert_main"},fragment:{module:l.createShaderModule({code:i}),entryPoint:"main",targets:[{format:d}]},primitive:{topology:"triangle-list"}}),p=l.createSampler({magFilter:"linear",minFilter:"linear"}),v=new URLSearchParams(window.location.search),g={requestFrame:"requestAnimationFrame",videoSource:v.get("videoSource")||"videoElement"};function f(){if(!t.active)return;let e="videoFrame"===g.videoSource?new VideoFrame(o):o,n=l.createBindGroup({layout:m.getBindGroupLayout(0),entries:[{binding:1,resource:p},{binding:2,resource:l.importExternalTexture({source:e})}]}),r=l.createCommandEncoder(),a=c.getCurrentTexture().createView(),i=r.beginRenderPass({colorAttachments:[{view:a,clearValue:{r:0,g:0,b:0,a:1},loadOp:"clear",storeOp:"store"}]});i.setPipeline(m),i.setBindGroup(0,n),i.draw(6),i.end(),l.queue.submit([r.finish()]),"requestVideoFrameCallback"==g.requestFrame?o.requestVideoFrameCallback(f):requestAnimationFrame(f)}r.add(g,"videoSource",["videoElement","videoFrame"]),r.add(g,"requestFrame",["requestAnimationFrame","requestVideoFrameCallback"]),"requestVideoFrameCallback"==g.requestFrame?o.requestVideoFrameCallback(f):requestAnimationFrame(f)},l=()=>(0,r.Tl)({name:"Video Uploading",description:"This example shows how to upload video frame to WebGPU.",gui:!0,init:s,sources:[{name:o.substring(26),contents:"import { makeSample, SampleInit } from '../../components/SampleLayout';\n\nimport fullscreenTexturedQuadWGSL from '../../shaders/fullscreenTexturedQuad.wgsl';\nimport sampleExternalTextureWGSL from '../../shaders/sampleExternalTexture.frag.wgsl';\n\nconst init: SampleInit = async ({ canvas, pageState, gui }) => {\n // Set video element\n const video = document.createElement('video');\n video.loop = true;\n video.autoplay = true;\n video.muted = true;\n video.src = '../assets/video/pano.webm';\n await video.play();\n\n const adapter = await navigator.gpu.requestAdapter();\n const device = await adapter.requestDevice();\n\n if (!pageState.active) return;\n\n const context = canvas.getContext('webgpu') as GPUCanvasContext;\n const devicePixelRatio = window.devicePixelRatio;\n canvas.width = canvas.clientWidth * devicePixelRatio;\n canvas.height = canvas.clientHeight * devicePixelRatio;\n const presentationFormat = navigator.gpu.getPreferredCanvasFormat();\n\n context.configure({\n device,\n format: presentationFormat,\n alphaMode: 'premultiplied',\n });\n\n const pipeline = device.createRenderPipeline({\n layout: 'auto',\n vertex: {\n module: device.createShaderModule({\n code: fullscreenTexturedQuadWGSL,\n }),\n entryPoint: 'vert_main',\n },\n fragment: {\n module: device.createShaderModule({\n code: sampleExternalTextureWGSL,\n }),\n entryPoint: 'main',\n targets: [\n {\n format: presentationFormat,\n },\n ],\n },\n primitive: {\n topology: 'triangle-list',\n },\n });\n\n const sampler = device.createSampler({\n magFilter: 'linear',\n minFilter: 'linear',\n });\n\n const params = new URLSearchParams(window.location.search);\n\n const settings = {\n requestFrame: 'requestAnimationFrame',\n videoSource: params.get('videoSource') || 'videoElement',\n };\n\n gui.add(settings, 'videoSource', ['videoElement', 'videoFrame']);\n gui.add(settings, 'requestFrame', [\n 'requestAnimationFrame',\n 'requestVideoFrameCallback',\n ]);\n\n function frame() {\n // Sample is no longer the active page.\n if (!pageState.active) return;\n\n const externalTextureSource =\n settings.videoSource === 'videoFrame' ? new VideoFrame(video) : video;\n\n const uniformBindGroup = device.createBindGroup({\n layout: pipeline.getBindGroupLayout(0),\n entries: [\n {\n binding: 1,\n resource: sampler,\n },\n {\n binding: 2,\n resource: device.importExternalTexture({\n source: externalTextureSource,\n }),\n },\n ],\n });\n\n const commandEncoder = device.createCommandEncoder();\n const textureView = context.getCurrentTexture().createView();\n\n const renderPassDescriptor: GPURenderPassDescriptor = {\n colorAttachments: [\n {\n view: textureView,\n clearValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 },\n loadOp: 'clear',\n storeOp: 'store',\n },\n ],\n };\n\n const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);\n passEncoder.setPipeline(pipeline);\n passEncoder.setBindGroup(0, uniformBindGroup);\n passEncoder.draw(6);\n passEncoder.end();\n device.queue.submit([commandEncoder.finish()]);\n\n if (settings.requestFrame == 'requestVideoFrameCallback') {\n video.requestVideoFrameCallback(frame);\n } else {\n requestAnimationFrame(frame);\n }\n }\n\n if (settings.requestFrame == 'requestVideoFrameCallback') {\n video.requestVideoFrameCallback(frame);\n } else {\n requestAnimationFrame(frame);\n }\n};\n\nconst VideoUploading: () => JSX.Element = () =>\n makeSample({\n name: 'Video Uploading',\n description: 'This example shows how to upload video frame to WebGPU.',\n gui: true,\n init,\n sources: [\n {\n name: __filename.substring(__dirname.length + 1),\n contents: __SOURCE__,\n },\n {\n name: '../../shaders/fullscreenTexturedQuad.wgsl',\n contents: fullscreenTexturedQuadWGSL,\n editable: true,\n },\n {\n name: '../../shaders/sampleExternalTexture.wgsl',\n contents: sampleExternalTextureWGSL,\n editable: true,\n },\n ],\n filename: __filename,\n });\n\nexport default VideoUploading;\n"},{name:"../../shaders/fullscreenTexturedQuad.wgsl",contents:a.Z,editable:!0},{name:"../../shaders/sampleExternalTexture.wgsl",contents:i,editable:!0}],filename:o});var c=l},9147:function(e){e.exports={canvasContainer:"SampleLayout_canvasContainer__zRR_l",sourceFileNav:"SampleLayout_sourceFileNav__ml48P",sourceFileScrollContainer:"SampleLayout_sourceFileScrollContainer__LsNEm",sourceFileContainer:"SampleLayout_sourceFileContainer__3s84x"}},134:function(e,n){"use strict";n.Z="@group(0) @binding(0) var mySampler : sampler;\n@group(0) @binding(1) var myTexture : texture_2d;\n\nstruct VertexOutput {\n @builtin(position) Position : vec4,\n @location(0) fragUV : vec2,\n}\n\n@vertex\nfn vert_main(@builtin(vertex_index) VertexIndex : u32) -> VertexOutput {\n const pos = array(\n vec2( 1.0, 1.0),\n vec2( 1.0, -1.0),\n vec2(-1.0, -1.0),\n vec2( 1.0, 1.0),\n vec2(-1.0, -1.0),\n vec2(-1.0, 1.0),\n );\n\n const uv = array(\n vec2(1.0, 0.0),\n vec2(1.0, 1.0),\n vec2(0.0, 1.0),\n vec2(1.0, 0.0),\n vec2(0.0, 1.0),\n vec2(0.0, 0.0),\n );\n\n var output : VertexOutput;\n output.Position = vec4(pos[VertexIndex], 0.0, 1.0);\n output.fragUV = uv[VertexIndex];\n return output;\n}\n\n@fragment\nfn frag_main(@location(0) fragUV : vec2) -> @location(0) vec4 {\n return textureSample(myTexture, mySampler, fragUV);\n}\n"}}]); \ No newline at end of file diff --git a/_next/static/chunks/31.21fe9927d47c6537.js b/_next/static/chunks/31.21fe9927d47c6537.js deleted file mode 100644 index 01d2ed13..00000000 --- a/_next/static/chunks/31.21fe9927d47c6537.js +++ /dev/null @@ -1 +0,0 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[31],{5671:function(e,n,t){"use strict";t.d(n,{Tl:function(){return d},hu:function(){return m}});var r=t(5893),a=t(9008),i=t.n(a),o=t(1163),s=t(7294),l=t(9147),c=t.n(l);t(7319);let u=e=>{let n=(0,s.useRef)(null),a=(0,s.useRef)(null),l=(0,s.useMemo)(()=>e.sources.map(e=>{let{name:n,contents:a}=e;return{name:n,...function(e){let n;let a=null;{a=document.createElement("div");let i=t(4631);n=i(a,{lineNumbers:!0,lineWrapping:!0,theme:"monokai",readOnly:!0})}return{Container:function(t){return(0,r.jsx)("div",{...t,children:(0,r.jsx)("div",{ref(t){a&&t&&(t.appendChild(a),n.setOption("value",e))}})})}}}(a)}}),e.sources),u=(0,s.useRef)(null),d=(0,s.useMemo)(()=>{if(e.gui){let n=t(4376),r=new n.GUI({autoPlace:!1});return r.domElement.style.position="relative",r.domElement.style.zIndex="1000",r}},[]),m=(0,s.useRef)(null),p=(0,s.useMemo)(()=>{if(e.stats){let n=t(2792);return new n}},[]),v=(0,o.useRouter)(),g=v.asPath.match(/#([a-zA-Z0-9\.\/]+)/),[f,x]=(0,s.useState)(null),[h,b]=(0,s.useState)(null);return(0,s.useEffect)(()=>{if(g?b(g[1]):b(l[0].name),d&&u.current)for(u.current.appendChild(d.domElement);d.__controllers.length>0;)d.__controllers[0].remove();p&&m.current&&(p.dom.style.position="absolute",p.showPanel(1),m.current.appendChild(p.dom));let t={active:!0},r=()=>{t.active=!1};try{let a=n.current;if(!a)throw Error("The canvas is not available");let i=e.init({canvas:a,pageState:t,gui:d,stats:p});i instanceof Promise&&i.catch(e=>{console.error(e),x(e)})}catch(o){console.error(o),x(o)}return r},[]),(0,r.jsxs)("main",{children:[(0,r.jsxs)(i(),{children:[(0,r.jsx)("style",{dangerouslySetInnerHTML:{__html:"\n .CodeMirror {\n height: auto !important;\n margin: 1em 0;\n }\n\n .CodeMirror-scroll {\n height: auto !important;\n overflow: visible !important;\n }\n "}}),(0,r.jsx)("title",{children:"".concat(e.name," - WebGPU Samples")}),(0,r.jsx)("meta",{name:"description",content:e.description}),(0,r.jsx)("meta",{httpEquiv:"origin-trial",content:e.originTrial})]}),(0,r.jsxs)("div",{children:[(0,r.jsx)("h1",{children:e.name}),(0,r.jsx)("a",{target:"_blank",rel:"noreferrer",href:"https://github.com/".concat("webgpu/webgpu-samples","/tree/main/").concat(e.filename),children:"See it on Github!"}),(0,r.jsx)("p",{children:e.description}),f?(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("p",{children:"Something went wrong. Do your browser and device support WebGPU?"}),(0,r.jsx)("p",{children:"".concat(f)})]}):null]}),(0,r.jsxs)("div",{className:c().canvasContainer,children:[(0,r.jsx)("div",{style:{position:"absolute",left:10},ref:m}),(0,r.jsx)("div",{style:{position:"absolute",right:10},ref:u}),(0,r.jsx)("canvas",{ref:n})]}),(0,r.jsxs)("div",{children:[(0,r.jsx)("nav",{className:c().sourceFileNav,ref:a,children:(0,r.jsx)("div",{className:c().sourceFileScrollContainer,onScroll(e){let n=e.currentTarget,t=n.scrollWidth-n.clientWidth-n.scrollLeft;n.scrollLeft>25?a.current.setAttribute("data-left","true"):a.current.setAttribute("data-left","false"),t>25?a.current.setAttribute("data-right","true"):a.current.setAttribute("data-right","false")},children:(0,r.jsx)("ul",{children:l.map((e,n)=>(0,r.jsx)("li",{children:(0,r.jsx)("a",{href:"#".concat(e.name),"data-active":h==e.name,onClick(){b(e.name)},children:e.name})},n))})})}),l.map((e,n)=>(0,r.jsx)(e.Container,{className:c().sourceFileContainer,"data-active":h==e.name},n))]})]})},d=e=>(0,r.jsx)(u,{...e});function m(e,n){if(!e)throw Error(n)}},7031:function(e,n,t){"use strict";var r="src/sample/videoUploadingWebCodecs/main.ts";t.r(n);var a=t(5671),i=t(134),o=t(7618);let s=async e=>{let{canvas:n,pageState:t,gui:r}=e,a=document.createElement("video");a.loop=!0,a.autoplay=!0,a.muted=!0,a.src="../assets/video/pano.webm",await a.play();let s=await navigator.gpu.requestAdapter(),l=await s.requestDevice();if(!t.active)return;let c=n.getContext("webgpu"),u=window.devicePixelRatio;n.width=n.clientWidth*u,n.height=n.clientHeight*u;let d=navigator.gpu.getPreferredCanvasFormat();c.configure({device:l,format:d,alphaMode:"premultiplied"});let m=l.createRenderPipeline({layout:"auto",vertex:{module:l.createShaderModule({code:i.Z}),entryPoint:"vert_main"},fragment:{module:l.createShaderModule({code:o.Z}),entryPoint:"main",targets:[{format:d}]},primitive:{topology:"triangle-list"}}),p=l.createSampler({magFilter:"linear",minFilter:"linear"}),v={requestFrame:"requestAnimationFrame"};function g(){if(!t.active)return;let e=new VideoFrame(a),n=l.createBindGroup({layout:m.getBindGroupLayout(0),entries:[{binding:1,resource:p},{binding:2,resource:l.importExternalTexture({source:e})}]}),r=l.createCommandEncoder(),i=c.getCurrentTexture().createView(),o=r.beginRenderPass({colorAttachments:[{view:i,clearValue:{r:0,g:0,b:0,a:1},loadOp:"clear",storeOp:"store"}]});o.setPipeline(m),o.setBindGroup(0,n),o.draw(6),o.end(),l.queue.submit([r.finish()]),"requestVideoFrameCallback"==v.requestFrame?a.requestVideoFrameCallback(g):requestAnimationFrame(g)}r.add(v,"requestFrame",["requestAnimationFrame","requestVideoFrameCallback"]),"requestVideoFrameCallback"==v.requestFrame?a.requestVideoFrameCallback(g):requestAnimationFrame(g)},l=()=>(0,a.Tl)({name:"Video Uploading with WebCodecs",description:"This example shows how to upload a WebCodecs VideoFrame to WebGPU.",gui:!0,init:s,sources:[{name:r.substring(35),contents:"import { makeSample, SampleInit } from '../../components/SampleLayout';\n\nimport fullscreenTexturedQuadWGSL from '../../shaders/fullscreenTexturedQuad.wgsl';\nimport sampleExternalTextureWGSL from '../../shaders/sampleExternalTexture.frag.wgsl';\n\nconst init: SampleInit = async ({ canvas, pageState, gui }) => {\n // Set video element\n const video = document.createElement('video');\n video.loop = true;\n video.autoplay = true;\n video.muted = true;\n video.src = '../assets/video/pano.webm';\n await video.play();\n\n const adapter = await navigator.gpu.requestAdapter();\n const device = await adapter.requestDevice();\n\n if (!pageState.active) return;\n\n const context = canvas.getContext('webgpu') as GPUCanvasContext;\n const devicePixelRatio = window.devicePixelRatio;\n canvas.width = canvas.clientWidth * devicePixelRatio;\n canvas.height = canvas.clientHeight * devicePixelRatio;\n const presentationFormat = navigator.gpu.getPreferredCanvasFormat();\n\n context.configure({\n device,\n format: presentationFormat,\n alphaMode: 'premultiplied',\n });\n\n const pipeline = device.createRenderPipeline({\n layout: 'auto',\n vertex: {\n module: device.createShaderModule({\n code: fullscreenTexturedQuadWGSL,\n }),\n entryPoint: 'vert_main',\n },\n fragment: {\n module: device.createShaderModule({\n code: sampleExternalTextureWGSL,\n }),\n entryPoint: 'main',\n targets: [\n {\n format: presentationFormat,\n },\n ],\n },\n primitive: {\n topology: 'triangle-list',\n },\n });\n\n const sampler = device.createSampler({\n magFilter: 'linear',\n minFilter: 'linear',\n });\n\n const settings = {\n requestFrame: 'requestAnimationFrame',\n };\n\n gui.add(settings, 'requestFrame', [\n 'requestAnimationFrame',\n 'requestVideoFrameCallback',\n ]);\n\n function frame() {\n // Sample is no longer the active page.\n if (!pageState.active) return;\n\n const videoFrame = new VideoFrame(video);\n\n const uniformBindGroup = device.createBindGroup({\n layout: pipeline.getBindGroupLayout(0),\n entries: [\n {\n binding: 1,\n resource: sampler,\n },\n {\n binding: 2,\n resource: device.importExternalTexture({\n source: videoFrame as any, // eslint-disable-line @typescript-eslint/no-explicit-any\n }),\n },\n ],\n });\n\n const commandEncoder = device.createCommandEncoder();\n const textureView = context.getCurrentTexture().createView();\n\n const renderPassDescriptor: GPURenderPassDescriptor = {\n colorAttachments: [\n {\n view: textureView,\n clearValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 },\n loadOp: 'clear',\n storeOp: 'store',\n },\n ],\n };\n\n const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);\n passEncoder.setPipeline(pipeline);\n passEncoder.setBindGroup(0, uniformBindGroup);\n passEncoder.draw(6);\n passEncoder.end();\n device.queue.submit([commandEncoder.finish()]);\n\n if (settings.requestFrame == 'requestVideoFrameCallback') {\n video.requestVideoFrameCallback(frame);\n } else {\n requestAnimationFrame(frame);\n }\n }\n\n if (settings.requestFrame == 'requestVideoFrameCallback') {\n video.requestVideoFrameCallback(frame);\n } else {\n requestAnimationFrame(frame);\n }\n};\n\nconst VideoUploadingWebCodecs: () => JSX.Element = () =>\n makeSample({\n name: 'Video Uploading with WebCodecs',\n description: `This example shows how to upload a WebCodecs VideoFrame to WebGPU.`,\n gui: true,\n init,\n sources: [\n {\n name: __filename.substring(__dirname.length + 1),\n contents: __SOURCE__,\n },\n {\n name: '../../shaders/fullscreenTexturedQuad.wgsl',\n contents: fullscreenTexturedQuadWGSL,\n editable: true,\n },\n {\n name: '../../shaders/sampleExternalTexture.wgsl',\n contents: sampleExternalTextureWGSL,\n editable: true,\n },\n ],\n filename: __filename,\n });\n\nexport default VideoUploadingWebCodecs;\n"},{name:"../../shaders/fullscreenTexturedQuad.wgsl",contents:i.Z,editable:!0},{name:"../../shaders/sampleExternalTexture.wgsl",contents:o.Z,editable:!0}],filename:r});n.default=l},9147:function(e){e.exports={canvasContainer:"SampleLayout_canvasContainer__zRR_l",sourceFileNav:"SampleLayout_sourceFileNav__ml48P",sourceFileScrollContainer:"SampleLayout_sourceFileScrollContainer__LsNEm",sourceFileContainer:"SampleLayout_sourceFileContainer__3s84x"}},134:function(e,n){"use strict";n.Z="@group(0) @binding(0) var mySampler : sampler;\n@group(0) @binding(1) var myTexture : texture_2d;\n\nstruct VertexOutput {\n @builtin(position) Position : vec4,\n @location(0) fragUV : vec2,\n}\n\n@vertex\nfn vert_main(@builtin(vertex_index) VertexIndex : u32) -> VertexOutput {\n const pos = array(\n vec2( 1.0, 1.0),\n vec2( 1.0, -1.0),\n vec2(-1.0, -1.0),\n vec2( 1.0, 1.0),\n vec2(-1.0, -1.0),\n vec2(-1.0, 1.0),\n );\n\n const uv = array(\n vec2(1.0, 0.0),\n vec2(1.0, 1.0),\n vec2(0.0, 1.0),\n vec2(1.0, 0.0),\n vec2(0.0, 1.0),\n vec2(0.0, 0.0),\n );\n\n var output : VertexOutput;\n output.Position = vec4(pos[VertexIndex], 0.0, 1.0);\n output.fragUV = uv[VertexIndex];\n return output;\n}\n\n@fragment\nfn frag_main(@location(0) fragUV : vec2) -> @location(0) vec4 {\n return textureSample(myTexture, mySampler, fragUV);\n}\n"},7618:function(e,n){"use strict";n.Z="@group(0) @binding(1) var mySampler: sampler;\n@group(0) @binding(2) var myTexture: texture_external;\n\n@fragment\nfn main(@location(0) fragUV : vec2) -> @location(0) vec4 {\n return textureSampleBaseClampToEdge(myTexture, mySampler, fragUV);\n}\n"}}]); \ No newline at end of file diff --git a/_next/static/chunks/677.a4711ebf439141d9.js b/_next/static/chunks/677.a4711ebf439141d9.js deleted file mode 100644 index f51aa7af..00000000 --- a/_next/static/chunks/677.a4711ebf439141d9.js +++ /dev/null @@ -1 +0,0 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[677],{5671:function(e,n,t){"use strict";t.d(n,{Tl:function(){return d},hu:function(){return m}});var r=t(5893),a=t(9008),i=t.n(a),o=t(1163),s=t(7294),l=t(9147),c=t.n(l);t(7319);let u=e=>{let n=(0,s.useRef)(null),a=(0,s.useRef)(null),l=(0,s.useMemo)(()=>e.sources.map(e=>{let{name:n,contents:a}=e;return{name:n,...function(e){let n;let a=null;{a=document.createElement("div");let i=t(4631);n=i(a,{lineNumbers:!0,lineWrapping:!0,theme:"monokai",readOnly:!0})}return{Container:function(t){return(0,r.jsx)("div",{...t,children:(0,r.jsx)("div",{ref(t){a&&t&&(t.appendChild(a),n.setOption("value",e))}})})}}}(a)}}),e.sources),u=(0,s.useRef)(null),d=(0,s.useMemo)(()=>{if(e.gui){let n=t(4376),r=new n.GUI({autoPlace:!1});return r.domElement.style.position="relative",r.domElement.style.zIndex="1000",r}},[]),m=(0,s.useRef)(null),p=(0,s.useMemo)(()=>{if(e.stats){let n=t(2792);return new n}},[]),v=(0,o.useRouter)(),g=v.asPath.match(/#([a-zA-Z0-9\.\/]+)/),[f,x]=(0,s.useState)(null),[h,b]=(0,s.useState)(null);return(0,s.useEffect)(()=>{if(g?b(g[1]):b(l[0].name),d&&u.current)for(u.current.appendChild(d.domElement);d.__controllers.length>0;)d.__controllers[0].remove();p&&m.current&&(p.dom.style.position="absolute",p.showPanel(1),m.current.appendChild(p.dom));let t={active:!0},r=()=>{t.active=!1};try{let a=n.current;if(!a)throw Error("The canvas is not available");let i=e.init({canvas:a,pageState:t,gui:d,stats:p});i instanceof Promise&&i.catch(e=>{console.error(e),x(e)})}catch(o){console.error(o),x(o)}return r},[]),(0,r.jsxs)("main",{children:[(0,r.jsxs)(i(),{children:[(0,r.jsx)("style",{dangerouslySetInnerHTML:{__html:"\n .CodeMirror {\n height: auto !important;\n margin: 1em 0;\n }\n\n .CodeMirror-scroll {\n height: auto !important;\n overflow: visible !important;\n }\n "}}),(0,r.jsx)("title",{children:"".concat(e.name," - WebGPU Samples")}),(0,r.jsx)("meta",{name:"description",content:e.description}),(0,r.jsx)("meta",{httpEquiv:"origin-trial",content:e.originTrial})]}),(0,r.jsxs)("div",{children:[(0,r.jsx)("h1",{children:e.name}),(0,r.jsx)("a",{target:"_blank",rel:"noreferrer",href:"https://github.com/".concat("webgpu/webgpu-samples","/tree/main/").concat(e.filename),children:"See it on Github!"}),(0,r.jsx)("p",{children:e.description}),f?(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("p",{children:"Something went wrong. Do your browser and device support WebGPU?"}),(0,r.jsx)("p",{children:"".concat(f)})]}):null]}),(0,r.jsxs)("div",{className:c().canvasContainer,children:[(0,r.jsx)("div",{style:{position:"absolute",left:10},ref:m}),(0,r.jsx)("div",{style:{position:"absolute",right:10},ref:u}),(0,r.jsx)("canvas",{ref:n})]}),(0,r.jsxs)("div",{children:[(0,r.jsx)("nav",{className:c().sourceFileNav,ref:a,children:(0,r.jsx)("div",{className:c().sourceFileScrollContainer,onScroll(e){let n=e.currentTarget,t=n.scrollWidth-n.clientWidth-n.scrollLeft;n.scrollLeft>25?a.current.setAttribute("data-left","true"):a.current.setAttribute("data-left","false"),t>25?a.current.setAttribute("data-right","true"):a.current.setAttribute("data-right","false")},children:(0,r.jsx)("ul",{children:l.map((e,n)=>(0,r.jsx)("li",{children:(0,r.jsx)("a",{href:"#".concat(e.name),"data-active":h==e.name,onClick(){b(e.name)},children:e.name})},n))})})}),l.map((e,n)=>(0,r.jsx)(e.Container,{className:c().sourceFileContainer,"data-active":h==e.name},n))]})]})},d=e=>(0,r.jsx)(u,{...e});function m(e,n){if(!e)throw Error(n)}},6677:function(e,n,t){"use strict";var r="src/sample/videoUploading/main.ts";t.r(n);var a=t(5671),i=t(134),o=t(7618);let s=async e=>{let{canvas:n,pageState:t,gui:r}=e,a=document.createElement("video");a.loop=!0,a.autoplay=!0,a.muted=!0,a.src="../assets/video/pano.webm",await a.play();let s=await navigator.gpu.requestAdapter(),l=await s.requestDevice();if(!t.active)return;let c=n.getContext("webgpu"),u=window.devicePixelRatio;n.width=n.clientWidth*u,n.height=n.clientHeight*u;let d=navigator.gpu.getPreferredCanvasFormat();c.configure({device:l,format:d,alphaMode:"premultiplied"});let m=l.createRenderPipeline({layout:"auto",vertex:{module:l.createShaderModule({code:i.Z}),entryPoint:"vert_main"},fragment:{module:l.createShaderModule({code:o.Z}),entryPoint:"main",targets:[{format:d}]},primitive:{topology:"triangle-list"}}),p=l.createSampler({magFilter:"linear",minFilter:"linear"}),v={requestFrame:"requestAnimationFrame"};function g(){if(!t.active)return;let e=l.createBindGroup({layout:m.getBindGroupLayout(0),entries:[{binding:1,resource:p},{binding:2,resource:l.importExternalTexture({source:a})}]}),n=l.createCommandEncoder(),r=c.getCurrentTexture().createView(),i=n.beginRenderPass({colorAttachments:[{view:r,clearValue:{r:0,g:0,b:0,a:1},loadOp:"clear",storeOp:"store"}]});i.setPipeline(m),i.setBindGroup(0,e),i.draw(6),i.end(),l.queue.submit([n.finish()]),"requestVideoFrameCallback"==v.requestFrame?a.requestVideoFrameCallback(g):requestAnimationFrame(g)}r.add(v,"requestFrame",["requestAnimationFrame","requestVideoFrameCallback"]),"requestVideoFrameCallback"==v.requestFrame?a.requestVideoFrameCallback(g):requestAnimationFrame(g)},l=()=>(0,a.Tl)({name:"Video Uploading",description:"This example shows how to upload video frame to WebGPU.",gui:!0,init:s,sources:[{name:r.substring(26),contents:"import { makeSample, SampleInit } from '../../components/SampleLayout';\n\nimport fullscreenTexturedQuadWGSL from '../../shaders/fullscreenTexturedQuad.wgsl';\nimport sampleExternalTextureWGSL from '../../shaders/sampleExternalTexture.frag.wgsl';\n\nconst init: SampleInit = async ({ canvas, pageState, gui }) => {\n // Set video element\n const video = document.createElement('video');\n video.loop = true;\n video.autoplay = true;\n video.muted = true;\n video.src = '../assets/video/pano.webm';\n await video.play();\n\n const adapter = await navigator.gpu.requestAdapter();\n const device = await adapter.requestDevice();\n\n if (!pageState.active) return;\n\n const context = canvas.getContext('webgpu') as GPUCanvasContext;\n const devicePixelRatio = window.devicePixelRatio;\n canvas.width = canvas.clientWidth * devicePixelRatio;\n canvas.height = canvas.clientHeight * devicePixelRatio;\n const presentationFormat = navigator.gpu.getPreferredCanvasFormat();\n\n context.configure({\n device,\n format: presentationFormat,\n alphaMode: 'premultiplied',\n });\n\n const pipeline = device.createRenderPipeline({\n layout: 'auto',\n vertex: {\n module: device.createShaderModule({\n code: fullscreenTexturedQuadWGSL,\n }),\n entryPoint: 'vert_main',\n },\n fragment: {\n module: device.createShaderModule({\n code: sampleExternalTextureWGSL,\n }),\n entryPoint: 'main',\n targets: [\n {\n format: presentationFormat,\n },\n ],\n },\n primitive: {\n topology: 'triangle-list',\n },\n });\n\n const sampler = device.createSampler({\n magFilter: 'linear',\n minFilter: 'linear',\n });\n\n const settings = {\n requestFrame: 'requestAnimationFrame',\n };\n\n gui.add(settings, 'requestFrame', [\n 'requestAnimationFrame',\n 'requestVideoFrameCallback',\n ]);\n\n function frame() {\n // Sample is no longer the active page.\n if (!pageState.active) return;\n\n const uniformBindGroup = device.createBindGroup({\n layout: pipeline.getBindGroupLayout(0),\n entries: [\n {\n binding: 1,\n resource: sampler,\n },\n {\n binding: 2,\n resource: device.importExternalTexture({\n source: video,\n }),\n },\n ],\n });\n\n const commandEncoder = device.createCommandEncoder();\n const textureView = context.getCurrentTexture().createView();\n\n const renderPassDescriptor: GPURenderPassDescriptor = {\n colorAttachments: [\n {\n view: textureView,\n clearValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 },\n loadOp: 'clear',\n storeOp: 'store',\n },\n ],\n };\n\n const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);\n passEncoder.setPipeline(pipeline);\n passEncoder.setBindGroup(0, uniformBindGroup);\n passEncoder.draw(6);\n passEncoder.end();\n device.queue.submit([commandEncoder.finish()]);\n\n if (settings.requestFrame == 'requestVideoFrameCallback') {\n video.requestVideoFrameCallback(frame);\n } else {\n requestAnimationFrame(frame);\n }\n }\n\n if (settings.requestFrame == 'requestVideoFrameCallback') {\n video.requestVideoFrameCallback(frame);\n } else {\n requestAnimationFrame(frame);\n }\n};\n\nconst VideoUploading: () => JSX.Element = () =>\n makeSample({\n name: 'Video Uploading',\n description: 'This example shows how to upload video frame to WebGPU.',\n gui: true,\n init,\n sources: [\n {\n name: __filename.substring(__dirname.length + 1),\n contents: __SOURCE__,\n },\n {\n name: '../../shaders/fullscreenTexturedQuad.wgsl',\n contents: fullscreenTexturedQuadWGSL,\n editable: true,\n },\n {\n name: '../../shaders/sampleExternalTexture.wgsl',\n contents: sampleExternalTextureWGSL,\n editable: true,\n },\n ],\n filename: __filename,\n });\n\nexport default VideoUploading;\n"},{name:"../../shaders/fullscreenTexturedQuad.wgsl",contents:i.Z,editable:!0},{name:"../../shaders/sampleExternalTexture.wgsl",contents:o.Z,editable:!0}],filename:r});n.default=l},9147:function(e){e.exports={canvasContainer:"SampleLayout_canvasContainer__zRR_l",sourceFileNav:"SampleLayout_sourceFileNav__ml48P",sourceFileScrollContainer:"SampleLayout_sourceFileScrollContainer__LsNEm",sourceFileContainer:"SampleLayout_sourceFileContainer__3s84x"}},134:function(e,n){"use strict";n.Z="@group(0) @binding(0) var mySampler : sampler;\n@group(0) @binding(1) var myTexture : texture_2d;\n\nstruct VertexOutput {\n @builtin(position) Position : vec4,\n @location(0) fragUV : vec2,\n}\n\n@vertex\nfn vert_main(@builtin(vertex_index) VertexIndex : u32) -> VertexOutput {\n const pos = array(\n vec2( 1.0, 1.0),\n vec2( 1.0, -1.0),\n vec2(-1.0, -1.0),\n vec2( 1.0, 1.0),\n vec2(-1.0, -1.0),\n vec2(-1.0, 1.0),\n );\n\n const uv = array(\n vec2(1.0, 0.0),\n vec2(1.0, 1.0),\n vec2(0.0, 1.0),\n vec2(1.0, 0.0),\n vec2(0.0, 1.0),\n vec2(0.0, 0.0),\n );\n\n var output : VertexOutput;\n output.Position = vec4(pos[VertexIndex], 0.0, 1.0);\n output.fragUV = uv[VertexIndex];\n return output;\n}\n\n@fragment\nfn frag_main(@location(0) fragUV : vec2) -> @location(0) vec4 {\n return textureSample(myTexture, mySampler, fragUV);\n}\n"},7618:function(e,n){"use strict";n.Z="@group(0) @binding(1) var mySampler: sampler;\n@group(0) @binding(2) var myTexture: texture_external;\n\n@fragment\nfn main(@location(0) fragUV : vec2) -> @location(0) vec4 {\n return textureSampleBaseClampToEdge(myTexture, mySampler, fragUV);\n}\n"}}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/_app-03e4ecd05019c921.js b/_next/static/chunks/pages/_app-702590028af5107c.js similarity index 78% rename from _next/static/chunks/pages/_app-03e4ecd05019c921.js rename to _next/static/chunks/pages/_app-702590028af5107c.js index cbfbdc33..a8451e41 100644 --- a/_next/static/chunks/pages/_app-03e4ecd05019c921.js +++ b/_next/static/chunks/pages/_app-702590028af5107c.js @@ -1 +1 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[888],{3454:function(e,t,n){"use strict";var a,r;e.exports=(null==(a=n.g.process)?void 0:a.env)&&"object"==typeof(null==(r=n.g.process)?void 0:r.env)?n.g.process:n(7663)},6840:function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/_app",function(){return n(3353)}])},227:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.getDomainLocale=function(e,t,n,a){return!1},("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},1551:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var a=n(2648).Z,r=n(7273).Z,l=a(n(7294)),o=n(1003),i=n(4465),s=n(2692),u=n(8245),c=n(9246),d=n(227),p=n(3468);let f={};function h(e,t,n,a){if(!e||!o.isLocalURL(t))return;Promise.resolve(e.prefetch(t,n,a)).catch(e=>{});let r=a&&void 0!==a.locale?a.locale:e&&e.locale;f[t+"%"+n+(r?"%"+r:"")]=!0}let m=l.default.forwardRef(function(e,t){let n,a;let{href:m,as:b,children:_,prefetch:y,passHref:g,replace:v,shallow:x,scroll:w,locale:P,onClick:k,onMouseEnter:C,onTouchStart:j,legacyBehavior:G=!0!==Boolean(!0)}=e,L=r(e,["href","as","children","prefetch","passHref","replace","shallow","scroll","locale","onClick","onMouseEnter","onTouchStart","legacyBehavior"]);n=_,G&&("string"==typeof n||"number"==typeof n)&&(n=l.default.createElement("a",null,n));let T=!1!==y,M=l.default.useContext(s.RouterContext),E=l.default.useContext(u.AppRouterContext);E&&(M=E);let{href:O,as:R}=l.default.useMemo(()=>{let[e,t]=o.resolveHref(M,m,!0);return{href:e,as:b?o.resolveHref(M,b):t||e}},[M,m,b]),S=l.default.useRef(O),A=l.default.useRef(R);G&&(a=l.default.Children.only(n));let N=G?a&&"object"==typeof a&&a.ref:t,[U,D,W]=c.useIntersection({rootMargin:"200px"}),B=l.default.useCallback(e=>{(A.current!==R||S.current!==O)&&(W(),A.current=R,S.current=O),U(e),N&&("function"==typeof N?N(e):"object"==typeof N&&(N.current=e))},[R,N,O,W,U]);l.default.useEffect(()=>{let e=D&&T&&o.isLocalURL(O),t=void 0!==P?P:M&&M.locale,n=f[O+"%"+R+(t?"%"+t:"")];e&&!n&&h(M,O,R,{locale:t})},[R,O,D,P,T,M]);let I={ref:B,onClick(e){G||"function"!=typeof k||k(e),G&&a.props&&"function"==typeof a.props.onClick&&a.props.onClick(e),e.defaultPrevented||function(e,t,n,a,r,i,s,u,c,d){let{nodeName:p}=e.currentTarget,f="A"===p.toUpperCase();if(f&&(function(e){let{target:t}=e.currentTarget;return t&&"_self"!==t||e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||e.nativeEvent&&2===e.nativeEvent.which}(e)||!o.isLocalURL(n)))return;e.preventDefault();let h=()=>{"beforePopState"in t?t[r?"replace":"push"](n,a,{shallow:i,locale:u,scroll:s}):t[r?"replace":"push"](a||n,{forceOptimisticNavigation:!d})};c?l.default.startTransition(h):h()}(e,M,O,R,v,x,w,P,Boolean(E),T)},onMouseEnter(e){G||"function"!=typeof C||C(e),G&&a.props&&"function"==typeof a.props.onMouseEnter&&a.props.onMouseEnter(e),!(!T&&E)&&o.isLocalURL(O)&&h(M,O,R,{priority:!0})},onTouchStart(e){G||"function"!=typeof j||j(e),G&&a.props&&"function"==typeof a.props.onTouchStart&&a.props.onTouchStart(e),!(!T&&E)&&o.isLocalURL(O)&&h(M,O,R,{priority:!0})}};if(!G||g||"a"===a.type&&!("href"in a.props)){let Z=void 0!==P?P:M&&M.locale,H=M&&M.isLocaleDomain&&d.getDomainLocale(R,Z,M.locales,M.domainLocales);I.href=H||p.addBasePath(i.addLocale(R,Z,M&&M.defaultLocale))}return G?l.default.cloneElement(a,I):l.default.createElement("a",Object.assign({},L,I),n)});t.default=m,("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},9246:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.useIntersection=function(e){let{rootRef:t,rootMargin:n,disabled:s}=e,u=s||!l,[c,d]=a.useState(!1),[p,f]=a.useState(null);a.useEffect(()=>{if(l){if(!u&&!c&&p&&p.tagName){let e=function(e,t,n){let{id:a,observer:r,elements:l}=function(e){let t;let n={root:e.root||null,margin:e.rootMargin||""},a=i.find(e=>e.root===n.root&&e.margin===n.margin);if(a&&(t=o.get(a)))return t;let r=new Map,l=new IntersectionObserver(e=>{e.forEach(e=>{let t=r.get(e.target),n=e.isIntersecting||e.intersectionRatio>0;t&&n&&t(n)})},e);return t={id:n,observer:l,elements:r},i.push(n),o.set(n,t),t}(n);return l.set(e,t),r.observe(e),function(){if(l.delete(e),r.unobserve(e),0===l.size){r.disconnect(),o.delete(a);let t=i.findIndex(e=>e.root===a.root&&e.margin===a.margin);t>-1&&i.splice(t,1)}}}(p,e=>e&&d(e),{root:null==t?void 0:t.current,rootMargin:n});return e}}else if(!c){let a=r.requestIdleCallback(()=>d(!0));return()=>r.cancelIdleCallback(a)}},[p,u,n,t,c]);let h=a.useCallback(()=>{d(!1)},[]);return[f,c,h]};var a=n(7294),r=n(4686);let l="function"==typeof IntersectionObserver,o=new Map,i=[];("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},8245:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.TemplateContext=t.GlobalLayoutRouterContext=t.LayoutRouterContext=t.AppRouterContext=void 0;var a=(0,n(2648).Z)(n(7294));let r=a.default.createContext(null);t.AppRouterContext=r;let l=a.default.createContext(null);t.LayoutRouterContext=l;let o=a.default.createContext(null);t.GlobalLayoutRouterContext=o;let i=a.default.createContext(null);t.TemplateContext=i},7645:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){let n=l.default,r=(null==t?void 0:t.suspense)?{}:{loading(e){let{error:t,isLoading:n,pastDelay:a}=e;return null}};if(e instanceof Promise?r.loader=()=>e:"function"==typeof e?r.loader=e:"object"==typeof e&&(r=a({},r,e)),(r=a({},r,t)).suspense&&(delete r.ssr,delete r.loading),r.loadableGenerated&&delete(r=a({},r,r.loadableGenerated)).loadableGenerated,"boolean"==typeof r.ssr&&!r.suspense){if(!r.ssr)return delete r.ssr,o(n,r);delete r.ssr}return n(r)},t.noSSR=o;var a=n(6495).Z,r=n(2648).Z,l=(r(n(7294)),r(n(4588)));function o(e,t){return delete t.webpack,delete t.modules,e(t)}("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},3644:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.LoadableContext=void 0;var a=(0,n(2648).Z)(n(7294));let r=a.default.createContext(null);t.LoadableContext=r},4588:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var a=n(6495).Z,r=(0,n(2648).Z)(n(7294)),l=n(3644);let{useSyncExternalStore:o}=n(7294),i=[],s=[],u=!1;function c(e){let t=e(),n={loading:!0,loaded:null,error:null};return n.promise=t.then(e=>(n.loading=!1,n.loaded=e,e)).catch(e=>{throw n.loading=!1,n.error=e,e}),n}class d{promise(){return this._res.promise}retry(){this._clearTimeouts(),this._res=this._loadFn(this._opts.loader),this._state={pastDelay:!1,timedOut:!1};let{_res:e,_opts:t}=this;e.loading&&("number"==typeof t.delay&&(0===t.delay?this._state.pastDelay=!0:this._delay=setTimeout(()=>{this._update({pastDelay:!0})},t.delay)),"number"==typeof t.timeout&&(this._timeout=setTimeout(()=>{this._update({timedOut:!0})},t.timeout))),this._res.promise.then(()=>{this._update({}),this._clearTimeouts()}).catch(e=>{this._update({}),this._clearTimeouts()}),this._update({})}_update(e){this._state=a({},this._state,{error:this._res.error,loaded:this._res.loaded,loading:this._res.loading},e),this._callbacks.forEach(e=>e())}_clearTimeouts(){clearTimeout(this._delay),clearTimeout(this._timeout)}getCurrentValue(){return this._state}subscribe(e){return this._callbacks.add(e),()=>{this._callbacks.delete(e)}}constructor(e,t){this._loadFn=e,this._opts=t,this._callbacks=new Set,this._delay=null,this._timeout=null,this.retry()}}function p(e){return function(e,t){let n=Object.assign({loader:null,loading:null,delay:200,timeout:null,webpack:null,modules:null,suspense:!1},t);n.suspense&&(n.lazy=r.default.lazy(n.loader));let i=null;function c(){if(!i){let t=new d(e,n);i={getCurrentValue:t.getCurrentValue.bind(t),subscribe:t.subscribe.bind(t),retry:t.retry.bind(t),promise:t.promise.bind(t)}}return i.promise()}if(!u){let p=n.webpack?n.webpack():n.modules;p&&s.push(e=>{for(let t of p)if(-1!==e.indexOf(t))return c()})}function f(){c();let e=r.default.useContext(l.LoadableContext);e&&Array.isArray(n.modules)&&n.modules.forEach(t=>{e(t)})}let h=n.suspense?function(e,t){return f(),r.default.createElement(n.lazy,a({},e,{ref:t}))}:function(e,t){f();let a=o(i.subscribe,i.getCurrentValue,i.getCurrentValue);return r.default.useImperativeHandle(t,()=>({retry:i.retry}),[]),r.default.useMemo(()=>{var t;return a.loading||a.error?r.default.createElement(n.loading,{isLoading:a.loading,pastDelay:a.pastDelay,timedOut:a.timedOut,error:a.error,retry:i.retry}):a.loaded?r.default.createElement((t=a.loaded)&&t.__esModule?t.default:t,e):null},[e,a])};return h.preload=()=>c(),h.displayName="LoadableComponent",r.default.forwardRef(h)}(c,e)}function f(e,t){let n=[];for(;e.length;){let a=e.pop();n.push(a(t))}return Promise.all(n).then(()=>{if(e.length)return f(e,t)})}p.preloadAll=()=>new Promise((e,t)=>{f(i).then(e,t)}),p.preloadReady=function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];return new Promise(t=>{let n=()=>(u=!0,t());f(s,e).then(n,n)})},window.__NEXT_PRELOADREADY=p.preloadReady,t.default=p},3353:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return v}});var a=n(5893),r=n(9008),l=n.n(r),o=n(1664),i=n.n(o),s=n(1163),u=n(7294);n(4112);var c=n(6988),d=n.n(c),p=n(1958),f=n(6707),h=n.n(f);let m=e=>{let{category:t,onClickPageLink:n,router:r}=e,[l,o]=(0,u.useState)(!1),{title:i,pages:s,sampleNames:c}=t;return(0,a.jsxs)("div",{children:[(0,a.jsxs)("div",{className:h().sampleCategory,onMouseEnter(){o(!0)},onMouseLeave(){o(!1)},children:[(0,a.jsx)("h3",{style:{cursor:"pointer",width:"auto"},children:i}),(0,a.jsx)("p",{className:h().sampleCategoryDescription,"data-active":l,children:t.description})]}),c.map(e=>(0,a.jsx)(b,{slug:e,router:r,pages:s,onClick:()=>n()},"samples/".concat(e)))]})},b=e=>{let{router:t,slug:n,pages:r,onClick:l}=e,o="/samples/[slug]"===t.pathname&&t.query.slug===n?h().selected:void 0;return(0,a.jsx)("li",{className:o,onMouseOver(){r[n].render.preload()},children:(0,a.jsx)(i(),{href:"/samples/".concat(n),onClick:()=>l(),children:n})},n)};var _=n(3454);let y="WebGPU Samples",g=e=>{let{Component:t,pageProps:n}=e,r=(0,s.useRouter)(),[o,c]=(0,u.useState)(!1),f=(0,u.useMemo)(()=>(0,u.memo)(t),[t]),h=r.asPath.match(/(\?wgsl=[01])#(\S+)/);if(h){let b=h[2];return r.replace("/samples/".concat(b)),(0,a.jsx)(a.Fragment,{})}return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(l(),{children:[(0,a.jsx)("title",{children:y}),(0,a.jsx)("meta",{name:"description",content:"The WebGPU Samples are a set of samples demonstrating the use of the WebGPU API."}),(0,a.jsx)("meta",{name:"viewport",content:"width=device-width, initial-scale=1, shrink-to-fit=no"})]}),(0,a.jsxs)("div",{className:d().wrapper,children:[(0,a.jsxs)("nav",{className:"".concat(d().panel," ").concat(d().container),"data-expanded":o,children:[(0,a.jsxs)("h1",{children:[(0,a.jsx)(i(),{href:"/",children:y}),(0,a.jsx)("div",{className:d().expand,onClick(){c(!o)}})]}),(0,a.jsxs)("div",{className:d().panelContents,children:[(0,a.jsx)("a",{href:"https://github.com/".concat("webgpu/webgpu-samples"),children:"Github"}),(0,a.jsx)("hr",{}),p.pageCategories.map(e=>(0,a.jsx)("ul",{className:d().exampleList,children:(0,a.jsx)(m,{category:e,router:r,onClickPageLink:()=>c(!1)})},"/categories/".concat(e.title))),(0,a.jsx)("hr",{}),(0,a.jsx)("h3",{style:{marginBottom:"5px"},children:"Other Pages"}),(0,a.jsx)("ul",{style:{margin:"0px",paddingBottom:"20px"},className:d().exampleList,children:(0,a.jsx)("li",{children:(0,a.jsx)("a",{rel:"noreferrer",target:"_blank",href:"".concat(_.env.BASE_PATH||"","/workload-simulator.html"),children:"Workload Simulator ↗️"})})})]})]}),(0,a.jsx)(f,{...n})]})]})};var v=g},1958:function(e,t,n){"use strict";n.r(t),n.d(t,{__N_SSG:function(){return h},pageCategories:function(){return m}});var a=n(5893),r=n(5152),l=n.n(r);let o={helloTriangle:l()(()=>Promise.all([n.e(126),n.e(82),n.e(607)]).then(n.bind(n,6607)),{loadableGenerated:{webpack:()=>[6607]}}),helloTriangleMSAA:l()(()=>Promise.all([n.e(126),n.e(82),n.e(198)]).then(n.bind(n,1198)),{loadableGenerated:{webpack:()=>[1198]}}),rotatingCube:l()(()=>Promise.all([n.e(126),n.e(746),n.e(82),n.e(15)]).then(n.bind(n,9015)),{loadableGenerated:{webpack:()=>[9015]}}),twoCubes:l()(()=>Promise.all([n.e(126),n.e(746),n.e(82),n.e(710)]).then(n.bind(n,5710)),{loadableGenerated:{webpack:()=>[5710]}}),texturedCube:l()(()=>Promise.all([n.e(126),n.e(746),n.e(82),n.e(613)]).then(n.bind(n,613)),{loadableGenerated:{webpack:()=>[613]}}),samplerParameters:l()(()=>Promise.all([n.e(126),n.e(746),n.e(82),n.e(624)]).then(n.bind(n,8624)),{loadableGenerated:{webpack:()=>[8624]}}),instancedCube:l()(()=>Promise.all([n.e(126),n.e(746),n.e(82),n.e(621)]).then(n.bind(n,8621)),{loadableGenerated:{webpack:()=>[8621]}}),fractalCube:l()(()=>Promise.all([n.e(126),n.e(746),n.e(82),n.e(103)]).then(n.bind(n,5103)),{loadableGenerated:{webpack:()=>[5103]}}),cubemap:l()(()=>Promise.all([n.e(126),n.e(746),n.e(82),n.e(432)]).then(n.bind(n,1432)),{loadableGenerated:{webpack:()=>[1432]}})},i={reversedZ:l()(()=>Promise.all([n.e(126),n.e(746),n.e(82),n.e(588)]).then(n.bind(n,7502)),{loadableGenerated:{webpack:()=>[7502]}}),renderBundles:l()(()=>Promise.all([n.e(126),n.e(746),n.e(82),n.e(428)]).then(n.bind(n,3428)),{loadableGenerated:{webpack:()=>[3428]}})},s={cameras:l()(()=>Promise.all([n.e(126),n.e(746),n.e(82),n.e(878)]).then(n.bind(n,3878)),{loadableGenerated:{webpack:()=>[3878]}}),normalMap:l()(()=>Promise.all([n.e(126),n.e(746),n.e(82),n.e(118)]).then(n.bind(n,7118)),{loadableGenerated:{webpack:()=>[7118]}}),shadowMapping:l()(()=>Promise.all([n.e(126),n.e(746),n.e(667),n.e(82),n.e(342)]).then(n.bind(n,2342)),{loadableGenerated:{webpack:()=>[2342]}}),deferredRendering:l()(()=>Promise.all([n.e(126),n.e(746),n.e(667),n.e(82),n.e(704)]).then(n.bind(n,9704)),{loadableGenerated:{webpack:()=>[9704]}}),particles:l()(()=>Promise.all([n.e(126),n.e(746),n.e(82),n.e(167)]).then(n.bind(n,6167)),{loadableGenerated:{webpack:()=>[6167]}}),imageBlur:l()(()=>Promise.all([n.e(126),n.e(82),n.e(770)]).then(n.bind(n,1770)),{loadableGenerated:{webpack:()=>[1770]}}),cornell:l()(()=>Promise.all([n.e(126),n.e(746),n.e(82),n.e(874)]).then(n.bind(n,6874)),{loadableGenerated:{webpack:()=>[6874]}}),"A-buffer":l()(()=>Promise.all([n.e(126),n.e(746),n.e(82),n.e(73)]).then(n.bind(n,3073)),{loadableGenerated:{webpack:()=>[3073]}}),skinnedMesh:l()(()=>Promise.all([n.e(126),n.e(746),n.e(82),n.e(869)]).then(n.bind(n,6869)),{loadableGenerated:{webpack:()=>[6869]}})},u={computeBoids:l()(()=>Promise.all([n.e(126),n.e(82),n.e(752)]).then(n.bind(n,2752)),{loadableGenerated:{webpack:()=>[2752]}}),gameOfLife:l()(()=>Promise.all([n.e(126),n.e(82),n.e(391)]).then(n.bind(n,7391)),{loadableGenerated:{webpack:()=>[7391]}}),bitonicSort:l()(()=>Promise.all([n.e(126),n.e(82),n.e(0)]).then(n.bind(n,2e3)),{loadableGenerated:{webpack:()=>[2e3]}})},c={resizeCanvas:l()(()=>Promise.all([n.e(126),n.e(82),n.e(565)]).then(n.bind(n,8565)),{loadableGenerated:{webpack:()=>[8565]}}),videoUploading:l()(()=>Promise.all([n.e(126),n.e(82),n.e(677)]).then(n.bind(n,6677)),{loadableGenerated:{webpack:()=>[6677]}}),videoUploadingWebCodecs:l()(()=>Promise.all([n.e(126),n.e(82),n.e(31)]).then(n.bind(n,7031)),{loadableGenerated:{webpack:()=>[7031]}}),worker:l()(()=>Promise.all([n.e(126),n.e(82),n.e(78)]).then(n.bind(n,6078)),{loadableGenerated:{webpack:()=>[6078]}})},d={animometer:l()(()=>Promise.all([n.e(126),n.e(82),n.e(841)]).then(n.bind(n,841)),{loadableGenerated:{webpack:()=>[841]}})},p={...o,...i,...s,...u,...c,...d},f=(e,t,n)=>({title:e,description:n,pages:t,sampleNames:Object.keys(t)});var h=!0;let m=[f("Basic Graphics",o,"Basic rendering functionality implemented with the WebGPU API."),f("WebGPU Features",i,"Highlights of important WebGPU features."),f("GPGPU Demos",u,"Visualizations of parallel GPU compute operations."),f("Graphics Techniques",s,"A collection of graphics techniques implemented with WebGPU."),f("Web Platform Integration",c,"Demos integrating WebGPU with other functionalities of the web platform."),f("Benchmarks",d,"WebGPU Performance Benchmarks")];t.default=function(e){let{slug:t}=e,n=p[t];return(0,a.jsx)(n,{})}},6707:function(e){e.exports={sampleCategory:"SampleCategory_sampleCategory__n_wZK",sampleCategoryDescription:"SampleCategory_sampleCategoryDescription__3tJee",selected:"SampleCategory_selected__R_g7c"}},6988:function(e){e.exports={container:"MainLayout_container__l_Vkn",wrapper:"MainLayout_wrapper__eI_HE",panel:"MainLayout_panel__GdjKj",exampleList:"MainLayout_exampleList__FHCmd",expand:"MainLayout_expand__FEWWW",panelContents:"MainLayout_panelContents__w1BWs",exampleLink:"MainLayout_exampleLink__qX1DA"}},4112:function(){},7663:function(e){!function(){var t={229:function(e){var t,n,a,r=e.exports={};function l(){throw Error("setTimeout has not been defined")}function o(){throw Error("clearTimeout has not been defined")}function i(e){if(t===setTimeout)return setTimeout(e,0);if((t===l||!t)&&setTimeout)return t=setTimeout,setTimeout(e,0);try{return t(e,0)}catch(a){try{return t.call(null,e,0)}catch(n){return t.call(this,e,0)}}}!function(){try{t="function"==typeof setTimeout?setTimeout:l}catch(e){t=l}try{n="function"==typeof clearTimeout?clearTimeout:o}catch(a){n=o}}();var s=[],u=!1,c=-1;function d(){u&&a&&(u=!1,a.length?s=a.concat(s):c=-1,s.length&&p())}function p(){if(!u){var e=i(d);u=!0;for(var t=s.length;t;){for(a=s,s=[];++c1)for(var n=1;n{});let r=a&&void 0!==a.locale?a.locale:e&&e.locale;f[t+"%"+n+(r?"%"+r:"")]=!0}let m=l.default.forwardRef(function(e,t){let n,a;let{href:m,as:b,children:_,prefetch:y,passHref:g,replace:v,shallow:x,scroll:w,locale:P,onClick:k,onMouseEnter:C,onTouchStart:j,legacyBehavior:G=!0!==Boolean(!0)}=e,L=r(e,["href","as","children","prefetch","passHref","replace","shallow","scroll","locale","onClick","onMouseEnter","onTouchStart","legacyBehavior"]);n=_,G&&("string"==typeof n||"number"==typeof n)&&(n=l.default.createElement("a",null,n));let T=!1!==y,M=l.default.useContext(s.RouterContext),E=l.default.useContext(u.AppRouterContext);E&&(M=E);let{href:O,as:R}=l.default.useMemo(()=>{let[e,t]=o.resolveHref(M,m,!0);return{href:e,as:b?o.resolveHref(M,b):t||e}},[M,m,b]),S=l.default.useRef(O),A=l.default.useRef(R);G&&(a=l.default.Children.only(n));let N=G?a&&"object"==typeof a&&a.ref:t,[U,D,B]=c.useIntersection({rootMargin:"200px"}),W=l.default.useCallback(e=>{(A.current!==R||S.current!==O)&&(B(),A.current=R,S.current=O),U(e),N&&("function"==typeof N?N(e):"object"==typeof N&&(N.current=e))},[R,N,O,B,U]);l.default.useEffect(()=>{let e=D&&T&&o.isLocalURL(O),t=void 0!==P?P:M&&M.locale,n=f[O+"%"+R+(t?"%"+t:"")];e&&!n&&h(M,O,R,{locale:t})},[R,O,D,P,T,M]);let I={ref:W,onClick(e){G||"function"!=typeof k||k(e),G&&a.props&&"function"==typeof a.props.onClick&&a.props.onClick(e),e.defaultPrevented||function(e,t,n,a,r,i,s,u,c,d){let{nodeName:p}=e.currentTarget,f="A"===p.toUpperCase();if(f&&(function(e){let{target:t}=e.currentTarget;return t&&"_self"!==t||e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||e.nativeEvent&&2===e.nativeEvent.which}(e)||!o.isLocalURL(n)))return;e.preventDefault();let h=()=>{"beforePopState"in t?t[r?"replace":"push"](n,a,{shallow:i,locale:u,scroll:s}):t[r?"replace":"push"](a||n,{forceOptimisticNavigation:!d})};c?l.default.startTransition(h):h()}(e,M,O,R,v,x,w,P,Boolean(E),T)},onMouseEnter(e){G||"function"!=typeof C||C(e),G&&a.props&&"function"==typeof a.props.onMouseEnter&&a.props.onMouseEnter(e),!(!T&&E)&&o.isLocalURL(O)&&h(M,O,R,{priority:!0})},onTouchStart(e){G||"function"!=typeof j||j(e),G&&a.props&&"function"==typeof a.props.onTouchStart&&a.props.onTouchStart(e),!(!T&&E)&&o.isLocalURL(O)&&h(M,O,R,{priority:!0})}};if(!G||g||"a"===a.type&&!("href"in a.props)){let Z=void 0!==P?P:M&&M.locale,H=M&&M.isLocaleDomain&&d.getDomainLocale(R,Z,M.locales,M.domainLocales);I.href=H||p.addBasePath(i.addLocale(R,Z,M&&M.defaultLocale))}return G?l.default.cloneElement(a,I):l.default.createElement("a",Object.assign({},L,I),n)});t.default=m,("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},9246:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.useIntersection=function(e){let{rootRef:t,rootMargin:n,disabled:s}=e,u=s||!l,[c,d]=a.useState(!1),[p,f]=a.useState(null);a.useEffect(()=>{if(l){if(!u&&!c&&p&&p.tagName){let e=function(e,t,n){let{id:a,observer:r,elements:l}=function(e){let t;let n={root:e.root||null,margin:e.rootMargin||""},a=i.find(e=>e.root===n.root&&e.margin===n.margin);if(a&&(t=o.get(a)))return t;let r=new Map,l=new IntersectionObserver(e=>{e.forEach(e=>{let t=r.get(e.target),n=e.isIntersecting||e.intersectionRatio>0;t&&n&&t(n)})},e);return t={id:n,observer:l,elements:r},i.push(n),o.set(n,t),t}(n);return l.set(e,t),r.observe(e),function(){if(l.delete(e),r.unobserve(e),0===l.size){r.disconnect(),o.delete(a);let t=i.findIndex(e=>e.root===a.root&&e.margin===a.margin);t>-1&&i.splice(t,1)}}}(p,e=>e&&d(e),{root:null==t?void 0:t.current,rootMargin:n});return e}}else if(!c){let a=r.requestIdleCallback(()=>d(!0));return()=>r.cancelIdleCallback(a)}},[p,u,n,t,c]);let h=a.useCallback(()=>{d(!1)},[]);return[f,c,h]};var a=n(7294),r=n(4686);let l="function"==typeof IntersectionObserver,o=new Map,i=[];("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},8245:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.TemplateContext=t.GlobalLayoutRouterContext=t.LayoutRouterContext=t.AppRouterContext=void 0;var a=(0,n(2648).Z)(n(7294));let r=a.default.createContext(null);t.AppRouterContext=r;let l=a.default.createContext(null);t.LayoutRouterContext=l;let o=a.default.createContext(null);t.GlobalLayoutRouterContext=o;let i=a.default.createContext(null);t.TemplateContext=i},7645:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){let n=l.default,r=(null==t?void 0:t.suspense)?{}:{loading(e){let{error:t,isLoading:n,pastDelay:a}=e;return null}};if(e instanceof Promise?r.loader=()=>e:"function"==typeof e?r.loader=e:"object"==typeof e&&(r=a({},r,e)),(r=a({},r,t)).suspense&&(delete r.ssr,delete r.loading),r.loadableGenerated&&delete(r=a({},r,r.loadableGenerated)).loadableGenerated,"boolean"==typeof r.ssr&&!r.suspense){if(!r.ssr)return delete r.ssr,o(n,r);delete r.ssr}return n(r)},t.noSSR=o;var a=n(6495).Z,r=n(2648).Z,l=(r(n(7294)),r(n(4588)));function o(e,t){return delete t.webpack,delete t.modules,e(t)}("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},3644:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.LoadableContext=void 0;var a=(0,n(2648).Z)(n(7294));let r=a.default.createContext(null);t.LoadableContext=r},4588:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var a=n(6495).Z,r=(0,n(2648).Z)(n(7294)),l=n(3644);let{useSyncExternalStore:o}=n(7294),i=[],s=[],u=!1;function c(e){let t=e(),n={loading:!0,loaded:null,error:null};return n.promise=t.then(e=>(n.loading=!1,n.loaded=e,e)).catch(e=>{throw n.loading=!1,n.error=e,e}),n}class d{promise(){return this._res.promise}retry(){this._clearTimeouts(),this._res=this._loadFn(this._opts.loader),this._state={pastDelay:!1,timedOut:!1};let{_res:e,_opts:t}=this;e.loading&&("number"==typeof t.delay&&(0===t.delay?this._state.pastDelay=!0:this._delay=setTimeout(()=>{this._update({pastDelay:!0})},t.delay)),"number"==typeof t.timeout&&(this._timeout=setTimeout(()=>{this._update({timedOut:!0})},t.timeout))),this._res.promise.then(()=>{this._update({}),this._clearTimeouts()}).catch(e=>{this._update({}),this._clearTimeouts()}),this._update({})}_update(e){this._state=a({},this._state,{error:this._res.error,loaded:this._res.loaded,loading:this._res.loading},e),this._callbacks.forEach(e=>e())}_clearTimeouts(){clearTimeout(this._delay),clearTimeout(this._timeout)}getCurrentValue(){return this._state}subscribe(e){return this._callbacks.add(e),()=>{this._callbacks.delete(e)}}constructor(e,t){this._loadFn=e,this._opts=t,this._callbacks=new Set,this._delay=null,this._timeout=null,this.retry()}}function p(e){return function(e,t){let n=Object.assign({loader:null,loading:null,delay:200,timeout:null,webpack:null,modules:null,suspense:!1},t);n.suspense&&(n.lazy=r.default.lazy(n.loader));let i=null;function c(){if(!i){let t=new d(e,n);i={getCurrentValue:t.getCurrentValue.bind(t),subscribe:t.subscribe.bind(t),retry:t.retry.bind(t),promise:t.promise.bind(t)}}return i.promise()}if(!u){let p=n.webpack?n.webpack():n.modules;p&&s.push(e=>{for(let t of p)if(-1!==e.indexOf(t))return c()})}function f(){c();let e=r.default.useContext(l.LoadableContext);e&&Array.isArray(n.modules)&&n.modules.forEach(t=>{e(t)})}let h=n.suspense?function(e,t){return f(),r.default.createElement(n.lazy,a({},e,{ref:t}))}:function(e,t){f();let a=o(i.subscribe,i.getCurrentValue,i.getCurrentValue);return r.default.useImperativeHandle(t,()=>({retry:i.retry}),[]),r.default.useMemo(()=>{var t;return a.loading||a.error?r.default.createElement(n.loading,{isLoading:a.loading,pastDelay:a.pastDelay,timedOut:a.timedOut,error:a.error,retry:i.retry}):a.loaded?r.default.createElement((t=a.loaded)&&t.__esModule?t.default:t,e):null},[e,a])};return h.preload=()=>c(),h.displayName="LoadableComponent",r.default.forwardRef(h)}(c,e)}function f(e,t){let n=[];for(;e.length;){let a=e.pop();n.push(a(t))}return Promise.all(n).then(()=>{if(e.length)return f(e,t)})}p.preloadAll=()=>new Promise((e,t)=>{f(i).then(e,t)}),p.preloadReady=function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];return new Promise(t=>{let n=()=>(u=!0,t());f(s,e).then(n,n)})},window.__NEXT_PRELOADREADY=p.preloadReady,t.default=p},3353:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return v}});var a=n(5893),r=n(9008),l=n.n(r),o=n(1664),i=n.n(o),s=n(1163),u=n(7294);n(4112);var c=n(6988),d=n.n(c),p=n(1958),f=n(6707),h=n.n(f);let m=e=>{let{category:t,onClickPageLink:n,router:r}=e,[l,o]=(0,u.useState)(!1),{title:i,pages:s,sampleNames:c}=t;return(0,a.jsxs)("div",{children:[(0,a.jsxs)("div",{className:h().sampleCategory,onMouseEnter(){o(!0)},onMouseLeave(){o(!1)},children:[(0,a.jsx)("h3",{style:{cursor:"pointer",width:"auto"},children:i}),(0,a.jsx)("p",{className:h().sampleCategoryDescription,"data-active":l,children:t.description})]}),c.map(e=>(0,a.jsx)(b,{slug:e,router:r,pages:s,onClick:()=>n()},"samples/".concat(e)))]})},b=e=>{let{router:t,slug:n,pages:r,onClick:l}=e,o="/samples/[slug]"===t.pathname&&t.query.slug===n?h().selected:void 0;return(0,a.jsx)("li",{className:o,onMouseOver(){r[n].render.preload()},children:(0,a.jsx)(i(),{href:"/samples/".concat(n),onClick:()=>l(),children:n})},n)};var _=n(3454);let y="WebGPU Samples",g=e=>{let{Component:t,pageProps:n}=e,r=(0,s.useRouter)(),[o,c]=(0,u.useState)(!1),f=(0,u.useMemo)(()=>(0,u.memo)(t),[t]),h=r.asPath.match(/(\?wgsl=[01])#(\S+)/);if(h){let b=h[2];return r.replace("/samples/".concat(b)),(0,a.jsx)(a.Fragment,{})}return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(l(),{children:[(0,a.jsx)("title",{children:y}),(0,a.jsx)("meta",{name:"description",content:"The WebGPU Samples are a set of samples demonstrating the use of the WebGPU API."}),(0,a.jsx)("meta",{name:"viewport",content:"width=device-width, initial-scale=1, shrink-to-fit=no"})]}),(0,a.jsxs)("div",{className:d().wrapper,children:[(0,a.jsxs)("nav",{className:"".concat(d().panel," ").concat(d().container),"data-expanded":o,children:[(0,a.jsxs)("h1",{children:[(0,a.jsx)(i(),{href:"/",children:y}),(0,a.jsx)("div",{className:d().expand,onClick(){c(!o)}})]}),(0,a.jsxs)("div",{className:d().panelContents,children:[(0,a.jsx)("a",{href:"https://github.com/".concat("webgpu/webgpu-samples"),children:"Github"}),(0,a.jsx)("hr",{}),p.pageCategories.map(e=>(0,a.jsx)("ul",{className:d().exampleList,children:(0,a.jsx)(m,{category:e,router:r,onClickPageLink:()=>c(!1)})},"/categories/".concat(e.title))),(0,a.jsx)("hr",{}),(0,a.jsx)("h3",{style:{marginBottom:"5px"},children:"Other Pages"}),(0,a.jsx)("ul",{style:{margin:"0px",paddingBottom:"20px"},className:d().exampleList,children:(0,a.jsx)("li",{children:(0,a.jsx)("a",{rel:"noreferrer",target:"_blank",href:"".concat(_.env.BASE_PATH||"","/workload-simulator.html"),children:"Workload Simulator ↗️"})})})]})]}),(0,a.jsx)(f,{...n})]})]})};var v=g},1958:function(e,t,n){"use strict";n.r(t),n.d(t,{__N_SSG:function(){return h},pageCategories:function(){return m}});var a=n(5893),r=n(5152),l=n.n(r);let o={helloTriangle:l()(()=>Promise.all([n.e(126),n.e(82),n.e(607)]).then(n.bind(n,6607)),{loadableGenerated:{webpack:()=>[6607]}}),helloTriangleMSAA:l()(()=>Promise.all([n.e(126),n.e(82),n.e(198)]).then(n.bind(n,1198)),{loadableGenerated:{webpack:()=>[1198]}}),rotatingCube:l()(()=>Promise.all([n.e(126),n.e(746),n.e(82),n.e(15)]).then(n.bind(n,9015)),{loadableGenerated:{webpack:()=>[9015]}}),twoCubes:l()(()=>Promise.all([n.e(126),n.e(746),n.e(82),n.e(710)]).then(n.bind(n,5710)),{loadableGenerated:{webpack:()=>[5710]}}),texturedCube:l()(()=>Promise.all([n.e(126),n.e(746),n.e(82),n.e(613)]).then(n.bind(n,613)),{loadableGenerated:{webpack:()=>[613]}}),samplerParameters:l()(()=>Promise.all([n.e(126),n.e(746),n.e(82),n.e(624)]).then(n.bind(n,8624)),{loadableGenerated:{webpack:()=>[8624]}}),instancedCube:l()(()=>Promise.all([n.e(126),n.e(746),n.e(82),n.e(621)]).then(n.bind(n,8621)),{loadableGenerated:{webpack:()=>[8621]}}),fractalCube:l()(()=>Promise.all([n.e(126),n.e(746),n.e(82),n.e(103)]).then(n.bind(n,5103)),{loadableGenerated:{webpack:()=>[5103]}}),cubemap:l()(()=>Promise.all([n.e(126),n.e(746),n.e(82),n.e(432)]).then(n.bind(n,1432)),{loadableGenerated:{webpack:()=>[1432]}})},i={reversedZ:l()(()=>Promise.all([n.e(126),n.e(746),n.e(82),n.e(588)]).then(n.bind(n,7502)),{loadableGenerated:{webpack:()=>[7502]}}),renderBundles:l()(()=>Promise.all([n.e(126),n.e(746),n.e(82),n.e(428)]).then(n.bind(n,3428)),{loadableGenerated:{webpack:()=>[3428]}})},s={cameras:l()(()=>Promise.all([n.e(126),n.e(746),n.e(82),n.e(878)]).then(n.bind(n,3878)),{loadableGenerated:{webpack:()=>[3878]}}),normalMap:l()(()=>Promise.all([n.e(126),n.e(746),n.e(82),n.e(118)]).then(n.bind(n,7118)),{loadableGenerated:{webpack:()=>[7118]}}),shadowMapping:l()(()=>Promise.all([n.e(126),n.e(746),n.e(667),n.e(82),n.e(342)]).then(n.bind(n,2342)),{loadableGenerated:{webpack:()=>[2342]}}),deferredRendering:l()(()=>Promise.all([n.e(126),n.e(746),n.e(667),n.e(82),n.e(704)]).then(n.bind(n,9704)),{loadableGenerated:{webpack:()=>[9704]}}),particles:l()(()=>Promise.all([n.e(126),n.e(746),n.e(82),n.e(167)]).then(n.bind(n,6167)),{loadableGenerated:{webpack:()=>[6167]}}),imageBlur:l()(()=>Promise.all([n.e(126),n.e(82),n.e(770)]).then(n.bind(n,1770)),{loadableGenerated:{webpack:()=>[1770]}}),cornell:l()(()=>Promise.all([n.e(126),n.e(746),n.e(82),n.e(874)]).then(n.bind(n,6874)),{loadableGenerated:{webpack:()=>[6874]}}),"A-buffer":l()(()=>Promise.all([n.e(126),n.e(746),n.e(82),n.e(73)]).then(n.bind(n,3073)),{loadableGenerated:{webpack:()=>[3073]}}),skinnedMesh:l()(()=>Promise.all([n.e(126),n.e(746),n.e(82),n.e(869)]).then(n.bind(n,6869)),{loadableGenerated:{webpack:()=>[6869]}})},u={computeBoids:l()(()=>Promise.all([n.e(126),n.e(82),n.e(752)]).then(n.bind(n,2752)),{loadableGenerated:{webpack:()=>[2752]}}),gameOfLife:l()(()=>Promise.all([n.e(126),n.e(82),n.e(391)]).then(n.bind(n,7391)),{loadableGenerated:{webpack:()=>[7391]}}),bitonicSort:l()(()=>Promise.all([n.e(126),n.e(82),n.e(0)]).then(n.bind(n,2e3)),{loadableGenerated:{webpack:()=>[2e3]}})},c={resizeCanvas:l()(()=>Promise.all([n.e(126),n.e(82),n.e(565)]).then(n.bind(n,8565)),{loadableGenerated:{webpack:()=>[8565]}}),videoUploading:l()(()=>Promise.all([n.e(126),n.e(82),n.e(305)]).then(n.bind(n,3305)),{loadableGenerated:{webpack:()=>[3305]}}),worker:l()(()=>Promise.all([n.e(126),n.e(82),n.e(78)]).then(n.bind(n,6078)),{loadableGenerated:{webpack:()=>[6078]}})},d={animometer:l()(()=>Promise.all([n.e(126),n.e(82),n.e(841)]).then(n.bind(n,841)),{loadableGenerated:{webpack:()=>[841]}})},p={...o,...i,...s,...u,...c,...d},f=(e,t,n)=>({title:e,description:n,pages:t,sampleNames:Object.keys(t)});var h=!0;let m=[f("Basic Graphics",o,"Basic rendering functionality implemented with the WebGPU API."),f("WebGPU Features",i,"Highlights of important WebGPU features."),f("GPGPU Demos",u,"Visualizations of parallel GPU compute operations."),f("Graphics Techniques",s,"A collection of graphics techniques implemented with WebGPU."),f("Web Platform Integration",c,"Demos integrating WebGPU with other functionalities of the web platform."),f("Benchmarks",d,"WebGPU Performance Benchmarks")];t.default=function(e){let{slug:t}=e,n=p[t];return(0,a.jsx)(n,{})}},6707:function(e){e.exports={sampleCategory:"SampleCategory_sampleCategory__n_wZK",sampleCategoryDescription:"SampleCategory_sampleCategoryDescription__3tJee",selected:"SampleCategory_selected__R_g7c"}},6988:function(e){e.exports={container:"MainLayout_container__l_Vkn",wrapper:"MainLayout_wrapper__eI_HE",panel:"MainLayout_panel__GdjKj",exampleList:"MainLayout_exampleList__FHCmd",expand:"MainLayout_expand__FEWWW",panelContents:"MainLayout_panelContents__w1BWs",exampleLink:"MainLayout_exampleLink__qX1DA"}},4112:function(){},7663:function(e){!function(){var t={229:function(e){var t,n,a,r=e.exports={};function l(){throw Error("setTimeout has not been defined")}function o(){throw Error("clearTimeout has not been defined")}function i(e){if(t===setTimeout)return setTimeout(e,0);if((t===l||!t)&&setTimeout)return t=setTimeout,setTimeout(e,0);try{return t(e,0)}catch(a){try{return t.call(null,e,0)}catch(n){return t.call(this,e,0)}}}!function(){try{t="function"==typeof setTimeout?setTimeout:l}catch(e){t=l}try{n="function"==typeof clearTimeout?clearTimeout:o}catch(a){n=o}}();var s=[],u=!1,c=-1;function d(){u&&a&&(u=!1,a.length?s=a.concat(s):c=-1,s.length&&p())}function p(){if(!u){var e=i(d);u=!0;for(var t=s.length;t;){for(a=s,s=[];++c1)for(var n=1;n0&&e[f-1][2]>a;f--)e[f]=e[f-1];e[f]=[r,n,a];return}for(var c=1/0,f=0;f=a&&Object.keys(l.O).every(function(e){return l.O[e](r[i])})?r.splice(i--,1):(o=!1,a0&&e[f-1][2]>n;f--)e[f]=e[f-1];e[f]=[r,a,n];return}for(var c=1/0,f=0;f=n&&Object.keys(l.O).every(function(e){return l.O[e](r[i])})?r.splice(i--,1):(o=!1,nWebGPU Samples

The WebGPU Samples are a set of samples and demos demonstrating the use of the WebGPU API. Please see the current implementation status and how to run WebGPU in your browser at webgpu.io.

\ No newline at end of file +WebGPU Samples

The WebGPU Samples are a set of samples and demos demonstrating the use of the WebGPU API. Please see the current implementation status and how to run WebGPU in your browser at webgpu.io.

\ No newline at end of file diff --git a/samples/A-buffer.html b/samples/A-buffer.html index 59912221..b00c93bc 100644 --- a/samples/A-buffer.html +++ b/samples/A-buffer.html @@ -10,6 +10,6 @@ } A-Buffer - WebGPU Samples

A-Buffer

See it on Github!

Demonstrates order independent transparency using a per-pixel + limiting memory usage (when required)."/>

A-Buffer

See it on Github!

Demonstrates order independent transparency using a per-pixel linked-list of translucent fragments. Provides a choice for - limiting memory usage (when required).

\ No newline at end of file + limiting memory usage (when required).

\ No newline at end of file diff --git a/samples/animometer.html b/samples/animometer.html index 251daede..698ef876 100644 --- a/samples/animometer.html +++ b/samples/animometer.html @@ -8,4 +8,4 @@ height: auto !important; overflow: visible !important; } - Animometer - WebGPU Samples

Animometer

See it on Github!

A WebGPU port of the Animometer MotionMark benchmark.

\ No newline at end of file + Animometer - WebGPU Samples

Animometer

See it on Github!

A WebGPU port of the Animometer MotionMark benchmark.

\ No newline at end of file diff --git a/samples/bitonicSort.html b/samples/bitonicSort.html index 424e8260..c7fd79ac 100644 --- a/samples/bitonicSort.html +++ b/samples/bitonicSort.html @@ -8,4 +8,4 @@ height: auto !important; overflow: visible !important; } - Bitonic Sort - WebGPU Samples

Bitonic Sort

See it on Github!

A naive bitonic sort algorithm executed on the GPU, based on tgfrerer's implementation at poniesandlight.co.uk/reflect/bitonic_merge_sort/. Each dispatch of the bitonic sort shader dispatches a workgroup containing elements/2 invocations. The GUI's Execution Information folder contains information about the sort's current state. The visualizer displays the sort's results as colored cells sorted from brightest to darkest.

\ No newline at end of file + Bitonic Sort - WebGPU Samples

Bitonic Sort

See it on Github!

A naive bitonic sort algorithm executed on the GPU, based on tgfrerer's implementation at poniesandlight.co.uk/reflect/bitonic_merge_sort/. Each dispatch of the bitonic sort shader dispatches a workgroup containing elements/2 invocations. The GUI's Execution Information folder contains information about the sort's current state. The visualizer displays the sort's results as colored cells sorted from brightest to darkest.

\ No newline at end of file diff --git a/samples/cameras.html b/samples/cameras.html index 47dc539b..32b235df 100644 --- a/samples/cameras.html +++ b/samples/cameras.html @@ -8,4 +8,4 @@ height: auto !important; overflow: visible !important; } - Cameras - WebGPU Samples

Cameras

See it on Github!

This example provides example camera implementations

\ No newline at end of file + Cameras - WebGPU Samples

Cameras

See it on Github!

This example provides example camera implementations

\ No newline at end of file diff --git a/samples/computeBoids.html b/samples/computeBoids.html index a6d8f9e4..2a3f154f 100644 --- a/samples/computeBoids.html +++ b/samples/computeBoids.html @@ -8,4 +8,4 @@ height: auto !important; overflow: visible !important; } - Compute Boids - WebGPU Samples

Compute Boids

See it on Github!

A GPU compute particle simulation that mimics the flocking behavior of birds. A compute shader updates two ping-pong buffers which store particle data. The data is used to draw instanced particles.

\ No newline at end of file + Compute Boids - WebGPU Samples

Compute Boids

See it on Github!

A GPU compute particle simulation that mimics the flocking behavior of birds. A compute shader updates two ping-pong buffers which store particle data. The data is used to draw instanced particles.

\ No newline at end of file diff --git a/samples/cornell.html b/samples/cornell.html index 29738e85..522dd771 100644 --- a/samples/cornell.html +++ b/samples/cornell.html @@ -8,4 +8,4 @@ height: auto !important; overflow: visible !important; } - Cornell box - WebGPU Samples

Cornell box

See it on Github!

A classic Cornell box, using a lightmap generated using software ray-tracing.

\ No newline at end of file + Cornell box - WebGPU Samples

Cornell box

See it on Github!

A classic Cornell box, using a lightmap generated using software ray-tracing.

\ No newline at end of file diff --git a/samples/cubemap.html b/samples/cubemap.html index c74d3f44..274a4f0e 100644 --- a/samples/cubemap.html +++ b/samples/cubemap.html @@ -8,4 +8,4 @@ height: auto !important; overflow: visible !important; } - Cubemap - WebGPU Samples

Cubemap

See it on Github!

This example shows how to render and sample from a cubemap texture.

\ No newline at end of file + Cubemap - WebGPU Samples

Cubemap

See it on Github!

This example shows how to render and sample from a cubemap texture.

\ No newline at end of file diff --git a/samples/deferredRendering.html b/samples/deferredRendering.html index 72be27d2..351674cd 100644 --- a/samples/deferredRendering.html +++ b/samples/deferredRendering.html @@ -16,7 +16,7 @@ We also update light position in a compute shader, where further operations like tile/cluster culling could happen. The debug view shows the depth buffer on the left (flipped and scaled a bit to make it more visible), the normal G buffer in the middle, and the albedo G-buffer on the right side of the screen. - "/>

Deferred Rendering

See it on Github!

This example shows how to do deferred rendering with webgpu. + "/>

Deferred Rendering

See it on Github!

This example shows how to do deferred rendering with webgpu. Render geometry info to multiple targets in the gBuffers in the first pass. In this sample we have 2 gBuffers for normals and albedo, along with a depth texture. And then do the lighting in a second pass with per fragment data read from gBuffers so it's independent of scene complexity. @@ -24,4 +24,4 @@ We also update light position in a compute shader, where further operations like tile/cluster culling could happen. The debug view shows the depth buffer on the left (flipped and scaled a bit to make it more visible), the normal G buffer in the middle, and the albedo G-buffer on the right side of the screen. -

\ No newline at end of file +

\ No newline at end of file diff --git a/samples/fractalCube.html b/samples/fractalCube.html index 39182e60..9fefed76 100644 --- a/samples/fractalCube.html +++ b/samples/fractalCube.html @@ -8,4 +8,4 @@ height: auto !important; overflow: visible !important; } - Fractal Cube - WebGPU Samples

Fractal Cube

See it on Github!

This example uses the previous frame's rendering result as the source texture for the next frame.

\ No newline at end of file + Fractal Cube - WebGPU Samples

Fractal Cube

See it on Github!

This example uses the previous frame's rendering result as the source texture for the next frame.

\ No newline at end of file diff --git a/samples/gameOfLife.html b/samples/gameOfLife.html index 0894a365..44c20623 100644 --- a/samples/gameOfLife.html +++ b/samples/gameOfLife.html @@ -8,4 +8,4 @@ height: auto !important; overflow: visible !important; } - Conway's Game of Life - WebGPU Samples

Conway's Game of Life

See it on Github!

This example shows how to make Conway's game of life. First, use compute shader to calculate how cells grow or die. Then use render pipeline to draw cells by using instance mesh.

\ No newline at end of file + Conway's Game of Life - WebGPU Samples

Conway's Game of Life

See it on Github!

This example shows how to make Conway's game of life. First, use compute shader to calculate how cells grow or die. Then use render pipeline to draw cells by using instance mesh.

\ No newline at end of file diff --git a/samples/helloTriangle.html b/samples/helloTriangle.html index 1eff7a11..f42f4d4f 100644 --- a/samples/helloTriangle.html +++ b/samples/helloTriangle.html @@ -8,4 +8,4 @@ height: auto !important; overflow: visible !important; } - Hello Triangle - WebGPU Samples

Hello Triangle

See it on Github!

Shows rendering a basic triangle.

\ No newline at end of file + Hello Triangle - WebGPU Samples

Hello Triangle

See it on Github!

Shows rendering a basic triangle.

\ No newline at end of file diff --git a/samples/helloTriangleMSAA.html b/samples/helloTriangleMSAA.html index 2ba933bb..6abc091b 100644 --- a/samples/helloTriangleMSAA.html +++ b/samples/helloTriangleMSAA.html @@ -8,4 +8,4 @@ height: auto !important; overflow: visible !important; } - Hello Triangle MSAA - WebGPU Samples

Hello Triangle MSAA

See it on Github!

Shows multisampled rendering a basic triangle.

\ No newline at end of file + Hello Triangle MSAA - WebGPU Samples

Hello Triangle MSAA

See it on Github!

Shows multisampled rendering a basic triangle.

\ No newline at end of file diff --git a/samples/imageBlur.html b/samples/imageBlur.html index 77ba21f8..85eb6833 100644 --- a/samples/imageBlur.html +++ b/samples/imageBlur.html @@ -8,4 +8,4 @@ height: auto !important; overflow: visible !important; } - Image Blur - WebGPU Samples

Image Blur

See it on Github!

This example shows how to blur an image using a WebGPU compute shader.

\ No newline at end of file + Image Blur - WebGPU Samples

Image Blur

See it on Github!

This example shows how to blur an image using a WebGPU compute shader.

\ No newline at end of file diff --git a/samples/instancedCube.html b/samples/instancedCube.html index 1c389355..5fe839de 100644 --- a/samples/instancedCube.html +++ b/samples/instancedCube.html @@ -8,4 +8,4 @@ height: auto !important; overflow: visible !important; } - Instanced Cube - WebGPU Samples

Instanced Cube

See it on Github!

This example shows the use of instancing.

\ No newline at end of file + Instanced Cube - WebGPU Samples

Instanced Cube

See it on Github!

This example shows the use of instancing.

\ No newline at end of file diff --git a/samples/normalMap.html b/samples/normalMap.html index 1ae83d85..23097f77 100644 --- a/samples/normalMap.html +++ b/samples/normalMap.html @@ -8,4 +8,4 @@ height: auto !important; overflow: visible !important; } - Normal Mapping - WebGPU Samples

Normal Mapping

See it on Github!

This example demonstrates multiple different methods that employ fragment shaders to achieve additional perceptual depth on the surface of a cube mesh. Demonstrated methods include normal mapping, parallax mapping, and steep parallax mapping.

\ No newline at end of file + Normal Mapping - WebGPU Samples

Normal Mapping

See it on Github!

This example demonstrates multiple different methods that employ fragment shaders to achieve additional perceptual depth on the surface of a cube mesh. Demonstrated methods include normal mapping, parallax mapping, and steep parallax mapping.

\ No newline at end of file diff --git a/samples/particles.html b/samples/particles.html index 6f46eb5a..cca64a72 100644 --- a/samples/particles.html +++ b/samples/particles.html @@ -8,4 +8,4 @@ height: auto !important; overflow: visible !important; } - Particles - WebGPU Samples

Particles

See it on Github!

This example demonstrates rendering of particles simulated with compute shaders.

\ No newline at end of file + Particles - WebGPU Samples

Particles

See it on Github!

This example demonstrates rendering of particles simulated with compute shaders.

\ No newline at end of file diff --git a/samples/renderBundles.html b/samples/renderBundles.html index cae31b85..67011b89 100644 --- a/samples/renderBundles.html +++ b/samples/renderBundles.html @@ -11,7 +11,7 @@ Render Bundles - WebGPU Samples

Render Bundles

See it on Github!

This example shows how to use render bundles. It renders a large number of + of instancing to reduce draw overhead.)"/>

Render Bundles

See it on Github!

This example shows how to use render bundles. It renders a large number of meshes individually as a proxy for a more complex scene in order to demonstrate the reduction in JavaScript time spent to issue render commands. (Typically a scene like this would make use - of instancing to reduce draw overhead.)

\ No newline at end of file + of instancing to reduce draw overhead.)

\ No newline at end of file diff --git a/samples/resizeCanvas.html b/samples/resizeCanvas.html index 59c4c5be..d24fb5fb 100644 --- a/samples/resizeCanvas.html +++ b/samples/resizeCanvas.html @@ -8,4 +8,4 @@ height: auto !important; overflow: visible !important; } - Resize Canvas - WebGPU Samples

Resize Canvas

See it on Github!

Shows multisampled rendering a basic triangle on a dynamically sized canvas.

\ No newline at end of file + Resize Canvas - WebGPU Samples

Resize Canvas

See it on Github!

Shows multisampled rendering a basic triangle on a dynamically sized canvas.

\ No newline at end of file diff --git a/samples/reversedZ.html b/samples/reversedZ.html index f154a2fb..0efc8f5e 100644 --- a/samples/reversedZ.html +++ b/samples/reversedZ.html @@ -17,7 +17,7 @@ Related reading: https://developer.nvidia.com/content/depth-precision-visualized https://web.archive.org/web/20220724174000/https://thxforthefish.com/posts/reverse_z/ - "/>

Reversed Z

See it on Github!

This example shows the use of reversed z technique for better utilization of depth buffer precision. + "/>

Reversed Z

See it on Github!

This example shows the use of reversed z technique for better utilization of depth buffer precision. The left column uses regular method, while the right one uses reversed z technique. Both are using depth32float as their depth buffer format. A set of red and green planes are positioned very close to each other. Higher sets are placed further from camera (and are scaled for better visual purpose). @@ -26,4 +26,4 @@ Related reading: https://developer.nvidia.com/content/depth-precision-visualized https://web.archive.org/web/20220724174000/https://thxforthefish.com/posts/reverse_z/ -

\ No newline at end of file +

\ No newline at end of file diff --git a/samples/rotatingCube.html b/samples/rotatingCube.html index 0662317e..ace50808 100644 --- a/samples/rotatingCube.html +++ b/samples/rotatingCube.html @@ -8,4 +8,4 @@ height: auto !important; overflow: visible !important; } - Rotating Cube - WebGPU Samples

Rotating Cube

See it on Github!

This example shows how to upload uniform data every frame to render a rotating object.

\ No newline at end of file + Rotating Cube - WebGPU Samples

Rotating Cube

See it on Github!

This example shows how to upload uniform data every frame to render a rotating object.

\ No newline at end of file diff --git a/samples/samplerParameters.html b/samples/samplerParameters.html index f9dcd19b..bad136fd 100644 --- a/samples/samplerParameters.html +++ b/samples/samplerParameters.html @@ -8,4 +8,4 @@ height: auto !important; overflow: visible !important; } - Sampler Parameters - WebGPU Samples

Sampler Parameters

See it on Github!

Visualizes what all the sampler parameters do. Shows a textured plane at various scales (rotated, head-on, in perspective, and in vanishing perspective). The bottom-right view shows the raw contents of the 4 mipmap levels of the test texture (16x16, 8x8, 4x4, and 2x2).

\ No newline at end of file + Sampler Parameters - WebGPU Samples

Sampler Parameters

See it on Github!

Visualizes what all the sampler parameters do. Shows a textured plane at various scales (rotated, head-on, in perspective, and in vanishing perspective). The bottom-right view shows the raw contents of the 4 mipmap levels of the test texture (16x16, 8x8, 4x4, and 2x2).

\ No newline at end of file diff --git a/samples/shadowMapping.html b/samples/shadowMapping.html index aeb4e649..41bc69da 100644 --- a/samples/shadowMapping.html +++ b/samples/shadowMapping.html @@ -8,4 +8,4 @@ height: auto !important; overflow: visible !important; } - Shadow Mapping - WebGPU Samples

Shadow Mapping

See it on Github!

This example shows how to sample from a depth texture to render shadows.

\ No newline at end of file + Shadow Mapping - WebGPU Samples

Shadow Mapping

See it on Github!

This example shows how to sample from a depth texture to render shadows.

\ No newline at end of file diff --git a/samples/skinnedMesh.html b/samples/skinnedMesh.html index c43587f6..1f835474 100644 --- a/samples/skinnedMesh.html +++ b/samples/skinnedMesh.html @@ -8,4 +8,4 @@ height: auto !important; overflow: visible !important; } - Skinned Mesh - WebGPU Samples

Skinned Mesh

See it on Github!

A demonstration of basic gltf loading and mesh skinning, ported from https://webgl2fundamentals.org/webgl/lessons/webgl-skinning.html. Mesh data, per vertex attributes, and skin inverseBindMatrices are taken from the json parsed from the binary output of the .glb file. Animations are generated progrmatically, with animated joint matrices updated and passed to shaders per frame via uniform buffers.

\ No newline at end of file + Skinned Mesh - WebGPU Samples

Skinned Mesh

See it on Github!

A demonstration of basic gltf loading and mesh skinning, ported from https://webgl2fundamentals.org/webgl/lessons/webgl-skinning.html. Mesh data, per vertex attributes, and skin inverseBindMatrices are taken from the json parsed from the binary output of the .glb file. Animations are generated progrmatically, with animated joint matrices updated and passed to shaders per frame via uniform buffers.

\ No newline at end of file diff --git a/samples/texturedCube.html b/samples/texturedCube.html index 6ef60fdf..1efde2ec 100644 --- a/samples/texturedCube.html +++ b/samples/texturedCube.html @@ -8,4 +8,4 @@ height: auto !important; overflow: visible !important; } - Textured Cube - WebGPU Samples

Textured Cube

See it on Github!

This example shows how to bind and sample textures.

\ No newline at end of file + Textured Cube - WebGPU Samples

Textured Cube

See it on Github!

This example shows how to bind and sample textures.

\ No newline at end of file diff --git a/samples/twoCubes.html b/samples/twoCubes.html index 40f5644d..1d7bc7a7 100644 --- a/samples/twoCubes.html +++ b/samples/twoCubes.html @@ -8,4 +8,4 @@ height: auto !important; overflow: visible !important; } - Two Cubes - WebGPU Samples

Two Cubes

See it on Github!

This example shows some of the alignment requirements involved when updating and binding multiple slices of a uniform buffer. It renders two rotating cubes which have transform matrices at different offsets in a uniform buffer.

\ No newline at end of file + Two Cubes - WebGPU Samples

Two Cubes

See it on Github!

This example shows some of the alignment requirements involved when updating and binding multiple slices of a uniform buffer. It renders two rotating cubes which have transform matrices at different offsets in a uniform buffer.

\ No newline at end of file diff --git a/samples/videoUploading.html b/samples/videoUploading.html index a1a0c5bc..5e965703 100644 --- a/samples/videoUploading.html +++ b/samples/videoUploading.html @@ -8,4 +8,4 @@ height: auto !important; overflow: visible !important; } - Video Uploading - WebGPU Samples

Video Uploading

See it on Github!

This example shows how to upload video frame to WebGPU.

\ No newline at end of file + Video Uploading - WebGPU Samples

Video Uploading

See it on Github!

This example shows how to upload video frame to WebGPU.

\ No newline at end of file diff --git a/samples/videoUploadingWebCodecs.html b/samples/videoUploadingWebCodecs.html deleted file mode 100644 index e465b9a3..00000000 --- a/samples/videoUploadingWebCodecs.html +++ /dev/null @@ -1,11 +0,0 @@ -Video Uploading with WebCodecs - WebGPU Samples

Video Uploading with WebCodecs

See it on Github!

This example shows how to upload a WebCodecs VideoFrame to WebGPU.

\ No newline at end of file diff --git a/samples/worker.html b/samples/worker.html index 53a8abff..3275395b 100644 --- a/samples/worker.html +++ b/samples/worker.html @@ -10,6 +10,6 @@ } WebGPU in a Worker - WebGPU Samples

WebGPU in a Worker

See it on Github!

This example shows one method of using WebGPU in a web worker and presenting to + which is then transferred to the worker where all the WebGPU calls are made."/>

WebGPU in a Worker

See it on Github!

This example shows one method of using WebGPU in a web worker and presenting to the main thread. It uses canvas.transferControlToOffscreen() to produce an offscreen canvas - which is then transferred to the worker where all the WebGPU calls are made.

\ No newline at end of file + which is then transferred to the worker where all the WebGPU calls are made.

\ No newline at end of file