diff --git a/404.html b/404.html index 41788b3d..4158d11f 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/Y-eyYIW18BZZ2uUdvf2AX/samples/A-buffer.json b/_next/data/_7w7F2-b0Jd17AMGS_PtB/samples/A-buffer.json similarity index 100% rename from _next/data/Y-eyYIW18BZZ2uUdvf2AX/samples/A-buffer.json rename to _next/data/_7w7F2-b0Jd17AMGS_PtB/samples/A-buffer.json diff --git a/_next/data/Y-eyYIW18BZZ2uUdvf2AX/samples/animometer.json b/_next/data/_7w7F2-b0Jd17AMGS_PtB/samples/animometer.json similarity index 100% rename from _next/data/Y-eyYIW18BZZ2uUdvf2AX/samples/animometer.json rename to _next/data/_7w7F2-b0Jd17AMGS_PtB/samples/animometer.json diff --git a/_next/data/Y-eyYIW18BZZ2uUdvf2AX/samples/bitonicSort.json b/_next/data/_7w7F2-b0Jd17AMGS_PtB/samples/bitonicSort.json similarity index 100% rename from _next/data/Y-eyYIW18BZZ2uUdvf2AX/samples/bitonicSort.json rename to _next/data/_7w7F2-b0Jd17AMGS_PtB/samples/bitonicSort.json diff --git a/_next/data/Y-eyYIW18BZZ2uUdvf2AX/samples/cameras.json b/_next/data/_7w7F2-b0Jd17AMGS_PtB/samples/cameras.json similarity index 100% rename from _next/data/Y-eyYIW18BZZ2uUdvf2AX/samples/cameras.json rename to _next/data/_7w7F2-b0Jd17AMGS_PtB/samples/cameras.json diff --git a/_next/data/Y-eyYIW18BZZ2uUdvf2AX/samples/computeBoids.json b/_next/data/_7w7F2-b0Jd17AMGS_PtB/samples/computeBoids.json similarity index 100% rename from _next/data/Y-eyYIW18BZZ2uUdvf2AX/samples/computeBoids.json rename to _next/data/_7w7F2-b0Jd17AMGS_PtB/samples/computeBoids.json diff --git a/_next/data/Y-eyYIW18BZZ2uUdvf2AX/samples/cornell.json b/_next/data/_7w7F2-b0Jd17AMGS_PtB/samples/cornell.json similarity index 100% rename from _next/data/Y-eyYIW18BZZ2uUdvf2AX/samples/cornell.json rename to _next/data/_7w7F2-b0Jd17AMGS_PtB/samples/cornell.json diff --git a/_next/data/Y-eyYIW18BZZ2uUdvf2AX/samples/cubemap.json b/_next/data/_7w7F2-b0Jd17AMGS_PtB/samples/cubemap.json similarity index 100% rename from _next/data/Y-eyYIW18BZZ2uUdvf2AX/samples/cubemap.json rename to _next/data/_7w7F2-b0Jd17AMGS_PtB/samples/cubemap.json diff --git a/_next/data/Y-eyYIW18BZZ2uUdvf2AX/samples/deferredRendering.json b/_next/data/_7w7F2-b0Jd17AMGS_PtB/samples/deferredRendering.json similarity index 100% rename from _next/data/Y-eyYIW18BZZ2uUdvf2AX/samples/deferredRendering.json rename to _next/data/_7w7F2-b0Jd17AMGS_PtB/samples/deferredRendering.json diff --git a/_next/data/Y-eyYIW18BZZ2uUdvf2AX/samples/fractalCube.json b/_next/data/_7w7F2-b0Jd17AMGS_PtB/samples/fractalCube.json similarity index 100% rename from _next/data/Y-eyYIW18BZZ2uUdvf2AX/samples/fractalCube.json rename to _next/data/_7w7F2-b0Jd17AMGS_PtB/samples/fractalCube.json diff --git a/_next/data/Y-eyYIW18BZZ2uUdvf2AX/samples/gameOfLife.json b/_next/data/_7w7F2-b0Jd17AMGS_PtB/samples/gameOfLife.json similarity index 100% rename from _next/data/Y-eyYIW18BZZ2uUdvf2AX/samples/gameOfLife.json rename to _next/data/_7w7F2-b0Jd17AMGS_PtB/samples/gameOfLife.json diff --git a/_next/data/Y-eyYIW18BZZ2uUdvf2AX/samples/helloTriangle.json b/_next/data/_7w7F2-b0Jd17AMGS_PtB/samples/helloTriangle.json similarity index 100% rename from _next/data/Y-eyYIW18BZZ2uUdvf2AX/samples/helloTriangle.json rename to _next/data/_7w7F2-b0Jd17AMGS_PtB/samples/helloTriangle.json diff --git a/_next/data/Y-eyYIW18BZZ2uUdvf2AX/samples/helloTriangleMSAA.json b/_next/data/_7w7F2-b0Jd17AMGS_PtB/samples/helloTriangleMSAA.json similarity index 100% rename from _next/data/Y-eyYIW18BZZ2uUdvf2AX/samples/helloTriangleMSAA.json rename to _next/data/_7w7F2-b0Jd17AMGS_PtB/samples/helloTriangleMSAA.json diff --git a/_next/data/Y-eyYIW18BZZ2uUdvf2AX/samples/imageBlur.json b/_next/data/_7w7F2-b0Jd17AMGS_PtB/samples/imageBlur.json similarity index 100% rename from _next/data/Y-eyYIW18BZZ2uUdvf2AX/samples/imageBlur.json rename to _next/data/_7w7F2-b0Jd17AMGS_PtB/samples/imageBlur.json diff --git a/_next/data/Y-eyYIW18BZZ2uUdvf2AX/samples/instancedCube.json b/_next/data/_7w7F2-b0Jd17AMGS_PtB/samples/instancedCube.json similarity index 100% rename from _next/data/Y-eyYIW18BZZ2uUdvf2AX/samples/instancedCube.json rename to _next/data/_7w7F2-b0Jd17AMGS_PtB/samples/instancedCube.json diff --git a/_next/data/Y-eyYIW18BZZ2uUdvf2AX/samples/normalMap.json b/_next/data/_7w7F2-b0Jd17AMGS_PtB/samples/normalMap.json similarity index 100% rename from _next/data/Y-eyYIW18BZZ2uUdvf2AX/samples/normalMap.json rename to _next/data/_7w7F2-b0Jd17AMGS_PtB/samples/normalMap.json diff --git a/_next/data/Y-eyYIW18BZZ2uUdvf2AX/samples/particles.json b/_next/data/_7w7F2-b0Jd17AMGS_PtB/samples/particles.json similarity index 100% rename from _next/data/Y-eyYIW18BZZ2uUdvf2AX/samples/particles.json rename to _next/data/_7w7F2-b0Jd17AMGS_PtB/samples/particles.json diff --git a/_next/data/Y-eyYIW18BZZ2uUdvf2AX/samples/renderBundles.json b/_next/data/_7w7F2-b0Jd17AMGS_PtB/samples/renderBundles.json similarity index 100% rename from _next/data/Y-eyYIW18BZZ2uUdvf2AX/samples/renderBundles.json rename to _next/data/_7w7F2-b0Jd17AMGS_PtB/samples/renderBundles.json diff --git a/_next/data/Y-eyYIW18BZZ2uUdvf2AX/samples/resizeCanvas.json b/_next/data/_7w7F2-b0Jd17AMGS_PtB/samples/resizeCanvas.json similarity index 100% rename from _next/data/Y-eyYIW18BZZ2uUdvf2AX/samples/resizeCanvas.json rename to _next/data/_7w7F2-b0Jd17AMGS_PtB/samples/resizeCanvas.json diff --git a/_next/data/Y-eyYIW18BZZ2uUdvf2AX/samples/reversedZ.json b/_next/data/_7w7F2-b0Jd17AMGS_PtB/samples/reversedZ.json similarity index 100% rename from _next/data/Y-eyYIW18BZZ2uUdvf2AX/samples/reversedZ.json rename to _next/data/_7w7F2-b0Jd17AMGS_PtB/samples/reversedZ.json diff --git a/_next/data/Y-eyYIW18BZZ2uUdvf2AX/samples/rotatingCube.json b/_next/data/_7w7F2-b0Jd17AMGS_PtB/samples/rotatingCube.json similarity index 100% rename from _next/data/Y-eyYIW18BZZ2uUdvf2AX/samples/rotatingCube.json rename to _next/data/_7w7F2-b0Jd17AMGS_PtB/samples/rotatingCube.json diff --git a/_next/data/Y-eyYIW18BZZ2uUdvf2AX/samples/samplerParameters.json b/_next/data/_7w7F2-b0Jd17AMGS_PtB/samples/samplerParameters.json similarity index 100% rename from _next/data/Y-eyYIW18BZZ2uUdvf2AX/samples/samplerParameters.json rename to _next/data/_7w7F2-b0Jd17AMGS_PtB/samples/samplerParameters.json diff --git a/_next/data/Y-eyYIW18BZZ2uUdvf2AX/samples/shadowMapping.json b/_next/data/_7w7F2-b0Jd17AMGS_PtB/samples/shadowMapping.json similarity index 100% rename from _next/data/Y-eyYIW18BZZ2uUdvf2AX/samples/shadowMapping.json rename to _next/data/_7w7F2-b0Jd17AMGS_PtB/samples/shadowMapping.json diff --git a/_next/data/Y-eyYIW18BZZ2uUdvf2AX/samples/texturedCube.json b/_next/data/_7w7F2-b0Jd17AMGS_PtB/samples/texturedCube.json similarity index 100% rename from _next/data/Y-eyYIW18BZZ2uUdvf2AX/samples/texturedCube.json rename to _next/data/_7w7F2-b0Jd17AMGS_PtB/samples/texturedCube.json diff --git a/_next/data/Y-eyYIW18BZZ2uUdvf2AX/samples/twoCubes.json b/_next/data/_7w7F2-b0Jd17AMGS_PtB/samples/twoCubes.json similarity index 100% rename from _next/data/Y-eyYIW18BZZ2uUdvf2AX/samples/twoCubes.json rename to _next/data/_7w7F2-b0Jd17AMGS_PtB/samples/twoCubes.json diff --git a/_next/data/Y-eyYIW18BZZ2uUdvf2AX/samples/videoUploading.json b/_next/data/_7w7F2-b0Jd17AMGS_PtB/samples/videoUploading.json similarity index 100% rename from _next/data/Y-eyYIW18BZZ2uUdvf2AX/samples/videoUploading.json rename to _next/data/_7w7F2-b0Jd17AMGS_PtB/samples/videoUploading.json diff --git a/_next/data/Y-eyYIW18BZZ2uUdvf2AX/samples/videoUploadingWebCodecs.json b/_next/data/_7w7F2-b0Jd17AMGS_PtB/samples/videoUploadingWebCodecs.json similarity index 100% rename from _next/data/Y-eyYIW18BZZ2uUdvf2AX/samples/videoUploadingWebCodecs.json rename to _next/data/_7w7F2-b0Jd17AMGS_PtB/samples/videoUploadingWebCodecs.json diff --git a/_next/data/Y-eyYIW18BZZ2uUdvf2AX/samples/worker.json b/_next/data/_7w7F2-b0Jd17AMGS_PtB/samples/worker.json similarity index 100% rename from _next/data/Y-eyYIW18BZZ2uUdvf2AX/samples/worker.json rename to _next/data/_7w7F2-b0Jd17AMGS_PtB/samples/worker.json diff --git a/_next/static/Y-eyYIW18BZZ2uUdvf2AX/_buildManifest.js b/_next/static/_7w7F2-b0Jd17AMGS_PtB/_buildManifest.js similarity index 100% rename from _next/static/Y-eyYIW18BZZ2uUdvf2AX/_buildManifest.js rename to _next/static/_7w7F2-b0Jd17AMGS_PtB/_buildManifest.js diff --git a/_next/static/Y-eyYIW18BZZ2uUdvf2AX/_ssgManifest.js b/_next/static/_7w7F2-b0Jd17AMGS_PtB/_ssgManifest.js similarity index 100% rename from _next/static/Y-eyYIW18BZZ2uUdvf2AX/_ssgManifest.js rename to _next/static/_7w7F2-b0Jd17AMGS_PtB/_ssgManifest.js diff --git a/_next/static/chunks/16.ad71d00f801dce1f.js b/_next/static/chunks/16.ad71d00f801dce1f.js deleted file mode 100644 index 2ace8f9d..00000000 --- a/_next/static/chunks/16.ad71d00f801dce1f.js +++ /dev/null @@ -1 +0,0 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[16],{5671:function(e,n,t){"use strict";t.d(n,{Tl:function(){return c},hu:function(){return p}});var r=t(5893),o=t(9008),a=t.n(o),i=t(1163),s=t(7294),l=t(9147),u=t.n(l);t(7319);let d=e=>{let n=(0,s.useRef)(null),o=(0,s.useMemo)(()=>e.sources.map(e=>{let{name:n,contents:o}=e;return{name:n,...function(e){let n;let o=null;{o=document.createElement("div");let a=t(4631);n=a(o,{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){o&&t&&(t.appendChild(o),n.setOption("value",e))}})})}}}(o)}}),e.sources),l=(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}},[]),c=(0,s.useRef)(null),p=(0,s.useMemo)(()=>{if(e.stats){let n=t(2792);return new n}},[]),m=(0,i.useRouter)(),f=m.asPath.match(/#([a-zA-Z0-9\.\/]+)/),[g,h]=(0,s.useState)(null),[S,E]=(0,s.useState)(null);return(0,s.useEffect)(()=>{if(f?E(f[1]):E(o[0].name),d&&l.current)for(l.current.appendChild(d.domElement);d.__controllers.length>0;)d.__controllers[0].remove();p&&c.current&&(p.dom.style.position="absolute",p.showPanel(1),c.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),h(e)})}catch(s){console.error(s),h(s)}return r},[]),(0,r.jsxs)("main",{children:[(0,r.jsxs)(a(),{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}),g?(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(g)})]}):null]}),(0,r.jsxs)("div",{className:u().canvasContainer,children:[(0,r.jsx)("div",{style:{position:"absolute",left:10},ref:c}),(0,r.jsx)("div",{style:{position:"absolute",right:10},ref:l}),(0,r.jsx)("canvas",{ref:n})]}),(0,r.jsxs)("div",{children:[(0,r.jsx)("nav",{className:u().sourceFileNav,children:(0,r.jsx)("ul",{children:o.map((e,n)=>(0,r.jsx)("li",{children:(0,r.jsx)("a",{href:"#".concat(e.name),"data-active":S==e.name,onClick(){E(e.name)},children:e.name})},n))})}),o.map((e,n)=>(0,r.jsx)(e.Container,{className:u().sourceFileContainer,"data-active":S==e.name},n))]})]})},c=e=>(0,r.jsx)(d,{...e});function p(e,n){if(!e)throw Error(n)}},5016:function(e,n,t){"use strict";let r;t.r(n),t.d(n,{default:function(){return E}});var o,a,i=t(5671),s=t(134);let l=(e,n,t,r,o,a,i)=>{let s=[];for(let l=0;l{let n=async n=>{let{canvas:t,pageState:r,gui:o,stats:a}=n,i=await navigator.gpu.requestAdapter(),s=await i.requestDevice();if(!r.active)return;let l=t.getContext("webgpu"),u=window.devicePixelRatio;t.width=t.clientWidth*u,t.height=t.clientHeight*u;let d=navigator.gpu.getPreferredCanvasFormat();l.configure({device:s,format:d,alphaMode:"premultiplied"}),e({canvas:t,pageState:r,gui:o,device:s,context:l,presentationFormat:d,stats:a})};return n};class d{executeRun(e,n,t,r){let o=e.beginRenderPass(n);o.setPipeline(t);for(let a=0;a{e.queue.writeBuffer(a,0,new Uint32Array([n.highlight]))}}}p.sourceInfo={name:"src/sample/bitonicSort/bitonicDisplay.ts".substring(23),contents:"import {\n BindGroupCluster,\n Base2DRendererClass,\n createBindGroupCluster,\n} from './utils';\n\nimport bitonicDisplay from './bitonicDisplay.frag.wgsl';\n\ninterface BitonicDisplayRenderArgs {\n highlight: number;\n}\n\nexport default class BitonicDisplayRenderer extends Base2DRendererClass {\n static sourceInfo = {\n name: __filename.substring(__dirname.length + 1),\n contents: __SOURCE__,\n };\n\n switchBindGroup: (name: string) => void;\n setArguments: (args: BitonicDisplayRenderArgs) => void;\n computeBGDescript: BindGroupCluster;\n\n constructor(\n device: GPUDevice,\n presentationFormat: GPUTextureFormat,\n renderPassDescriptor: GPURenderPassDescriptor,\n computeBGDescript: BindGroupCluster,\n label: string\n ) {\n super();\n this.renderPassDescriptor = renderPassDescriptor;\n this.computeBGDescript = computeBGDescript;\n\n const uniformBuffer = device.createBuffer({\n size: Uint32Array.BYTES_PER_ELEMENT,\n usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,\n });\n\n const bgCluster = createBindGroupCluster(\n [0],\n [GPUShaderStage.FRAGMENT],\n ['buffer'],\n [{ type: 'uniform' }],\n [[{ buffer: uniformBuffer }]],\n label,\n device\n );\n\n this.currentBindGroup = bgCluster.bindGroups[0];\n\n this.pipeline = super.create2DRenderPipeline(\n device,\n label,\n [this.computeBGDescript.bindGroupLayout, bgCluster.bindGroupLayout],\n bitonicDisplay,\n presentationFormat\n );\n\n this.setArguments = (args: BitonicDisplayRenderArgs) => {\n device.queue.writeBuffer(\n uniformBuffer,\n 0,\n new Uint32Array([args.highlight])\n );\n };\n }\n\n startRun(commandEncoder: GPUCommandEncoder, args: BitonicDisplayRenderArgs) {\n this.setArguments(args);\n super.executeRun(commandEncoder, this.renderPassDescriptor, this.pipeline, [\n this.computeBGDescript.bindGroups[0],\n this.currentBindGroup,\n ]);\n }\n}\n"};let m=e=>((e%2!=0||e>256)&&(e=256),"\n\nstruct Uniforms {\n width: f32,\n height: f32,\n algo: u32,\n blockHeight: u32,\n}\n\n// Create local workgroup data that can contain all elements\nvar local_data: array;\n\n// Define groups (functions refer to this data)\n@group(0) @binding(0) var input_data: array;\n@group(0) @binding(1) var output_data: array;\n@group(0) @binding(2) var uniforms: Uniforms;\n@group(0) @binding(3) var counter: atomic;\n\n// Compare and swap values in local_data\nfn local_compare_and_swap(idx_before: u32, idx_after: u32) {\n //idx_before should always be < idx_after\n if (local_data[idx_after] < local_data[idx_before]) {\n atomicAdd(&counter, 1);\n var temp: u32 = local_data[idx_before];\n local_data[idx_before] = local_data[idx_after];\n local_data[idx_after] = temp;\n }\n return;\n}\n\n// thread_id goes from 0 to threadsPerWorkgroup\nfn get_flip_indices(thread_id: u32, block_height: u32) -> vec2 {\n // Caculate index offset (i.e move indices into correct block)\n let block_offset: u32 = ((2 * thread_id) / block_height) * block_height;\n let half_height = block_height / 2;\n // Calculate index spacing\n var idx: vec2 = vec2(\n thread_id % half_height, block_height - (thread_id % half_height) - 1,\n );\n idx.x += block_offset;\n idx.y += block_offset;\n return idx;\n}\n\nfn get_disperse_indices(thread_id: u32, block_height: u32) -> vec2 {\n var block_offset: u32 = ((2 * thread_id) / block_height) * block_height;\n let half_height = block_height / 2;\n var idx: vec2 = vec2(\n thread_id % half_height, (thread_id % half_height) + half_height\n );\n idx.x += block_offset;\n idx.y += block_offset;\n return idx;\n}\n\nfn global_compare_and_swap(idx_before: u32, idx_after: u32) {\n if (input_data[idx_after] < input_data[idx_before]) {\n output_data[idx_before] = input_data[idx_after];\n output_data[idx_after] = input_data[idx_before];\n } \n}\n\n// Constants/enum\nconst ALGO_NONE = 0;\nconst ALGO_LOCAL_FLIP = 1;\nconst ALGO_LOCAL_DISPERSE = 2;\nconst ALGO_GLOBAL_FLIP = 3;\n\n// Our compute shader will execute specified # of threads or elements / 2 threads\n@compute @workgroup_size(").concat(e,", 1, 1)\nfn computeMain(\n @builtin(global_invocation_id) global_id: vec3,\n @builtin(local_invocation_id) local_id: vec3,\n @builtin(workgroup_id) workgroup_id: vec3,\n) {\n\n let offset = ").concat(e," * 2 * workgroup_id.x;\n // If we will perform a local swap, then populate the local data\n if (uniforms.algo <= 2) {\n // Assign range of input_data to local_data.\n // Range cannot exceed maxWorkgroupsX * 2\n // Each thread will populate the workgroup data... (1 thread for every 2 elements)\n local_data[local_id.x * 2] = input_data[offset + local_id.x * 2];\n local_data[local_id.x * 2 + 1] = input_data[offset + local_id.x * 2 + 1];\n }\n\n //...and wait for each other to finish their own bit of data population.\n workgroupBarrier();\n\n switch uniforms.algo {\n case 1: { // Local Flip\n let idx = get_flip_indices(local_id.x, uniforms.blockHeight);\n local_compare_and_swap(idx.x, idx.y);\n } \n case 2: { // Local Disperse\n let idx = get_disperse_indices(local_id.x, uniforms.blockHeight);\n local_compare_and_swap(idx.x, idx.y);\n } \n case 3: { // Global Flip\n let idx = get_flip_indices(global_id.x, uniforms.blockHeight);\n global_compare_and_swap(idx.x, idx.y);\n }\n case 4: { \n let idx = get_disperse_indices(global_id.x, uniforms.blockHeight);\n global_compare_and_swap(idx.x, idx.y);\n }\n default: { \n \n }\n }\n\n // Ensure that all threads have swapped their own regions of data\n workgroupBarrier();\n\n if (uniforms.algo <= ALGO_LOCAL_DISPERSE) {\n //Repopulate global data with local data\n output_data[offset + local_id.x * 2] = local_data[local_id.x * 2];\n output_data[offset + local_id.x * 2 + 1] = local_data[local_id.x * 2 + 1];\n }\n\n}"));var f="@group(0) @binding(3) var counter: atomic;\n\n@compute @workgroup_size(1, 1, 1)\nfn atomicToZero() {\n let counterValue = atomicLoad(&counter);\n atomicSub(&counter, counterValue);\n}",g="src/sample/bitonicSort/main.ts";(o=a||(a={}))[o.NONE=0]="NONE",o[o.FLIP_LOCAL=1]="FLIP_LOCAL",o[o.DISPERSE_LOCAL=2]="DISPERSE_LOCAL",o[o.FLIP_GLOBAL=3]="FLIP_GLOBAL",o[o.DISPERSE_GLOBAL=4]="DISPERSE_GLOBAL";let h=e=>{let n=Math.log2(e);return n*(n+1)/2};u(async e=>{let{pageState:n,device:t,gui:r,presentationFormat:o,context:i,canvas:s}=e,u=t.limits.maxComputeWorkgroupSizeX,d=[],c=32*u;for(let g=c;g>=4;g/=2)d.push(g);let S=Math.sqrt(c)%2==0?Math.floor(Math.sqrt(c)):Math.floor(Math.sqrt(c/2)),E={"Total Elements":c,"Grid Width":S,"Grid Height":c/S,"Total Threads":u,"Hovered Cell":0,"Swapped Cell":1,"Step Index":0,"Total Steps":h(c),"Prev Step":"NONE","Next Step":"FLIP_LOCAL","Prev Swap Span":0,"Next Swap Span":2,"Total Workgroups":c/(2*u),"Total Swaps":0,executeStep:!1,"Display Mode":"Elements","Randomize Values"(){},"Execute Sort Step"(){},"Log Elements"(){},"Complete Sort"(){},"Sort Speed":50},v=new Uint32Array(Array.from({length:E["Total Elements"]},(e,n)=>n)),x=Float32Array.BYTES_PER_ELEMENT*d[0],_=t.createBuffer({size:x,usage:GPUBufferUsage.STORAGE|GPUBufferUsage.COPY_DST}),b=t.createBuffer({size:x,usage:GPUBufferUsage.STORAGE|GPUBufferUsage.COPY_SRC}),C=t.createBuffer({size:x,usage:GPUBufferUsage.MAP_READ|GPUBufferUsage.COPY_DST}),y=t.createBuffer({size:Uint32Array.BYTES_PER_ELEMENT,usage:GPUBufferUsage.STORAGE|GPUBufferUsage.COPY_SRC}),P=t.createBuffer({size:Uint32Array.BYTES_PER_ELEMENT,usage:GPUBufferUsage.MAP_READ|GPUBufferUsage.COPY_DST}),w=t.createBuffer({size:4*Float32Array.BYTES_PER_ELEMENT,usage:GPUBufferUsage.UNIFORM|GPUBufferUsage.COPY_DST}),B=l([0,1,2,3],[GPUShaderStage.COMPUTE|GPUShaderStage.FRAGMENT,GPUShaderStage.COMPUTE,GPUShaderStage.COMPUTE|GPUShaderStage.FRAGMENT,GPUShaderStage.COMPUTE],["buffer","buffer","buffer","buffer"],[{type:"read-only-storage"},{type:"storage"},{type:"uniform"},{type:"storage"}],[[{buffer:_},{buffer:b},{buffer:w},{buffer:y}]],"BitonicSort",t),T=t.createComputePipeline({layout:t.createPipelineLayout({bindGroupLayouts:[B.bindGroupLayout]}),compute:{module:t.createShaderModule({code:m(E["Total Threads"])}),entryPoint:"computeMain"}}),G=t.createComputePipeline({layout:t.createPipelineLayout({bindGroupLayouts:[B.bindGroupLayout]}),compute:{module:t.createShaderModule({code:f}),entryPoint:"atomicToZero"}}),L={colorAttachments:[{view:void 0,clearValue:{r:.1,g:.4,b:.5,a:1},loadOp:"clear",storeOp:"store"}]},I=new p(t,o,L,B,"BitonicDisplay"),U=()=>{F.setValue(Math.min(E["Total Elements"]/2,u));let e=(E["Total Elements"]-1)/(2*u);H.setValue(Math.ceil(e)),X.setValue(0),Q.setValue(h(E["Total Elements"]));let n=Math.sqrt(E["Total Elements"])%2==0?Math.floor(Math.sqrt(E["Total Elements"])):Math.floor(Math.sqrt(E["Total Elements"]/2)),r=E["Total Elements"]/n;z.setValue(n),Y.setValue(r),J.setValue("NONE"),K.setValue("FLIP_LOCAL"),ee.setValue(0),en.setValue(2);let o=t.createCommandEncoder(),a=o.beginComputePass();a.setPipeline(G),a.setBindGroup(0,B.bindGroups[0]),a.dispatchWorkgroups(1),a.end(),t.queue.submit([o.finish()]),$.setValue(0),eo=2},A=()=>{let e=v.length;for(;0!==e;){let n=Math.floor(Math.random()*e);e-=1,[v[e],v[n]]=[v[n],v[e]]}},R=()=>{v=new Uint32Array(Array.from({length:E["Total Elements"]},(e,n)=>n)),U(),T=t.createComputePipeline({layout:t.createPipelineLayout({bindGroupLayouts:[B.bindGroupLayout]}),compute:{module:t.createShaderModule({code:m(E["Total Elements"]/2)}),entryPoint:"computeMain"}}),A(),eo=2};A();let M=()=>{let e;switch(E["Next Step"]){case"FLIP_LOCAL":case"FLIP_GLOBAL":{let n=E["Next Swap Span"],t=Math.floor(E["Hovered Cell"]/n)+1,r=E["Hovered Cell"]%n;e=n*t-r-1,j.setValue(e)}break;case"DISPERSE_LOCAL":{let o=E["Next Swap Span"],a=o/2;e=E["Hovered Cell"]%o{null!==O&&(clearInterval(O),O=null)},D=()=>{let e=E["Sort Speed"];O=setInterval(()=>{"NONE"===E["Next Step"]&&(clearInterval(O),O=null),E["Sort Speed"]!==e&&(clearInterval(O),O=null,D()),E.executeStep=!0,M()},E["Sort Speed"])},N=r.addFolder("Compute Resources");N.add(E,"Total Elements",d).onChange(()=>{k(),R()});let F=N.add(E,"Total Threads"),H=N.add(E,"Total Workgroups");N.open();let V=r.addFolder("Sort Controls");V.add(E,"Sort Speed",50,1e3).step(50),V.add(E,"Execute Sort Step").onChange(()=>{k(),E.executeStep=!0}),V.add(E,"Randomize Values").onChange(()=>{k(),A(),U()}),V.add(E,"Log Elements").onChange(()=>console.log(v)),V.add(E,"Complete Sort").onChange(D),V.open();let W=r.addFolder("Grid Information");W.add(E,"Display Mode",["Elements","Swap Highlight"]);let z=W.add(E,"Grid Width"),Y=W.add(E,"Grid Height"),q=W.add(E,"Hovered Cell").onChange(M),j=W.add(E,"Swapped Cell"),Z=r.addFolder("Execution Information"),X=Z.add(E,"Step Index"),Q=Z.add(E,"Total Steps"),J=Z.add(E,"Prev Step"),K=Z.add(E,"Next Step"),$=Z.add(E,"Total Swaps"),ee=Z.add(E,"Prev Swap Span"),en=Z.add(E,"Next Swap Span"),et=document.getElementsByClassName("cr function");for(let er=0;er{let n=s.getBoundingClientRect().width,t=s.getBoundingClientRect().height,r=[n/E["Grid Width"],t/E["Grid Height"]],o=Math.floor(e.offsetX/r[0]),a=E["Grid Height"]-1-Math.floor(e.offsetY/r[1]);q.setValue(a*E["Grid Width"]+o),E["Hovered Cell"]=a*E["Grid Width"]+o}),H.domElement.style.pointerEvents="none",q.domElement.style.pointerEvents="none",j.domElement.style.pointerEvents="none",X.domElement.style.pointerEvents="none",Q.domElement.style.pointerEvents="none",J.domElement.style.pointerEvents="none",ee.domElement.style.pointerEvents="none",K.domElement.style.pointerEvents="none",en.domElement.style.pointerEvents="none",F.domElement.style.pointerEvents="none",z.domElement.style.pointerEvents="none",Y.domElement.style.pointerEvents="none",$.domElement.style.pointerEvents="none";let eo=2;async function ea(){if(!n.active)return;t.queue.writeBuffer(_,0,v.buffer,v.byteOffset,v.byteLength);let e=new Float32Array([E["Grid Width"],E["Grid Height"]]),r=new Uint32Array([a[E["Next Step"]],E["Next Swap Span"]]);t.queue.writeBuffer(w,0,e.buffer,e.byteOffset,e.byteLength),t.queue.writeBuffer(w,8,r),L.colorAttachments[0].view=i.getCurrentTexture().createView();let o=t.createCommandEncoder();if(I.startRun(o,{highlight:"Elements"===E["Display Mode"]?0:1}),E.executeStep&&eo!==2*E["Total Elements"]){let s=o.beginComputePass();s.setPipeline(T),s.setBindGroup(0,B.bindGroups[0]),s.dispatchWorkgroups(E["Total Workgroups"]),s.end(),X.setValue(E["Step Index"]+1),J.setValue(E["Next Step"]),ee.setValue(E["Next Swap Span"]),en.setValue(E["Next Swap Span"]/2),1===E["Next Swap Span"]?(eo*=2)==2*E["Total Elements"]?(K.setValue("NONE"),en.setValue(0)):eo>2*E["Total Threads"]?(K.setValue("FLIP_GLOBAL"),en.setValue(eo)):(K.setValue("FLIP_LOCAL"),en.setValue(eo)):E["Next Swap Span"]>2*E["Total Threads"]?K.setValue("DISPERSE_GLOBAL"):K.setValue("DISPERSE_LOCAL"),o.copyBufferToBuffer(b,0,C,0,x),o.copyBufferToBuffer(y,0,P,0,Uint32Array.BYTES_PER_ELEMENT)}if(t.queue.submit([o.finish()]),E.executeStep){await C.mapAsync(GPUMapMode.READ,0,x);let l=C.getMappedRange(0,x);await P.mapAsync(GPUMapMode.READ,0,Uint32Array.BYTES_PER_ELEMENT);let u=P.getMappedRange(0,Uint32Array.BYTES_PER_ELEMENT),d=l.slice(0,Uint32Array.BYTES_PER_ELEMENT*E["Total Elements"]),c=u.slice(0,Uint32Array.BYTES_PER_ELEMENT),p=new Uint32Array(d);$.setValue(new Uint32Array(c)[0]),C.unmap(),P.unmap(),v=p,M()}E.executeStep=!1,requestAnimationFrame(ea)}D(),requestAnimationFrame(ea)}).then(e=>r=e);let S=()=>(0,i.Tl)({name:"Bitonic Sort",description:"A naive bitonic sort algorithm executed on the GPU, based on tgfrerer's implementation at poniesandlight.co.uk/reflect/bitonic_merge_sort/. Each invocation of the bitonic sort shader dispatches a workgroup containing elements/2 threads. 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.",init:r,gui:!0,sources:[{name:g.substring(23),contents:"import { makeSample, SampleInit } from '../../components/SampleLayout';\nimport { createBindGroupCluster, SampleInitFactoryWebGPU } from './utils';\nimport BitonicDisplayRenderer from './bitonicDisplay';\nimport bitonicDisplay from './bitonicDisplay.frag.wgsl';\nimport { NaiveBitonicCompute } from './computeShader';\nimport fullscreenTexturedQuad from '../../shaders/fullscreenTexturedQuad.wgsl';\nimport atomicToZero from './atomicToZero.wgsl';\n\n// Type of step that will be executed in our shader\nenum StepEnum {\n NONE,\n FLIP_LOCAL,\n DISPERSE_LOCAL,\n FLIP_GLOBAL,\n DISPERSE_GLOBAL,\n}\n\n// String access to StepEnum\ntype StepType =\n | 'NONE'\n | 'FLIP_LOCAL'\n | 'DISPERSE_LOCAL'\n | 'FLIP_GLOBAL'\n | 'DISPERSE_GLOBAL';\n\ntype DisplayType = 'Elements' | 'Swap Highlight';\n\n// Gui settings object\ninterface SettingsInterface {\n 'Total Elements': number;\n 'Grid Width': number;\n 'Grid Height': number;\n 'Total Threads': number;\n 'Hovered Cell': number;\n 'Swapped Cell': number;\n 'Step Index': number;\n 'Total Steps': number;\n 'Prev Step': StepType;\n 'Next Step': StepType;\n 'Prev Swap Span': number;\n 'Next Swap Span': number;\n 'Total Workgroups': number;\n 'Display Mode': DisplayType;\n 'Total Swaps': number;\n executeStep: boolean;\n 'Randomize Values': () => void;\n 'Execute Sort Step': () => void;\n 'Log Elements': () => void;\n 'Complete Sort': () => void;\n 'Sort Speed': number;\n}\n\nconst getNumSteps = (numElements: number) => {\n const n = Math.log2(numElements);\n return (n * (n + 1)) / 2;\n};\n\nlet init: SampleInit;\nSampleInitFactoryWebGPU(\n async ({ pageState, device, gui, presentationFormat, context, canvas }) => {\n const maxThreadsX = device.limits.maxComputeWorkgroupSizeX;\n\n const totalElementLengths = [];\n const maxElements = maxThreadsX * 32;\n for (let i = maxElements; i >= 4; i /= 2) {\n totalElementLengths.push(i);\n }\n\n const defaultGridWidth =\n Math.sqrt(maxElements) % 2 === 0\n ? Math.floor(Math.sqrt(maxElements))\n : Math.floor(Math.sqrt(maxElements / 2));\n\n const defaultGridHeight = maxElements / defaultGridWidth;\n\n const settings: SettingsInterface = {\n // number of cellElements. Must equal gridWidth * gridHeight and 'Total Threads' * 2\n 'Total Elements': maxElements,\n // width of screen in cells.\n 'Grid Width': defaultGridWidth,\n // height of screen in cells\n 'Grid Height': defaultGridHeight,\n // number of threads to execute in a workgroup ('Total Threads', 1, 1)\n 'Total Threads': maxThreadsX,\n // Cell in element grid mouse element is hovering over\n 'Hovered Cell': 0,\n // element the hovered cell just swapped with,\n 'Swapped Cell': 1,\n // Index of current step\n 'Step Index': 0,\n // Total steps to sort current number of elements\n 'Total Steps': getNumSteps(maxElements),\n // Previously executed step\n 'Prev Step': 'NONE',\n // Next step to execute\n 'Next Step': 'FLIP_LOCAL',\n // Max thread span of previous block\n 'Prev Swap Span': 0,\n // Max thread span of next block\n 'Next Swap Span': 2,\n // Workgroups to dispatch per frame,\n 'Total Workgroups': maxElements / (maxThreadsX * 2),\n // The number of swap operations executed over time\n 'Total Swaps': 0,\n // Whether we will dispatch a workload this frame\n executeStep: false,\n 'Display Mode': 'Elements',\n 'Randomize Values': () => {\n return;\n },\n 'Execute Sort Step': () => {\n return;\n },\n 'Log Elements': () => {\n return;\n },\n 'Complete Sort': () => {\n return;\n },\n 'Sort Speed': 50,\n };\n\n // Initialize initial elements array\n let elements = new Uint32Array(\n Array.from({ length: settings['Total Elements'] }, (_, i) => i)\n );\n\n // Initialize elementsBuffer and elementsStagingBuffer\n const elementsBufferSize =\n Float32Array.BYTES_PER_ELEMENT * totalElementLengths[0];\n // Initialize input, output, staging buffers\n const elementsInputBuffer = device.createBuffer({\n size: elementsBufferSize,\n usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,\n });\n const elementsOutputBuffer = device.createBuffer({\n size: elementsBufferSize,\n usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC,\n });\n const elementsStagingBuffer = device.createBuffer({\n size: elementsBufferSize,\n usage: GPUBufferUsage.MAP_READ | GPUBufferUsage.COPY_DST,\n });\n\n // Initialize atomic swap buffer on GPU and CPU. Counts number of swaps actually performed by\n // compute shader (when value at index x is greater than value at index y)\n const atomicSwapsOutputBuffer = device.createBuffer({\n size: Uint32Array.BYTES_PER_ELEMENT,\n usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC,\n });\n const atomicSwapsStagingBuffer = device.createBuffer({\n size: Uint32Array.BYTES_PER_ELEMENT,\n usage: GPUBufferUsage.MAP_READ | GPUBufferUsage.COPY_DST,\n });\n\n // Create uniform buffer for compute shader\n const computeUniformsBuffer = device.createBuffer({\n // width, height, blockHeight, algo\n size: Float32Array.BYTES_PER_ELEMENT * 4,\n usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,\n });\n\n const computeBGCluster = createBindGroupCluster(\n [0, 1, 2, 3],\n [\n GPUShaderStage.COMPUTE | GPUShaderStage.FRAGMENT,\n GPUShaderStage.COMPUTE,\n GPUShaderStage.COMPUTE | GPUShaderStage.FRAGMENT,\n GPUShaderStage.COMPUTE,\n ],\n ['buffer', 'buffer', 'buffer', 'buffer'],\n [\n { type: 'read-only-storage' },\n { type: 'storage' },\n { type: 'uniform' },\n { type: 'storage' },\n ],\n [\n [\n { buffer: elementsInputBuffer },\n { buffer: elementsOutputBuffer },\n { buffer: computeUniformsBuffer },\n { buffer: atomicSwapsOutputBuffer },\n ],\n ],\n 'BitonicSort',\n device\n );\n\n let computePipeline = device.createComputePipeline({\n layout: device.createPipelineLayout({\n bindGroupLayouts: [computeBGCluster.bindGroupLayout],\n }),\n compute: {\n module: device.createShaderModule({\n code: NaiveBitonicCompute(settings['Total Threads']),\n }),\n entryPoint: 'computeMain',\n },\n });\n\n // Simple pipeline that zeros out an atomic value at group 0 binding 3\n const atomicToZeroComputePipeline = device.createComputePipeline({\n layout: device.createPipelineLayout({\n bindGroupLayouts: [computeBGCluster.bindGroupLayout],\n }),\n compute: {\n module: device.createShaderModule({\n code: atomicToZero,\n }),\n entryPoint: 'atomicToZero',\n },\n });\n\n // Create bitonic debug renderer\n const renderPassDescriptor: GPURenderPassDescriptor = {\n colorAttachments: [\n {\n view: undefined, // Assigned later\n\n clearValue: { r: 0.1, g: 0.4, b: 0.5, a: 1.0 },\n loadOp: 'clear',\n storeOp: 'store',\n },\n ],\n };\n\n const bitonicDisplayRenderer = new BitonicDisplayRenderer(\n device,\n presentationFormat,\n renderPassDescriptor,\n computeBGCluster,\n 'BitonicDisplay'\n );\n\n const resetExecutionInformation = () => {\n // Total threads are either elements / 2 or maxWorkgroupsSizeX\n totalThreadsController.setValue(\n Math.min(settings['Total Elements'] / 2, maxThreadsX)\n );\n\n // Dispatch a workgroup for every (Max threads * 2) elements\n const workgroupsPerStep =\n (settings['Total Elements'] - 1) / (maxThreadsX * 2);\n\n totalWorkgroupsController.setValue(Math.ceil(workgroupsPerStep));\n\n // Reset step Index and number of steps based on elements size\n stepIndexController.setValue(0);\n totalStepsController.setValue(getNumSteps(settings['Total Elements']));\n\n // Get new width and height of screen display in cells\n const newCellWidth =\n Math.sqrt(settings['Total Elements']) % 2 === 0\n ? Math.floor(Math.sqrt(settings['Total Elements']))\n : Math.floor(Math.sqrt(settings['Total Elements'] / 2));\n const newCellHeight = settings['Total Elements'] / newCellWidth;\n gridWidthController.setValue(newCellWidth);\n gridHeightController.setValue(newCellHeight);\n\n // Set prevStep to None (restart) and next step to FLIP\n prevStepController.setValue('NONE');\n nextStepController.setValue('FLIP_LOCAL');\n\n // Reset block heights\n prevBlockHeightController.setValue(0);\n nextBlockHeightController.setValue(2);\n\n // Reset Total Swaps by setting atomic value to 0\n const commandEncoder = device.createCommandEncoder();\n const computePassEncoder = commandEncoder.beginComputePass();\n computePassEncoder.setPipeline(atomicToZeroComputePipeline);\n computePassEncoder.setBindGroup(0, computeBGCluster.bindGroups[0]);\n computePassEncoder.dispatchWorkgroups(1);\n computePassEncoder.end();\n device.queue.submit([commandEncoder.finish()]);\n totalSwapsController.setValue(0);\n\n highestBlockHeight = 2;\n };\n\n const randomizeElementArray = () => {\n let currentIndex = elements.length;\n // While there are elements to shuffle\n while (currentIndex !== 0) {\n // Pick a remaining element\n const randomIndex = Math.floor(Math.random() * currentIndex);\n currentIndex -= 1;\n [elements[currentIndex], elements[randomIndex]] = [\n elements[randomIndex],\n elements[currentIndex],\n ];\n }\n };\n\n const resizeElementArray = () => {\n // Recreate elements array with new length\n elements = new Uint32Array(\n Array.from({ length: settings['Total Elements'] }, (_, i) => i)\n );\n\n resetExecutionInformation();\n\n // Create new shader invocation with workgroupSize that reflects number of threads\n computePipeline = device.createComputePipeline({\n layout: device.createPipelineLayout({\n bindGroupLayouts: [computeBGCluster.bindGroupLayout],\n }),\n compute: {\n module: device.createShaderModule({\n code: NaiveBitonicCompute(settings['Total Elements'] / 2),\n }),\n entryPoint: 'computeMain',\n },\n });\n // Randomize array elements\n randomizeElementArray();\n highestBlockHeight = 2;\n };\n\n randomizeElementArray();\n\n const setSwappedCell = () => {\n let swappedIndex: number;\n switch (settings['Next Step']) {\n case 'FLIP_LOCAL':\n case 'FLIP_GLOBAL':\n {\n const blockHeight = settings['Next Swap Span'];\n const p2 = Math.floor(settings['Hovered Cell'] / blockHeight) + 1;\n const p3 = settings['Hovered Cell'] % blockHeight;\n swappedIndex = blockHeight * p2 - p3 - 1;\n swappedCellController.setValue(swappedIndex);\n }\n break;\n case 'DISPERSE_LOCAL':\n {\n const blockHeight = settings['Next Swap Span'];\n const halfHeight = blockHeight / 2;\n swappedIndex =\n settings['Hovered Cell'] % blockHeight < halfHeight\n ? settings['Hovered Cell'] + halfHeight\n : settings['Hovered Cell'] - halfHeight;\n swappedCellController.setValue(swappedIndex);\n }\n break;\n case 'NONE': {\n swappedIndex = settings['Hovered Cell'];\n swappedCellController.setValue(swappedIndex);\n }\n default:\n {\n swappedIndex = settings['Hovered Cell'];\n swappedCellController.setValue(swappedIndex);\n }\n break;\n }\n };\n\n let completeSortIntervalID: ReturnType | null = null;\n const endSortInterval = () => {\n if (completeSortIntervalID !== null) {\n clearInterval(completeSortIntervalID);\n completeSortIntervalID = null;\n }\n };\n const startSortInterval = () => {\n const currentIntervalSpeed = settings['Sort Speed'];\n completeSortIntervalID = setInterval(() => {\n if (settings['Next Step'] === 'NONE') {\n clearInterval(completeSortIntervalID);\n completeSortIntervalID = null;\n }\n if (settings['Sort Speed'] !== currentIntervalSpeed) {\n clearInterval(completeSortIntervalID);\n completeSortIntervalID = null;\n startSortInterval();\n }\n settings.executeStep = true;\n setSwappedCell();\n }, settings['Sort Speed']);\n };\n\n // At top level, information about resources used to execute the compute shader\n // i.e elements sorted, threads/invocations per workgroup, and workgroups dispatched\n const computeResourcesFolder = gui.addFolder('Compute Resources');\n computeResourcesFolder\n .add(settings, 'Total Elements', totalElementLengths)\n .onChange(() => {\n endSortInterval();\n resizeElementArray();\n });\n const totalThreadsController = computeResourcesFolder.add(\n settings,\n 'Total Threads'\n );\n const totalWorkgroupsController = computeResourcesFolder.add(\n settings,\n 'Total Workgroups'\n );\n computeResourcesFolder.open();\n\n // Folder with functions that control the execution of the sort\n const controlFolder = gui.addFolder('Sort Controls');\n controlFolder.add(settings, 'Sort Speed', 50, 1000).step(50);\n controlFolder.add(settings, 'Execute Sort Step').onChange(() => {\n endSortInterval();\n settings.executeStep = true;\n });\n controlFolder.add(settings, 'Randomize Values').onChange(() => {\n endSortInterval();\n randomizeElementArray();\n resetExecutionInformation();\n });\n controlFolder\n .add(settings, 'Log Elements')\n .onChange(() => console.log(elements));\n controlFolder.add(settings, 'Complete Sort').onChange(startSortInterval);\n controlFolder.open();\n\n // Information about grid display\n const gridFolder = gui.addFolder('Grid Information');\n gridFolder.add(settings, 'Display Mode', ['Elements', 'Swap Highlight']);\n const gridWidthController = gridFolder.add(settings, 'Grid Width');\n const gridHeightController = gridFolder.add(settings, 'Grid Height');\n const hoveredCellController = gridFolder\n .add(settings, 'Hovered Cell')\n .onChange(setSwappedCell);\n const swappedCellController = gridFolder.add(settings, 'Swapped Cell');\n\n // Additional Information about the execution state of the sort\n const executionInformationFolder = gui.addFolder('Execution Information');\n const stepIndexController = executionInformationFolder.add(\n settings,\n 'Step Index'\n );\n const totalStepsController = executionInformationFolder.add(\n settings,\n 'Total Steps'\n );\n const prevStepController = executionInformationFolder.add(\n settings,\n 'Prev Step'\n );\n const nextStepController = executionInformationFolder.add(\n settings,\n 'Next Step'\n );\n const totalSwapsController = executionInformationFolder.add(\n settings,\n 'Total Swaps'\n );\n const prevBlockHeightController = executionInformationFolder.add(\n settings,\n 'Prev Swap Span'\n );\n const nextBlockHeightController = executionInformationFolder.add(\n settings,\n 'Next Swap Span'\n );\n\n // Adjust styles of Function List Elements within GUI\n const liFunctionElements = document.getElementsByClassName('cr function');\n for (let i = 0; i < liFunctionElements.length; i++) {\n (liFunctionElements[i].children[0] as HTMLElement).style.display = 'flex';\n (liFunctionElements[i].children[0] as HTMLElement).style.justifyContent =\n 'center';\n (\n liFunctionElements[i].children[0].children[1] as HTMLElement\n ).style.position = 'absolute';\n }\n\n canvas.addEventListener('mousemove', (event) => {\n const currWidth = canvas.getBoundingClientRect().width;\n const currHeight = canvas.getBoundingClientRect().height;\n const cellSize: [number, number] = [\n currWidth / settings['Grid Width'],\n currHeight / settings['Grid Height'],\n ];\n const xIndex = Math.floor(event.offsetX / cellSize[0]);\n const yIndex =\n settings['Grid Height'] - 1 - Math.floor(event.offsetY / cellSize[1]);\n hoveredCellController.setValue(yIndex * settings['Grid Width'] + xIndex);\n settings['Hovered Cell'] = yIndex * settings['Grid Width'] + xIndex;\n });\n\n // Deactivate interaction with select GUI elements\n totalWorkgroupsController.domElement.style.pointerEvents = 'none';\n hoveredCellController.domElement.style.pointerEvents = 'none';\n swappedCellController.domElement.style.pointerEvents = 'none';\n stepIndexController.domElement.style.pointerEvents = 'none';\n totalStepsController.domElement.style.pointerEvents = 'none';\n prevStepController.domElement.style.pointerEvents = 'none';\n prevBlockHeightController.domElement.style.pointerEvents = 'none';\n nextStepController.domElement.style.pointerEvents = 'none';\n nextBlockHeightController.domElement.style.pointerEvents = 'none';\n totalThreadsController.domElement.style.pointerEvents = 'none';\n gridWidthController.domElement.style.pointerEvents = 'none';\n gridHeightController.domElement.style.pointerEvents = 'none';\n totalSwapsController.domElement.style.pointerEvents = 'none';\n\n let highestBlockHeight = 2;\n\n startSortInterval();\n\n async function frame() {\n if (!pageState.active) return;\n\n // Write elements buffer\n device.queue.writeBuffer(\n elementsInputBuffer,\n 0,\n elements.buffer,\n elements.byteOffset,\n elements.byteLength\n );\n\n const dims = new Float32Array([\n settings['Grid Width'],\n settings['Grid Height'],\n ]);\n const stepDetails = new Uint32Array([\n StepEnum[settings['Next Step']],\n settings['Next Swap Span'],\n ]);\n device.queue.writeBuffer(\n computeUniformsBuffer,\n 0,\n dims.buffer,\n dims.byteOffset,\n dims.byteLength\n );\n\n device.queue.writeBuffer(computeUniformsBuffer, 8, stepDetails);\n\n renderPassDescriptor.colorAttachments[0].view = context\n .getCurrentTexture()\n .createView();\n\n const commandEncoder = device.createCommandEncoder();\n bitonicDisplayRenderer.startRun(commandEncoder, {\n highlight: settings['Display Mode'] === 'Elements' ? 0 : 1,\n });\n if (\n settings.executeStep &&\n highestBlockHeight !== settings['Total Elements'] * 2\n ) {\n const computePassEncoder = commandEncoder.beginComputePass();\n computePassEncoder.setPipeline(computePipeline);\n computePassEncoder.setBindGroup(0, computeBGCluster.bindGroups[0]);\n computePassEncoder.dispatchWorkgroups(settings['Total Workgroups']);\n computePassEncoder.end();\n stepIndexController.setValue(settings['Step Index'] + 1);\n prevStepController.setValue(settings['Next Step']);\n prevBlockHeightController.setValue(settings['Next Swap Span']);\n nextBlockHeightController.setValue(settings['Next Swap Span'] / 2);\n if (settings['Next Swap Span'] === 1) {\n highestBlockHeight *= 2;\n if (highestBlockHeight === settings['Total Elements'] * 2) {\n nextStepController.setValue('NONE');\n nextBlockHeightController.setValue(0);\n } else if (highestBlockHeight > settings['Total Threads'] * 2) {\n nextStepController.setValue('FLIP_GLOBAL');\n nextBlockHeightController.setValue(highestBlockHeight);\n } else {\n nextStepController.setValue('FLIP_LOCAL');\n nextBlockHeightController.setValue(highestBlockHeight);\n }\n } else {\n settings['Next Swap Span'] > settings['Total Threads'] * 2\n ? nextStepController.setValue('DISPERSE_GLOBAL')\n : nextStepController.setValue('DISPERSE_LOCAL');\n }\n\n // Copy GPU accessible buffers to CPU accessible buffers\n commandEncoder.copyBufferToBuffer(\n elementsOutputBuffer,\n 0,\n elementsStagingBuffer,\n 0,\n elementsBufferSize\n );\n\n commandEncoder.copyBufferToBuffer(\n atomicSwapsOutputBuffer,\n 0,\n atomicSwapsStagingBuffer,\n 0,\n Uint32Array.BYTES_PER_ELEMENT\n );\n }\n device.queue.submit([commandEncoder.finish()]);\n\n if (settings.executeStep) {\n // Copy GPU element data to CPU\n await elementsStagingBuffer.mapAsync(\n GPUMapMode.READ,\n 0,\n elementsBufferSize\n );\n const copyElementsBuffer = elementsStagingBuffer.getMappedRange(\n 0,\n elementsBufferSize\n );\n // Copy atomic swaps data to CPU\n await atomicSwapsStagingBuffer.mapAsync(\n GPUMapMode.READ,\n 0,\n Uint32Array.BYTES_PER_ELEMENT\n );\n const copySwapsBuffer = atomicSwapsStagingBuffer.getMappedRange(\n 0,\n Uint32Array.BYTES_PER_ELEMENT\n );\n // Get correct range of data from CPU copy of GPU Data\n const elementsData = copyElementsBuffer.slice(\n 0,\n Uint32Array.BYTES_PER_ELEMENT * settings['Total Elements']\n );\n const swapsData = copySwapsBuffer.slice(\n 0,\n Uint32Array.BYTES_PER_ELEMENT\n );\n // Extract data\n const elementsOutput = new Uint32Array(elementsData);\n totalSwapsController.setValue(new Uint32Array(swapsData)[0]);\n elementsStagingBuffer.unmap();\n atomicSwapsStagingBuffer.unmap();\n // Elements output becomes elements input, swap accumulate\n elements = elementsOutput;\n setSwappedCell();\n }\n settings.executeStep = false;\n requestAnimationFrame(frame);\n }\n requestAnimationFrame(frame);\n }\n).then((resultInit) => (init = resultInit));\n\nconst bitonicSortExample: () => JSX.Element = () =>\n makeSample({\n name: 'Bitonic Sort',\n description:\n \"A naive bitonic sort algorithm executed on the GPU, based on tgfrerer's implementation at poniesandlight.co.uk/reflect/bitonic_merge_sort/. Each invocation of the bitonic sort shader dispatches a workgroup containing elements/2 threads. 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.\",\n init,\n gui: true,\n sources: [\n {\n name: __filename.substring(__dirname.length + 1),\n contents: __SOURCE__,\n },\n BitonicDisplayRenderer.sourceInfo,\n {\n name: '../../../shaders/fullscreenTexturedQuad.vert.wgsl',\n contents: fullscreenTexturedQuad,\n },\n {\n name: './bitonicDisplay.frag.wgsl',\n contents: bitonicDisplay,\n },\n {\n name: './bitonicCompute.frag.wgsl',\n contents: NaiveBitonicCompute(64),\n },\n {\n name: './atomicToZero.wgsl',\n contents: atomicToZero,\n },\n ],\n filename: __filename,\n });\n\nexport default bitonicSortExample;\n"},p.sourceInfo,{name:"../../../shaders/fullscreenTexturedQuad.vert.wgsl",contents:s.Z},{name:"./bitonicDisplay.frag.wgsl",contents:c},{name:"./bitonicCompute.frag.wgsl",contents:m(64)},{name:"./atomicToZero.wgsl",contents:f}],filename:g});var E=S},9147:function(e){e.exports={canvasContainer:"SampleLayout_canvasContainer__zRR_l",sourceFileNav:"SampleLayout_sourceFileNav__ml48P",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/880.f6229f71a4cce650.js b/_next/static/chunks/880.f6229f71a4cce650.js new file mode 100644 index 00000000..6386fb0b --- /dev/null +++ b/_next/static/chunks/880.f6229f71a4cce650.js @@ -0,0 +1 @@ +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[880],{5671:function(e,n,t){"use strict";t.d(n,{Tl:function(){return d},hu:function(){return p}});var o=t(5893),r=t(9008),i=t.n(r),a=t(1163),s=t(7294),l=t(9147),u=t.n(l);t(7319);let c=e=>{let n=(0,s.useRef)(null),r=(0,s.useMemo)(()=>e.sources.map(e=>{let{name:n,contents:r}=e;return{name:n,...function(e){let n;let r=null;{r=document.createElement("div");let i=t(4631);n=i(r,{lineNumbers:!0,lineWrapping:!0,theme:"monokai",readOnly:!0})}return{Container:function(t){return(0,o.jsx)("div",{...t,children:(0,o.jsx)("div",{ref(t){r&&t&&(t.appendChild(r),n.setOption("value",e))}})})}}}(r)}}),e.sources),l=(0,s.useRef)(null),c=(0,s.useMemo)(()=>{if(e.gui){let n=t(4376),o=new n.GUI({autoPlace:!1});return o.domElement.style.position="relative",o.domElement.style.zIndex="1000",o}},[]),d=(0,s.useRef)(null),p=(0,s.useMemo)(()=>{if(e.stats){let n=t(2792);return new n}},[]),m=(0,a.useRouter)(),f=m.asPath.match(/#([a-zA-Z0-9\.\/]+)/),[g,h]=(0,s.useState)(null),[S,_]=(0,s.useState)(null);return(0,s.useEffect)(()=>{if(f?_(f[1]):_(r[0].name),c&&l.current)for(l.current.appendChild(c.domElement);c.__controllers.length>0;)c.__controllers[0].remove();p&&d.current&&(p.dom.style.position="absolute",p.showPanel(1),d.current.appendChild(p.dom));let t={active:!0},o=()=>{t.active=!1};try{let i=n.current;if(!i)throw Error("The canvas is not available");let a=e.init({canvas:i,pageState:t,gui:c,stats:p});a instanceof Promise&&a.catch(e=>{console.error(e),h(e)})}catch(s){console.error(s),h(s)}return o},[]),(0,o.jsxs)("main",{children:[(0,o.jsxs)(i(),{children:[(0,o.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,o.jsx)("title",{children:"".concat(e.name," - WebGPU Samples")}),(0,o.jsx)("meta",{name:"description",content:e.description}),(0,o.jsx)("meta",{httpEquiv:"origin-trial",content:e.originTrial})]}),(0,o.jsxs)("div",{children:[(0,o.jsx)("h1",{children:e.name}),(0,o.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,o.jsx)("p",{children:e.description}),g?(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)("p",{children:"Something went wrong. Do your browser and device support WebGPU?"}),(0,o.jsx)("p",{children:"".concat(g)})]}):null]}),(0,o.jsxs)("div",{className:u().canvasContainer,children:[(0,o.jsx)("div",{style:{position:"absolute",left:10},ref:d}),(0,o.jsx)("div",{style:{position:"absolute",right:10},ref:l}),(0,o.jsx)("canvas",{ref:n})]}),(0,o.jsxs)("div",{children:[(0,o.jsx)("nav",{className:u().sourceFileNav,children:(0,o.jsx)("ul",{children:r.map((e,n)=>(0,o.jsx)("li",{children:(0,o.jsx)("a",{href:"#".concat(e.name),"data-active":S==e.name,onClick(){_(e.name)},children:e.name})},n))})}),r.map((e,n)=>(0,o.jsx)(e.Container,{className:u().sourceFileContainer,"data-active":S==e.name},n))]})]})},d=e=>(0,o.jsx)(c,{...e});function p(e,n){if(!e)throw Error(n)}},9880:function(e,n,t){"use strict";let o;t.r(n),t.d(n,{default:function(){return _}});var r,i,a=t(5671),s=t(134);let l=(e,n,t,o,r,i,a)=>{let s=[];for(let l=0;l{let n=async n=>{let{canvas:t,pageState:o,gui:r,stats:i}=n,a=await navigator.gpu.requestAdapter(),s=await a.requestDevice();if(!o.active)return;let l=t.getContext("webgpu"),u=window.devicePixelRatio;t.width=t.clientWidth*u,t.height=t.clientHeight*u;let c=navigator.gpu.getPreferredCanvasFormat();l.configure({device:s,format:c,alphaMode:"premultiplied"}),e({canvas:t,pageState:o,gui:r,device:s,context:l,presentationFormat:c,stats:i})};return n};class c{executeRun(e,n,t,o){let r=e.beginRenderPass(n);r.setPipeline(t);for(let i=0;i{e.queue.writeBuffer(i,0,new Uint32Array([n.highlight]))}}}p.sourceInfo={name:"src/sample/bitonicSort/bitonicDisplay.ts".substring(23),contents:"import {\n BindGroupCluster,\n Base2DRendererClass,\n createBindGroupCluster,\n} from './utils';\n\nimport bitonicDisplay from './bitonicDisplay.frag.wgsl';\n\ninterface BitonicDisplayRenderArgs {\n highlight: number;\n}\n\nexport default class BitonicDisplayRenderer extends Base2DRendererClass {\n static sourceInfo = {\n name: __filename.substring(__dirname.length + 1),\n contents: __SOURCE__,\n };\n\n switchBindGroup: (name: string) => void;\n setArguments: (args: BitonicDisplayRenderArgs) => void;\n computeBGDescript: BindGroupCluster;\n\n constructor(\n device: GPUDevice,\n presentationFormat: GPUTextureFormat,\n renderPassDescriptor: GPURenderPassDescriptor,\n computeBGDescript: BindGroupCluster,\n label: string\n ) {\n super();\n this.renderPassDescriptor = renderPassDescriptor;\n this.computeBGDescript = computeBGDescript;\n\n const uniformBuffer = device.createBuffer({\n size: Uint32Array.BYTES_PER_ELEMENT,\n usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,\n });\n\n const bgCluster = createBindGroupCluster(\n [0],\n [GPUShaderStage.FRAGMENT],\n ['buffer'],\n [{ type: 'uniform' }],\n [[{ buffer: uniformBuffer }]],\n label,\n device\n );\n\n this.currentBindGroup = bgCluster.bindGroups[0];\n\n this.pipeline = super.create2DRenderPipeline(\n device,\n label,\n [this.computeBGDescript.bindGroupLayout, bgCluster.bindGroupLayout],\n bitonicDisplay,\n presentationFormat\n );\n\n this.setArguments = (args: BitonicDisplayRenderArgs) => {\n device.queue.writeBuffer(\n uniformBuffer,\n 0,\n new Uint32Array([args.highlight])\n );\n };\n }\n\n startRun(commandEncoder: GPUCommandEncoder, args: BitonicDisplayRenderArgs) {\n this.setArguments(args);\n super.executeRun(commandEncoder, this.renderPassDescriptor, this.pipeline, [\n this.computeBGDescript.bindGroups[0],\n this.currentBindGroup,\n ]);\n }\n}\n"};let m=e=>((e%2!=0||e>256)&&(e=256),"\n\nstruct Uniforms {\n width: f32,\n height: f32,\n algo: u32,\n blockHeight: u32,\n}\n\n// Create local workgroup data that can contain all elements\nvar local_data: array;\n\n// Define groups (functions refer to this data)\n@group(0) @binding(0) var input_data: array;\n@group(0) @binding(1) var output_data: array;\n@group(0) @binding(2) var uniforms: Uniforms;\n@group(0) @binding(3) var counter: atomic;\n\n// Compare and swap values in local_data\nfn local_compare_and_swap(idx_before: u32, idx_after: u32) {\n //idx_before should always be < idx_after\n if (local_data[idx_after] < local_data[idx_before]) {\n atomicAdd(&counter, 1);\n var temp: u32 = local_data[idx_before];\n local_data[idx_before] = local_data[idx_after];\n local_data[idx_after] = temp;\n }\n return;\n}\n\n// invoke_id goes from 0 to workgroupSize\nfn get_flip_indices(invoke_id: u32, block_height: u32) -> vec2 {\n // Caculate index offset (i.e move indices into correct block)\n let block_offset: u32 = ((2 * invoke_id) / block_height) * block_height;\n let half_height = block_height / 2;\n // Calculate index spacing\n var idx: vec2 = vec2(\n invoke_id % half_height, block_height - (invoke_id % half_height) - 1,\n );\n idx.x += block_offset;\n idx.y += block_offset;\n return idx;\n}\n\nfn get_disperse_indices(invoke_id: u32, block_height: u32) -> vec2 {\n var block_offset: u32 = ((2 * invoke_id) / block_height) * block_height;\n let half_height = block_height / 2;\n var idx: vec2 = vec2(\n invoke_id % half_height, (invoke_id % half_height) + half_height\n );\n idx.x += block_offset;\n idx.y += block_offset;\n return idx;\n}\n\nfn global_compare_and_swap(idx_before: u32, idx_after: u32) {\n if (input_data[idx_after] < input_data[idx_before]) {\n output_data[idx_before] = input_data[idx_after];\n output_data[idx_after] = input_data[idx_before];\n } \n}\n\n// Constants/enum\nconst ALGO_NONE = 0;\nconst ALGO_LOCAL_FLIP = 1;\nconst ALGO_LOCAL_DISPERSE = 2;\nconst ALGO_GLOBAL_FLIP = 3;\n\n// Our compute shader will execute specified # of invocations or elements / 2 invocations\n@compute @workgroup_size(").concat(e,", 1, 1)\nfn computeMain(\n @builtin(global_invocation_id) global_id: vec3,\n @builtin(local_invocation_id) local_id: vec3,\n @builtin(workgroup_id) workgroup_id: vec3,\n) {\n\n let offset = ").concat(e," * 2 * workgroup_id.x;\n // If we will perform a local swap, then populate the local data\n if (uniforms.algo <= 2) {\n // Assign range of input_data to local_data.\n // Range cannot exceed maxWorkgroupsX * 2\n // Each invocation will populate the workgroup data... (1 invocation for every 2 elements)\n local_data[local_id.x * 2] = input_data[offset + local_id.x * 2];\n local_data[local_id.x * 2 + 1] = input_data[offset + local_id.x * 2 + 1];\n }\n\n //...and wait for each other to finish their own bit of data population.\n workgroupBarrier();\n\n switch uniforms.algo {\n case 1: { // Local Flip\n let idx = get_flip_indices(local_id.x, uniforms.blockHeight);\n local_compare_and_swap(idx.x, idx.y);\n } \n case 2: { // Local Disperse\n let idx = get_disperse_indices(local_id.x, uniforms.blockHeight);\n local_compare_and_swap(idx.x, idx.y);\n } \n case 3: { // Global Flip\n let idx = get_flip_indices(global_id.x, uniforms.blockHeight);\n global_compare_and_swap(idx.x, idx.y);\n }\n case 4: { \n let idx = get_disperse_indices(global_id.x, uniforms.blockHeight);\n global_compare_and_swap(idx.x, idx.y);\n }\n default: { \n \n }\n }\n\n // Ensure that all invocations have swapped their own regions of data\n workgroupBarrier();\n\n if (uniforms.algo <= ALGO_LOCAL_DISPERSE) {\n //Repopulate global data with local data\n output_data[offset + local_id.x * 2] = local_data[local_id.x * 2];\n output_data[offset + local_id.x * 2 + 1] = local_data[local_id.x * 2 + 1];\n }\n\n}"));var f="@group(0) @binding(3) var counter: atomic;\n\n@compute @workgroup_size(1, 1, 1)\nfn atomicToZero() {\n let counterValue = atomicLoad(&counter);\n atomicSub(&counter, counterValue);\n}",g="src/sample/bitonicSort/main.ts";(r=i||(i={}))[r.NONE=0]="NONE",r[r.FLIP_LOCAL=1]="FLIP_LOCAL",r[r.DISPERSE_LOCAL=2]="DISPERSE_LOCAL",r[r.FLIP_GLOBAL=3]="FLIP_GLOBAL",r[r.DISPERSE_GLOBAL=4]="DISPERSE_GLOBAL";let h=e=>{let n=Math.log2(e);return n*(n+1)/2};u(async e=>{let{pageState:n,device:t,gui:o,presentationFormat:r,context:a,canvas:s}=e,u=t.limits.maxComputeWorkgroupSizeX,c=[],d=32*u;for(let g=d;g>=4;g/=2)c.push(g);let S=[];for(let _=u;_>=2;_/=2)S.push(_);let E=Math.sqrt(d)%2==0?Math.floor(Math.sqrt(d)):Math.floor(Math.sqrt(d/2)),v=d/E,x={"Total Elements":d,"Grid Width":E,"Grid Height":v,"Grid Dimensions":"".concat(E,"x").concat(v),"Workgroup Size":u,"Size Limit":u,"Workgroups Per Step":d/(2*u),"Hovered Cell":0,"Swapped Cell":1,"Step Index":0,"Total Steps":h(d),"Current Step":"0 of 91","Prev Step":"NONE","Next Step":"FLIP_LOCAL","Prev Swap Span":0,"Next Swap Span":2,executeStep:!1,"Randomize Values"(){},"Execute Sort Step"(){},"Log Elements"(){},"Complete Sort"(){},"Sort Speed":50,"Display Mode":"Elements","Total Swaps":0},b=new Uint32Array(Array.from({length:x["Total Elements"]},(e,n)=>n)),w=Float32Array.BYTES_PER_ELEMENT*c[0],y=t.createBuffer({size:w,usage:GPUBufferUsage.STORAGE|GPUBufferUsage.COPY_DST}),C=t.createBuffer({size:w,usage:GPUBufferUsage.STORAGE|GPUBufferUsage.COPY_SRC}),P=t.createBuffer({size:w,usage:GPUBufferUsage.MAP_READ|GPUBufferUsage.COPY_DST}),L=t.createBuffer({size:Uint32Array.BYTES_PER_ELEMENT,usage:GPUBufferUsage.STORAGE|GPUBufferUsage.COPY_SRC}),G=t.createBuffer({size:Uint32Array.BYTES_PER_ELEMENT,usage:GPUBufferUsage.MAP_READ|GPUBufferUsage.COPY_DST}),B=t.createBuffer({size:4*Float32Array.BYTES_PER_ELEMENT,usage:GPUBufferUsage.UNIFORM|GPUBufferUsage.COPY_DST}),I=l([0,1,2,3],[GPUShaderStage.COMPUTE|GPUShaderStage.FRAGMENT,GPUShaderStage.COMPUTE,GPUShaderStage.COMPUTE|GPUShaderStage.FRAGMENT,GPUShaderStage.COMPUTE],["buffer","buffer","buffer","buffer"],[{type:"read-only-storage"},{type:"storage"},{type:"uniform"},{type:"storage"}],[[{buffer:y},{buffer:C},{buffer:B},{buffer:L}]],"BitonicSort",t),T=t.createComputePipeline({layout:t.createPipelineLayout({bindGroupLayouts:[I.bindGroupLayout]}),compute:{module:t.createShaderModule({code:m(x["Workgroup Size"])}),entryPoint:"computeMain"}}),k=t.createComputePipeline({layout:t.createPipelineLayout({bindGroupLayouts:[I.bindGroupLayout]}),compute:{module:t.createShaderModule({code:f}),entryPoint:"atomicToZero"}}),A={colorAttachments:[{view:void 0,clearValue:{r:.1,g:.4,b:.5,a:1},loadOp:"clear",storeOp:"store"}]},U=new p(t,r,A,I,"BitonicDisplay"),O=()=>{W.setValue(Math.min(x["Total Elements"]/2,x["Size Limit"]));let e=(x["Total Elements"]-1)/(2*x["Size Limit"]);q.setValue(Math.ceil(e)),x["Step Index"]=0,x["Total Steps"]=h(x["Total Elements"]),K.setValue("".concat(x["Step Index"]," of ").concat(x["Total Steps"]));let n=Math.sqrt(x["Total Elements"])%2==0?Math.floor(Math.sqrt(x["Total Elements"])):Math.floor(Math.sqrt(x["Total Elements"]/2)),o=x["Total Elements"]/n;x["Grid Width"]=n,x["Grid Height"]=o,Z.setValue("".concat(n,"x").concat(o)),J.setValue("NONE"),ee.setValue("FLIP_LOCAL"),et.setValue(0),eo.setValue(2);let r=t.createCommandEncoder(),i=r.beginComputePass();i.setPipeline(k),i.setBindGroup(0,I.bindGroups[0]),i.dispatchWorkgroups(1),i.end(),t.queue.submit([r.finish()]),en.setValue(0),ea=2},N=()=>{let e=b.length;for(;0!==e;){let n=Math.floor(Math.random()*e);e-=1,[b[e],b[n]]=[b[n],b[e]]}},R=()=>{b=new Uint32Array(Array.from({length:x["Total Elements"]},(e,n)=>n)),O(),T=t.createComputePipeline({layout:t.createPipelineLayout({bindGroupLayouts:[I.bindGroupLayout]}),compute:{module:t.createShaderModule({code:m(Math.min(x["Total Elements"]/2,x["Size Limit"]))}),entryPoint:"computeMain"}}),N(),ea=2};N();let M=()=>{let e;switch(x["Next Step"]){case"FLIP_LOCAL":case"FLIP_GLOBAL":{let n=x["Next Swap Span"],t=Math.floor(x["Hovered Cell"]/n)+1,o=x["Hovered Cell"]%n;e=n*t-o-1,$.setValue(e)}break;case"DISPERSE_LOCAL":{let r=x["Next Swap Span"],i=r/2;e=x["Hovered Cell"]%r{null!==D&&(clearInterval(D),D=null)},F=()=>{let e=x["Sort Speed"];D=setInterval(()=>{"NONE"===x["Next Step"]&&(clearInterval(D),D=null,V.domElement.style.pointerEvents="auto"),x["Sort Speed"]!==e&&(clearInterval(D),D=null,F()),x.executeStep=!0,M()},x["Sort Speed"])},H=o.addFolder("Compute Resources");H.add(x,"Total Elements",c).onChange(()=>{z(),R(),V.domElement.style.pointerEvents="auto"});let V=H.add(x,"Size Limit",S).onChange(()=>{let e=Math.min(x["Total Elements"]/2,x["Size Limit"]),n=(x["Total Elements"]-1)/(2*x["Size Limit"]);W.setValue(e),q.setValue(Math.ceil(n)),T=T=t.createComputePipeline({layout:t.createPipelineLayout({bindGroupLayouts:[I.bindGroupLayout]}),compute:{module:t.createShaderModule({code:m(Math.min(x["Total Elements"]/2,x["Size Limit"]))}),entryPoint:"computeMain"}})}),W=H.add(x,"Workgroup Size"),q=H.add(x,"Workgroups Per Step");H.open();let Y=o.addFolder("Sort Controls");Y.add(x,"Sort Speed",50,1e3).step(50),Y.add(x,"Execute Sort Step").onChange(()=>{V.domElement.style.pointerEvents="none",z(),x.executeStep=!0}),Y.add(x,"Randomize Values").onChange(()=>{z(),N(),O(),V.domElement.style.pointerEvents="auto"}),Y.add(x,"Log Elements").onChange(()=>console.log(b)),Y.add(x,"Complete Sort").onChange(()=>{V.domElement.style.pointerEvents="none",F()}),Y.open();let j=o.addFolder("Grid Information");j.add(x,"Display Mode",["Elements","Swap Highlight"]);let Z=j.add(x,"Grid Dimensions"),X=j.add(x,"Hovered Cell").onChange(M),$=j.add(x,"Swapped Cell"),Q=o.addFolder("Execution Information"),K=Q.add(x,"Current Step"),J=Q.add(x,"Prev Step"),ee=Q.add(x,"Next Step"),en=Q.add(x,"Total Swaps"),et=Q.add(x,"Prev Swap Span"),eo=Q.add(x,"Next Swap Span"),er=document.getElementsByClassName("cr function");for(let ei=0;ei{let n=s.getBoundingClientRect().width,t=s.getBoundingClientRect().height,o=[n/x["Grid Width"],t/x["Grid Height"]],r=Math.floor(e.offsetX/o[0]),i=x["Grid Height"]-1-Math.floor(e.offsetY/o[1]);X.setValue(i*x["Grid Width"]+r),x["Hovered Cell"]=i*x["Grid Width"]+r}),V.domElement.style.pointerEvents="none",q.domElement.style.pointerEvents="none",X.domElement.style.pointerEvents="none",$.domElement.style.pointerEvents="none",K.domElement.style.pointerEvents="none",J.domElement.style.pointerEvents="none",et.domElement.style.pointerEvents="none",ee.domElement.style.pointerEvents="none",eo.domElement.style.pointerEvents="none",W.domElement.style.pointerEvents="none",Z.domElement.style.pointerEvents="none",en.domElement.style.pointerEvents="none",o.width=325;let ea=2;async function es(){if(!n.active)return;t.queue.writeBuffer(y,0,b.buffer,b.byteOffset,b.byteLength);let e=new Float32Array([x["Grid Width"],x["Grid Height"]]),o=new Uint32Array([i[x["Next Step"]],x["Next Swap Span"]]);t.queue.writeBuffer(B,0,e.buffer,e.byteOffset,e.byteLength),t.queue.writeBuffer(B,8,o),A.colorAttachments[0].view=a.getCurrentTexture().createView();let r=t.createCommandEncoder();if(U.startRun(r,{highlight:"Elements"===x["Display Mode"]?0:1}),x.executeStep&&ea!==2*x["Total Elements"]){let s=r.beginComputePass();s.setPipeline(T),s.setBindGroup(0,I.bindGroups[0]),s.dispatchWorkgroups(x["Workgroups Per Step"]),s.end(),x["Step Index"]=x["Step Index"]+1,K.setValue("".concat(x["Step Index"]," of ").concat(x["Total Steps"])),J.setValue(x["Next Step"]),et.setValue(x["Next Swap Span"]),eo.setValue(x["Next Swap Span"]/2),1===x["Next Swap Span"]?(ea*=2)==2*x["Total Elements"]?(ee.setValue("NONE"),eo.setValue(0)):ea>2*x["Workgroup Size"]?(ee.setValue("FLIP_GLOBAL"),eo.setValue(ea)):(ee.setValue("FLIP_LOCAL"),eo.setValue(ea)):x["Next Swap Span"]>2*x["Workgroup Size"]?ee.setValue("DISPERSE_GLOBAL"):ee.setValue("DISPERSE_LOCAL"),r.copyBufferToBuffer(C,0,P,0,w),r.copyBufferToBuffer(L,0,G,0,Uint32Array.BYTES_PER_ELEMENT)}if(t.queue.submit([r.finish()]),x.executeStep){await P.mapAsync(GPUMapMode.READ,0,w);let l=P.getMappedRange(0,w);await G.mapAsync(GPUMapMode.READ,0,Uint32Array.BYTES_PER_ELEMENT);let u=G.getMappedRange(0,Uint32Array.BYTES_PER_ELEMENT),c=l.slice(0,Uint32Array.BYTES_PER_ELEMENT*x["Total Elements"]),d=u.slice(0,Uint32Array.BYTES_PER_ELEMENT),p=new Uint32Array(c);en.setValue(new Uint32Array(d)[0]),P.unmap(),G.unmap(),b=p,M()}x.executeStep=!1,requestAnimationFrame(es)}F(),requestAnimationFrame(es)}).then(e=>o=e);let S=()=>(0,a.Tl)({name:"Bitonic Sort",description:"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.",init:o,gui:!0,sources:[{name:g.substring(23),contents:"import { makeSample, SampleInit } from '../../components/SampleLayout';\nimport { createBindGroupCluster, SampleInitFactoryWebGPU } from './utils';\nimport BitonicDisplayRenderer from './bitonicDisplay';\nimport bitonicDisplay from './bitonicDisplay.frag.wgsl';\nimport { NaiveBitonicCompute } from './bitonicCompute';\nimport fullscreenTexturedQuad from '../../shaders/fullscreenTexturedQuad.wgsl';\nimport atomicToZero from './atomicToZero.wgsl';\n\n// Type of step that will be executed in our shader\nenum StepEnum {\n NONE,\n FLIP_LOCAL,\n DISPERSE_LOCAL,\n FLIP_GLOBAL,\n DISPERSE_GLOBAL,\n}\n\ntype StepType =\n // NONE: No sort step has or will occur\n | 'NONE'\n // FLIP_LOCAL: A sort step that performs a flip operation over indices in a workgroup's locally addressable area\n // (i.e invocations * workgroup_index -> invocations * (workgroup_index + 1) - 1.\n | 'FLIP_LOCAL'\n // DISPERSE_LOCAL A sort step that performs a flip operation over indices in a workgroup's locally addressable area.\n | 'DISPERSE_LOCAL'\n // FLIP_GLOBAL A sort step that performs a flip step across a range of indices outside a workgroup's locally addressable area.\n | 'FLIP_GLOBAL'\n // DISPERSE_GLOBAL A sort step that performs a disperse operation across a range of indices outside a workgroup's locally addressable area.\n | 'DISPERSE_GLOBAL';\n\ntype DisplayType = 'Elements' | 'Swap Highlight';\n\n// Gui settings object\ninterface SettingsInterface {\n 'Total Elements': number;\n 'Grid Width': number;\n 'Grid Height': number;\n 'Grid Dimensions': string;\n 'Workgroup Size': number;\n 'Size Limit': number;\n 'Workgroups Per Step': number;\n 'Hovered Cell': number;\n 'Swapped Cell': number;\n 'Current Step': string;\n 'Step Index': number;\n 'Total Steps': number;\n 'Prev Step': StepType;\n 'Next Step': StepType;\n 'Prev Swap Span': number;\n 'Next Swap Span': number;\n executeStep: boolean;\n 'Randomize Values': () => void;\n 'Execute Sort Step': () => void;\n 'Log Elements': () => void;\n 'Complete Sort': () => void;\n 'Sort Speed': number;\n 'Display Mode': DisplayType;\n 'Total Swaps': number;\n}\n\nconst getNumSteps = (numElements: number) => {\n const n = Math.log2(numElements);\n return (n * (n + 1)) / 2;\n};\n\nlet init: SampleInit;\nSampleInitFactoryWebGPU(\n async ({ pageState, device, gui, presentationFormat, context, canvas }) => {\n const maxInvocationsX = device.limits.maxComputeWorkgroupSizeX;\n\n const totalElementOptions = [];\n const maxElements = maxInvocationsX * 32;\n for (let i = maxElements; i >= 4; i /= 2) {\n totalElementOptions.push(i);\n }\n\n const sizeLimitOptions: number[] = [];\n for (let i = maxInvocationsX; i >= 2; i /= 2) {\n sizeLimitOptions.push(i);\n }\n\n const defaultGridWidth =\n Math.sqrt(maxElements) % 2 === 0\n ? Math.floor(Math.sqrt(maxElements))\n : Math.floor(Math.sqrt(maxElements / 2));\n\n const defaultGridHeight = maxElements / defaultGridWidth;\n\n const settings: SettingsInterface = {\n // TOTAL ELEMENT AND GRID SETTINGS\n // The number of elements to be sorted. Must equal gridWidth * gridHeight || Workgroup Size * Workgroups * 2\n // When changed, all relevant values within the settings object are reset to their defaults at the beginning of a sort with n elements.\n 'Total Elements': maxElements,\n // width of screen in cells\n 'Grid Width': defaultGridWidth,\n // height of screen in cells\n 'Grid Height': defaultGridHeight,\n // Grid Dimensions as string\n 'Grid Dimensions': `${defaultGridWidth}x${defaultGridHeight}`,\n\n // INVOCATION, WORKGROUP SIZE, AND WORKGROUP DISPATCH SETTINGS\n // The size of a workgroup, or the number of invocations executed within each workgroup\n // Determined algorithmically based on 'Size Limit', maxInvocationsX, and the current number of elements to sort\n 'Workgroup Size': maxInvocationsX,\n // An artifical constraint on the maximum workgroup size/maximumn invocations per workgroup as specified by device.limits.maxComputeWorkgroupSizeX\n 'Size Limit': maxInvocationsX,\n // Total workgroups that are dispatched during each step of the bitonic sort\n 'Workgroups Per Step': maxElements / (maxInvocationsX * 2),\n\n // HOVER SETTINGS\n // The element/cell in the element visualizer directly beneath the mouse cursor\n 'Hovered Cell': 0,\n // The element/cell in the element visualizer that the hovered cell will swap with in the next execution step of the bitonic sort.\n 'Swapped Cell': 1,\n\n // STEP INDEX, STEP TYPE, AND STEP SWAP SPAN SETTINGS\n // The index of the current step in the bitonic sort.\n 'Step Index': 0,\n // The total number of steps required to sort the displayed elements.\n 'Total Steps': getNumSteps(maxElements),\n // A string that condenses 'Step Index' and 'Total Steps' into a single GUI Controller display element.\n 'Current Step': `0 of 91`,\n // The category of the previously executed step. Always begins the bitonic sort with a value of 'NONE' and ends with a value of 'DISPERSE_LOCAL'\n 'Prev Step': 'NONE',\n // The category of the next step that will be executed. Always begins the bitonic sort with a value of 'FLIP_LOCAL' and ends with a value of 'NONE'\n 'Next Step': 'FLIP_LOCAL',\n // The maximum span of a swap operation in the sort's previous step.\n 'Prev Swap Span': 0,\n // The maximum span of a swap operation in the sort's upcoming step.\n 'Next Swap Span': 2,\n\n // ANIMATION LOOP AND FUNCTION SETTINGS\n // A flag that designates whether we will dispatch a workload this frame.\n executeStep: false,\n // A function that randomizes the values of each element.\n // When called, all relevant values within the settings object are reset to their defaults at the beginning of a sort with n elements.\n 'Randomize Values': () => {\n return;\n },\n // A function that manually executes a single step of the bitonic sort.\n 'Execute Sort Step': () => {\n return;\n },\n // A function that logs the values of each element as an array to the browser's console.\n 'Log Elements': () => {\n return;\n },\n // A function that automatically executes each step of the bitonic sort at an interval determined by 'Sort Speed'\n 'Complete Sort': () => {\n return;\n },\n // The speed at which each step of the bitonic sort will be executed after 'Complete Sort' has been called.\n 'Sort Speed': 50,\n\n // MISCELLANEOUS SETTINGS\n 'Display Mode': 'Elements',\n // An atomic value representing the total number of swap operations executed over the course of the bitonic sort.\n 'Total Swaps': 0,\n };\n\n // Initialize initial elements array\n let elements = new Uint32Array(\n Array.from({ length: settings['Total Elements'] }, (_, i) => i)\n );\n\n // Initialize elementsBuffer and elementsStagingBuffer\n const elementsBufferSize =\n Float32Array.BYTES_PER_ELEMENT * totalElementOptions[0];\n // Initialize input, output, staging buffers\n const elementsInputBuffer = device.createBuffer({\n size: elementsBufferSize,\n usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,\n });\n const elementsOutputBuffer = device.createBuffer({\n size: elementsBufferSize,\n usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC,\n });\n const elementsStagingBuffer = device.createBuffer({\n size: elementsBufferSize,\n usage: GPUBufferUsage.MAP_READ | GPUBufferUsage.COPY_DST,\n });\n\n // Initialize atomic swap buffer on GPU and CPU. Counts number of swaps actually performed by\n // compute shader (when value at index x is greater than value at index y)\n const atomicSwapsOutputBuffer = device.createBuffer({\n size: Uint32Array.BYTES_PER_ELEMENT,\n usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC,\n });\n const atomicSwapsStagingBuffer = device.createBuffer({\n size: Uint32Array.BYTES_PER_ELEMENT,\n usage: GPUBufferUsage.MAP_READ | GPUBufferUsage.COPY_DST,\n });\n\n // Create uniform buffer for compute shader\n const computeUniformsBuffer = device.createBuffer({\n // width, height, blockHeight, algo\n size: Float32Array.BYTES_PER_ELEMENT * 4,\n usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,\n });\n\n const computeBGCluster = createBindGroupCluster(\n [0, 1, 2, 3],\n [\n GPUShaderStage.COMPUTE | GPUShaderStage.FRAGMENT,\n GPUShaderStage.COMPUTE,\n GPUShaderStage.COMPUTE | GPUShaderStage.FRAGMENT,\n GPUShaderStage.COMPUTE,\n ],\n ['buffer', 'buffer', 'buffer', 'buffer'],\n [\n { type: 'read-only-storage' },\n { type: 'storage' },\n { type: 'uniform' },\n { type: 'storage' },\n ],\n [\n [\n { buffer: elementsInputBuffer },\n { buffer: elementsOutputBuffer },\n { buffer: computeUniformsBuffer },\n { buffer: atomicSwapsOutputBuffer },\n ],\n ],\n 'BitonicSort',\n device\n );\n\n let computePipeline = device.createComputePipeline({\n layout: device.createPipelineLayout({\n bindGroupLayouts: [computeBGCluster.bindGroupLayout],\n }),\n compute: {\n module: device.createShaderModule({\n code: NaiveBitonicCompute(settings['Workgroup Size']),\n }),\n entryPoint: 'computeMain',\n },\n });\n\n // Simple pipeline that zeros out an atomic value at group 0 binding 3\n const atomicToZeroComputePipeline = device.createComputePipeline({\n layout: device.createPipelineLayout({\n bindGroupLayouts: [computeBGCluster.bindGroupLayout],\n }),\n compute: {\n module: device.createShaderModule({\n code: atomicToZero,\n }),\n entryPoint: 'atomicToZero',\n },\n });\n\n // Create bitonic debug renderer\n const renderPassDescriptor: GPURenderPassDescriptor = {\n colorAttachments: [\n {\n view: undefined, // Assigned later\n\n clearValue: { r: 0.1, g: 0.4, b: 0.5, a: 1.0 },\n loadOp: 'clear',\n storeOp: 'store',\n },\n ],\n };\n\n const bitonicDisplayRenderer = new BitonicDisplayRenderer(\n device,\n presentationFormat,\n renderPassDescriptor,\n computeBGCluster,\n 'BitonicDisplay'\n );\n\n const resetExecutionInformation = () => {\n // The workgroup size is either elements / 2 or Size Limit\n workgroupSizeController.setValue(\n Math.min(settings['Total Elements'] / 2, settings['Size Limit'])\n );\n\n // Dispatch a workgroup for every (Size Limit * 2) elements\n const workgroupsPerStep =\n (settings['Total Elements'] - 1) / (settings['Size Limit'] * 2);\n\n workgroupsPerStepController.setValue(Math.ceil(workgroupsPerStep));\n\n // Reset step Index and number of steps based on elements size\n settings['Step Index'] = 0;\n settings['Total Steps'] = getNumSteps(settings['Total Elements']);\n currentStepController.setValue(\n `${settings['Step Index']} of ${settings['Total Steps']}`\n );\n\n // Get new width and height of screen display in cells\n const newCellWidth =\n Math.sqrt(settings['Total Elements']) % 2 === 0\n ? Math.floor(Math.sqrt(settings['Total Elements']))\n : Math.floor(Math.sqrt(settings['Total Elements'] / 2));\n const newCellHeight = settings['Total Elements'] / newCellWidth;\n settings['Grid Width'] = newCellWidth;\n settings['Grid Height'] = newCellHeight;\n gridDimensionsController.setValue(`${newCellWidth}x${newCellHeight}`);\n\n // Set prevStep to None (restart) and next step to FLIP\n prevStepController.setValue('NONE');\n nextStepController.setValue('FLIP_LOCAL');\n\n // Reset block heights\n prevBlockHeightController.setValue(0);\n nextBlockHeightController.setValue(2);\n\n // Reset Total Swaps by setting atomic value to 0\n const commandEncoder = device.createCommandEncoder();\n const computePassEncoder = commandEncoder.beginComputePass();\n computePassEncoder.setPipeline(atomicToZeroComputePipeline);\n computePassEncoder.setBindGroup(0, computeBGCluster.bindGroups[0]);\n computePassEncoder.dispatchWorkgroups(1);\n computePassEncoder.end();\n device.queue.submit([commandEncoder.finish()]);\n totalSwapsController.setValue(0);\n\n highestBlockHeight = 2;\n };\n\n const randomizeElementArray = () => {\n let currentIndex = elements.length;\n // While there are elements to shuffle\n while (currentIndex !== 0) {\n // Pick a remaining element\n const randomIndex = Math.floor(Math.random() * currentIndex);\n currentIndex -= 1;\n [elements[currentIndex], elements[randomIndex]] = [\n elements[randomIndex],\n elements[currentIndex],\n ];\n }\n };\n\n const resizeElementArray = () => {\n // Recreate elements array with new length\n elements = new Uint32Array(\n Array.from({ length: settings['Total Elements'] }, (_, i) => i)\n );\n\n resetExecutionInformation();\n\n // Create new shader invocation with workgroupSize that reflects number of invocations\n computePipeline = device.createComputePipeline({\n layout: device.createPipelineLayout({\n bindGroupLayouts: [computeBGCluster.bindGroupLayout],\n }),\n compute: {\n module: device.createShaderModule({\n code: NaiveBitonicCompute(\n Math.min(settings['Total Elements'] / 2, settings['Size Limit'])\n ),\n }),\n entryPoint: 'computeMain',\n },\n });\n // Randomize array elements\n randomizeElementArray();\n highestBlockHeight = 2;\n };\n\n randomizeElementArray();\n\n const setSwappedCell = () => {\n let swappedIndex: number;\n switch (settings['Next Step']) {\n case 'FLIP_LOCAL':\n case 'FLIP_GLOBAL':\n {\n const blockHeight = settings['Next Swap Span'];\n const p2 = Math.floor(settings['Hovered Cell'] / blockHeight) + 1;\n const p3 = settings['Hovered Cell'] % blockHeight;\n swappedIndex = blockHeight * p2 - p3 - 1;\n swappedCellController.setValue(swappedIndex);\n }\n break;\n case 'DISPERSE_LOCAL':\n {\n const blockHeight = settings['Next Swap Span'];\n const halfHeight = blockHeight / 2;\n swappedIndex =\n settings['Hovered Cell'] % blockHeight < halfHeight\n ? settings['Hovered Cell'] + halfHeight\n : settings['Hovered Cell'] - halfHeight;\n swappedCellController.setValue(swappedIndex);\n }\n break;\n case 'NONE': {\n swappedIndex = settings['Hovered Cell'];\n swappedCellController.setValue(swappedIndex);\n }\n default:\n {\n swappedIndex = settings['Hovered Cell'];\n swappedCellController.setValue(swappedIndex);\n }\n break;\n }\n };\n\n let completeSortIntervalID: ReturnType | null = null;\n const endSortInterval = () => {\n if (completeSortIntervalID !== null) {\n clearInterval(completeSortIntervalID);\n completeSortIntervalID = null;\n }\n };\n const startSortInterval = () => {\n const currentIntervalSpeed = settings['Sort Speed'];\n completeSortIntervalID = setInterval(() => {\n if (settings['Next Step'] === 'NONE') {\n clearInterval(completeSortIntervalID);\n completeSortIntervalID = null;\n sizeLimitController.domElement.style.pointerEvents = 'auto';\n }\n if (settings['Sort Speed'] !== currentIntervalSpeed) {\n clearInterval(completeSortIntervalID);\n completeSortIntervalID = null;\n startSortInterval();\n }\n settings.executeStep = true;\n setSwappedCell();\n }, settings['Sort Speed']);\n };\n\n // At top level, information about resources used to execute the compute shader\n // i.e elements sorted, invocations per workgroup, and workgroups dispatched\n const computeResourcesFolder = gui.addFolder('Compute Resources');\n computeResourcesFolder\n .add(settings, 'Total Elements', totalElementOptions)\n .onChange(() => {\n endSortInterval();\n resizeElementArray();\n sizeLimitController.domElement.style.pointerEvents = 'auto';\n });\n const sizeLimitController = computeResourcesFolder\n .add(settings, 'Size Limit', sizeLimitOptions)\n .onChange(() => {\n const constraint = Math.min(\n settings['Total Elements'] / 2,\n settings['Size Limit']\n );\n const workgroupsPerStep =\n (settings['Total Elements'] - 1) / (settings['Size Limit'] * 2);\n workgroupSizeController.setValue(constraint);\n workgroupsPerStepController.setValue(Math.ceil(workgroupsPerStep));\n computePipeline = computePipeline = device.createComputePipeline({\n layout: device.createPipelineLayout({\n bindGroupLayouts: [computeBGCluster.bindGroupLayout],\n }),\n compute: {\n module: device.createShaderModule({\n code: NaiveBitonicCompute(\n Math.min(settings['Total Elements'] / 2, settings['Size Limit'])\n ),\n }),\n entryPoint: 'computeMain',\n },\n });\n });\n const workgroupSizeController = computeResourcesFolder.add(\n settings,\n 'Workgroup Size'\n );\n const workgroupsPerStepController = computeResourcesFolder.add(\n settings,\n 'Workgroups Per Step'\n );\n computeResourcesFolder.open();\n\n // Folder with functions that control the execution of the sort\n const controlFolder = gui.addFolder('Sort Controls');\n controlFolder.add(settings, 'Sort Speed', 50, 1000).step(50);\n controlFolder.add(settings, 'Execute Sort Step').onChange(() => {\n // Size Limit locked upon sort\n sizeLimitController.domElement.style.pointerEvents = 'none';\n endSortInterval();\n settings.executeStep = true;\n });\n controlFolder.add(settings, 'Randomize Values').onChange(() => {\n endSortInterval();\n randomizeElementArray();\n resetExecutionInformation();\n // Unlock workgroup size limit controller since sort has stopped\n sizeLimitController.domElement.style.pointerEvents = 'auto';\n });\n controlFolder\n .add(settings, 'Log Elements')\n .onChange(() => console.log(elements));\n controlFolder.add(settings, 'Complete Sort').onChange(() => {\n // Invocation Limit locked upon sort\n sizeLimitController.domElement.style.pointerEvents = 'none';\n startSortInterval();\n });\n controlFolder.open();\n\n // Information about grid display\n const gridFolder = gui.addFolder('Grid Information');\n gridFolder.add(settings, 'Display Mode', ['Elements', 'Swap Highlight']);\n const gridDimensionsController = gridFolder.add(\n settings,\n 'Grid Dimensions'\n );\n const hoveredCellController = gridFolder\n .add(settings, 'Hovered Cell')\n .onChange(setSwappedCell);\n const swappedCellController = gridFolder.add(settings, 'Swapped Cell');\n\n // Additional Information about the execution state of the sort\n const executionInformationFolder = gui.addFolder('Execution Information');\n const currentStepController = executionInformationFolder.add(\n settings,\n 'Current Step'\n );\n const prevStepController = executionInformationFolder.add(\n settings,\n 'Prev Step'\n );\n const nextStepController = executionInformationFolder.add(\n settings,\n 'Next Step'\n );\n const totalSwapsController = executionInformationFolder.add(\n settings,\n 'Total Swaps'\n );\n const prevBlockHeightController = executionInformationFolder.add(\n settings,\n 'Prev Swap Span'\n );\n const nextBlockHeightController = executionInformationFolder.add(\n settings,\n 'Next Swap Span'\n );\n\n // Adjust styles of Function List Elements within GUI\n const liFunctionElements = document.getElementsByClassName('cr function');\n for (let i = 0; i < liFunctionElements.length; i++) {\n (liFunctionElements[i].children[0] as HTMLElement).style.display = 'flex';\n (liFunctionElements[i].children[0] as HTMLElement).style.justifyContent =\n 'center';\n (\n liFunctionElements[i].children[0].children[1] as HTMLElement\n ).style.position = 'absolute';\n }\n\n // Mouse listener that determines values of hoveredCell and swappedCell\n canvas.addEventListener('mousemove', (event) => {\n const currWidth = canvas.getBoundingClientRect().width;\n const currHeight = canvas.getBoundingClientRect().height;\n const cellSize: [number, number] = [\n currWidth / settings['Grid Width'],\n currHeight / settings['Grid Height'],\n ];\n const xIndex = Math.floor(event.offsetX / cellSize[0]);\n const yIndex =\n settings['Grid Height'] - 1 - Math.floor(event.offsetY / cellSize[1]);\n hoveredCellController.setValue(yIndex * settings['Grid Width'] + xIndex);\n settings['Hovered Cell'] = yIndex * settings['Grid Width'] + xIndex;\n });\n\n // Deactivate interaction with select GUI elements\n sizeLimitController.domElement.style.pointerEvents = 'none';\n workgroupsPerStepController.domElement.style.pointerEvents = 'none';\n hoveredCellController.domElement.style.pointerEvents = 'none';\n swappedCellController.domElement.style.pointerEvents = 'none';\n currentStepController.domElement.style.pointerEvents = 'none';\n prevStepController.domElement.style.pointerEvents = 'none';\n prevBlockHeightController.domElement.style.pointerEvents = 'none';\n nextStepController.domElement.style.pointerEvents = 'none';\n nextBlockHeightController.domElement.style.pointerEvents = 'none';\n workgroupSizeController.domElement.style.pointerEvents = 'none';\n gridDimensionsController.domElement.style.pointerEvents = 'none';\n totalSwapsController.domElement.style.pointerEvents = 'none';\n gui.width = 325;\n\n let highestBlockHeight = 2;\n\n startSortInterval();\n\n async function frame() {\n if (!pageState.active) return;\n\n // Write elements buffer\n device.queue.writeBuffer(\n elementsInputBuffer,\n 0,\n elements.buffer,\n elements.byteOffset,\n elements.byteLength\n );\n\n const dims = new Float32Array([\n settings['Grid Width'],\n settings['Grid Height'],\n ]);\n const stepDetails = new Uint32Array([\n StepEnum[settings['Next Step']],\n settings['Next Swap Span'],\n ]);\n device.queue.writeBuffer(\n computeUniformsBuffer,\n 0,\n dims.buffer,\n dims.byteOffset,\n dims.byteLength\n );\n\n device.queue.writeBuffer(computeUniformsBuffer, 8, stepDetails);\n\n renderPassDescriptor.colorAttachments[0].view = context\n .getCurrentTexture()\n .createView();\n\n const commandEncoder = device.createCommandEncoder();\n bitonicDisplayRenderer.startRun(commandEncoder, {\n highlight: settings['Display Mode'] === 'Elements' ? 0 : 1,\n });\n if (\n settings.executeStep &&\n highestBlockHeight !== settings['Total Elements'] * 2\n ) {\n const computePassEncoder = commandEncoder.beginComputePass();\n computePassEncoder.setPipeline(computePipeline);\n computePassEncoder.setBindGroup(0, computeBGCluster.bindGroups[0]);\n computePassEncoder.dispatchWorkgroups(settings['Workgroups Per Step']);\n computePassEncoder.end();\n settings['Step Index'] = settings['Step Index'] + 1;\n currentStepController.setValue(\n `${settings['Step Index']} of ${settings['Total Steps']}`\n );\n prevStepController.setValue(settings['Next Step']);\n prevBlockHeightController.setValue(settings['Next Swap Span']);\n nextBlockHeightController.setValue(settings['Next Swap Span'] / 2);\n // Each cycle of a bitonic sort contains a flip operation followed by multiple disperse operations\n // Next Swap Span will equal one when the sort needs to begin a new cycle of flip and disperse operations\n if (settings['Next Swap Span'] === 1) {\n // The next cycle's flip operation will have a maximum swap span 2 times that of the previous cycle\n highestBlockHeight *= 2;\n if (highestBlockHeight === settings['Total Elements'] * 2) {\n // The next cycle's maximum swap span exceeds the total number of elements. Thus, the sort is over.\n nextStepController.setValue('NONE');\n nextBlockHeightController.setValue(0);\n } else if (highestBlockHeight > settings['Workgroup Size'] * 2) {\n // The next cycle's maximum swap span exceeds the range of a single workgroup, so our next flip will operate on global indices.\n nextStepController.setValue('FLIP_GLOBAL');\n nextBlockHeightController.setValue(highestBlockHeight);\n } else {\n // The next cycle's maximum swap span can be executed on a range of indices local to the workgroup.\n nextStepController.setValue('FLIP_LOCAL');\n nextBlockHeightController.setValue(highestBlockHeight);\n }\n } else {\n // Otherwise, execute the next disperse operation\n settings['Next Swap Span'] > settings['Workgroup Size'] * 2\n ? nextStepController.setValue('DISPERSE_GLOBAL')\n : nextStepController.setValue('DISPERSE_LOCAL');\n }\n\n // Copy GPU accessible buffers to CPU accessible buffers\n commandEncoder.copyBufferToBuffer(\n elementsOutputBuffer,\n 0,\n elementsStagingBuffer,\n 0,\n elementsBufferSize\n );\n\n commandEncoder.copyBufferToBuffer(\n atomicSwapsOutputBuffer,\n 0,\n atomicSwapsStagingBuffer,\n 0,\n Uint32Array.BYTES_PER_ELEMENT\n );\n }\n device.queue.submit([commandEncoder.finish()]);\n\n if (settings.executeStep) {\n // Copy GPU element data to CPU\n await elementsStagingBuffer.mapAsync(\n GPUMapMode.READ,\n 0,\n elementsBufferSize\n );\n const copyElementsBuffer = elementsStagingBuffer.getMappedRange(\n 0,\n elementsBufferSize\n );\n // Copy atomic swaps data to CPU\n await atomicSwapsStagingBuffer.mapAsync(\n GPUMapMode.READ,\n 0,\n Uint32Array.BYTES_PER_ELEMENT\n );\n const copySwapsBuffer = atomicSwapsStagingBuffer.getMappedRange(\n 0,\n Uint32Array.BYTES_PER_ELEMENT\n );\n // Get correct range of data from CPU copy of GPU Data\n const elementsData = copyElementsBuffer.slice(\n 0,\n Uint32Array.BYTES_PER_ELEMENT * settings['Total Elements']\n );\n const swapsData = copySwapsBuffer.slice(\n 0,\n Uint32Array.BYTES_PER_ELEMENT\n );\n // Extract data\n const elementsOutput = new Uint32Array(elementsData);\n totalSwapsController.setValue(new Uint32Array(swapsData)[0]);\n elementsStagingBuffer.unmap();\n atomicSwapsStagingBuffer.unmap();\n // Elements output becomes elements input, swap accumulate\n elements = elementsOutput;\n setSwappedCell();\n }\n settings.executeStep = false;\n requestAnimationFrame(frame);\n }\n requestAnimationFrame(frame);\n }\n).then((resultInit) => (init = resultInit));\n\nconst bitonicSortExample: () => JSX.Element = () =>\n makeSample({\n name: 'Bitonic Sort',\n description:\n \"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.\",\n init,\n gui: true,\n sources: [\n {\n name: __filename.substring(__dirname.length + 1),\n contents: __SOURCE__,\n },\n BitonicDisplayRenderer.sourceInfo,\n {\n name: '../../../shaders/fullscreenTexturedQuad.vert.wgsl',\n contents: fullscreenTexturedQuad,\n },\n {\n name: './bitonicDisplay.frag.wgsl',\n contents: bitonicDisplay,\n },\n {\n name: './bitonicCompute.ts',\n // eslint-disable-next-line @typescript-eslint/no-var-requires\n contents: require('!!raw-loader!./bitonicCompute.ts').default,\n },\n {\n name: './atomicToZero.wgsl',\n contents: atomicToZero,\n },\n ],\n filename: __filename,\n });\n\nexport default bitonicSortExample;\n"},p.sourceInfo,{name:"../../../shaders/fullscreenTexturedQuad.vert.wgsl",contents:s.Z},{name:"./bitonicDisplay.frag.wgsl",contents:d},{name:"./bitonicCompute.ts",contents:t(6502).Z},{name:"./atomicToZero.wgsl",contents:f}],filename:g});var _=S},9147:function(e){e.exports={canvasContainer:"SampleLayout_canvasContainer__zRR_l",sourceFileNav:"SampleLayout_sourceFileNav__ml48P",sourceFileContainer:"SampleLayout_sourceFileContainer__3s84x"}},6502:function(e,n){"use strict";n.Z="export const computeArgKeys = ['width', 'height', 'algo', 'blockHeight'];\n\nexport const NaiveBitonicCompute = (workgroupSize: number) => {\n if (workgroupSize % 2 !== 0 || workgroupSize > 256) {\n workgroupSize = 256;\n }\n // Ensure that workgroupSize is half the number of elements\n return `\n\nstruct Uniforms {\n width: f32,\n height: f32,\n algo: u32,\n blockHeight: u32,\n}\n\n// Create local workgroup data that can contain all elements\nvar local_data: array;\n\n// Define groups (functions refer to this data)\n@group(0) @binding(0) var input_data: array;\n@group(0) @binding(1) var output_data: array;\n@group(0) @binding(2) var uniforms: Uniforms;\n@group(0) @binding(3) var counter: atomic;\n\n// Compare and swap values in local_data\nfn local_compare_and_swap(idx_before: u32, idx_after: u32) {\n //idx_before should always be < idx_after\n if (local_data[idx_after] < local_data[idx_before]) {\n atomicAdd(&counter, 1);\n var temp: u32 = local_data[idx_before];\n local_data[idx_before] = local_data[idx_after];\n local_data[idx_after] = temp;\n }\n return;\n}\n\n// invoke_id goes from 0 to workgroupSize\nfn get_flip_indices(invoke_id: u32, block_height: u32) -> vec2 {\n // Caculate index offset (i.e move indices into correct block)\n let block_offset: u32 = ((2 * invoke_id) / block_height) * block_height;\n let half_height = block_height / 2;\n // Calculate index spacing\n var idx: vec2 = vec2(\n invoke_id % half_height, block_height - (invoke_id % half_height) - 1,\n );\n idx.x += block_offset;\n idx.y += block_offset;\n return idx;\n}\n\nfn get_disperse_indices(invoke_id: u32, block_height: u32) -> vec2 {\n var block_offset: u32 = ((2 * invoke_id) / block_height) * block_height;\n let half_height = block_height / 2;\n var idx: vec2 = vec2(\n invoke_id % half_height, (invoke_id % half_height) + half_height\n );\n idx.x += block_offset;\n idx.y += block_offset;\n return idx;\n}\n\nfn global_compare_and_swap(idx_before: u32, idx_after: u32) {\n if (input_data[idx_after] < input_data[idx_before]) {\n output_data[idx_before] = input_data[idx_after];\n output_data[idx_after] = input_data[idx_before];\n } \n}\n\n// Constants/enum\nconst ALGO_NONE = 0;\nconst ALGO_LOCAL_FLIP = 1;\nconst ALGO_LOCAL_DISPERSE = 2;\nconst ALGO_GLOBAL_FLIP = 3;\n\n// Our compute shader will execute specified # of invocations or elements / 2 invocations\n@compute @workgroup_size(${workgroupSize}, 1, 1)\nfn computeMain(\n @builtin(global_invocation_id) global_id: vec3,\n @builtin(local_invocation_id) local_id: vec3,\n @builtin(workgroup_id) workgroup_id: vec3,\n) {\n\n let offset = ${workgroupSize} * 2 * workgroup_id.x;\n // If we will perform a local swap, then populate the local data\n if (uniforms.algo <= 2) {\n // Assign range of input_data to local_data.\n // Range cannot exceed maxWorkgroupsX * 2\n // Each invocation will populate the workgroup data... (1 invocation for every 2 elements)\n local_data[local_id.x * 2] = input_data[offset + local_id.x * 2];\n local_data[local_id.x * 2 + 1] = input_data[offset + local_id.x * 2 + 1];\n }\n\n //...and wait for each other to finish their own bit of data population.\n workgroupBarrier();\n\n switch uniforms.algo {\n case 1: { // Local Flip\n let idx = get_flip_indices(local_id.x, uniforms.blockHeight);\n local_compare_and_swap(idx.x, idx.y);\n } \n case 2: { // Local Disperse\n let idx = get_disperse_indices(local_id.x, uniforms.blockHeight);\n local_compare_and_swap(idx.x, idx.y);\n } \n case 3: { // Global Flip\n let idx = get_flip_indices(global_id.x, uniforms.blockHeight);\n global_compare_and_swap(idx.x, idx.y);\n }\n case 4: { \n let idx = get_disperse_indices(global_id.x, uniforms.blockHeight);\n global_compare_and_swap(idx.x, idx.y);\n }\n default: { \n \n }\n }\n\n // Ensure that all invocations have swapped their own regions of data\n workgroupBarrier();\n\n if (uniforms.algo <= ALGO_LOCAL_DISPERSE) {\n //Repopulate global data with local data\n output_data[offset + local_id.x * 2] = local_data[local_id.x * 2];\n output_data[offset + local_id.x * 2 + 1] = local_data[local_id.x * 2 + 1];\n }\n\n}`;\n};\n"},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/pages/_app-029e0c7dcec9c745.js b/_next/static/chunks/pages/_app-8277d0eb9fcb4fe2.js similarity index 83% rename from _next/static/chunks/pages/_app-029e0c7dcec9c745.js rename to _next/static/chunks/pages/_app-8277d0eb9fcb4fe2.js index 43e2cf46..55a52fd5 100644 --- a/_next/static/chunks/pages/_app-029e0c7dcec9c745.js +++ b/_next/static/chunks/pages/_app-8277d0eb9fcb4fe2.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(6505)}])},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),d=n(9246),c=n(227),f=n(3468);let p={};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;p[t+"%"+n+(r?"%"+r:"")]=!0}let b=l.default.forwardRef(function(e,t){let n,a;let{href:b,as:m,children:_,prefetch:y,passHref:v,replace:g,shallow:x,scroll:w,locale:k,onClick:P,onMouseEnter:j,onTouchStart:C,legacyBehavior:L=!0!==Boolean(!0)}=e,T=r(e,["href","as","children","prefetch","passHref","replace","shallow","scroll","locale","onClick","onMouseEnter","onTouchStart","legacyBehavior"]);n=_,L&&("string"==typeof n||"number"==typeof n)&&(n=l.default.createElement("a",null,n));let G=!1!==y,M=l.default.useContext(s.RouterContext),O=l.default.useContext(u.AppRouterContext);O&&(M=O);let{href:E,as:R}=l.default.useMemo(()=>{let[e,t]=o.resolveHref(M,b,!0);return{href:e,as:m?o.resolveHref(M,m):t||e}},[M,b,m]),S=l.default.useRef(E),A=l.default.useRef(R);L&&(a=l.default.Children.only(n));let N=L?a&&"object"==typeof a&&a.ref:t,[D,I,U]=d.useIntersection({rootMargin:"200px"}),B=l.default.useCallback(e=>{(A.current!==R||S.current!==E)&&(U(),A.current=R,S.current=E),D(e),N&&("function"==typeof N?N(e):"object"==typeof N&&(N.current=e))},[R,N,E,U,D]);l.default.useEffect(()=>{let e=I&&G&&o.isLocalURL(E),t=void 0!==k?k:M&&M.locale,n=p[E+"%"+R+(t?"%"+t:"")];e&&!n&&h(M,E,R,{locale:t})},[R,E,I,k,G,M]);let W={ref:B,onClick(e){L||"function"!=typeof P||P(e),L&&a.props&&"function"==typeof a.props.onClick&&a.props.onClick(e),e.defaultPrevented||function(e,t,n,a,r,i,s,u,d,c){let{nodeName:f}=e.currentTarget,p="A"===f.toUpperCase();if(p&&(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:!c})};d?l.default.startTransition(h):h()}(e,M,E,R,g,x,w,k,Boolean(O),G)},onMouseEnter(e){L||"function"!=typeof j||j(e),L&&a.props&&"function"==typeof a.props.onMouseEnter&&a.props.onMouseEnter(e),!(!G&&O)&&o.isLocalURL(E)&&h(M,E,R,{priority:!0})},onTouchStart(e){L||"function"!=typeof C||C(e),L&&a.props&&"function"==typeof a.props.onTouchStart&&a.props.onTouchStart(e),!(!G&&O)&&o.isLocalURL(E)&&h(M,E,R,{priority:!0})}};if(!L||v||"a"===a.type&&!("href"in a.props)){let Z=void 0!==k?k:M&&M.locale,H=M&&M.isLocaleDomain&&c.getDomainLocale(R,Z,M.locales,M.domainLocales);W.href=H||f.addBasePath(i.addLocale(R,Z,M&&M.defaultLocale))}return L?l.default.cloneElement(a,W):l.default.createElement("a",Object.assign({},T,W),n)});t.default=b,("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,[d,c]=a.useState(!1),[f,p]=a.useState(null);a.useEffect(()=>{if(l){if(!u&&!d&&f&&f.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)}}}(f,e=>e&&c(e),{root:null==t?void 0:t.current,rootMargin:n});return e}}else if(!d){let a=r.requestIdleCallback(()=>c(!0));return()=>r.cancelIdleCallback(a)}},[f,u,n,t,d]);let h=a.useCallback(()=>{c(!1)},[]);return[p,d,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 d(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 c{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 f(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 d(){if(!i){let t=new c(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 f=n.webpack?n.webpack():n.modules;f&&s.push(e=>{for(let t of f)if(-1!==e.indexOf(t))return d()})}function p(){d();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 p(),r.default.createElement(n.lazy,a({},e,{ref:t}))}:function(e,t){p();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=()=>d(),h.displayName="LoadableComponent",r.default.forwardRef(h)}(d,e)}function p(e,t){let n=[];for(;e.length;){let a=e.pop();n.push(a(t))}return Promise.all(n).then(()=>{if(e.length)return p(e,t)})}f.preloadAll=()=>new Promise((e,t)=>{p(i).then(e,t)}),f.preloadReady=function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];return new Promise(t=>{let n=()=>(u=!0,t());p(s,e).then(n,n)})},window.__NEXT_PRELOADREADY=f.preloadReady,t.default=f},6505:function(e,t,n){"use strict";n.r(t);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 d=n(6988),c=n.n(d),f=n(1958),p=n(3454);let h="WebGPU Samples",b=e=>{let{Component:t,pageProps:n}=e,r=(0,s.useRouter)(),o=Object.keys(f.pages),[d,b]=(0,u.useState)(!1),m=r.asPath.match(/(\?wgsl=[01])#(\S+)/);if(m){let _=m[2];return r.replace("/samples/".concat(_)),(0,a.jsx)(a.Fragment,{})}return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(l(),{children:[(0,a.jsx)("title",{children:h}),(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:c().wrapper,children:[(0,a.jsxs)("nav",{className:"".concat(c().panel," ").concat(c().container),"data-expanded":d,children:[(0,a.jsxs)("h1",{children:[(0,a.jsx)(i(),{href:"/",children:h}),(0,a.jsx)("div",{className:c().expand,onClick(){b(!d)}})]}),(0,a.jsxs)("div",{className:c().panelContents,children:[(0,a.jsx)("a",{href:"https://github.com/".concat("webgpu/webgpu-samples"),children:"Github"}),(0,a.jsx)("hr",{}),(0,a.jsx)("ul",{className:c().exampleList,children:o.map(e=>{let t="/samples/[slug]"===r.pathname&&r.query.slug===e?c().selected:void 0;return(0,a.jsx)("li",{className:t,onMouseOver(){f.pages[e].render.preload()},children:(0,a.jsx)(i(),{href:"/samples/".concat(e),onClick(){b(!1)},children:e})},e)})}),(0,a.jsx)("hr",{}),(0,a.jsx)("h3",{children:"Other Pages"}),(0,a.jsx)("ul",{className:c().exampleList,children:(0,a.jsx)("li",{children:(0,a.jsx)("a",{rel:"noreferrer",target:"_blank",href:"".concat(p.env.BASE_PATH||"","/workload-simulator.html"),children:"Workload Simulator ↗️"})})})]})]}),(0,a.jsx)(t,{...n})]})]})};t.default=b},1958:function(e,t,n){"use strict";n.r(t),n.d(t,{__N_SSG:function(){return o},pages:function(){return i}});var a=n(5893),r=n(5152),l=n.n(r),o=!0;let i={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]}}),resizeCanvas:l()(()=>Promise.all([n.e(126),n.e(82),n.e(565)]).then(n.bind(n,8565)),{loadableGenerated:{webpack:()=>[8565]}}),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]}}),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]}}),cameras:l()(()=>Promise.all([n.e(126),n.e(746),n.e(82),n.e(878)]).then(n.bind(n,3878)),{loadableGenerated:{webpack:()=>[3878]}}),cubemap:l()(()=>Promise.all([n.e(126),n.e(746),n.e(82),n.e(432)]).then(n.bind(n,1432)),{loadableGenerated:{webpack:()=>[1432]}}),computeBoids:l()(()=>Promise.all([n.e(126),n.e(82),n.e(752)]).then(n.bind(n,2752)),{loadableGenerated:{webpack:()=>[2752]}}),animometer:l()(()=>Promise.all([n.e(126),n.e(82),n.e(841)]).then(n.bind(n,841)),{loadableGenerated:{webpack:()=>[841]}}),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]}}),samplerParameters:l()(()=>Promise.all([n.e(126),n.e(746),n.e(82),n.e(624)]).then(n.bind(n,8624)),{loadableGenerated:{webpack:()=>[8624]}}),imageBlur:l()(()=>Promise.all([n.e(126),n.e(82),n.e(770)]).then(n.bind(n,1770)),{loadableGenerated:{webpack:()=>[1770]}}),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]}}),reversedZ:l()(()=>Promise.all([n.e(126),n.e(746),n.e(82),n.e(588)]).then(n.bind(n,7502)),{loadableGenerated:{webpack:()=>[7502]}}),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]}}),cornell:l()(()=>Promise.all([n.e(126),n.e(746),n.e(82),n.e(874)]).then(n.bind(n,6874)),{loadableGenerated:{webpack:()=>[6874]}}),gameOfLife:l()(()=>Promise.all([n.e(126),n.e(82),n.e(391)]).then(n.bind(n,7391)),{loadableGenerated:{webpack:()=>[7391]}}),renderBundles:l()(()=>Promise.all([n.e(126),n.e(746),n.e(82),n.e(428)]).then(n.bind(n,3428)),{loadableGenerated:{webpack:()=>[3428]}}),worker:l()(()=>Promise.all([n.e(126),n.e(82),n.e(78)]).then(n.bind(n,6078)),{loadableGenerated:{webpack:()=>[6078]}}),"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]}}),bitonicSort:l()(()=>Promise.all([n.e(126),n.e(82),n.e(16)]).then(n.bind(n,5016)),{loadableGenerated:{webpack:()=>[5016]}}),normalMap:l()(()=>Promise.all([n.e(126),n.e(746),n.e(82),n.e(118)]).then(n.bind(n,7118)),{loadableGenerated:{webpack:()=>[7118]}})};t.default=function(e){let{slug:t}=e,n=i[t];return(0,a.jsx)(n,{})}},6988:function(e){e.exports={container:"MainLayout_container__l_Vkn",wrapper:"MainLayout_wrapper__eI_HE",panel:"MainLayout_panel__GdjKj",exampleList:"MainLayout_exampleList__FHCmd",selected:"MainLayout_selected__Yjoh0",expand:"MainLayout_expand__FEWWW",exampleLink:"MainLayout_exampleLink__qX1DA",panelContents:"MainLayout_panelContents__w1BWs"}},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,d=-1;function c(){u&&a&&(u=!1,a.length?s=a.concat(s):d=-1,s.length&&f())}function f(){if(!u){var e=i(c);u=!0;for(var t=s.length;t;){for(a=s,s=[];++d1)for(var n=1;n{});let r=a&&void 0!==a.locale?a.locale:e&&e.locale;p[t+"%"+n+(r?"%"+r:"")]=!0}let b=l.default.forwardRef(function(e,t){let n,a;let{href:b,as:m,children:_,prefetch:y,passHref:v,replace:g,shallow:x,scroll:w,locale:k,onClick:P,onMouseEnter:j,onTouchStart:C,legacyBehavior:L=!0!==Boolean(!0)}=e,T=r(e,["href","as","children","prefetch","passHref","replace","shallow","scroll","locale","onClick","onMouseEnter","onTouchStart","legacyBehavior"]);n=_,L&&("string"==typeof n||"number"==typeof n)&&(n=l.default.createElement("a",null,n));let G=!1!==y,M=l.default.useContext(s.RouterContext),O=l.default.useContext(u.AppRouterContext);O&&(M=O);let{href:E,as:R}=l.default.useMemo(()=>{let[e,t]=o.resolveHref(M,b,!0);return{href:e,as:m?o.resolveHref(M,m):t||e}},[M,b,m]),S=l.default.useRef(E),A=l.default.useRef(R);L&&(a=l.default.Children.only(n));let N=L?a&&"object"==typeof a&&a.ref:t,[D,I,U]=d.useIntersection({rootMargin:"200px"}),B=l.default.useCallback(e=>{(A.current!==R||S.current!==E)&&(U(),A.current=R,S.current=E),D(e),N&&("function"==typeof N?N(e):"object"==typeof N&&(N.current=e))},[R,N,E,U,D]);l.default.useEffect(()=>{let e=I&&G&&o.isLocalURL(E),t=void 0!==k?k:M&&M.locale,n=p[E+"%"+R+(t?"%"+t:"")];e&&!n&&h(M,E,R,{locale:t})},[R,E,I,k,G,M]);let W={ref:B,onClick(e){L||"function"!=typeof P||P(e),L&&a.props&&"function"==typeof a.props.onClick&&a.props.onClick(e),e.defaultPrevented||function(e,t,n,a,r,i,s,u,d,c){let{nodeName:f}=e.currentTarget,p="A"===f.toUpperCase();if(p&&(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:!c})};d?l.default.startTransition(h):h()}(e,M,E,R,g,x,w,k,Boolean(O),G)},onMouseEnter(e){L||"function"!=typeof j||j(e),L&&a.props&&"function"==typeof a.props.onMouseEnter&&a.props.onMouseEnter(e),!(!G&&O)&&o.isLocalURL(E)&&h(M,E,R,{priority:!0})},onTouchStart(e){L||"function"!=typeof C||C(e),L&&a.props&&"function"==typeof a.props.onTouchStart&&a.props.onTouchStart(e),!(!G&&O)&&o.isLocalURL(E)&&h(M,E,R,{priority:!0})}};if(!L||v||"a"===a.type&&!("href"in a.props)){let Z=void 0!==k?k:M&&M.locale,H=M&&M.isLocaleDomain&&c.getDomainLocale(R,Z,M.locales,M.domainLocales);W.href=H||f.addBasePath(i.addLocale(R,Z,M&&M.defaultLocale))}return L?l.default.cloneElement(a,W):l.default.createElement("a",Object.assign({},T,W),n)});t.default=b,("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,[d,c]=a.useState(!1),[f,p]=a.useState(null);a.useEffect(()=>{if(l){if(!u&&!d&&f&&f.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)}}}(f,e=>e&&c(e),{root:null==t?void 0:t.current,rootMargin:n});return e}}else if(!d){let a=r.requestIdleCallback(()=>c(!0));return()=>r.cancelIdleCallback(a)}},[f,u,n,t,d]);let h=a.useCallback(()=>{c(!1)},[]);return[p,d,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 d(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 c{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 f(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 d(){if(!i){let t=new c(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 f=n.webpack?n.webpack():n.modules;f&&s.push(e=>{for(let t of f)if(-1!==e.indexOf(t))return d()})}function p(){d();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 p(),r.default.createElement(n.lazy,a({},e,{ref:t}))}:function(e,t){p();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=()=>d(),h.displayName="LoadableComponent",r.default.forwardRef(h)}(d,e)}function p(e,t){let n=[];for(;e.length;){let a=e.pop();n.push(a(t))}return Promise.all(n).then(()=>{if(e.length)return p(e,t)})}f.preloadAll=()=>new Promise((e,t)=>{p(i).then(e,t)}),f.preloadReady=function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];return new Promise(t=>{let n=()=>(u=!0,t());p(s,e).then(n,n)})},window.__NEXT_PRELOADREADY=f.preloadReady,t.default=f},6505:function(e,t,n){"use strict";n.r(t);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 d=n(6988),c=n.n(d),f=n(1958),p=n(3454);let h="WebGPU Samples",b=e=>{let{Component:t,pageProps:n}=e,r=(0,s.useRouter)(),o=Object.keys(f.pages),[d,b]=(0,u.useState)(!1),m=r.asPath.match(/(\?wgsl=[01])#(\S+)/);if(m){let _=m[2];return r.replace("/samples/".concat(_)),(0,a.jsx)(a.Fragment,{})}return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(l(),{children:[(0,a.jsx)("title",{children:h}),(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:c().wrapper,children:[(0,a.jsxs)("nav",{className:"".concat(c().panel," ").concat(c().container),"data-expanded":d,children:[(0,a.jsxs)("h1",{children:[(0,a.jsx)(i(),{href:"/",children:h}),(0,a.jsx)("div",{className:c().expand,onClick(){b(!d)}})]}),(0,a.jsxs)("div",{className:c().panelContents,children:[(0,a.jsx)("a",{href:"https://github.com/".concat("webgpu/webgpu-samples"),children:"Github"}),(0,a.jsx)("hr",{}),(0,a.jsx)("ul",{className:c().exampleList,children:o.map(e=>{let t="/samples/[slug]"===r.pathname&&r.query.slug===e?c().selected:void 0;return(0,a.jsx)("li",{className:t,onMouseOver(){f.pages[e].render.preload()},children:(0,a.jsx)(i(),{href:"/samples/".concat(e),onClick(){b(!1)},children:e})},e)})}),(0,a.jsx)("hr",{}),(0,a.jsx)("h3",{children:"Other Pages"}),(0,a.jsx)("ul",{className:c().exampleList,children:(0,a.jsx)("li",{children:(0,a.jsx)("a",{rel:"noreferrer",target:"_blank",href:"".concat(p.env.BASE_PATH||"","/workload-simulator.html"),children:"Workload Simulator ↗️"})})})]})]}),(0,a.jsx)(t,{...n})]})]})};t.default=b},1958:function(e,t,n){"use strict";n.r(t),n.d(t,{__N_SSG:function(){return o},pages:function(){return i}});var a=n(5893),r=n(5152),l=n.n(r),o=!0;let i={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]}}),resizeCanvas:l()(()=>Promise.all([n.e(126),n.e(82),n.e(565)]).then(n.bind(n,8565)),{loadableGenerated:{webpack:()=>[8565]}}),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]}}),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]}}),cameras:l()(()=>Promise.all([n.e(126),n.e(746),n.e(82),n.e(878)]).then(n.bind(n,3878)),{loadableGenerated:{webpack:()=>[3878]}}),cubemap:l()(()=>Promise.all([n.e(126),n.e(746),n.e(82),n.e(432)]).then(n.bind(n,1432)),{loadableGenerated:{webpack:()=>[1432]}}),computeBoids:l()(()=>Promise.all([n.e(126),n.e(82),n.e(752)]).then(n.bind(n,2752)),{loadableGenerated:{webpack:()=>[2752]}}),animometer:l()(()=>Promise.all([n.e(126),n.e(82),n.e(841)]).then(n.bind(n,841)),{loadableGenerated:{webpack:()=>[841]}}),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]}}),samplerParameters:l()(()=>Promise.all([n.e(126),n.e(746),n.e(82),n.e(624)]).then(n.bind(n,8624)),{loadableGenerated:{webpack:()=>[8624]}}),imageBlur:l()(()=>Promise.all([n.e(126),n.e(82),n.e(770)]).then(n.bind(n,1770)),{loadableGenerated:{webpack:()=>[1770]}}),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]}}),reversedZ:l()(()=>Promise.all([n.e(126),n.e(746),n.e(82),n.e(588)]).then(n.bind(n,7502)),{loadableGenerated:{webpack:()=>[7502]}}),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]}}),cornell:l()(()=>Promise.all([n.e(126),n.e(746),n.e(82),n.e(874)]).then(n.bind(n,6874)),{loadableGenerated:{webpack:()=>[6874]}}),gameOfLife:l()(()=>Promise.all([n.e(126),n.e(82),n.e(391)]).then(n.bind(n,7391)),{loadableGenerated:{webpack:()=>[7391]}}),renderBundles:l()(()=>Promise.all([n.e(126),n.e(746),n.e(82),n.e(428)]).then(n.bind(n,3428)),{loadableGenerated:{webpack:()=>[3428]}}),worker:l()(()=>Promise.all([n.e(126),n.e(82),n.e(78)]).then(n.bind(n,6078)),{loadableGenerated:{webpack:()=>[6078]}}),"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]}}),bitonicSort:l()(()=>Promise.all([n.e(126),n.e(82),n.e(880)]).then(n.bind(n,9880)),{loadableGenerated:{webpack:()=>[9880]}}),normalMap:l()(()=>Promise.all([n.e(126),n.e(746),n.e(82),n.e(118)]).then(n.bind(n,7118)),{loadableGenerated:{webpack:()=>[7118]}})};t.default=function(e){let{slug:t}=e,n=i[t];return(0,a.jsx)(n,{})}},6988:function(e){e.exports={container:"MainLayout_container__l_Vkn",wrapper:"MainLayout_wrapper__eI_HE",panel:"MainLayout_panel__GdjKj",exampleList:"MainLayout_exampleList__FHCmd",selected:"MainLayout_selected__Yjoh0",expand:"MainLayout_expand__FEWWW",exampleLink:"MainLayout_exampleLink__qX1DA",panelContents:"MainLayout_panelContents__w1BWs"}},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,d=-1;function c(){u&&a&&(u=!1,a.length?s=a.concat(s):d=-1,s.length&&f())}function f(){if(!u){var e=i(c);u=!0;for(var t=s.length;t;){for(a=s,s=[];++d1)for(var n=1;n0&&e[a-1][2]>f;a--)e[a]=e[a-1];e[a]=[r,n,f];return}for(var c=1/0,a=0;a=f&&Object.keys(l.O).every(function(e){return l.O[e](r[i])})?r.splice(i--,1):(o=!1,f0&&e[a-1][2]>f;a--)e[a]=e[a-1];e[a]=[r,n,f];return}for(var c=1/0,a=0;a=f&&Object.keys(l.O).every(function(e){return l.O[e](r[i])})?r.splice(i--,1):(o=!1,fWebGPU 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 a6fff0aa..000c5553 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 6bd90713..6e13bf9e 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 58329483..84781e81 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 invocation of the bitonic sort shader dispatches a workgroup containing elements/2 threads. 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 8ba8b97c..03e6719c 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 c9bbabe2..1a0fe73f 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 d25f79ce..19942c2b 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 e2384649..e0a508d1 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 27648488..6538afe7 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 a6abddf2..bc6dc7a2 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 9af6f1fb..bd656361 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 4139a626..b74c3da8 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 e8ed5cf6..86d7fafd 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 7e2a1dbd..5fdc1f2d 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 f41bec5f..a5832479 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 ff795097..3de76cca 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 d46d5005..59579e2a 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 846dba3a..22fbb441 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 1d70f927..6f653362 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 cc69eff9..e4dba85f 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 00052325..b268ea9f 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 7ab226f1..44e7b315 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 7d2f93a7..b8c24d58 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/texturedCube.html b/samples/texturedCube.html index 53c07e65..9e54279e 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 dc82f9cc..c1ae0e93 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 3b3d1b2e..e1c7a72f 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 index 840ada60..9115679e 100644 --- a/samples/videoUploadingWebCodecs.html +++ b/samples/videoUploadingWebCodecs.html @@ -8,4 +8,4 @@ height: auto !important; overflow: visible !important; } - 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 + 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 62ec5295..f0100227 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