diff --git a/404.html b/404.html index db151352..77a3ca7e 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/pZjCrhGJBHZXDy2WjAS6H/samples/A-buffer.json b/_next/data/xFpWtHIgZZiYtYujEz2Rj/samples/A-buffer.json similarity index 100% rename from _next/data/pZjCrhGJBHZXDy2WjAS6H/samples/A-buffer.json rename to _next/data/xFpWtHIgZZiYtYujEz2Rj/samples/A-buffer.json diff --git a/_next/data/pZjCrhGJBHZXDy2WjAS6H/samples/animometer.json b/_next/data/xFpWtHIgZZiYtYujEz2Rj/samples/animometer.json similarity index 100% rename from _next/data/pZjCrhGJBHZXDy2WjAS6H/samples/animometer.json rename to _next/data/xFpWtHIgZZiYtYujEz2Rj/samples/animometer.json diff --git a/_next/data/pZjCrhGJBHZXDy2WjAS6H/samples/bitonicSort.json b/_next/data/xFpWtHIgZZiYtYujEz2Rj/samples/bitonicSort.json similarity index 100% rename from _next/data/pZjCrhGJBHZXDy2WjAS6H/samples/bitonicSort.json rename to _next/data/xFpWtHIgZZiYtYujEz2Rj/samples/bitonicSort.json diff --git a/_next/data/pZjCrhGJBHZXDy2WjAS6H/samples/cameras.json b/_next/data/xFpWtHIgZZiYtYujEz2Rj/samples/cameras.json similarity index 100% rename from _next/data/pZjCrhGJBHZXDy2WjAS6H/samples/cameras.json rename to _next/data/xFpWtHIgZZiYtYujEz2Rj/samples/cameras.json diff --git a/_next/data/pZjCrhGJBHZXDy2WjAS6H/samples/computeBoids.json b/_next/data/xFpWtHIgZZiYtYujEz2Rj/samples/computeBoids.json similarity index 100% rename from _next/data/pZjCrhGJBHZXDy2WjAS6H/samples/computeBoids.json rename to _next/data/xFpWtHIgZZiYtYujEz2Rj/samples/computeBoids.json diff --git a/_next/data/pZjCrhGJBHZXDy2WjAS6H/samples/cornell.json b/_next/data/xFpWtHIgZZiYtYujEz2Rj/samples/cornell.json similarity index 100% rename from _next/data/pZjCrhGJBHZXDy2WjAS6H/samples/cornell.json rename to _next/data/xFpWtHIgZZiYtYujEz2Rj/samples/cornell.json diff --git a/_next/data/pZjCrhGJBHZXDy2WjAS6H/samples/cubemap.json b/_next/data/xFpWtHIgZZiYtYujEz2Rj/samples/cubemap.json similarity index 100% rename from _next/data/pZjCrhGJBHZXDy2WjAS6H/samples/cubemap.json rename to _next/data/xFpWtHIgZZiYtYujEz2Rj/samples/cubemap.json diff --git a/_next/data/pZjCrhGJBHZXDy2WjAS6H/samples/deferredRendering.json b/_next/data/xFpWtHIgZZiYtYujEz2Rj/samples/deferredRendering.json similarity index 100% rename from _next/data/pZjCrhGJBHZXDy2WjAS6H/samples/deferredRendering.json rename to _next/data/xFpWtHIgZZiYtYujEz2Rj/samples/deferredRendering.json diff --git a/_next/data/pZjCrhGJBHZXDy2WjAS6H/samples/fractalCube.json b/_next/data/xFpWtHIgZZiYtYujEz2Rj/samples/fractalCube.json similarity index 100% rename from _next/data/pZjCrhGJBHZXDy2WjAS6H/samples/fractalCube.json rename to _next/data/xFpWtHIgZZiYtYujEz2Rj/samples/fractalCube.json diff --git a/_next/data/pZjCrhGJBHZXDy2WjAS6H/samples/gameOfLife.json b/_next/data/xFpWtHIgZZiYtYujEz2Rj/samples/gameOfLife.json similarity index 100% rename from _next/data/pZjCrhGJBHZXDy2WjAS6H/samples/gameOfLife.json rename to _next/data/xFpWtHIgZZiYtYujEz2Rj/samples/gameOfLife.json diff --git a/_next/data/pZjCrhGJBHZXDy2WjAS6H/samples/helloTriangle.json b/_next/data/xFpWtHIgZZiYtYujEz2Rj/samples/helloTriangle.json similarity index 100% rename from _next/data/pZjCrhGJBHZXDy2WjAS6H/samples/helloTriangle.json rename to _next/data/xFpWtHIgZZiYtYujEz2Rj/samples/helloTriangle.json diff --git a/_next/data/pZjCrhGJBHZXDy2WjAS6H/samples/helloTriangleMSAA.json b/_next/data/xFpWtHIgZZiYtYujEz2Rj/samples/helloTriangleMSAA.json similarity index 100% rename from _next/data/pZjCrhGJBHZXDy2WjAS6H/samples/helloTriangleMSAA.json rename to _next/data/xFpWtHIgZZiYtYujEz2Rj/samples/helloTriangleMSAA.json diff --git a/_next/data/pZjCrhGJBHZXDy2WjAS6H/samples/imageBlur.json b/_next/data/xFpWtHIgZZiYtYujEz2Rj/samples/imageBlur.json similarity index 100% rename from _next/data/pZjCrhGJBHZXDy2WjAS6H/samples/imageBlur.json rename to _next/data/xFpWtHIgZZiYtYujEz2Rj/samples/imageBlur.json diff --git a/_next/data/pZjCrhGJBHZXDy2WjAS6H/samples/instancedCube.json b/_next/data/xFpWtHIgZZiYtYujEz2Rj/samples/instancedCube.json similarity index 100% rename from _next/data/pZjCrhGJBHZXDy2WjAS6H/samples/instancedCube.json rename to _next/data/xFpWtHIgZZiYtYujEz2Rj/samples/instancedCube.json diff --git a/_next/data/pZjCrhGJBHZXDy2WjAS6H/samples/normalMap.json b/_next/data/xFpWtHIgZZiYtYujEz2Rj/samples/normalMap.json similarity index 100% rename from _next/data/pZjCrhGJBHZXDy2WjAS6H/samples/normalMap.json rename to _next/data/xFpWtHIgZZiYtYujEz2Rj/samples/normalMap.json diff --git a/_next/data/pZjCrhGJBHZXDy2WjAS6H/samples/particles.json b/_next/data/xFpWtHIgZZiYtYujEz2Rj/samples/particles.json similarity index 100% rename from _next/data/pZjCrhGJBHZXDy2WjAS6H/samples/particles.json rename to _next/data/xFpWtHIgZZiYtYujEz2Rj/samples/particles.json diff --git a/_next/data/pZjCrhGJBHZXDy2WjAS6H/samples/renderBundles.json b/_next/data/xFpWtHIgZZiYtYujEz2Rj/samples/renderBundles.json similarity index 100% rename from _next/data/pZjCrhGJBHZXDy2WjAS6H/samples/renderBundles.json rename to _next/data/xFpWtHIgZZiYtYujEz2Rj/samples/renderBundles.json diff --git a/_next/data/pZjCrhGJBHZXDy2WjAS6H/samples/resizeCanvas.json b/_next/data/xFpWtHIgZZiYtYujEz2Rj/samples/resizeCanvas.json similarity index 100% rename from _next/data/pZjCrhGJBHZXDy2WjAS6H/samples/resizeCanvas.json rename to _next/data/xFpWtHIgZZiYtYujEz2Rj/samples/resizeCanvas.json diff --git a/_next/data/pZjCrhGJBHZXDy2WjAS6H/samples/reversedZ.json b/_next/data/xFpWtHIgZZiYtYujEz2Rj/samples/reversedZ.json similarity index 100% rename from _next/data/pZjCrhGJBHZXDy2WjAS6H/samples/reversedZ.json rename to _next/data/xFpWtHIgZZiYtYujEz2Rj/samples/reversedZ.json diff --git a/_next/data/pZjCrhGJBHZXDy2WjAS6H/samples/rotatingCube.json b/_next/data/xFpWtHIgZZiYtYujEz2Rj/samples/rotatingCube.json similarity index 100% rename from _next/data/pZjCrhGJBHZXDy2WjAS6H/samples/rotatingCube.json rename to _next/data/xFpWtHIgZZiYtYujEz2Rj/samples/rotatingCube.json diff --git a/_next/data/pZjCrhGJBHZXDy2WjAS6H/samples/samplerParameters.json b/_next/data/xFpWtHIgZZiYtYujEz2Rj/samples/samplerParameters.json similarity index 100% rename from _next/data/pZjCrhGJBHZXDy2WjAS6H/samples/samplerParameters.json rename to _next/data/xFpWtHIgZZiYtYujEz2Rj/samples/samplerParameters.json diff --git a/_next/data/pZjCrhGJBHZXDy2WjAS6H/samples/shadowMapping.json b/_next/data/xFpWtHIgZZiYtYujEz2Rj/samples/shadowMapping.json similarity index 100% rename from _next/data/pZjCrhGJBHZXDy2WjAS6H/samples/shadowMapping.json rename to _next/data/xFpWtHIgZZiYtYujEz2Rj/samples/shadowMapping.json diff --git a/_next/data/pZjCrhGJBHZXDy2WjAS6H/samples/texturedCube.json b/_next/data/xFpWtHIgZZiYtYujEz2Rj/samples/texturedCube.json similarity index 100% rename from _next/data/pZjCrhGJBHZXDy2WjAS6H/samples/texturedCube.json rename to _next/data/xFpWtHIgZZiYtYujEz2Rj/samples/texturedCube.json diff --git a/_next/data/pZjCrhGJBHZXDy2WjAS6H/samples/twoCubes.json b/_next/data/xFpWtHIgZZiYtYujEz2Rj/samples/twoCubes.json similarity index 100% rename from _next/data/pZjCrhGJBHZXDy2WjAS6H/samples/twoCubes.json rename to _next/data/xFpWtHIgZZiYtYujEz2Rj/samples/twoCubes.json diff --git a/_next/data/pZjCrhGJBHZXDy2WjAS6H/samples/videoUploading.json b/_next/data/xFpWtHIgZZiYtYujEz2Rj/samples/videoUploading.json similarity index 100% rename from _next/data/pZjCrhGJBHZXDy2WjAS6H/samples/videoUploading.json rename to _next/data/xFpWtHIgZZiYtYujEz2Rj/samples/videoUploading.json diff --git a/_next/data/pZjCrhGJBHZXDy2WjAS6H/samples/videoUploadingWebCodecs.json b/_next/data/xFpWtHIgZZiYtYujEz2Rj/samples/videoUploadingWebCodecs.json similarity index 100% rename from _next/data/pZjCrhGJBHZXDy2WjAS6H/samples/videoUploadingWebCodecs.json rename to _next/data/xFpWtHIgZZiYtYujEz2Rj/samples/videoUploadingWebCodecs.json diff --git a/_next/data/pZjCrhGJBHZXDy2WjAS6H/samples/worker.json b/_next/data/xFpWtHIgZZiYtYujEz2Rj/samples/worker.json similarity index 100% rename from _next/data/pZjCrhGJBHZXDy2WjAS6H/samples/worker.json rename to _next/data/xFpWtHIgZZiYtYujEz2Rj/samples/worker.json diff --git a/_next/static/chunks/624.30928ec9293ad664.js b/_next/static/chunks/624.30928ec9293ad664.js new file mode 100644 index 00000000..af0cca51 --- /dev/null +++ b/_next/static/chunks/624.30928ec9293ad664.js @@ -0,0 +1 @@ +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[624],{5671:function(e,n,t){"use strict";t.d(n,{Tl:function(){return u},hu:function(){return p}});var a=t(5893),r=t(9008),i=t.n(r),o=t(1163),s=t(7294),l=t(9147),c=t.n(l);t(7319);let d=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,a.jsx)("div",{...t,children:(0,a.jsx)("div",{ref(t){r&&t&&(t.appendChild(r),n.setOption("value",e))}})})}}}(r)}}),e.sources),l=(0,s.useRef)(null),d=(0,s.useMemo)(()=>{if(e.gui){let n=t(4376);return new n.GUI({autoPlace:!1})}},[]),u=(0,s.useRef)(null),p=(0,s.useMemo)(()=>{if(e.stats){let n=t(2792);return new n}},[]),m=(0,o.useRouter)(),g=m.asPath.match(/#([a-zA-Z0-9\.\/]+)/),[f,v]=(0,s.useState)(null),[h,x]=(0,s.useState)(null);return(0,s.useEffect)(()=>{if(g?x(g[1]):x(r[0].name),d&&l.current)for(l.current.appendChild(d.domElement);d.__controllers.length>0;)d.__controllers[0].remove();p&&u.current&&(p.dom.style.position="absolute",p.showPanel(1),u.current.appendChild(p.dom));let t={active:!0},a=()=>{t.active=!1};try{let i=n.current;if(!i)throw Error("The canvas is not available");let o=e.init({canvas:i,pageState:t,gui:d,stats:p});o instanceof Promise&&o.catch(e=>{console.error(e),v(e)})}catch(s){console.error(s),v(s)}return a},[]),(0,a.jsxs)("main",{children:[(0,a.jsxs)(i(),{children:[(0,a.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,a.jsx)("title",{children:"".concat(e.name," - WebGPU Samples")}),(0,a.jsx)("meta",{name:"description",content:e.description}),(0,a.jsx)("meta",{httpEquiv:"origin-trial",content:e.originTrial})]}),(0,a.jsxs)("div",{children:[(0,a.jsx)("h1",{children:e.name}),(0,a.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,a.jsx)("p",{children:e.description}),f?(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("p",{children:"Something went wrong. Do your browser and device support WebGPU?"}),(0,a.jsx)("p",{children:"".concat(f)})]}):null]}),(0,a.jsxs)("div",{className:c().canvasContainer,children:[(0,a.jsx)("div",{style:{position:"absolute",left:10},ref:u}),(0,a.jsx)("div",{style:{position:"absolute",right:10},ref:l}),(0,a.jsx)("canvas",{ref:n})]}),(0,a.jsxs)("div",{children:[(0,a.jsx)("nav",{className:c().sourceFileNav,children:(0,a.jsx)("ul",{children:r.map((e,n)=>(0,a.jsx)("li",{children:(0,a.jsx)("a",{href:"#".concat(e.name),"data-active":h==e.name,onClick(){x(e.name)},children:e.name})},n))})}),r.map((e,n)=>(0,a.jsx)(e.Container,{className:c().sourceFileContainer,"data-active":h==e.name},n))]})]})},u=e=>(0,a.jsx)(d,{...e});function p(e,n){if(!e)throw Error(n)}},8624:function(e,n,t){"use strict";t.r(n),t.d(n,{default:function(){return d}});var a=t(6416),r=t(5671),i="struct Config {\n viewProj: mat4x4f,\n animationOffset: vec2f,\n flangeSize: f32,\n highlightFlange: f32,\n};\n@group(0) @binding(0) var config: Config;\n@group(0) @binding(1) var matrices: array;\n@group(0) @binding(2) var samp: sampler;\n@group(0) @binding(3) var tex: texture_2d;\n\nstruct Varying {\n @builtin(position) pos: vec4f,\n @location(0) uv: vec2f,\n}\n\noverride kTextureBaseSize: f32;\noverride kViewportSize: f32;\n\n@vertex\nfn vmain(\n @builtin(instance_index) instance_index: u32,\n @builtin(vertex_index) vertex_index: u32,\n) -> Varying {\n let flange = config.flangeSize;\n var uvs = array(\n vec2(-flange, -flange), vec2(-flange, 1 + flange), vec2(1 + flange, -flange),\n vec2(1 + flange, -flange), vec2(-flange, 1 + flange), vec2(1 + flange, 1 + flange),\n );\n // Default size (if matrix is the identity) makes 1 texel = 1 pixel.\n let radius = (1 + 2 * flange) * kTextureBaseSize / kViewportSize;\n var positions = array(\n vec2(-radius, -radius), vec2(-radius, radius), vec2(radius, -radius),\n vec2(radius, -radius), vec2(-radius, radius), vec2(radius, radius),\n );\n\n let modelMatrix = matrices[instance_index];\n let pos = config.viewProj * modelMatrix * vec4f(positions[vertex_index] + config.animationOffset, 0, 1);\n return Varying(pos, uvs[vertex_index]);\n}\n\n@fragment\nfn fmain(vary: Varying) -> @location(0) vec4f {\n let uv = vary.uv;\n var color = textureSample(tex, samp, uv);\n\n let outOfBounds = uv.x < 0 || uv.x > 1 || uv.y < 0 || uv.y > 1;\n if config.highlightFlange > 0 && outOfBounds {\n color += vec4(0.7, 0, 0, 0);\n }\n\n return color;\n}\n\n",o="@group(0) @binding(0) var tex: texture_2d;\n\nstruct Varying {\n @builtin(position) pos: vec4f,\n @location(0) texelCoord: vec2f,\n @location(1) mipLevel: f32,\n}\n\nconst kMipLevels = 4;\nconst baseMipSize: u32 = 16;\n\n@vertex\nfn vmain(\n @builtin(instance_index) instance_index: u32, // used as mipLevel\n @builtin(vertex_index) vertex_index: u32,\n) -> Varying {\n var square = array(\n vec2f(0, 0), vec2f(0, 1), vec2f(1, 0),\n vec2f(1, 0), vec2f(0, 1), vec2f(1, 1),\n );\n let uv = square[vertex_index];\n let pos = vec4(uv * 2 - vec2(1, 1), 0.0, 1.0);\n\n let mipLevel = instance_index;\n let mipSize = f32(1 << (kMipLevels - mipLevel));\n let texelCoord = uv * mipSize;\n return Varying(pos, texelCoord, f32(mipLevel));\n}\n\n@fragment\nfn fmain(vary: Varying) -> @location(0) vec4f {\n return textureLoad(tex, vec2u(vary.texelCoord), u32(vary.mipLevel));\n}\n",s="src/sample/samplerParameters/main.ts";let l=new Float32Array([...a._E.scale(a._E.rotationZ(Math.PI/16),[2,2,1]),...a._E.scale(a._E.identity(),[2,2,1]),...a._E.scale(a._E.rotationX(-(.3*Math.PI)),[2,2,1]),...a._E.scale(a._E.rotationX(-(.42*Math.PI)),[2,2,1]),...a._E.rotationZ(Math.PI/16),...a._E.identity(),...a._E.rotationX(-(.3*Math.PI)),...a._E.rotationX(-(.42*Math.PI)),...a._E.scale(a._E.rotationZ(Math.PI/16),[.9,.9,1]),...a._E.scale(a._E.identity(),[.9,.9,1]),...a._E.scale(a._E.rotationX(-(.3*Math.PI)),[.9,.9,1]),...a._E.scale(a._E.rotationX(-(.42*Math.PI)),[.9,.9,1]),...a._E.scale(a._E.rotationZ(Math.PI/16),[.3,.3,1]),...a._E.scale(a._E.identity(),[.3,.3,1]),...a._E.scale(a._E.rotationX(-(.3*Math.PI)),[.3,.3,1])]),c=async e=>{let{canvas:n,pageState:t,gui:r}=e,s=await navigator.gpu.requestAdapter(),c=await s.requestDevice();if(!t.active)return;let d={flangeLogSize:1,highlightFlange:!1,animation:.1},u={...d},p=()=>{let e=performance.now()/1e3*.5,n=new Float32Array([Math.cos(e)*u.animation,Math.sin(e)*u.animation,(2**u.flangeLogSize-1)/2,Number(u.highlightFlange)]);c.queue.writeBuffer(N,64,n)},m={addressModeU:"clamp-to-edge",addressModeV:"clamp-to-edge",magFilter:"linear",minFilter:"linear",mipmapFilter:"linear",lodMinClamp:0,lodMaxClamp:4,maxAnisotropy:1},g={...m};{let f={initial(){Object.assign(u,d),Object.assign(g,m),r.updateDisplay()},checkerboard(){Object.assign(u,{flangeLogSize:10}),Object.assign(g,{addressModeU:"repeat",addressModeV:"repeat"}),r.updateDisplay()},smooth(){Object.assign(g,{magFilter:"linear",minFilter:"linear",mipmapFilter:"linear"}),r.updateDisplay()},crunchy(){Object.assign(g,{magFilter:"nearest",minFilter:"nearest",mipmapFilter:"nearest"}),r.updateDisplay()}},v=r.addFolder("Presets");v.open(),v.add(f,"initial").name("reset to initial"),v.add(f,"checkerboard").name("checkered floor"),v.add(f,"smooth").name("smooth (linear)"),v.add(f,"crunchy").name("crunchy (nearest)");let h=r.addFolder("Plane settings");h.open(),h.add(u,"flangeLogSize",0,10,.1).name("size = 2**"),h.add(u,"highlightFlange"),h.add(u,"animation",0,.5),r.width=280;{let x=r.addFolder("GPUSamplerDescriptor");x.open();let w=["clamp-to-edge","repeat","mirror-repeat"];x.add(g,"addressModeU",w),x.add(g,"addressModeV",w);let y=["nearest","linear"];x.add(g,"magFilter",y),x.add(g,"minFilter",y),x.add(g,"mipmapFilter",["nearest","linear"]);let S=x.add(g,"lodMinClamp",0,4,.1),b=x.add(g,"lodMaxClamp",0,4,.1);S.onChange(e=>{g.lodMaxClamp{g.lodMinClamp>e&&S.setValue(e)});{let M=x.addFolder('maxAnisotropy (set only if all "linear")');M.open(),M.add(g,"maxAnisotropy",1,16,1)}}}let k=Math.floor(50),P=k-2,C=600*devicePixelRatio,F=200*Math.floor(C/200)/devicePixelRatio;n.style.imageRendering="pixelated",n.width=n.height=200,n.style.minWidth=n.style.maxWidth=F+"px";let _=navigator.gpu.getPreferredCanvasFormat(),z=n.getContext("webgpu");z.configure({device:c,format:_,alphaMode:"premultiplied"});let V=c.createTexture({format:"rgba8unorm",usage:GPUTextureUsage.COPY_DST|GPUTextureUsage.TEXTURE_BINDING,size:[16,16],mipLevelCount:4}),L=V.createView(),G=[[255,255,255,255],[30,136,229,255],[255,193,7,255],[216,27,96,255]];for(let D=0;D<4;++D){let T=2**(4-D),E=new Uint8Array(T*T*4);for(let j=0;j(0,r.Tl)({name:"Sampler Parameters",description:"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).",gui:!0,init:c,sources:[{name:s.substring(29),contents:"import { mat4 } from 'wgpu-matrix';\nimport { makeSample, SampleInit } from '../../components/SampleLayout';\n\nimport texturedSquareWGSL from './texturedSquare.wgsl';\nimport showTextureWGSL from './showTexture.wgsl';\n\nconst kMatrices: Readonly = new Float32Array([\n // Row 1: Scale by 2\n ...mat4.scale(mat4.rotationZ(Math.PI / 16), [2, 2, 1]),\n ...mat4.scale(mat4.identity(), [2, 2, 1]),\n ...mat4.scale(mat4.rotationX(-Math.PI * 0.3), [2, 2, 1]),\n ...mat4.scale(mat4.rotationX(-Math.PI * 0.42), [2, 2, 1]),\n // Row 2: Scale by 1\n ...mat4.rotationZ(Math.PI / 16),\n ...mat4.identity(),\n ...mat4.rotationX(-Math.PI * 0.3),\n ...mat4.rotationX(-Math.PI * 0.42),\n // Row 3: Scale by 0.9\n ...mat4.scale(mat4.rotationZ(Math.PI / 16), [0.9, 0.9, 1]),\n ...mat4.scale(mat4.identity(), [0.9, 0.9, 1]),\n ...mat4.scale(mat4.rotationX(-Math.PI * 0.3), [0.9, 0.9, 1]),\n ...mat4.scale(mat4.rotationX(-Math.PI * 0.42), [0.9, 0.9, 1]),\n // Row 4: Scale by 0.3\n ...mat4.scale(mat4.rotationZ(Math.PI / 16), [0.3, 0.3, 1]),\n ...mat4.scale(mat4.identity(), [0.3, 0.3, 1]),\n ...mat4.scale(mat4.rotationX(-Math.PI * 0.3), [0.3, 0.3, 1]),\n]);\n\nconst init: SampleInit = async ({ canvas, pageState, gui }) => {\n const adapter = await navigator.gpu.requestAdapter();\n const device = await adapter.requestDevice();\n\n if (!pageState.active) return;\n\n //\n // GUI controls\n //\n\n const kInitConfig = {\n flangeLogSize: 1.0,\n highlightFlange: false,\n animation: 0.1,\n } as const;\n const config = { ...kInitConfig };\n const updateConfigBuffer = () => {\n const t = (performance.now() / 1000) * 0.5;\n const data = new Float32Array([\n Math.cos(t) * config.animation,\n Math.sin(t) * config.animation,\n (2 ** config.flangeLogSize - 1) / 2,\n Number(config.highlightFlange),\n ]);\n device.queue.writeBuffer(bufConfig, 64, data);\n };\n\n const kInitSamplerDescriptor = {\n addressModeU: 'clamp-to-edge',\n addressModeV: 'clamp-to-edge',\n magFilter: 'linear',\n minFilter: 'linear',\n mipmapFilter: 'linear',\n lodMinClamp: 0,\n lodMaxClamp: 4,\n maxAnisotropy: 1,\n } as const;\n const samplerDescriptor: GPUSamplerDescriptor = { ...kInitSamplerDescriptor };\n\n {\n const buttons = {\n initial() {\n Object.assign(config, kInitConfig);\n Object.assign(samplerDescriptor, kInitSamplerDescriptor);\n gui.updateDisplay();\n },\n checkerboard() {\n Object.assign(config, { flangeLogSize: 10 });\n Object.assign(samplerDescriptor, {\n addressModeU: 'repeat',\n addressModeV: 'repeat',\n });\n gui.updateDisplay();\n },\n smooth() {\n Object.assign(samplerDescriptor, {\n magFilter: 'linear',\n minFilter: 'linear',\n mipmapFilter: 'linear',\n });\n gui.updateDisplay();\n },\n crunchy() {\n Object.assign(samplerDescriptor, {\n magFilter: 'nearest',\n minFilter: 'nearest',\n mipmapFilter: 'nearest',\n });\n gui.updateDisplay();\n },\n };\n const presets = gui.addFolder('Presets');\n presets.open();\n presets.add(buttons, 'initial').name('reset to initial');\n presets.add(buttons, 'checkerboard').name('checkered floor');\n presets.add(buttons, 'smooth').name('smooth (linear)');\n presets.add(buttons, 'crunchy').name('crunchy (nearest)');\n\n const flangeFold = gui.addFolder('Plane settings');\n flangeFold.open();\n flangeFold.add(config, 'flangeLogSize', 0, 10.0, 0.1).name('size = 2**');\n flangeFold.add(config, 'highlightFlange');\n flangeFold.add(config, 'animation', 0, 0.5);\n\n gui.width = 280;\n {\n const folder = gui.addFolder('GPUSamplerDescriptor');\n folder.open();\n\n const kAddressModes = ['clamp-to-edge', 'repeat', 'mirror-repeat'];\n folder.add(samplerDescriptor, 'addressModeU', kAddressModes);\n folder.add(samplerDescriptor, 'addressModeV', kAddressModes);\n\n const kFilterModes = ['nearest', 'linear'];\n folder.add(samplerDescriptor, 'magFilter', kFilterModes);\n folder.add(samplerDescriptor, 'minFilter', kFilterModes);\n const kMipmapFilterModes = ['nearest', 'linear'] as const;\n folder.add(samplerDescriptor, 'mipmapFilter', kMipmapFilterModes);\n\n const ctlMin = folder.add(samplerDescriptor, 'lodMinClamp', 0, 4, 0.1);\n const ctlMax = folder.add(samplerDescriptor, 'lodMaxClamp', 0, 4, 0.1);\n ctlMin.onChange((value: number) => {\n if (samplerDescriptor.lodMaxClamp < value) ctlMax.setValue(value);\n });\n ctlMax.onChange((value: number) => {\n if (samplerDescriptor.lodMinClamp > value) ctlMin.setValue(value);\n });\n\n {\n const folder2 = folder.addFolder(\n 'maxAnisotropy (set only if all \"linear\")'\n );\n folder2.open();\n const kMaxAnisotropy = 16;\n folder2.add(samplerDescriptor, 'maxAnisotropy', 1, kMaxAnisotropy, 1);\n }\n }\n }\n\n //\n // Canvas setup\n //\n\n // Low-res, pixelated render target so it's easier to see fine details.\n const kCanvasSize = 200;\n const kViewportGridSize = 4;\n const kViewportGridStride = Math.floor(kCanvasSize / kViewportGridSize);\n const kViewportSize = kViewportGridStride - 2;\n\n // The canvas buffer size is 200x200.\n // Compute a canvas CSS size such that there's an integer number of device\n // pixels per canvas pixel (\"integer\" or \"pixel-perfect\" scaling).\n // Note the result may be 1 pixel off since ResizeObserver is not used.\n const kCanvasLayoutCSSSize = 600; // set by template styles\n const kCanvasLayoutDevicePixels = kCanvasLayoutCSSSize * devicePixelRatio;\n const kScaleFactor = Math.floor(kCanvasLayoutDevicePixels / kCanvasSize);\n const kCanvasDevicePixels = kScaleFactor * kCanvasSize;\n const kCanvasCSSSize = kCanvasDevicePixels / devicePixelRatio;\n canvas.style.imageRendering = 'pixelated';\n canvas.width = canvas.height = kCanvasSize;\n canvas.style.minWidth = canvas.style.maxWidth = kCanvasCSSSize + 'px';\n const presentationFormat = navigator.gpu.getPreferredCanvasFormat();\n\n const context = canvas.getContext('webgpu') as GPUCanvasContext;\n context.configure({\n device,\n format: presentationFormat,\n alphaMode: 'premultiplied',\n });\n\n //\n // Initialize test texture\n //\n\n // Set up a texture with 4 mip levels, each containing a differently-colored\n // checkerboard with 1x1 pixels (so when rendered the checkerboards are\n // different sizes). This is different from a normal mipmap where each level\n // would look like a lower-resolution version of the previous one.\n // Level 0 is 16x16 white/black\n // Level 1 is 8x8 blue/black\n // Level 2 is 4x4 yellow/black\n // Level 3 is 2x2 pink/black\n const kTextureMipLevels = 4;\n const kTextureBaseSize = 16;\n const checkerboard = device.createTexture({\n format: 'rgba8unorm',\n usage: GPUTextureUsage.COPY_DST | GPUTextureUsage.TEXTURE_BINDING,\n size: [kTextureBaseSize, kTextureBaseSize],\n mipLevelCount: 4,\n });\n const checkerboardView = checkerboard.createView();\n\n const kColorForLevel = [\n [255, 255, 255, 255],\n [30, 136, 229, 255], // blue\n [255, 193, 7, 255], // yellow\n [216, 27, 96, 255], // pink\n ];\n for (let mipLevel = 0; mipLevel < kTextureMipLevels; ++mipLevel) {\n const size = 2 ** (kTextureMipLevels - mipLevel); // 16, 8, 4, 2\n const data = new Uint8Array(size * size * 4);\n for (let y = 0; y < size; ++y) {\n for (let x = 0; x < size; ++x) {\n data.set(\n (x + y) % 2 ? kColorForLevel[mipLevel] : [0, 0, 0, 255],\n (y * size + x) * 4\n );\n }\n }\n device.queue.writeTexture(\n { texture: checkerboard, mipLevel },\n data,\n { bytesPerRow: size * 4 },\n [size, size]\n );\n }\n\n //\n // \"Debug\" view of the actual texture contents\n //\n\n const showTextureModule = device.createShaderModule({\n code: showTextureWGSL,\n });\n const showTexturePipeline = device.createRenderPipeline({\n layout: 'auto',\n vertex: { module: showTextureModule, entryPoint: 'vmain' },\n fragment: {\n module: showTextureModule,\n entryPoint: 'fmain',\n targets: [{ format: presentationFormat }],\n },\n primitive: { topology: 'triangle-list' },\n });\n\n const showTextureBG = device.createBindGroup({\n layout: showTexturePipeline.getBindGroupLayout(0),\n entries: [{ binding: 0, resource: checkerboardView }],\n });\n\n //\n // Pipeline for drawing the test squares\n //\n\n const texturedSquareModule = device.createShaderModule({\n code: texturedSquareWGSL,\n });\n\n const texturedSquarePipeline = device.createRenderPipeline({\n layout: 'auto',\n vertex: {\n module: texturedSquareModule,\n entryPoint: 'vmain',\n constants: { kTextureBaseSize, kViewportSize },\n },\n fragment: {\n module: texturedSquareModule,\n entryPoint: 'fmain',\n targets: [{ format: presentationFormat }],\n },\n primitive: { topology: 'triangle-list' },\n });\n const texturedSquareBGL = texturedSquarePipeline.getBindGroupLayout(0);\n\n const bufConfig = device.createBuffer({\n usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.UNIFORM,\n size: 128,\n });\n // View-projection matrix set up so it doesn't transform anything at z=0.\n const kCameraDist = 3;\n const viewProj = mat4.translate(\n mat4.perspective(2 * Math.atan(1 / kCameraDist), 1, 0.1, 100),\n [0, 0, -kCameraDist]\n );\n device.queue.writeBuffer(bufConfig, 0, viewProj as Float32Array);\n\n const bufMatrices = device.createBuffer({\n usage: GPUBufferUsage.STORAGE,\n size: kMatrices.byteLength,\n mappedAtCreation: true,\n });\n new Float32Array(bufMatrices.getMappedRange()).set(kMatrices);\n bufMatrices.unmap();\n\n function frame() {\n // Sample is no longer the active page.\n if (!pageState.active) return;\n\n updateConfigBuffer();\n\n const sampler = device.createSampler({\n ...samplerDescriptor,\n maxAnisotropy:\n samplerDescriptor.minFilter === 'linear' &&\n samplerDescriptor.magFilter === 'linear' &&\n samplerDescriptor.mipmapFilter === 'linear'\n ? samplerDescriptor.maxAnisotropy\n : 1,\n });\n\n const bindGroup = device.createBindGroup({\n layout: texturedSquareBGL,\n entries: [\n { binding: 0, resource: { buffer: bufConfig } },\n { binding: 1, resource: { buffer: bufMatrices } },\n { binding: 2, resource: sampler },\n { binding: 3, resource: checkerboardView },\n ],\n });\n\n const textureView = context.getCurrentTexture().createView();\n\n const commandEncoder = device.createCommandEncoder();\n\n const renderPassDescriptor: GPURenderPassDescriptor = {\n colorAttachments: [\n {\n view: textureView,\n clearValue: { r: 0.2, g: 0.2, b: 0.2, a: 1.0 },\n loadOp: 'clear',\n storeOp: 'store',\n },\n ],\n };\n\n const pass = commandEncoder.beginRenderPass(renderPassDescriptor);\n // Draw test squares\n pass.setPipeline(texturedSquarePipeline);\n pass.setBindGroup(0, bindGroup);\n for (let i = 0; i < kViewportGridSize ** 2 - 1; ++i) {\n const vpX = kViewportGridStride * (i % kViewportGridSize) + 1;\n const vpY = kViewportGridStride * Math.floor(i / kViewportGridSize) + 1;\n pass.setViewport(vpX, vpY, kViewportSize, kViewportSize, 0, 1);\n pass.draw(6, 1, 0, i);\n }\n // Show texture contents\n pass.setPipeline(showTexturePipeline);\n pass.setBindGroup(0, showTextureBG);\n const kLastViewport = (kViewportGridSize - 1) * kViewportGridStride + 1;\n pass.setViewport(kLastViewport, kLastViewport, 32, 32, 0, 1);\n pass.draw(6, 1, 0, 0);\n pass.setViewport(kLastViewport + 32, kLastViewport, 16, 16, 0, 1);\n pass.draw(6, 1, 0, 1);\n pass.setViewport(kLastViewport + 32, kLastViewport + 16, 8, 8, 0, 1);\n pass.draw(6, 1, 0, 2);\n pass.setViewport(kLastViewport + 32, kLastViewport + 24, 4, 4, 0, 1);\n pass.draw(6, 1, 0, 3);\n pass.end();\n\n device.queue.submit([commandEncoder.finish()]);\n requestAnimationFrame(frame);\n }\n\n requestAnimationFrame(frame);\n};\n\nexport default () =>\n makeSample({\n name: 'Sampler Parameters',\n description:\n '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).',\n gui: true,\n init,\n sources: [\n {\n name: __filename.substring(__dirname.length + 1),\n contents: __SOURCE__,\n },\n {\n name: './texturedSquare.wgsl',\n contents: texturedSquareWGSL,\n editable: true,\n },\n {\n name: './showTexture.wgsl',\n contents: showTextureWGSL,\n editable: true,\n },\n ],\n filename: __filename,\n });\n"},{name:"./texturedSquare.wgsl",contents:i,editable:!0},{name:"./showTexture.wgsl",contents:o,editable:!0}],filename:s})},9147:function(e){e.exports={canvasContainer:"SampleLayout_canvasContainer__zRR_l",sourceFileNav:"SampleLayout_sourceFileNav__ml48P",sourceFileContainer:"SampleLayout_sourceFileContainer__3s84x"}}}]); \ No newline at end of file diff --git a/_next/static/chunks/624.e268235dd6d38d3a.js b/_next/static/chunks/624.e268235dd6d38d3a.js deleted file mode 100644 index aa9fb1d5..00000000 --- a/_next/static/chunks/624.e268235dd6d38d3a.js +++ /dev/null @@ -1 +0,0 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[624],{5671:function(e,n,t){"use strict";t.d(n,{Tl:function(){return u},hu:function(){return p}});var a=t(5893),r=t(9008),i=t.n(r),o=t(1163),s=t(7294),l=t(9147),c=t.n(l);t(7319);let d=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,a.jsx)("div",{...t,children:(0,a.jsx)("div",{ref(t){r&&t&&(t.appendChild(r),n.setOption("value",e))}})})}}}(r)}}),e.sources),l=(0,s.useRef)(null),d=(0,s.useMemo)(()=>{if(e.gui){let n=t(4376);return new n.GUI({autoPlace:!1})}},[]),u=(0,s.useRef)(null),p=(0,s.useMemo)(()=>{if(e.stats){let n=t(2792);return new n}},[]),m=(0,o.useRouter)(),g=m.asPath.match(/#([a-zA-Z0-9\.\/]+)/),[f,v]=(0,s.useState)(null),[h,x]=(0,s.useState)(null);return(0,s.useEffect)(()=>{if(g?x(g[1]):x(r[0].name),d&&l.current)for(l.current.appendChild(d.domElement);d.__controllers.length>0;)d.__controllers[0].remove();p&&u.current&&(p.dom.style.position="absolute",p.showPanel(1),u.current.appendChild(p.dom));let t={active:!0},a=()=>{t.active=!1};try{let i=n.current;if(!i)throw Error("The canvas is not available");let o=e.init({canvas:i,pageState:t,gui:d,stats:p});o instanceof Promise&&o.catch(e=>{console.error(e),v(e)})}catch(s){console.error(s),v(s)}return a},[]),(0,a.jsxs)("main",{children:[(0,a.jsxs)(i(),{children:[(0,a.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,a.jsx)("title",{children:"".concat(e.name," - WebGPU Samples")}),(0,a.jsx)("meta",{name:"description",content:e.description}),(0,a.jsx)("meta",{httpEquiv:"origin-trial",content:e.originTrial})]}),(0,a.jsxs)("div",{children:[(0,a.jsx)("h1",{children:e.name}),(0,a.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,a.jsx)("p",{children:e.description}),f?(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("p",{children:"Something went wrong. Do your browser and device support WebGPU?"}),(0,a.jsx)("p",{children:"".concat(f)})]}):null]}),(0,a.jsxs)("div",{className:c().canvasContainer,children:[(0,a.jsx)("div",{style:{position:"absolute",left:10},ref:u}),(0,a.jsx)("div",{style:{position:"absolute",right:10},ref:l}),(0,a.jsx)("canvas",{ref:n})]}),(0,a.jsxs)("div",{children:[(0,a.jsx)("nav",{className:c().sourceFileNav,children:(0,a.jsx)("ul",{children:r.map((e,n)=>(0,a.jsx)("li",{children:(0,a.jsx)("a",{href:"#".concat(e.name),"data-active":h==e.name,onClick(){x(e.name)},children:e.name})},n))})}),r.map((e,n)=>(0,a.jsx)(e.Container,{className:c().sourceFileContainer,"data-active":h==e.name},n))]})]})},u=e=>(0,a.jsx)(d,{...e});function p(e,n){if(!e)throw Error(n)}},8624:function(e,n,t){"use strict";t.r(n),t.d(n,{default:function(){return d}});var a=t(6416),r=t(5671),i="struct Config {\n viewProj: mat4x4f,\n animationOffset: vec2f,\n flangeSize: f32,\n highlightFlange: f32,\n};\n@group(0) @binding(0) var config: Config;\n@group(0) @binding(1) var matrices: array;\n@group(0) @binding(2) var samp: sampler;\n@group(0) @binding(3) var tex: texture_2d;\n\nstruct Varying {\n @builtin(position) pos: vec4f,\n @location(0) uv: vec2f,\n}\n\noverride kTextureBaseSize: f32;\noverride kViewportSize: f32;\n\n@vertex\nfn vmain(\n @builtin(instance_index) instance_index: u32,\n @builtin(vertex_index) vertex_index: u32,\n) -> Varying {\n let flange = config.flangeSize;\n var uvs = array(\n vec2(-flange, -flange), vec2(-flange, 1 + flange), vec2(1 + flange, -flange),\n vec2(1 + flange, -flange), vec2(-flange, 1 + flange), vec2(1 + flange, 1 + flange),\n );\n // Default size (if matrix is the identity) makes 1 texel = 1 pixel.\n let radius = (1 + 2 * flange) * kTextureBaseSize / kViewportSize;\n var positions = array(\n vec2(-radius, -radius), vec2(-radius, radius), vec2(radius, -radius),\n vec2(radius, -radius), vec2(-radius, radius), vec2(radius, radius),\n );\n\n let modelMatrix = matrices[instance_index];\n let pos = config.viewProj * modelMatrix * vec4f(positions[vertex_index] + config.animationOffset, 0, 1);\n return Varying(pos, uvs[vertex_index]);\n}\n\n@fragment\nfn fmain(vary: Varying) -> @location(0) vec4f {\n let uv = vary.uv;\n var color = textureSample(tex, samp, uv);\n\n let outOfBounds = uv.x < 0 || uv.x > 1 || uv.y < 0 || uv.y > 1;\n if config.highlightFlange > 0 && outOfBounds {\n color += vec4(0.7, 0, 0, 0);\n }\n\n return color;\n}\n\n",o="@group(0) @binding(0) var tex: texture_2d;\n\nstruct Varying {\n @builtin(position) pos: vec4f,\n @location(0) texelCoord: vec2f,\n @location(1) mipLevel: f32,\n}\n\nconst kMipLevels = 4;\nconst baseMipSize: u32 = 16;\n\n@vertex\nfn vmain(\n @builtin(instance_index) instance_index: u32, // used as mipLevel\n @builtin(vertex_index) vertex_index: u32,\n) -> Varying {\n var square = array(\n vec2f(0, 0), vec2f(0, 1), vec2f(1, 0),\n vec2f(1, 0), vec2f(0, 1), vec2f(1, 1),\n );\n let uv = square[vertex_index];\n let pos = vec4(uv * 2 - vec2(1, 1), 0.0, 1.0);\n\n let mipLevel = instance_index;\n let mipSize = f32(1 << (kMipLevels - mipLevel));\n let texelCoord = uv * mipSize;\n return Varying(pos, texelCoord, f32(mipLevel));\n}\n\n@fragment\nfn fmain(vary: Varying) -> @location(0) vec4f {\n return textureLoad(tex, vec2u(vary.texelCoord), u32(vary.mipLevel));\n}\n",s="src/sample/samplerParameters/main.ts";let l=new Float32Array([...a._E.scale(a._E.rotationZ(Math.PI/16),[2,2,1]),...a._E.scale(a._E.identity(),[2,2,1]),...a._E.scale(a._E.rotationX(-(.3*Math.PI)),[2,2,1]),...a._E.scale(a._E.rotationX(-(.42*Math.PI)),[2,2,1]),...a._E.rotationZ(Math.PI/16),...a._E.identity(),...a._E.rotationX(-(.3*Math.PI)),...a._E.rotationX(-(.42*Math.PI)),...a._E.scale(a._E.rotationZ(Math.PI/16),[.9,.9,1]),...a._E.scale(a._E.identity(),[.9,.9,1]),...a._E.scale(a._E.rotationX(-(.3*Math.PI)),[.9,.9,1]),...a._E.scale(a._E.rotationX(-(.42*Math.PI)),[.9,.9,1]),...a._E.scale(a._E.rotationZ(Math.PI/16),[.3,.3,1]),...a._E.scale(a._E.identity(),[.3,.3,1]),...a._E.scale(a._E.rotationX(-(.3*Math.PI)),[.3,.3,1])]),c=async e=>{let{canvas:n,pageState:t,gui:r}=e,s=await navigator.gpu.requestAdapter(),c=await s.requestDevice();if(!t.active)return;let d={flangeLogSize:1,highlightFlange:!1,animation:.1},u={...d},p=()=>{let e=performance.now()/1e3*.5,n=new Float32Array([Math.cos(e)*u.animation,Math.sin(e)*u.animation,(2**u.flangeLogSize-1)/2,Number(u.highlightFlange)]);c.queue.writeBuffer(X,64,n)},m={addressModeU:"clamp-to-edge",addressModeV:"clamp-to-edge",magFilter:"linear",minFilter:"linear",mipmapFilter:"linear",lodMinClamp:0,lodMaxClamp:4,maxAnisotropy:1},g={...m};{let f={initial(){Object.assign(u,d),Object.assign(g,m),r.updateDisplay()},checkerboard(){Object.assign(u,{flangeLogSize:10}),Object.assign(g,{addressModeU:"repeat",addressModeV:"repeat"}),r.updateDisplay()},smooth(){Object.assign(g,{magFilter:"linear",minFilter:"linear",mipmapFilter:"linear"}),r.updateDisplay()},crunchy(){Object.assign(g,{magFilter:"nearest",minFilter:"nearest",mipmapFilter:"nearest"}),r.updateDisplay()}},v=r.addFolder("Presets");v.open(),v.add(f,"initial").name("reset to initial"),v.add(f,"checkerboard").name("checkered floor"),v.add(f,"smooth").name("smooth (linear)"),v.add(f,"crunchy").name("crunchy (nearest)");let h=r.addFolder("Plane settings");h.open(),h.add(u,"flangeLogSize",0,10,.1).name("size = 2**"),h.add(u,"highlightFlange"),h.add(u,"animation",0,.5),r.width=280;{let x=r.addFolder("GPUSamplerDescriptor");x.open();let w=["clamp-to-edge","repeat","mirror-repeat"];x.add(g,"addressModeU",w),x.add(g,"addressModeV",w);let y=["nearest","linear"];x.add(g,"magFilter",y),x.add(g,"minFilter",y),x.add(g,"mipmapFilter",["nearest","linear"]);let S=x.add(g,"lodMinClamp",0,4,.1),b=x.add(g,"lodMaxClamp",0,4,.1);S.onChange(e=>{g.lodMaxClamp{g.lodMinClamp>e&&S.setValue(e)});{let M=x.addFolder('maxAnisotropy (set only if all "linear")');M.open(),M.add(g,"maxAnisotropy",1,16,1)}}}let k=Math.floor(50),P=k-2,C=600*devicePixelRatio,F=200*Math.floor(C/200),_=F/devicePixelRatio;console.log(F,_),n.style.imageRendering="pixelated",n.width=n.height=200,n.style.minWidth=n.style.maxWidth=_+"px";let z=navigator.gpu.getPreferredCanvasFormat(),V=n.getContext("webgpu");V.configure({device:c,format:z,alphaMode:"premultiplied"});let L=c.createTexture({format:"rgba8unorm",usage:GPUTextureUsage.COPY_DST|GPUTextureUsage.TEXTURE_BINDING,size:[16,16],mipLevelCount:4}),G=L.createView(),D=[[255,255,255,255],[30,136,229,255],[255,193,7,255],[216,27,96,255]];for(let T=0;T<4;++T){let E=2**(4-T),j=new Uint8Array(E*E*4);for(let B=0;B(0,r.Tl)({name:"Sampler Parameters",description:"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).",gui:!0,init:c,sources:[{name:s.substring(29),contents:"import { mat4 } from 'wgpu-matrix';\nimport { makeSample, SampleInit } from '../../components/SampleLayout';\n\nimport texturedSquareWGSL from './texturedSquare.wgsl';\nimport showTextureWGSL from './showTexture.wgsl';\n\nconst kMatrices: Readonly = new Float32Array([\n // Row 1: Scale by 2\n ...mat4.scale(mat4.rotationZ(Math.PI / 16), [2, 2, 1]),\n ...mat4.scale(mat4.identity(), [2, 2, 1]),\n ...mat4.scale(mat4.rotationX(-Math.PI * 0.3), [2, 2, 1]),\n ...mat4.scale(mat4.rotationX(-Math.PI * 0.42), [2, 2, 1]),\n // Row 2: Scale by 1\n ...mat4.rotationZ(Math.PI / 16),\n ...mat4.identity(),\n ...mat4.rotationX(-Math.PI * 0.3),\n ...mat4.rotationX(-Math.PI * 0.42),\n // Row 3: Scale by 0.9\n ...mat4.scale(mat4.rotationZ(Math.PI / 16), [0.9, 0.9, 1]),\n ...mat4.scale(mat4.identity(), [0.9, 0.9, 1]),\n ...mat4.scale(mat4.rotationX(-Math.PI * 0.3), [0.9, 0.9, 1]),\n ...mat4.scale(mat4.rotationX(-Math.PI * 0.42), [0.9, 0.9, 1]),\n // Row 4: Scale by 0.3\n ...mat4.scale(mat4.rotationZ(Math.PI / 16), [0.3, 0.3, 1]),\n ...mat4.scale(mat4.identity(), [0.3, 0.3, 1]),\n ...mat4.scale(mat4.rotationX(-Math.PI * 0.3), [0.3, 0.3, 1]),\n]);\n\nconst init: SampleInit = async ({ canvas, pageState, gui }) => {\n const adapter = await navigator.gpu.requestAdapter();\n const device = await adapter.requestDevice();\n\n if (!pageState.active) return;\n\n //\n // GUI controls\n //\n\n const kInitConfig = {\n flangeLogSize: 1.0,\n highlightFlange: false,\n animation: 0.1,\n } as const;\n const config = { ...kInitConfig };\n const updateConfigBuffer = () => {\n const t = (performance.now() / 1000) * 0.5;\n const data = new Float32Array([\n Math.cos(t) * config.animation,\n Math.sin(t) * config.animation,\n (2 ** config.flangeLogSize - 1) / 2,\n Number(config.highlightFlange),\n ]);\n device.queue.writeBuffer(bufConfig, 64, data);\n };\n\n const kInitSamplerDescriptor = {\n addressModeU: 'clamp-to-edge',\n addressModeV: 'clamp-to-edge',\n magFilter: 'linear',\n minFilter: 'linear',\n mipmapFilter: 'linear',\n lodMinClamp: 0,\n lodMaxClamp: 4,\n maxAnisotropy: 1,\n } as const;\n const samplerDescriptor: GPUSamplerDescriptor = { ...kInitSamplerDescriptor };\n\n {\n const buttons = {\n initial() {\n Object.assign(config, kInitConfig);\n Object.assign(samplerDescriptor, kInitSamplerDescriptor);\n gui.updateDisplay();\n },\n checkerboard() {\n Object.assign(config, { flangeLogSize: 10 });\n Object.assign(samplerDescriptor, {\n addressModeU: 'repeat',\n addressModeV: 'repeat',\n });\n gui.updateDisplay();\n },\n smooth() {\n Object.assign(samplerDescriptor, {\n magFilter: 'linear',\n minFilter: 'linear',\n mipmapFilter: 'linear',\n });\n gui.updateDisplay();\n },\n crunchy() {\n Object.assign(samplerDescriptor, {\n magFilter: 'nearest',\n minFilter: 'nearest',\n mipmapFilter: 'nearest',\n });\n gui.updateDisplay();\n },\n };\n const presets = gui.addFolder('Presets');\n presets.open();\n presets.add(buttons, 'initial').name('reset to initial');\n presets.add(buttons, 'checkerboard').name('checkered floor');\n presets.add(buttons, 'smooth').name('smooth (linear)');\n presets.add(buttons, 'crunchy').name('crunchy (nearest)');\n\n const flangeFold = gui.addFolder('Plane settings');\n flangeFold.open();\n flangeFold.add(config, 'flangeLogSize', 0, 10.0, 0.1).name('size = 2**');\n flangeFold.add(config, 'highlightFlange');\n flangeFold.add(config, 'animation', 0, 0.5);\n\n gui.width = 280;\n {\n const folder = gui.addFolder('GPUSamplerDescriptor');\n folder.open();\n\n const kAddressModes = ['clamp-to-edge', 'repeat', 'mirror-repeat'];\n folder.add(samplerDescriptor, 'addressModeU', kAddressModes);\n folder.add(samplerDescriptor, 'addressModeV', kAddressModes);\n\n const kFilterModes = ['nearest', 'linear'];\n folder.add(samplerDescriptor, 'magFilter', kFilterModes);\n folder.add(samplerDescriptor, 'minFilter', kFilterModes);\n const kMipmapFilterModes = ['nearest', 'linear'] as const;\n folder.add(samplerDescriptor, 'mipmapFilter', kMipmapFilterModes);\n\n const ctlMin = folder.add(samplerDescriptor, 'lodMinClamp', 0, 4, 0.1);\n const ctlMax = folder.add(samplerDescriptor, 'lodMaxClamp', 0, 4, 0.1);\n ctlMin.onChange((value: number) => {\n if (samplerDescriptor.lodMaxClamp < value) ctlMax.setValue(value);\n });\n ctlMax.onChange((value: number) => {\n if (samplerDescriptor.lodMinClamp > value) ctlMin.setValue(value);\n });\n\n {\n const folder2 = folder.addFolder(\n 'maxAnisotropy (set only if all \"linear\")'\n );\n folder2.open();\n const kMaxAnisotropy = 16;\n folder2.add(samplerDescriptor, 'maxAnisotropy', 1, kMaxAnisotropy, 1);\n }\n }\n }\n\n //\n // Canvas setup\n //\n\n // Low-res, pixelated render target so it's easier to see fine details.\n const kCanvasSize = 200;\n const kViewportGridSize = 4;\n const kViewportGridStride = Math.floor(kCanvasSize / kViewportGridSize);\n const kViewportSize = kViewportGridStride - 2;\n\n // The canvas buffer size is 200x200.\n // Compute a canvas CSS size such that there's an integer number of device\n // pixels per canvas pixel (\"integer\" or \"pixel-perfect\" scaling).\n // Note the result may be 1 pixel off since ResizeObserver is not used.\n const kCanvasLayoutCSSSize = 600; // set by template styles\n const kCanvasLayoutDevicePixels = kCanvasLayoutCSSSize * devicePixelRatio;\n const kScaleFactor = Math.floor(kCanvasLayoutDevicePixels / kCanvasSize);\n const kCanvasDevicePixels = kScaleFactor * kCanvasSize;\n const kCanvasCSSSize = kCanvasDevicePixels / devicePixelRatio;\n console.log(kCanvasDevicePixels, kCanvasCSSSize);\n canvas.style.imageRendering = 'pixelated';\n canvas.width = canvas.height = kCanvasSize;\n canvas.style.minWidth = canvas.style.maxWidth = kCanvasCSSSize + 'px';\n const presentationFormat = navigator.gpu.getPreferredCanvasFormat();\n\n const context = canvas.getContext('webgpu') as GPUCanvasContext;\n context.configure({\n device,\n format: presentationFormat,\n alphaMode: 'premultiplied',\n });\n\n //\n // Initialize test texture\n //\n\n // Set up a texture with 4 mip levels, each containing a differently-colored\n // checkerboard with 1x1 pixels (so when rendered the checkerboards are\n // different sizes). This is different from a normal mipmap where each level\n // would look like a lower-resolution version of the previous one.\n // Level 0 is 16x16 white/black\n // Level 1 is 8x8 blue/black\n // Level 2 is 4x4 yellow/black\n // Level 3 is 2x2 pink/black\n const kTextureMipLevels = 4;\n const kTextureBaseSize = 16;\n const checkerboard = device.createTexture({\n format: 'rgba8unorm',\n usage: GPUTextureUsage.COPY_DST | GPUTextureUsage.TEXTURE_BINDING,\n size: [kTextureBaseSize, kTextureBaseSize],\n mipLevelCount: 4,\n });\n const checkerboardView = checkerboard.createView();\n\n const kColorForLevel = [\n [255, 255, 255, 255],\n [30, 136, 229, 255], // blue\n [255, 193, 7, 255], // yellow\n [216, 27, 96, 255], // pink\n ];\n for (let mipLevel = 0; mipLevel < kTextureMipLevels; ++mipLevel) {\n const size = 2 ** (kTextureMipLevels - mipLevel); // 16, 8, 4, 2\n const data = new Uint8Array(size * size * 4);\n for (let y = 0; y < size; ++y) {\n for (let x = 0; x < size; ++x) {\n data.set(\n (x + y) % 2 ? kColorForLevel[mipLevel] : [0, 0, 0, 255],\n (y * size + x) * 4\n );\n }\n }\n device.queue.writeTexture(\n { texture: checkerboard, mipLevel },\n data,\n { bytesPerRow: size * 4 },\n [size, size]\n );\n }\n\n //\n // \"Debug\" view of the actual texture contents\n //\n\n const showTextureModule = device.createShaderModule({\n code: showTextureWGSL,\n });\n const showTexturePipeline = device.createRenderPipeline({\n layout: 'auto',\n vertex: { module: showTextureModule, entryPoint: 'vmain' },\n fragment: {\n module: showTextureModule,\n entryPoint: 'fmain',\n targets: [{ format: presentationFormat }],\n },\n primitive: { topology: 'triangle-list' },\n });\n\n const showTextureBG = device.createBindGroup({\n layout: showTexturePipeline.getBindGroupLayout(0),\n entries: [{ binding: 0, resource: checkerboardView }],\n });\n\n //\n // Pipeline for drawing the test squares\n //\n\n const texturedSquareModule = device.createShaderModule({\n code: texturedSquareWGSL,\n });\n\n const texturedSquarePipeline = device.createRenderPipeline({\n layout: 'auto',\n vertex: {\n module: texturedSquareModule,\n entryPoint: 'vmain',\n constants: { kTextureBaseSize, kViewportSize },\n },\n fragment: {\n module: texturedSquareModule,\n entryPoint: 'fmain',\n targets: [{ format: presentationFormat }],\n },\n primitive: { topology: 'triangle-list' },\n });\n const texturedSquareBGL = texturedSquarePipeline.getBindGroupLayout(0);\n\n const bufConfig = device.createBuffer({\n usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.UNIFORM,\n size: 128,\n });\n // View-projection matrix set up so it doesn't transform anything at z=0.\n const kCameraDist = 3;\n const viewProj = mat4.translate(\n mat4.perspective(2 * Math.atan(1 / kCameraDist), 1, 0.1, 100),\n [0, 0, -kCameraDist]\n );\n device.queue.writeBuffer(bufConfig, 0, viewProj as Float32Array);\n\n const bufMatrices = device.createBuffer({\n usage: GPUBufferUsage.STORAGE,\n size: kMatrices.byteLength,\n mappedAtCreation: true,\n });\n new Float32Array(bufMatrices.getMappedRange()).set(kMatrices);\n bufMatrices.unmap();\n\n function frame() {\n // Sample is no longer the active page.\n if (!pageState.active) return;\n\n updateConfigBuffer();\n\n const sampler = device.createSampler({\n ...samplerDescriptor,\n maxAnisotropy:\n samplerDescriptor.minFilter === 'linear' &&\n samplerDescriptor.magFilter === 'linear' &&\n samplerDescriptor.mipmapFilter === 'linear'\n ? samplerDescriptor.maxAnisotropy\n : 1,\n });\n\n const bindGroup = device.createBindGroup({\n layout: texturedSquareBGL,\n entries: [\n { binding: 0, resource: { buffer: bufConfig } },\n { binding: 1, resource: { buffer: bufMatrices } },\n { binding: 2, resource: sampler },\n { binding: 3, resource: checkerboardView },\n ],\n });\n\n const textureView = context.getCurrentTexture().createView();\n\n const commandEncoder = device.createCommandEncoder();\n\n const renderPassDescriptor: GPURenderPassDescriptor = {\n colorAttachments: [\n {\n view: textureView,\n clearValue: { r: 0.2, g: 0.2, b: 0.2, a: 1.0 },\n loadOp: 'clear',\n storeOp: 'store',\n },\n ],\n };\n\n const pass = commandEncoder.beginRenderPass(renderPassDescriptor);\n // Draw test squares\n pass.setPipeline(texturedSquarePipeline);\n pass.setBindGroup(0, bindGroup);\n for (let i = 0; i < kViewportGridSize ** 2 - 1; ++i) {\n const vpX = kViewportGridStride * (i % kViewportGridSize) + 1;\n const vpY = kViewportGridStride * Math.floor(i / kViewportGridSize) + 1;\n pass.setViewport(vpX, vpY, kViewportSize, kViewportSize, 0, 1);\n pass.draw(6, 1, 0, i);\n }\n // Show texture contents\n pass.setPipeline(showTexturePipeline);\n pass.setBindGroup(0, showTextureBG);\n const kLastViewport = (kViewportGridSize - 1) * kViewportGridStride + 1;\n pass.setViewport(kLastViewport, kLastViewport, 32, 32, 0, 1);\n pass.draw(6, 1, 0, 0);\n pass.setViewport(kLastViewport + 32, kLastViewport, 16, 16, 0, 1);\n pass.draw(6, 1, 0, 1);\n pass.setViewport(kLastViewport + 32, kLastViewport + 16, 8, 8, 0, 1);\n pass.draw(6, 1, 0, 2);\n pass.setViewport(kLastViewport + 32, kLastViewport + 24, 4, 4, 0, 1);\n pass.draw(6, 1, 0, 3);\n pass.end();\n\n device.queue.submit([commandEncoder.finish()]);\n requestAnimationFrame(frame);\n }\n\n requestAnimationFrame(frame);\n};\n\nexport default () =>\n makeSample({\n name: 'Sampler Parameters',\n description:\n '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).',\n gui: true,\n init,\n sources: [\n {\n name: __filename.substring(__dirname.length + 1),\n contents: __SOURCE__,\n },\n {\n name: './texturedSquare.wgsl',\n contents: texturedSquareWGSL,\n editable: true,\n },\n {\n name: './showTexture.wgsl',\n contents: showTextureWGSL,\n editable: true,\n },\n ],\n filename: __filename,\n });\n"},{name:"./texturedSquare.wgsl",contents:i,editable:!0},{name:"./showTexture.wgsl",contents:o,editable:!0}],filename:s})},9147:function(e){e.exports={canvasContainer:"SampleLayout_canvasContainer__zRR_l",sourceFileNav:"SampleLayout_sourceFileNav__ml48P",sourceFileContainer:"SampleLayout_sourceFileContainer__3s84x"}}}]); \ No newline at end of file diff --git a/_next/static/chunks/webpack-d8cd057bad786dee.js b/_next/static/chunks/webpack-719b96d63423102a.js similarity index 88% rename from _next/static/chunks/webpack-d8cd057bad786dee.js rename to _next/static/chunks/webpack-719b96d63423102a.js index 746edb35..36273b46 100644 --- a/_next/static/chunks/webpack-d8cd057bad786dee.js +++ b/_next/static/chunks/webpack-719b96d63423102a.js @@ -1 +1 @@ -!function(){"use strict";var e,t,r,n,f,a,o,c,i,u,d={},b={};function l(e){var t=b[e];if(void 0!==t)return t.exports;var r=b[e]={exports:{}},n=!0;try{d[e].call(r.exports,r,r.exports,l),n=!1}finally{n&&delete b[e]}return r.exports}l.m=d,e=[],l.O=function(t,r,n,f){if(r){f=f||0;for(var a=e.length;a>0&&e[a-1][2]>f;a--)e[a]=e[a-1];e[a]=[r,n,f];return}for(var o=1/0,a=0;a=f&&Object.keys(l.O).every(function(e){return l.O[e](r[i])})?r.splice(i--,1):(c=!1,f0&&e[a-1][2]>f;a--)e[a]=e[a-1];e[a]=[r,n,f];return}for(var o=1/0,a=0;a=f&&Object.keys(l.O).every(function(e){return l.O[e](r[i])})?r.splice(i--,1):(c=!1,fWebGPU Samples \ No newline at end of file +WebGPU Samples \ No newline at end of file diff --git a/samples/A-buffer.html b/samples/A-buffer.html index 1e1b10a6..0f84d1bb 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)."/>

\ 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 326be2c2..fe9e2eed 100644 --- a/samples/animometer.html +++ b/samples/animometer.html @@ -8,4 +8,4 @@ height: auto !important; overflow: visible !important; } - Animometer - WebGPU Samples \ No newline at end of file + Animometer - WebGPU Samples \ No newline at end of file diff --git a/samples/bitonicSort.html b/samples/bitonicSort.html index 6a6b7d9a..116b7866 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 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 diff --git a/samples/cameras.html b/samples/cameras.html index eef67ee5..cb55e44c 100644 --- a/samples/cameras.html +++ b/samples/cameras.html @@ -8,4 +8,4 @@ height: auto !important; overflow: visible !important; } - Cameras - WebGPU Samples \ No newline at end of file + Cameras - WebGPU Samples \ No newline at end of file diff --git a/samples/computeBoids.html b/samples/computeBoids.html index 93494f75..2cea3f47 100644 --- a/samples/computeBoids.html +++ b/samples/computeBoids.html @@ -8,4 +8,4 @@ height: auto !important; overflow: visible !important; } - Compute Boids - WebGPU Samples \ No newline at end of file + Compute Boids - WebGPU Samples \ No newline at end of file diff --git a/samples/cornell.html b/samples/cornell.html index 7876eadc..e9164fd3 100644 --- a/samples/cornell.html +++ b/samples/cornell.html @@ -8,4 +8,4 @@ height: auto !important; overflow: visible !important; } - Cornell box - WebGPU Samples \ No newline at end of file + Cornell box - WebGPU Samples \ No newline at end of file diff --git a/samples/cubemap.html b/samples/cubemap.html index c9cdc33c..f3bf0586 100644 --- a/samples/cubemap.html +++ b/samples/cubemap.html @@ -8,4 +8,4 @@ height: auto !important; overflow: visible !important; } - Cubemap - WebGPU Samples \ No newline at end of file + Cubemap - WebGPU Samples \ No newline at end of file diff --git a/samples/deferredRendering.html b/samples/deferredRendering.html index b9d87bdb..ce1842b6 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 c42f2381..c923fa15 100644 --- a/samples/fractalCube.html +++ b/samples/fractalCube.html @@ -8,4 +8,4 @@ height: auto !important; overflow: visible !important; } - Fractal Cube - WebGPU Samples \ No newline at end of file + Fractal Cube - WebGPU Samples \ No newline at end of file diff --git a/samples/gameOfLife.html b/samples/gameOfLife.html index 89b21878..5e408632 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 \ No newline at end of file + Conway's Game of Life - WebGPU Samples \ No newline at end of file diff --git a/samples/helloTriangle.html b/samples/helloTriangle.html index 8813bb37..65a05e41 100644 --- a/samples/helloTriangle.html +++ b/samples/helloTriangle.html @@ -8,4 +8,4 @@ height: auto !important; overflow: visible !important; } - Hello Triangle - WebGPU Samples \ No newline at end of file + Hello Triangle - WebGPU Samples \ No newline at end of file diff --git a/samples/helloTriangleMSAA.html b/samples/helloTriangleMSAA.html index c5246391..848dba96 100644 --- a/samples/helloTriangleMSAA.html +++ b/samples/helloTriangleMSAA.html @@ -8,4 +8,4 @@ height: auto !important; overflow: visible !important; } - Hello Triangle MSAA - WebGPU Samples \ No newline at end of file + Hello Triangle MSAA - WebGPU Samples \ No newline at end of file diff --git a/samples/imageBlur.html b/samples/imageBlur.html index 5a7203f1..2b00325e 100644 --- a/samples/imageBlur.html +++ b/samples/imageBlur.html @@ -8,4 +8,4 @@ height: auto !important; overflow: visible !important; } - Image Blur - WebGPU Samples \ No newline at end of file + Image Blur - WebGPU Samples \ No newline at end of file diff --git a/samples/instancedCube.html b/samples/instancedCube.html index c7520afe..17f7804f 100644 --- a/samples/instancedCube.html +++ b/samples/instancedCube.html @@ -8,4 +8,4 @@ height: auto !important; overflow: visible !important; } - Instanced Cube - WebGPU Samples \ No newline at end of file + Instanced Cube - WebGPU Samples \ No newline at end of file diff --git a/samples/normalMap.html b/samples/normalMap.html index 73be4169..bc061e06 100644 --- a/samples/normalMap.html +++ b/samples/normalMap.html @@ -8,4 +8,4 @@ height: auto !important; overflow: visible !important; } - Normal Mapping - WebGPU Samples \ No newline at end of file + Normal Mapping - WebGPU Samples \ No newline at end of file diff --git a/samples/particles.html b/samples/particles.html index d9289f54..b6ebea33 100644 --- a/samples/particles.html +++ b/samples/particles.html @@ -8,4 +8,4 @@ height: auto !important; overflow: visible !important; } - Particles - WebGPU Samples \ No newline at end of file + Particles - WebGPU Samples \ No newline at end of file diff --git a/samples/renderBundles.html b/samples/renderBundles.html index a8836ca8..84a9a919 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 4bf17783..02c4e711 100644 --- a/samples/resizeCanvas.html +++ b/samples/resizeCanvas.html @@ -8,4 +8,4 @@ height: auto !important; overflow: visible !important; } - Resize Canvas - WebGPU Samples \ No newline at end of file + Resize Canvas - WebGPU Samples \ No newline at end of file diff --git a/samples/reversedZ.html b/samples/reversedZ.html index 9b24a542..6aafe325 100644 --- a/samples/reversedZ.html +++ b/samples/reversedZ.html @@ -17,7 +17,7 @@ Related reading: https://developer.nvidia.com/content/depth-precision-visualized 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://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 756ffb42..bc84fde0 100644 --- a/samples/rotatingCube.html +++ b/samples/rotatingCube.html @@ -8,4 +8,4 @@ height: auto !important; overflow: visible !important; } - Rotating Cube - WebGPU Samples \ No newline at end of file + Rotating Cube - WebGPU Samples \ No newline at end of file diff --git a/samples/samplerParameters.html b/samples/samplerParameters.html index 9772fded..54badffd 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 0168f1e8..f38a0f6b 100644 --- a/samples/shadowMapping.html +++ b/samples/shadowMapping.html @@ -8,4 +8,4 @@ height: auto !important; overflow: visible !important; } - Shadow Mapping - WebGPU Samples \ No newline at end of file + Shadow Mapping - WebGPU Samples \ No newline at end of file diff --git a/samples/texturedCube.html b/samples/texturedCube.html index 2af5a8ac..f99b8a85 100644 --- a/samples/texturedCube.html +++ b/samples/texturedCube.html @@ -8,4 +8,4 @@ height: auto !important; overflow: visible !important; } - Textured Cube - WebGPU Samples \ No newline at end of file + Textured Cube - WebGPU Samples \ No newline at end of file diff --git a/samples/twoCubes.html b/samples/twoCubes.html index 72c60d7c..24e13b2a 100644 --- a/samples/twoCubes.html +++ b/samples/twoCubes.html @@ -8,4 +8,4 @@ height: auto !important; overflow: visible !important; } - Two Cubes - WebGPU Samples \ No newline at end of file + Two Cubes - WebGPU Samples \ No newline at end of file diff --git a/samples/videoUploading.html b/samples/videoUploading.html index 4c07557e..1406311a 100644 --- a/samples/videoUploading.html +++ b/samples/videoUploading.html @@ -8,4 +8,4 @@ height: auto !important; overflow: visible !important; } - Video Uploading - WebGPU Samples \ No newline at end of file + Video Uploading - WebGPU Samples \ No newline at end of file diff --git a/samples/videoUploadingWebCodecs.html b/samples/videoUploadingWebCodecs.html index 1d6b8bac..011e5472 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 \ No newline at end of file + Video Uploading with WebCodecs - WebGPU Samples \ No newline at end of file diff --git a/samples/worker.html b/samples/worker.html index 0db5b6fa..43231b8a 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."/>

\ 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 diff --git a/workload-simulator.html b/workload-simulator.html index a4eea86c..bd73ddb1 100644 --- a/workload-simulator.html +++ b/workload-simulator.html @@ -1012,7 +1012,7 @@

Web graphics workload simulator

gl.shaderSource(shader, source); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) - console.log(gl.getShaderInfoLog(shader)); + console.error(gl.getShaderInfoLog(shader)); gl.attachShader(prog, shader); } compileShader(vsSource, gl.VERTEX_SHADER); @@ -1021,7 +1021,7 @@

Web graphics workload simulator

gl.bindAttribLocation(prog, i, attribs[i]); gl.linkProgram(prog); if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) - console.log(gl.getProgramInfoLog(prog)); + console.error(gl.getProgramInfoLog(prog)); for (const attrib of attribs) prog[attrib] = gl.getAttribLocation(prog, attrib); for (const uniform of uniforms)