diff --git a/404.html b/404.html index 8fe94b36..ab172f58 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/um7Vob07qBXC-7TtBPMuf/samples/A-buffer.json b/_next/data/kubTdYT8j6epjwt90LFc_/samples/A-buffer.json similarity index 100% rename from _next/data/um7Vob07qBXC-7TtBPMuf/samples/A-buffer.json rename to _next/data/kubTdYT8j6epjwt90LFc_/samples/A-buffer.json diff --git a/_next/data/um7Vob07qBXC-7TtBPMuf/samples/animometer.json b/_next/data/kubTdYT8j6epjwt90LFc_/samples/animometer.json similarity index 100% rename from _next/data/um7Vob07qBXC-7TtBPMuf/samples/animometer.json rename to _next/data/kubTdYT8j6epjwt90LFc_/samples/animometer.json diff --git a/_next/data/um7Vob07qBXC-7TtBPMuf/samples/bitonicSort.json b/_next/data/kubTdYT8j6epjwt90LFc_/samples/bitonicSort.json similarity index 100% rename from _next/data/um7Vob07qBXC-7TtBPMuf/samples/bitonicSort.json rename to _next/data/kubTdYT8j6epjwt90LFc_/samples/bitonicSort.json diff --git a/_next/data/um7Vob07qBXC-7TtBPMuf/samples/cameras.json b/_next/data/kubTdYT8j6epjwt90LFc_/samples/cameras.json similarity index 100% rename from _next/data/um7Vob07qBXC-7TtBPMuf/samples/cameras.json rename to _next/data/kubTdYT8j6epjwt90LFc_/samples/cameras.json diff --git a/_next/data/um7Vob07qBXC-7TtBPMuf/samples/computeBoids.json b/_next/data/kubTdYT8j6epjwt90LFc_/samples/computeBoids.json similarity index 100% rename from _next/data/um7Vob07qBXC-7TtBPMuf/samples/computeBoids.json rename to _next/data/kubTdYT8j6epjwt90LFc_/samples/computeBoids.json diff --git a/_next/data/um7Vob07qBXC-7TtBPMuf/samples/cornell.json b/_next/data/kubTdYT8j6epjwt90LFc_/samples/cornell.json similarity index 100% rename from _next/data/um7Vob07qBXC-7TtBPMuf/samples/cornell.json rename to _next/data/kubTdYT8j6epjwt90LFc_/samples/cornell.json diff --git a/_next/data/um7Vob07qBXC-7TtBPMuf/samples/cubemap.json b/_next/data/kubTdYT8j6epjwt90LFc_/samples/cubemap.json similarity index 100% rename from _next/data/um7Vob07qBXC-7TtBPMuf/samples/cubemap.json rename to _next/data/kubTdYT8j6epjwt90LFc_/samples/cubemap.json diff --git a/_next/data/um7Vob07qBXC-7TtBPMuf/samples/deferredRendering.json b/_next/data/kubTdYT8j6epjwt90LFc_/samples/deferredRendering.json similarity index 100% rename from _next/data/um7Vob07qBXC-7TtBPMuf/samples/deferredRendering.json rename to _next/data/kubTdYT8j6epjwt90LFc_/samples/deferredRendering.json diff --git a/_next/data/um7Vob07qBXC-7TtBPMuf/samples/fractalCube.json b/_next/data/kubTdYT8j6epjwt90LFc_/samples/fractalCube.json similarity index 100% rename from _next/data/um7Vob07qBXC-7TtBPMuf/samples/fractalCube.json rename to _next/data/kubTdYT8j6epjwt90LFc_/samples/fractalCube.json diff --git a/_next/data/um7Vob07qBXC-7TtBPMuf/samples/gameOfLife.json b/_next/data/kubTdYT8j6epjwt90LFc_/samples/gameOfLife.json similarity index 100% rename from _next/data/um7Vob07qBXC-7TtBPMuf/samples/gameOfLife.json rename to _next/data/kubTdYT8j6epjwt90LFc_/samples/gameOfLife.json diff --git a/_next/data/um7Vob07qBXC-7TtBPMuf/samples/helloTriangle.json b/_next/data/kubTdYT8j6epjwt90LFc_/samples/helloTriangle.json similarity index 100% rename from _next/data/um7Vob07qBXC-7TtBPMuf/samples/helloTriangle.json rename to _next/data/kubTdYT8j6epjwt90LFc_/samples/helloTriangle.json diff --git a/_next/data/um7Vob07qBXC-7TtBPMuf/samples/helloTriangleMSAA.json b/_next/data/kubTdYT8j6epjwt90LFc_/samples/helloTriangleMSAA.json similarity index 100% rename from _next/data/um7Vob07qBXC-7TtBPMuf/samples/helloTriangleMSAA.json rename to _next/data/kubTdYT8j6epjwt90LFc_/samples/helloTriangleMSAA.json diff --git a/_next/data/um7Vob07qBXC-7TtBPMuf/samples/imageBlur.json b/_next/data/kubTdYT8j6epjwt90LFc_/samples/imageBlur.json similarity index 100% rename from _next/data/um7Vob07qBXC-7TtBPMuf/samples/imageBlur.json rename to _next/data/kubTdYT8j6epjwt90LFc_/samples/imageBlur.json diff --git a/_next/data/um7Vob07qBXC-7TtBPMuf/samples/instancedCube.json b/_next/data/kubTdYT8j6epjwt90LFc_/samples/instancedCube.json similarity index 100% rename from _next/data/um7Vob07qBXC-7TtBPMuf/samples/instancedCube.json rename to _next/data/kubTdYT8j6epjwt90LFc_/samples/instancedCube.json diff --git a/_next/data/kubTdYT8j6epjwt90LFc_/samples/normalMap.json b/_next/data/kubTdYT8j6epjwt90LFc_/samples/normalMap.json new file mode 100644 index 00000000..79c4af10 --- /dev/null +++ b/_next/data/kubTdYT8j6epjwt90LFc_/samples/normalMap.json @@ -0,0 +1 @@ +{"pageProps":{"slug":"normalMap"},"__N_SSG":true} \ No newline at end of file diff --git a/_next/data/um7Vob07qBXC-7TtBPMuf/samples/particles.json b/_next/data/kubTdYT8j6epjwt90LFc_/samples/particles.json similarity index 100% rename from _next/data/um7Vob07qBXC-7TtBPMuf/samples/particles.json rename to _next/data/kubTdYT8j6epjwt90LFc_/samples/particles.json diff --git a/_next/data/um7Vob07qBXC-7TtBPMuf/samples/renderBundles.json b/_next/data/kubTdYT8j6epjwt90LFc_/samples/renderBundles.json similarity index 100% rename from _next/data/um7Vob07qBXC-7TtBPMuf/samples/renderBundles.json rename to _next/data/kubTdYT8j6epjwt90LFc_/samples/renderBundles.json diff --git a/_next/data/um7Vob07qBXC-7TtBPMuf/samples/resizeCanvas.json b/_next/data/kubTdYT8j6epjwt90LFc_/samples/resizeCanvas.json similarity index 100% rename from _next/data/um7Vob07qBXC-7TtBPMuf/samples/resizeCanvas.json rename to _next/data/kubTdYT8j6epjwt90LFc_/samples/resizeCanvas.json diff --git a/_next/data/um7Vob07qBXC-7TtBPMuf/samples/reversedZ.json b/_next/data/kubTdYT8j6epjwt90LFc_/samples/reversedZ.json similarity index 100% rename from _next/data/um7Vob07qBXC-7TtBPMuf/samples/reversedZ.json rename to _next/data/kubTdYT8j6epjwt90LFc_/samples/reversedZ.json diff --git a/_next/data/um7Vob07qBXC-7TtBPMuf/samples/rotatingCube.json b/_next/data/kubTdYT8j6epjwt90LFc_/samples/rotatingCube.json similarity index 100% rename from _next/data/um7Vob07qBXC-7TtBPMuf/samples/rotatingCube.json rename to _next/data/kubTdYT8j6epjwt90LFc_/samples/rotatingCube.json diff --git a/_next/data/um7Vob07qBXC-7TtBPMuf/samples/samplerParameters.json b/_next/data/kubTdYT8j6epjwt90LFc_/samples/samplerParameters.json similarity index 100% rename from _next/data/um7Vob07qBXC-7TtBPMuf/samples/samplerParameters.json rename to _next/data/kubTdYT8j6epjwt90LFc_/samples/samplerParameters.json diff --git a/_next/data/um7Vob07qBXC-7TtBPMuf/samples/shadowMapping.json b/_next/data/kubTdYT8j6epjwt90LFc_/samples/shadowMapping.json similarity index 100% rename from _next/data/um7Vob07qBXC-7TtBPMuf/samples/shadowMapping.json rename to _next/data/kubTdYT8j6epjwt90LFc_/samples/shadowMapping.json diff --git a/_next/data/um7Vob07qBXC-7TtBPMuf/samples/texturedCube.json b/_next/data/kubTdYT8j6epjwt90LFc_/samples/texturedCube.json similarity index 100% rename from _next/data/um7Vob07qBXC-7TtBPMuf/samples/texturedCube.json rename to _next/data/kubTdYT8j6epjwt90LFc_/samples/texturedCube.json diff --git a/_next/data/um7Vob07qBXC-7TtBPMuf/samples/twoCubes.json b/_next/data/kubTdYT8j6epjwt90LFc_/samples/twoCubes.json similarity index 100% rename from _next/data/um7Vob07qBXC-7TtBPMuf/samples/twoCubes.json rename to _next/data/kubTdYT8j6epjwt90LFc_/samples/twoCubes.json diff --git a/_next/data/um7Vob07qBXC-7TtBPMuf/samples/videoUploading.json b/_next/data/kubTdYT8j6epjwt90LFc_/samples/videoUploading.json similarity index 100% rename from _next/data/um7Vob07qBXC-7TtBPMuf/samples/videoUploading.json rename to _next/data/kubTdYT8j6epjwt90LFc_/samples/videoUploading.json diff --git a/_next/data/um7Vob07qBXC-7TtBPMuf/samples/videoUploadingWebCodecs.json b/_next/data/kubTdYT8j6epjwt90LFc_/samples/videoUploadingWebCodecs.json similarity index 100% rename from _next/data/um7Vob07qBXC-7TtBPMuf/samples/videoUploadingWebCodecs.json rename to _next/data/kubTdYT8j6epjwt90LFc_/samples/videoUploadingWebCodecs.json diff --git a/_next/data/um7Vob07qBXC-7TtBPMuf/samples/worker.json b/_next/data/kubTdYT8j6epjwt90LFc_/samples/worker.json similarity index 100% rename from _next/data/um7Vob07qBXC-7TtBPMuf/samples/worker.json rename to _next/data/kubTdYT8j6epjwt90LFc_/samples/worker.json diff --git a/_next/static/chunks/118.79ec79606fecb947.js b/_next/static/chunks/118.79ec79606fecb947.js new file mode 100644 index 00000000..b747e033 --- /dev/null +++ b/_next/static/chunks/118.79ec79606fecb947.js @@ -0,0 +1 @@ +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[118],{5671:function(e,n,t){"use strict";t.d(n,{Tl:function(){return c},hu:function(){return p}});var r=t(5893),a=t(9008),i=t.n(a),o=t(1163),s=t(7294),l=t(9147),u=t.n(l);t(7319);let d=e=>{let n=(0,s.useRef)(null),a=(0,s.useMemo)(()=>e.sources.map(e=>{let{name:n,contents:a}=e;return{name:n,...function(e){let n;let a=null;{a=document.createElement("div");let i=t(4631);n=i(a,{lineNumbers:!0,lineWrapping:!0,theme:"monokai",readOnly:!0})}return{Container:function(t){return(0,r.jsx)("div",{...t,children:(0,r.jsx)("div",{ref(t){a&&t&&(t.appendChild(a),n.setOption("value",e))}})})}}}(a)}}),e.sources),l=(0,s.useRef)(null),d=(0,s.useMemo)(()=>{if(e.gui){let n=t(4376);return new n.GUI({autoPlace:!1})}},[]),c=(0,s.useRef)(null),p=(0,s.useMemo)(()=>{if(e.stats){let n=t(2792);return new n}},[]),m=(0,o.useRouter)(),h=m.asPath.match(/#([a-zA-Z0-9\.\/]+)/),[g,f]=(0,s.useState)(null),[x,v]=(0,s.useState)(null);return(0,s.useEffect)(()=>{if(h?v(h[1]):v(a[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 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),f(e)})}catch(s){console.error(s),f(s)}return r},[]),(0,r.jsxs)("main",{children:[(0,r.jsxs)(i(),{children:[(0,r.jsx)("style",{dangerouslySetInnerHTML:{__html:"\n .CodeMirror {\n height: auto !important;\n margin: 1em 0;\n }\n\n .CodeMirror-scroll {\n height: auto !important;\n overflow: visible !important;\n }\n "}}),(0,r.jsx)("title",{children:"".concat(e.name," - WebGPU Samples")}),(0,r.jsx)("meta",{name:"description",content:e.description}),(0,r.jsx)("meta",{httpEquiv:"origin-trial",content:e.originTrial})]}),(0,r.jsxs)("div",{children:[(0,r.jsx)("h1",{children:e.name}),(0,r.jsx)("a",{target:"_blank",rel:"noreferrer",href:"https://github.com/".concat("webgpu/webgpu-samples","/tree/main/").concat(e.filename),children:"See it on Github!"}),(0,r.jsx)("p",{children:e.description}),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:a.map((e,n)=>(0,r.jsx)("li",{children:(0,r.jsx)("a",{href:"#".concat(e.name),"data-active":x==e.name,onClick(){v(e.name)},children:e.name})},n))})}),a.map((e,n)=>(0,r.jsx)(e.Container,{className:u().sourceFileContainer,"data-active":x==e.name},n))]})]})},c=e=>(0,r.jsx)(d,{...e});function p(e,n){if(!e)throw Error(n)}},7118:function(e,n,t){"use strict";t.r(n),t.d(n,{default:function(){return T}});var r,a,i=t(6416),o=t(5671),s="struct SpaceTransformUniforms {\n projMatrix: mat4x4f,\n viewMatrix: mat4x4f,\n modelMatrix: mat4x4f,\n}\n\nstruct Uniforms_MapInfo {\n mappingType: u32,\n lightPosX: f32,\n lightPosY: f32,\n lightPosZ: f32,\n lightIntensity: f32,\n depthScale: f32,\n depthLayers: f32,\n}\n\nstruct VertexInput {\n // Shader assumes the missing 4th float is 1.0\n @location(0) position : vec4f,\n @location(1) normal : vec3f,\n @location(2) uv : vec2f,\n @location(3) vert_tan: vec3f,\n @location(4) vert_bitan: vec3f,\n}\n\nstruct VertexOutput {\n @builtin(position) Position : vec4f,\n @location(0) normal: vec3f,\n @location(1) uv : vec2f,\n // Vertex position in world space\n @location(2) posWS: vec3f,\n // Vertex position in tangent space\n @location(3) posTS: vec3f,\n // View position in tangent space\n @location(4) viewTS: vec3f,\n // Extracted components of our tbn matrix\n @location(5) tbnTS0: vec3, \n @location(6) tbnTS1: vec3,\n @location(7) tbnTS2: vec3,\n}\n\n// Uniforms\n@group(0) @binding(0) var spaceTransform : SpaceTransformUniforms;\n@group(0) @binding(1) var mapInfo: Uniforms_MapInfo;\n\n// Texture info\n@group(1) @binding(0) var textureSampler: sampler;\n@group(1) @binding(1) var diffuseTexture: texture_2d;\n@group(1) @binding(2) var normalTexture: texture_2d;\n@group(1) @binding(3) var depthTexture: texture_2d;\n\nfn parallax_uv(\n uv: vec2f, \n viewDirTS: vec3f, \n depthSample: f32,\n depthScale: f32,\n) -> vec2f {\n if (mapInfo.mappingType == 4) {\n // Perturb uv coordinates based on depth and camera direction\n let p = viewDirTS.xy * (depthSample * depthScale) / viewDirTS.z;\n return uv - p;\n }\n // Break up depth space into layers\n let depthPerLayer = 1.0 / f32(mapInfo.depthLayers);\n // Start at lowest depth\n var currentDepth = 0.0;\n let delta_uv = viewDirTS.xy * depthScale / (viewDirTS.z * mapInfo.depthLayers);\n var prev_uv = uv;\n var cur_uv = uv;\n\n var depthFromTexture = textureSample(depthTexture, textureSampler, cur_uv).r;\n var prevDepthFromTexture = depthFromTexture;\n var prevCurrentDepth = currentDepth;\n for (var i: u32 = 0; i < 32; i++) {\n currentDepth += depthPerLayer;\n prev_uv = cur_uv;\n cur_uv -= delta_uv;\n depthFromTexture = textureSample(depthTexture, textureSampler, cur_uv).r;\n // Determine whether current depth is greater than depth map\n // Once we reach a certain threshold, we stop updating cur_uv\n cur_uv = select(cur_uv, prev_uv, depthFromTexture < currentDepth);\n prevDepthFromTexture = select(depthFromTexture, prevDepthFromTexture, prevDepthFromTexture < currentDepth);\n prevCurrentDepth = select(currentDepth, prevCurrentDepth, prevDepthFromTexture < currentDepth);\n }\n return cur_uv;\n}\n\nfn when_greater(v1: f32, v2: f32) -> f32 {\n return max(sign(v1 - v2), 0.0);\n}\n\n@vertex\nfn vertexMain(input: VertexInput) -> VertexOutput {\n var output : VertexOutput;\n // Create the Model to View Matrix\n let MV = spaceTransform.viewMatrix * spaceTransform.modelMatrix;\n // Create the Model to View to Projection Matrix\n let MVP = spaceTransform.projMatrix * MV;\n \n // Get Clip space transforms and pass through values out of the way\n output.Position = MVP * input.position;\n output.uv = input.uv;\n output.normal = input.normal;\n\n // Multiply pos by modelMatrix to get the vertex/fragment's position in world space\n output.posWS = vec3f((spaceTransform.modelMatrix * input.position).xyz);\n \n var MV3x3 = mat3x3f(\n MV[0].xyz,\n MV[1].xyz,\n MV[2].xyz\n );\n\n // Get unit vectors of normal, tangent, and bitangents in model space\n let vertexTangent = normalize(input.vert_tan);\n let vertexBitangent = normalize(input.vert_bitan);\n let vertexNormal = normalize(input.normal);\n\n // Convert tbn unit vectors to mv space for a model view tbn\n var tbnTS = transpose(\n MV3x3 * mat3x3f(\n vertexTangent,\n vertexBitangent,\n vertexNormal\n )\n );\n // Condense to vec3s so they can be passed to fragment shader\n output.tbnTS0 = tbnTS[0];\n output.tbnTS1 = tbnTS[1];\n output.tbnTS2 = tbnTS[2];\n\n // Get the tangent space position of the vertex\n output.posTS = tbnTS * (MV * input.position).xyz;\n // Get the tangent space position of the camera view\n output.viewTS = tbnTS * vec3f(0.0, 0.0, 0.0);\n\n return output;\n}\n\n@fragment\nfn fragmentMain(input: VertexOutput) -> @location(0) vec4f {\n // Reconstruct tbnTS\n let tbnTS = mat3x3f(\n input.tbnTS0,\n input.tbnTS1,\n input.tbnTS2,\n );\n\n // Get direction of view in tangent space\n let viewDirTS = normalize(input.viewTS - input.posTS);\n\n // Get position, direction, and distance of light in tangent space (no need to multiply by model matrix as there is no model)\n let lightPosVS = spaceTransform.viewMatrix * vec4f(mapInfo.lightPosX, mapInfo.lightPosY, mapInfo.lightPosZ, 1.0);\n let lightPosTS = tbnTS * lightPosVS.xyz;\n let lightDirTS = normalize(lightPosTS - input.posTS);\n let lightDistanceTS = distance(input.posTS, lightPosTS);\n\n let depthMap = textureSample(depthTexture, textureSampler, input.uv); \n\n let uv = select(\n parallax_uv(input.uv, viewDirTS, depthMap.r, mapInfo.depthScale),\n input.uv,\n mapInfo.mappingType < 4\n );\n\n // Get values from textures\n let diffuseMap = textureSample(diffuseTexture, textureSampler, uv);\n let normalMap = textureSample(normalTexture, textureSampler, uv);\n\n // Get normal in tangent space\n let normalTS = normalize((normalMap.xyz * 2.0) - 1.0);\n \n // Calculate diffusion lighting\n let lightColorIntensity = vec3f(255.0, 255.0, 255.0) * mapInfo.lightIntensity;\n //How similar is the normal to the lightDirection\n let diffuseStrength = clamp(\n dot(normalTS, lightDirTS), 0.0, 1.0\n );\n // Strenght inversely proportional to square of distance from light\n let diffuseLight = (lightColorIntensity * diffuseStrength) / (lightDistanceTS * lightDistanceTS);\n\n switch (mapInfo.mappingType) {\n // Output the diffuse texture\n case 0: {\n return vec4f(diffuseMap.rgb, 1.0);\n }\n // Output the normal map\n case 1: {\n return vec4f(normalMap.rgb, 1.0);\n }\n // Output the height map\n case 2: {\n return vec4f(depthMap.rgb, 1.0);\n }\n default: {\n return vec4f(diffuseMap.rgb * diffuseLight, 1.0);\n }\n }\n}";let l=function(e,n){let t=arguments.length>2&&void 0!==arguments[2]&&arguments[2],r=arguments.length>3&&void 0!==arguments[3]&&arguments[3],a=t?GPUBufferUsage.VERTEX|GPUBufferUsage.STORAGE:GPUBufferUsage.VERTEX,i=r?GPUBufferUsage.INDEX|GPUBufferUsage.STORAGE:GPUBufferUsage.INDEX,o=e.createBuffer({size:n.vertices.byteLength,usage:a,mappedAtCreation:!0});new Float32Array(o.getMappedRange()).set(n.vertices),o.unmap();let s=e.createBuffer({size:n.indices.byteLength,usage:i,mappedAtCreation:!0});return n.indices.byteLength===n.indices.length*Uint16Array.BYTES_PER_ELEMENT?new Uint16Array(s.getMappedRange()).set(n.indices):new Uint32Array(s.getMappedRange()).set(n.indices),s.unmap(),{vertexBuffer:o,indexBuffer:s,indexCount:n.indices.length}},u=(e,n)=>{let t=new Float32Array(e.vertices.buffer,n*e.vertexStride+0,3);return i.R3.fromValues(t[0],t[1],t[2])},d=(e,n)=>{let t=new Float32Array(e.vertices.buffer,n*e.vertexStride+6*Float32Array.BYTES_PER_ELEMENT,2);return i.K4.fromValues(t[0],t[1])},c=function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1,t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1,r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:1,a=arguments.length>4&&void 0!==arguments[4]?arguments[4]:1,o=arguments.length>5&&void 0!==arguments[5]?arguments[5]:1;r=Math.floor(r),a=Math.floor(a),o=Math.floor(o);let s=[],l=[],u=0,d=(e,n,t,r,a,o,d,c,p,m)=>{let h=o/p,g=d/m,f=o/2,x=d/2,v=c/2,b=p+1,y=m+1,S=0,P=i.R3.create(),T=i.R3.create();for(let w=0;w0?1:-1,l.push(...T),l.push(G/p),l.push(1-w/m),S+=1}}for(let U=0;U0&&void 0!==arguments[0]?arguments[0]:1,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1,t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1,r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:1,a=arguments.length>4&&void 0!==arguments[4]?arguments[4]:1,i=arguments.length>5&&void 0!==arguments[5]?arguments[5]:1,o=arguments.length>6&&void 0!==arguments[6]?arguments[6]:"uint16",{vertices:s,indices:l}=c(e,n,t,r,a,i),u=8*Float32Array.BYTES_PER_ELEMENT,d="uint16"===o?new Uint16Array(l):new Uint32Array(l);return{vertices:new Float32Array(s),indices:d,vertexStride:u}},m=function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1,t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1,r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:1,a=arguments.length>4&&void 0!==arguments[4]?arguments[4]:1,o=arguments.length>5&&void 0!==arguments[5]?arguments[5]:1,s=p(e,n,t,r,a,o),l=s.vertexStride/Float32Array.BYTES_PER_ELEMENT,c=s.vertices.length/l,m=Array(c),h=Array(c),g=Array(c);for(let f=0;f{let s=[];for(let l=0;l{let n=e.split("x"),t=parseInt(n[0].replace(/[^0-9]/g,""))/8,r=t*(void 0!==n[1]?parseInt(n[1]):1);return r},f=e=>{let n=e.reduce((e,n,t)=>{let r={shaderLocation:t,offset:e.arrayStride,format:n},a=e.arrayStride+g(n),i={attributes:[...e.attributes,r],arrayStride:a};return i},{attributes:[],arrayStride:0}),t={arrayStride:n.arrayStride,attributes:n.attributes};return t},x=function(e,n,t,r,a,i,o){let s=arguments.length>7&&void 0!==arguments[7]&&arguments[7],l=arguments.length>8&&void 0!==arguments[8]?arguments[8]:"triangle-list",u=arguments.length>9&&void 0!==arguments[9]?arguments[9]:"back",d={label:"".concat(n,".pipeline"),layout:e.createPipelineLayout({label:"".concat(n,".pipelineLayout"),bindGroupLayouts:t}),vertex:{module:e.createShaderModule({label:"".concat(n,".vertexShader"),code:r}),entryPoint:"vertexMain",buffers:0!==a.length?[f(a)]:[]},fragment:{module:e.createShaderModule({label:"".concat(n,".fragmentShader"),code:i}),entryPoint:"fragmentMain",targets:[{format:o}]},primitive:{topology:l,cullMode:u}};return s&&(d.depthStencil={depthCompare:"less",depthWriteEnabled:!0,format:"depth24plus"}),e.createRenderPipeline(d)},v=(e,n)=>{let t=e.createTexture({size:[n.width,n.height,1],format:"rgba8unorm",usage:GPUTextureUsage.TEXTURE_BINDING|GPUTextureUsage.COPY_DST|GPUTextureUsage.RENDER_ATTACHMENT});return e.queue.copyExternalImageToTexture({source:n},{texture:t},[n.width,n.height]),t},b=async(e,n)=>{let t=n.map(e=>{let n=e.split("_"),t=n[n.length-1].split(".")[0];return{url:"/img/"+e,type:t}});console.log(t);let r={};for(let a=0;a{let n,t,r,{canvas:o,pageState:u,gui:d}=e,c=await navigator.gpu.requestAdapter(),p=await c.requestDevice();if(!u.active)return;let g=o.getContext("webgpu"),f=window.devicePixelRatio;o.width=o.clientWidth*f,o.height=o.clientHeight*f;let v=navigator.gpu.getPreferredCanvasFormat();g.configure({device:p,format:v,alphaMode:"premultiplied"});let y={"Bump Mode":"Normal Map",cameraPosX:0,cameraPosY:.8,cameraPosZ:-1.4,lightPosX:1.7,lightPosY:.7,lightPosZ:-1.9,lightIntensity:.02,depthScale:.05,depthLayers:16,Texture:"Spiral","Reset Light"(){}},S=p.createTexture({size:[o.width,o.height],format:"depth24plus",usage:GPUTextureUsage.RENDER_ATTACHMENT}),P=p.createBuffer({size:256,usage:GPUBufferUsage.UNIFORM|GPUBufferUsage.COPY_DST}),T=p.createBuffer({size:7*Float32Array.BYTES_PER_ELEMENT,usage:GPUBufferUsage.UNIFORM|GPUBufferUsage.COPY_DST});{let w=await b(p,["wood_diffuse.png","spiral_normal.png","spiral_height.png"]);n=w}{let B=await b(p,["wood_diffuse.png","toybox_normal.png","toybox_height.png"]);t=B}{let G=await b(p,["brickwall_diffuse.png","brickwall_normal.png","brickwall_height.png"]);r=G}let M=p.createSampler({magFilter:"linear",minFilter:"linear"}),U={colorAttachments:[{view:void 0,clearValue:{r:0,g:0,b:0,a:1},loadOp:"clear",storeOp:"store"}],depthStencilAttachment:{view:S.createView(),depthClearValue:1,depthLoadOp:"clear",depthStoreOp:"store"}},E=l(p,m(1,1,1)),R=h([0,1],[GPUShaderStage.VERTEX|GPUShaderStage.FRAGMENT,GPUShaderStage.FRAGMENT|GPUShaderStage.VERTEX],["buffer","buffer"],[{type:"uniform"},{type:"uniform"}],[[{buffer:P},{buffer:T}]],"Frame",p),V=h([0,1,2,3],[GPUShaderStage.FRAGMENT],["sampler","texture","texture","texture"],[{type:"filtering"},{sampleType:"float"},{sampleType:"float"},{sampleType:"float"}],[[M,n.diffuse.createView(),n.normal.createView(),n.height.createView()],[M,t.diffuse.createView(),t.normal.createView(),t.height.createView()],[M,r.diffuse.createView(),r.normal.createView(),r.height.createView()]],"Surface",p),A=o.width/o.height,_=i._E.perspective(2*Math.PI/5,A,.1,10),D=()=>{switch(y["Bump Mode"]){case"Diffuse Texture":return 0;case"Normal Texture":return 1;case"Depth Texture":return 2;case"Normal Map":return 3;case"Parallax Scale":return 4;case"Steep Parallax":return 5}},F=x(p,"NormalMappingRender",[R.bindGroupLayout,V.bindGroupLayout],s,["float32x3","float32x3","float32x2","float32x3","float32x3"],s,v,!0),L=0,C=()=>{L=a[y.Texture]};d.add(y,"Bump Mode",["Diffuse Texture","Normal Texture","Depth Texture","Normal Map","Parallax Scale","Steep Parallax"]),d.add(y,"Texture",["Spiral","Toybox","BrickWall"]).onChange(C);let I=d.addFolder("Light"),N=d.addFolder("Depth");I.add(y,"Reset Light").onChange(()=>{j.setValue(1.7),X.setValue(-.7),Y.setValue(1.9),O.setValue(.02)});let j=I.add(y,"lightPosX",-5,5).step(.1),X=I.add(y,"lightPosY",-5,5).step(.1),Y=I.add(y,"lightPosZ",-5,5).step(.1),O=I.add(y,"lightIntensity",0,.1).step(.002);N.add(y,"depthScale",0,.1).step(.01),N.add(y,"depthLayers",1,32).step(1),requestAnimationFrame(function e(){if(!u.active)return;let n=i._E.lookAt([y.cameraPosX,y.cameraPosY,y.cameraPosZ],[0,0,0],[0,1,0]),t=function(){let e=i._E.create();i._E.identity(e),i._E.rotateX(e,10,e);let n=Date.now()/1e3;return i._E.rotateY(e,-.5*n,e),e}(),r=new Float32Array([..._,...n,...t]),a=D();p.queue.writeBuffer(P,0,r.buffer,r.byteOffset,r.byteLength),p.queue.writeBuffer(T,0,new Uint32Array([a])),p.queue.writeBuffer(T,4,new Float32Array([y.lightPosX,y.lightPosY,y.lightPosZ,y.lightIntensity,y.depthScale,y.depthLayers])),U.colorAttachments[0].view=g.getCurrentTexture().createView();let o=p.createCommandEncoder(),s=o.beginRenderPass(U);s.setPipeline(F),s.setBindGroup(0,R.bindGroups[0]),s.setBindGroup(1,V.bindGroups[L]),s.setVertexBuffer(0,E.vertexBuffer),s.setIndexBuffer(E.indexBuffer,"uint16"),s.drawIndexed(E.indexCount),s.end(),p.queue.submit([o.finish()]),requestAnimationFrame(e)})},P=()=>(0,o.Tl)({name:"Normal Mapping",description:"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.",gui:!0,init:S,sources:[{name:y.substring(21),contents:"import { mat4 } from 'wgpu-matrix';\nimport { makeSample, SampleInit } from '../../components/SampleLayout';\nimport normalMapWGSL from './normalMap.wgsl';\nimport { createMeshRenderable } from '../../meshes/mesh';\nimport { createBoxMeshWithTangents } from '../../meshes/box';\nimport {\n PBRDescriptor,\n createPBRDescriptor,\n createBindGroupDescriptor,\n create3DRenderPipeline,\n} from './utils';\n\nconst MAT4X4_BYTES = 64;\nenum TextureAtlas {\n Spiral,\n Toybox,\n BrickWall,\n}\n\nconst init: SampleInit = async ({ canvas, pageState, gui }) => {\n const adapter = await navigator.gpu.requestAdapter();\n const device = await adapter.requestDevice();\n if (!pageState.active) return;\n const context = canvas.getContext('webgpu') as GPUCanvasContext;\n const devicePixelRatio = window.devicePixelRatio;\n canvas.width = canvas.clientWidth * devicePixelRatio;\n canvas.height = canvas.clientHeight * devicePixelRatio;\n const presentationFormat = navigator.gpu.getPreferredCanvasFormat();\n context.configure({\n device,\n format: presentationFormat,\n alphaMode: 'premultiplied',\n });\n\n interface GUISettings {\n 'Bump Mode':\n | 'Diffuse Texture'\n | 'Normal Texture'\n | 'Depth Texture'\n | 'Normal Map'\n | 'Parallax Scale'\n | 'Steep Parallax';\n cameraPosX: number;\n cameraPosY: number;\n cameraPosZ: number;\n lightPosX: number;\n lightPosY: number;\n lightPosZ: number;\n lightIntensity: number;\n depthScale: number;\n depthLayers: number;\n Texture: string;\n 'Reset Light': () => void;\n }\n\n const settings: GUISettings = {\n 'Bump Mode': 'Normal Map',\n cameraPosX: 0.0,\n cameraPosY: 0.8,\n cameraPosZ: -1.4,\n lightPosX: 1.7,\n lightPosY: 0.7,\n lightPosZ: -1.9,\n lightIntensity: 0.02,\n depthScale: 0.05,\n depthLayers: 16,\n Texture: 'Spiral',\n 'Reset Light': () => {\n return;\n },\n };\n\n // Create normal mapping resources and pipeline\n const depthTexture = device.createTexture({\n size: [canvas.width, canvas.height],\n format: 'depth24plus',\n usage: GPUTextureUsage.RENDER_ATTACHMENT,\n });\n\n const uniformBuffer = device.createBuffer({\n // Buffer holding projection, view, and model matrices plus padding bytes\n size: MAT4X4_BYTES * 4,\n usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,\n });\n\n const mapMethodBuffer = device.createBuffer({\n // Buffer holding mapping type, light uniforms, and depth uniforms\n size: Float32Array.BYTES_PER_ELEMENT * 7,\n usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,\n });\n\n // Create PBR info (diffuse, normal, and depth/height textures)\n let spiralPBR: Required;\n {\n const response = await createPBRDescriptor(device, [\n 'wood_diffuse.png',\n 'spiral_normal.png',\n 'spiral_height.png',\n ]);\n spiralPBR = response as Required;\n }\n\n let toyboxPBR: Required;\n {\n const response = await createPBRDescriptor(device, [\n 'wood_diffuse.png',\n 'toybox_normal.png',\n 'toybox_height.png',\n ]);\n toyboxPBR = response as Required;\n }\n\n let brickWallPBR: Required;\n {\n const response = await createPBRDescriptor(device, [\n 'brickwall_diffuse.png',\n 'brickwall_normal.png',\n 'brickwall_height.png',\n ]);\n brickWallPBR = response as Required;\n }\n\n // Create a sampler with linear filtering for smooth interpolation.\n const sampler = device.createSampler({\n magFilter: 'linear',\n minFilter: 'linear',\n });\n\n const renderPassDescriptor: GPURenderPassDescriptor = {\n colorAttachments: [\n {\n view: undefined, // Assigned later\n\n clearValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 },\n loadOp: 'clear',\n storeOp: 'store',\n },\n ],\n depthStencilAttachment: {\n view: depthTexture.createView(),\n\n depthClearValue: 1.0,\n depthLoadOp: 'clear',\n depthStoreOp: 'store',\n },\n };\n\n const box = createMeshRenderable(\n device,\n createBoxMeshWithTangents(1.0, 1.0, 1.0)\n );\n\n // Uniform bindGroups and bindGroupLayout\n const frameBGDescriptor = createBindGroupDescriptor(\n [0, 1],\n [\n GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,\n GPUShaderStage.FRAGMENT | GPUShaderStage.VERTEX,\n ],\n ['buffer', 'buffer'],\n [{ type: 'uniform' }, { type: 'uniform' }],\n [[{ buffer: uniformBuffer }, { buffer: mapMethodBuffer }]],\n 'Frame',\n device\n );\n\n // Texture bindGroups and bindGroupLayout\n const surfaceBGDescriptor = createBindGroupDescriptor(\n [0, 1, 2, 3],\n [GPUShaderStage.FRAGMENT],\n ['sampler', 'texture', 'texture', 'texture'],\n [\n { type: 'filtering' },\n { sampleType: 'float' },\n { sampleType: 'float' },\n { sampleType: 'float' },\n ],\n // Multiple bindgroups that accord to the layout defined above\n [\n [\n sampler,\n spiralPBR.diffuse.createView(),\n spiralPBR.normal.createView(),\n spiralPBR.height.createView(),\n ],\n [\n sampler,\n toyboxPBR.diffuse.createView(),\n toyboxPBR.normal.createView(),\n toyboxPBR.height.createView(),\n ],\n [\n sampler,\n brickWallPBR.diffuse.createView(),\n brickWallPBR.normal.createView(),\n brickWallPBR.height.createView(),\n ],\n ],\n 'Surface',\n device\n );\n\n const aspect = canvas.width / canvas.height;\n const projectionMatrix = mat4.perspective(\n (2 * Math.PI) / 5,\n aspect,\n 0.1,\n 10.0\n ) as Float32Array;\n\n function getViewMatrix() {\n return mat4.lookAt(\n [settings.cameraPosX, settings.cameraPosY, settings.cameraPosZ],\n [0, 0, 0],\n [0, 1, 0]\n );\n }\n\n function getModelMatrix() {\n const modelMatrix = mat4.create();\n mat4.identity(modelMatrix);\n mat4.rotateX(modelMatrix, 10, modelMatrix);\n const now = Date.now() / 1000;\n mat4.rotateY(modelMatrix, now * -0.5, modelMatrix);\n return modelMatrix;\n }\n\n // Change the model mapping type\n const getMappingType = (): number => {\n switch (settings['Bump Mode']) {\n case 'Diffuse Texture':\n return 0;\n case 'Normal Texture':\n return 1;\n case 'Depth Texture':\n return 2;\n case 'Normal Map':\n return 3;\n case 'Parallax Scale':\n return 4;\n case 'Steep Parallax':\n return 5;\n }\n };\n\n const texturedCubePipeline = create3DRenderPipeline(\n device,\n 'NormalMappingRender',\n [frameBGDescriptor.bindGroupLayout, surfaceBGDescriptor.bindGroupLayout],\n normalMapWGSL,\n // Position, normal uv tangent bitangent\n ['float32x3', 'float32x3', 'float32x2', 'float32x3', 'float32x3'],\n normalMapWGSL,\n presentationFormat,\n true\n );\n\n let currentSurfaceBindGroup = 0;\n const onChangeTexture = () => {\n currentSurfaceBindGroup = TextureAtlas[settings.Texture];\n };\n\n gui.add(settings, 'Bump Mode', [\n 'Diffuse Texture',\n 'Normal Texture',\n 'Depth Texture',\n 'Normal Map',\n 'Parallax Scale',\n 'Steep Parallax',\n ]);\n gui\n .add(settings, 'Texture', ['Spiral', 'Toybox', 'BrickWall'])\n .onChange(onChangeTexture);\n const lightFolder = gui.addFolder('Light');\n const depthFolder = gui.addFolder('Depth');\n lightFolder.add(settings, 'Reset Light').onChange(() => {\n lightPosXController.setValue(1.7);\n lightPosYController.setValue(-0.7);\n lightPosZController.setValue(1.9);\n lightIntensityController.setValue(0.02);\n });\n const lightPosXController = lightFolder\n .add(settings, 'lightPosX', -5, 5)\n .step(0.1);\n const lightPosYController = lightFolder\n .add(settings, 'lightPosY', -5, 5)\n .step(0.1);\n const lightPosZController = lightFolder\n .add(settings, 'lightPosZ', -5, 5)\n .step(0.1);\n const lightIntensityController = lightFolder\n .add(settings, 'lightIntensity', 0.0, 0.1)\n .step(0.002);\n depthFolder.add(settings, 'depthScale', 0.0, 0.1).step(0.01);\n depthFolder.add(settings, 'depthLayers', 1, 32).step(1);\n\n function frame() {\n if (!pageState.active) return;\n\n // Write to normal map shader\n const viewMatrix = getViewMatrix();\n\n const modelMatrix = getModelMatrix();\n\n const matrices = new Float32Array([\n ...projectionMatrix,\n ...viewMatrix,\n ...modelMatrix,\n ]);\n\n const mappingType = getMappingType();\n\n device.queue.writeBuffer(\n uniformBuffer,\n 0,\n matrices.buffer,\n matrices.byteOffset,\n matrices.byteLength\n );\n\n device.queue.writeBuffer(\n mapMethodBuffer,\n 0,\n new Uint32Array([mappingType])\n );\n\n device.queue.writeBuffer(\n mapMethodBuffer,\n 4,\n new Float32Array([\n settings.lightPosX,\n settings.lightPosY,\n settings.lightPosZ,\n settings.lightIntensity,\n settings.depthScale,\n settings.depthLayers,\n ])\n );\n\n renderPassDescriptor.colorAttachments[0].view = context\n .getCurrentTexture()\n .createView();\n\n const commandEncoder = device.createCommandEncoder();\n const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);\n // Draw textured Cube\n passEncoder.setPipeline(texturedCubePipeline);\n passEncoder.setBindGroup(0, frameBGDescriptor.bindGroups[0]);\n passEncoder.setBindGroup(\n 1,\n surfaceBGDescriptor.bindGroups[currentSurfaceBindGroup]\n );\n passEncoder.setVertexBuffer(0, box.vertexBuffer);\n passEncoder.setIndexBuffer(box.indexBuffer, 'uint16');\n passEncoder.drawIndexed(box.indexCount);\n passEncoder.end();\n device.queue.submit([commandEncoder.finish()]);\n\n requestAnimationFrame(frame);\n }\n requestAnimationFrame(frame);\n};\n\nconst NormalMapping: () => JSX.Element = () =>\n makeSample({\n name: 'Normal Mapping',\n description:\n '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.',\n gui: true,\n init,\n sources: [\n {\n name: __filename.substring(__dirname.length + 1),\n contents: __SOURCE__,\n },\n {\n name: './normalMap.wgsl',\n contents: normalMapWGSL,\n editable: true,\n },\n {\n name: '../../meshes/box.ts',\n // eslint-disable-next-line @typescript-eslint/no-var-requires\n contents: require('!!raw-loader!../../meshes/box.ts').default,\n },\n {\n name: '../../meshes/mesh.ts',\n // eslint-disable-next-line @typescript-eslint/no-var-requires\n contents: require('!!raw-loader!../../meshes/mesh.ts').default,\n },\n {\n name: './utils.ts',\n // eslint-disable-next-line @typescript-eslint/no-var-requires\n contents: require('!!raw-loader!./utils.ts').default,\n },\n ],\n filename: __filename,\n });\n\nexport default NormalMapping;\n"},{name:"./normalMap.wgsl",contents:s,editable:!0},{name:"../../meshes/box.ts",contents:t(3583).Z},{name:"../../meshes/mesh.ts",contents:t(3150).Z},{name:"./utils.ts",contents:t(1146).Z}],filename:y});var T=P},9147:function(e){e.exports={canvasContainer:"SampleLayout_canvasContainer__zRR_l",sourceFileNav:"SampleLayout_sourceFileNav__ml48P",sourceFileContainer:"SampleLayout_sourceFileContainer__3s84x"}},3583:function(e,n){"use strict";n.Z="import { vec3 } from 'wgpu-matrix';\nimport { getMeshPosAtIndex, getMeshUVAtIndex, Mesh } from './mesh';\n\nexport interface BoxMesh extends Mesh {\n vertices: Float32Array;\n indices: Uint16Array | Uint32Array;\n vertexStride: number;\n}\n\n//// Borrowed and simplified from https://github.com/mrdoob/three.js/blob/master/src/geometries/BoxGeometry.js\n//// Presumes vertex buffer alignment of verts, normals, and uvs\nconst createBoxGeometry = (\n width = 1.0,\n height = 1.0,\n depth = 1.0,\n widthSegments = 1.0,\n heightSegments = 1.0,\n depthSegments = 1.0\n) => {\n widthSegments = Math.floor(widthSegments);\n heightSegments = Math.floor(heightSegments);\n depthSegments = Math.floor(depthSegments);\n\n const indices = [];\n const vertNormalUVBuffer = [];\n\n let numVertices = 0;\n\n const buildPlane = (\n u: 0 | 1 | 2,\n v: 0 | 1 | 2,\n w: 0 | 1 | 2,\n udir: -1 | 1,\n vdir: -1 | 1,\n planeWidth: number,\n planeHeight: number,\n planeDepth: number,\n xSections: number,\n ySections: number\n ) => {\n const segmentWidth = planeWidth / xSections;\n const segmentHeight = planeHeight / ySections;\n\n const widthHalf = planeWidth / 2;\n const heightHalf = planeHeight / 2;\n const depthHalf = planeDepth / 2;\n\n const gridX1 = xSections + 1;\n const gridY1 = ySections + 1;\n\n let vertexCounter = 0;\n\n const vertex = vec3.create();\n const normal = vec3.create();\n for (let iy = 0; iy < gridY1; iy++) {\n const y = iy * segmentHeight - heightHalf;\n\n for (let ix = 0; ix < gridX1; ix++) {\n const x = ix * segmentWidth - widthHalf;\n\n //Calculate plane vertices\n vertex[u] = x * udir;\n vertex[v] = y * vdir;\n vertex[w] = depthHalf;\n vertNormalUVBuffer.push(...vertex);\n\n //Caclulate normal\n normal[u] = 0;\n normal[v] = 0;\n normal[w] = planeDepth > 0 ? 1.0 : -1.0;\n vertNormalUVBuffer.push(...normal);\n\n //Calculate uvs\n vertNormalUVBuffer.push(ix / xSections);\n vertNormalUVBuffer.push(1 - iy / ySections);\n\n vertexCounter += 1;\n }\n }\n\n for (let iy = 0; iy < ySections; iy++) {\n for (let ix = 0; ix < xSections; ix++) {\n const a = numVertices + ix + gridX1 * iy;\n const b = numVertices + ix + gridX1 * (iy + 1);\n const c = numVertices + (ix + 1) + gridX1 * (iy + 1);\n const d = numVertices + (ix + 1) + gridX1 * iy;\n\n //Push vertex indices\n //6 indices for each face\n indices.push(a, b, d);\n indices.push(b, c, d);\n\n numVertices += vertexCounter;\n }\n }\n };\n\n //Side face\n buildPlane(\n 2, //z\n 1, //y\n 0, //x\n -1,\n -1,\n depth,\n height,\n width,\n depthSegments,\n heightSegments\n );\n\n //Side face\n buildPlane(\n 2, //z\n 1, //y\n 0, //x\n 1,\n -1,\n depth,\n height,\n -width,\n depthSegments,\n heightSegments\n );\n\n //Bottom face\n buildPlane(\n 0, //x\n 2, //z\n 1, //y\n 1,\n 1,\n width,\n depth,\n height,\n widthSegments,\n depthSegments\n );\n\n //Top face\n buildPlane(\n 0, //x\n 2, //z\n 1, //y\n 1,\n -1,\n width,\n depth,\n -height,\n widthSegments,\n depthSegments\n );\n\n //Side faces\n buildPlane(\n 0, //x\n 1, //y\n 2, //z\n 1,\n -1,\n width,\n height,\n depth,\n widthSegments,\n heightSegments\n );\n\n //Side face\n buildPlane(\n 0, //x\n 1, //y\n 2, //z\n -1,\n -1,\n width,\n height,\n -depth,\n widthSegments,\n heightSegments\n );\n\n return {\n vertices: vertNormalUVBuffer,\n indices: indices,\n };\n};\n\ntype IndexFormat = 'uint16' | 'uint32';\n\n// Box mesh code ported from threejs, with addition of indexFormat specifier for vertex pulling\nexport const createBoxMesh = (\n width = 1.0,\n height = 1.0,\n depth = 1.0,\n widthSegments = 1.0,\n heightSegments = 1.0,\n depthSegments = 1.0,\n indexFormat: IndexFormat = 'uint16'\n): Mesh => {\n const { vertices, indices } = createBoxGeometry(\n width,\n height,\n depth,\n widthSegments,\n heightSegments,\n depthSegments\n );\n\n const vertexStride = 8 * Float32Array.BYTES_PER_ELEMENT; //calculateVertexStride(vertexProperties);\n\n const indicesArray =\n indexFormat === 'uint16'\n ? new Uint16Array(indices)\n : new Uint32Array(indices);\n\n return {\n vertices: new Float32Array(vertices),\n indices: indicesArray,\n vertexStride: vertexStride,\n };\n};\n\nexport const createBoxMeshWithTangents = (\n width = 1.0,\n height = 1.0,\n depth = 1.0,\n widthSegments = 1.0,\n heightSegments = 1.0,\n depthSegments = 1.0\n): Mesh => {\n const mesh = createBoxMesh(\n width,\n height,\n depth,\n widthSegments,\n heightSegments,\n depthSegments\n );\n\n const originalStrideElements =\n mesh.vertexStride / Float32Array.BYTES_PER_ELEMENT;\n\n const vertexCount = mesh.vertices.length / originalStrideElements;\n\n const tangents = new Array(vertexCount);\n const bitangents = new Array(vertexCount);\n const counts = new Array(vertexCount);\n for (let i = 0; i < vertexCount; i++) {\n tangents[i] = [0, 0, 0];\n bitangents[i] = [0, 0, 0];\n counts[i] = 0;\n }\n\n for (let i = 0; i < mesh.indices.length; i += 3) {\n const [idx1, idx2, idx3] = [\n mesh.indices[i],\n mesh.indices[i + 1],\n mesh.indices[i + 2],\n ];\n\n const [pos1, pos2, pos3] = [\n getMeshPosAtIndex(mesh, idx1),\n getMeshPosAtIndex(mesh, idx2),\n getMeshPosAtIndex(mesh, idx3),\n ];\n\n const [uv1, uv2, uv3] = [\n getMeshUVAtIndex(mesh, idx1),\n getMeshUVAtIndex(mesh, idx2),\n getMeshUVAtIndex(mesh, idx3),\n ];\n\n const edge1 = vec3.sub(pos2, pos1);\n const edge2 = vec3.sub(pos3, pos1);\n const deltaUV1 = vec3.sub(uv2, uv1);\n const deltaUV2 = vec3.sub(uv3, uv1);\n\n // Edge of a triangle moves in both u and v direction (2d)\n // deltaU * tangent vector + deltav * bitangent\n // Manipulating the data into matrices, we get an equation\n\n const constantVal =\n 1.0 / (deltaUV1[0] * deltaUV2[1] - deltaUV1[1] * deltaUV2[0]);\n\n const tangent = [\n constantVal * (deltaUV2[1] * edge1[0] - deltaUV1[1] * edge2[0]),\n constantVal * (deltaUV2[1] * edge1[1] - deltaUV1[1] * edge2[1]),\n constantVal * (deltaUV2[1] * edge1[2] - deltaUV1[1] * edge2[2]),\n ];\n\n const bitangent = [\n constantVal * (-deltaUV2[0] * edge1[0] + deltaUV1[0] * edge2[0]),\n constantVal * (-deltaUV2[0] * edge1[1] + deltaUV1[0] * edge2[1]),\n constantVal * (-deltaUV2[0] * edge1[2] + deltaUV1[0] * edge2[2]),\n ];\n\n //Accumulate tangents and bitangents\n tangents[idx1] = vec3.add(tangents[idx1], tangent);\n bitangents[idx1] = vec3.add(bitangents[idx1], bitangent);\n tangents[idx2] = vec3.add(tangents[idx2], tangent);\n bitangents[idx2] = vec3.add(bitangents[idx2], bitangent);\n tangents[idx3] = vec3.add(tangents[idx3], tangent);\n bitangents[idx3] = vec3.add(bitangents[idx3], bitangent);\n\n //Increment index count\n counts[idx1]++;\n counts[idx2]++;\n counts[idx3]++;\n }\n\n for (let i = 0; i < tangents.length; i++) {\n tangents[i] = vec3.divScalar(tangents[i], counts[i]);\n bitangents[i] = vec3.divScalar(bitangents[i], counts[i]);\n }\n\n const newStrideElements = 14;\n const wTangentArray = new Float32Array(vertexCount * newStrideElements);\n\n for (let i = 0; i < vertexCount; i++) {\n //Copy original vertex data (pos, normal uv)\n wTangentArray.set(\n //Get the original vertex [8 elements] (3 ele pos, 3 ele normal, 2 ele uv)\n mesh.vertices.subarray(\n i * originalStrideElements,\n (i + 1) * originalStrideElements\n ),\n //And put it at the proper location in the new array [14 bytes = 8 og + 6 empty]\n i * newStrideElements\n );\n //For each vertex, place tangent after originalStride\n wTangentArray.set(\n tangents[i],\n i * newStrideElements + originalStrideElements\n );\n //Place bitangent after 3 elements of tangent\n wTangentArray.set(\n bitangents[i],\n i * newStrideElements + originalStrideElements + 3\n );\n }\n\n return {\n vertices: wTangentArray,\n indices: mesh.indices,\n vertexStride: mesh.vertexStride + Float32Array.BYTES_PER_ELEMENT * 3 * 2,\n };\n};\n"},3150:function(e,n){"use strict";n.Z="import { vec3, vec2 } from 'wgpu-matrix';\n\n// Defines what to pass to pipeline to render mesh\nexport interface Renderable {\n vertexBuffer: GPUBuffer;\n indexBuffer: GPUBuffer;\n indexCount: number;\n bindGroup?: GPUBindGroup;\n}\n\nexport interface Mesh {\n vertices: Float32Array;\n indices: Uint16Array | Uint32Array;\n vertexStride: number;\n}\n\n/**\n * @param {GPUDevice} device - A valid GPUDevice.\n * @param {Mesh} mesh - An indexed triangle-list mesh, containing its vertices, indices, and vertexStride (number of elements per vertex).\n * @param {boolean} storeVertices - A boolean flag indicating whether the vertexBuffer should be available to use as a storage buffer.\n * @returns {boolean} An object containing an array of bindGroups and the bindGroupLayout they implement.\n */\nexport const createMeshRenderable = (\n device: GPUDevice,\n mesh: Mesh,\n storeVertices = false,\n storeIndices = false\n): Renderable => {\n // Define buffer usage\n const vertexBufferUsage = storeVertices\n ? GPUBufferUsage.VERTEX | GPUBufferUsage.STORAGE\n : GPUBufferUsage.VERTEX;\n const indexBufferUsage = storeIndices\n ? GPUBufferUsage.INDEX | GPUBufferUsage.STORAGE\n : GPUBufferUsage.INDEX;\n\n // Create vertex and index buffers\n const vertexBuffer = device.createBuffer({\n size: mesh.vertices.byteLength,\n usage: vertexBufferUsage,\n mappedAtCreation: true,\n });\n new Float32Array(vertexBuffer.getMappedRange()).set(mesh.vertices);\n vertexBuffer.unmap();\n\n const indexBuffer = device.createBuffer({\n size: mesh.indices.byteLength,\n usage: indexBufferUsage,\n mappedAtCreation: true,\n });\n\n // Determine whether index buffer is indices are in uint16 or uint32 format\n if (\n mesh.indices.byteLength ===\n mesh.indices.length * Uint16Array.BYTES_PER_ELEMENT\n ) {\n new Uint16Array(indexBuffer.getMappedRange()).set(mesh.indices);\n } else {\n new Uint32Array(indexBuffer.getMappedRange()).set(mesh.indices);\n }\n\n indexBuffer.unmap();\n\n return {\n vertexBuffer,\n indexBuffer,\n indexCount: mesh.indices.length,\n };\n};\n\nexport const getMeshPosAtIndex = (mesh: Mesh, index: number) => {\n const arr = new Float32Array(\n mesh.vertices.buffer,\n index * mesh.vertexStride + 0,\n 3\n );\n return vec3.fromValues(arr[0], arr[1], arr[2]);\n};\n\nexport const getMeshNormalAtIndex = (mesh: Mesh, index: number) => {\n const arr = new Float32Array(\n mesh.vertices.buffer,\n index * mesh.vertexStride + 3 * Float32Array.BYTES_PER_ELEMENT,\n 3\n );\n return vec3.fromValues(arr[0], arr[1], arr[2]);\n};\n\nexport const getMeshUVAtIndex = (mesh: Mesh, index: number) => {\n const arr = new Float32Array(\n mesh.vertices.buffer,\n index * mesh.vertexStride + 6 * Float32Array.BYTES_PER_ELEMENT,\n 2\n );\n return vec2.fromValues(arr[0], arr[1]);\n};\n"},1146:function(e,n){"use strict";n.Z="type BindGroupBindingLayout =\n | GPUBufferBindingLayout\n | GPUTextureBindingLayout\n | GPUSamplerBindingLayout\n | GPUStorageTextureBindingLayout\n | GPUExternalTextureBindingLayout;\n\nexport type BindGroupsObjectsAndLayout = {\n bindGroups: GPUBindGroup[];\n bindGroupLayout: GPUBindGroupLayout;\n};\n\ntype ResourceTypeName =\n | 'buffer'\n | 'texture'\n | 'sampler'\n | 'externalTexture'\n | 'storageTexture';\n\n/**\n * @param {number[]} bindings - The binding value of each resource in the bind group.\n * @param {number[]} visibilities - The GPUShaderStage visibility of the resource at the corresponding index.\n * @param {ResourceTypeName[]} resourceTypes - The resourceType at the corresponding index.\n * @returns {BindGroupsObjectsAndLayout} An object containing an array of bindGroups and the bindGroupLayout they implement.\n */\nexport const createBindGroupDescriptor = (\n bindings: number[],\n visibilities: number[],\n resourceTypes: ResourceTypeName[],\n resourceLayouts: BindGroupBindingLayout[],\n resources: GPUBindingResource[][],\n label: string,\n device: GPUDevice\n): BindGroupsObjectsAndLayout => {\n // Create layout of each entry within a bindGroup\n const layoutEntries: GPUBindGroupLayoutEntry[] = [];\n for (let i = 0; i < bindings.length; i++) {\n layoutEntries.push({\n binding: bindings[i],\n visibility: visibilities[i % visibilities.length],\n [resourceTypes[i]]: resourceLayouts[i],\n });\n }\n\n // Apply entry layouts to bindGroupLayout\n const bindGroupLayout = device.createBindGroupLayout({\n label: `${label}.bindGroupLayout`,\n entries: layoutEntries,\n });\n\n // Create bindGroups that conform to the layout\n const bindGroups: GPUBindGroup[] = [];\n for (let i = 0; i < resources.length; i++) {\n const groupEntries: GPUBindGroupEntry[] = [];\n for (let j = 0; j < resources[0].length; j++) {\n groupEntries.push({\n binding: j,\n resource: resources[i][j],\n });\n }\n const newBindGroup = device.createBindGroup({\n label: `${label}.bindGroup${i}`,\n layout: bindGroupLayout,\n entries: groupEntries,\n });\n bindGroups.push(newBindGroup);\n }\n\n return {\n bindGroups,\n bindGroupLayout,\n };\n};\n\nexport type ShaderKeyInterface = {\n [K in T[number]]: number;\n};\n\ninterface AttribAcc {\n attributes: GPUVertexAttribute[];\n arrayStride: number;\n}\n\n/**\n * @param {GPUVertexFormat} vf - A valid GPUVertexFormat, representing a per-vertex value that can be passed to the vertex shader.\n * @returns {number} The number of bytes present in the value to be passed.\n */\nexport const convertVertexFormatToBytes = (vf: GPUVertexFormat): number => {\n const splitFormat = vf.split('x');\n const bytesPerElement = parseInt(splitFormat[0].replace(/[^0-9]/g, '')) / 8;\n\n const bytesPerVec =\n bytesPerElement *\n (splitFormat[1] !== undefined ? parseInt(splitFormat[1]) : 1);\n\n return bytesPerVec;\n};\n\n/** Creates a GPUVertexBuffer Layout that maps to an interleaved vertex buffer.\n * @param {GPUVertexFormat[]} vertexFormats - An array of valid GPUVertexFormats.\n * @returns {GPUVertexBufferLayout} A GPUVertexBufferLayout representing an interleaved vertex buffer.\n */\nexport const createVBuffer = (\n vertexFormats: GPUVertexFormat[]\n): GPUVertexBufferLayout => {\n const initialValue: AttribAcc = { attributes: [], arrayStride: 0 };\n\n const vertexBuffer = vertexFormats.reduce(\n (acc: AttribAcc, curr: GPUVertexFormat, idx: number) => {\n const newAttribute: GPUVertexAttribute = {\n shaderLocation: idx,\n offset: acc.arrayStride,\n format: curr,\n };\n const nextOffset: number =\n acc.arrayStride + convertVertexFormatToBytes(curr);\n\n const retVal: AttribAcc = {\n attributes: [...acc.attributes, newAttribute],\n arrayStride: nextOffset,\n };\n return retVal;\n },\n initialValue\n );\n\n const layout: GPUVertexBufferLayout = {\n arrayStride: vertexBuffer.arrayStride,\n attributes: vertexBuffer.attributes,\n };\n\n return layout;\n};\n\nexport const create3DRenderPipeline = (\n device: GPUDevice,\n label: string,\n bgLayouts: GPUBindGroupLayout[],\n vertexShader: string,\n vBufferFormats: GPUVertexFormat[],\n fragmentShader: string,\n presentationFormat: GPUTextureFormat,\n depthTest = false,\n topology: GPUPrimitiveTopology = 'triangle-list',\n cullMode: GPUCullMode = 'back'\n) => {\n const pipelineDescriptor: GPURenderPipelineDescriptor = {\n label: `${label}.pipeline`,\n layout: device.createPipelineLayout({\n label: `${label}.pipelineLayout`,\n bindGroupLayouts: bgLayouts,\n }),\n vertex: {\n module: device.createShaderModule({\n label: `${label}.vertexShader`,\n code: vertexShader,\n }),\n entryPoint: 'vertexMain',\n buffers:\n vBufferFormats.length !== 0 ? [createVBuffer(vBufferFormats)] : [],\n },\n fragment: {\n module: device.createShaderModule({\n label: `${label}.fragmentShader`,\n code: fragmentShader,\n }),\n entryPoint: 'fragmentMain',\n targets: [\n {\n format: presentationFormat,\n },\n ],\n },\n primitive: {\n topology: topology,\n cullMode: cullMode,\n },\n };\n if (depthTest) {\n pipelineDescriptor.depthStencil = {\n depthCompare: 'less',\n depthWriteEnabled: true,\n format: 'depth24plus',\n };\n }\n return device.createRenderPipeline(pipelineDescriptor);\n};\n\nexport const createTextureFromImage = (\n device: GPUDevice,\n bitmap: ImageBitmap\n) => {\n const texture: GPUTexture = device.createTexture({\n size: [bitmap.width, bitmap.height, 1],\n format: 'rgba8unorm',\n usage:\n GPUTextureUsage.TEXTURE_BINDING |\n GPUTextureUsage.COPY_DST |\n GPUTextureUsage.RENDER_ATTACHMENT,\n });\n device.queue.copyExternalImageToTexture(\n { source: bitmap },\n { texture: texture },\n [bitmap.width, bitmap.height]\n );\n return texture;\n};\n\nexport interface PBRDescriptor {\n diffuse?: GPUTexture;\n normal?: GPUTexture;\n height?: GPUTexture;\n}\n\ninterface URLLoad {\n url: string;\n type: keyof PBRDescriptor;\n}\n\nexport const createPBRDescriptor = async (\n device: GPUDevice,\n urls: string[]\n): Promise => {\n const imgAssetPrepend = '/img/';\n const loads = urls.map((url) => {\n const splits = url.split('_');\n const ttype = splits[splits.length - 1].split('.')[0];\n const load: URLLoad = {\n url: imgAssetPrepend + url,\n type: ttype as keyof PBRDescriptor,\n };\n return load;\n });\n console.log(loads);\n const pbr: PBRDescriptor = {};\n for (let i = 0; i < loads.length; i++) {\n console.log(loads[i].url);\n console.log(import.meta.url);\n let texture: GPUTexture;\n {\n const response = await fetch(loads[i].url);\n const imageBitmap = await createImageBitmap(await response.blob());\n texture = createTextureFromImage(device, imageBitmap);\n }\n\n console.log(loads[i].type);\n\n switch (loads[i].type) {\n case 'diffuse':\n {\n pbr.diffuse = texture;\n }\n break;\n case 'height':\n {\n pbr.height = texture;\n }\n break;\n case 'normal':\n {\n pbr.normal = texture;\n }\n break;\n }\n }\n return pbr;\n};\n"}}]); \ No newline at end of file diff --git a/_next/static/chunks/808.70dd3af635a330a8.js b/_next/static/chunks/808.80bdfd2012be5144.js similarity index 98% rename from _next/static/chunks/808.70dd3af635a330a8.js rename to _next/static/chunks/808.80bdfd2012be5144.js index ebe024e2..95d1e663 100644 --- a/_next/static/chunks/808.70dd3af635a330a8.js +++ b/_next/static/chunks/808.80bdfd2012be5144.js @@ -1 +1 @@ -!function(){var e,t,r,n,o,i,a,u={808:function(e,t,r){"use strict";var n=r(6416);let o=new Float32Array([1,-1,1,1,1,0,1,1,0,1,-1,-1,1,1,0,0,1,1,1,1,-1,-1,-1,1,0,0,0,1,1,0,1,-1,-1,1,1,0,0,1,0,0,1,-1,1,1,1,0,1,1,0,1,-1,-1,-1,1,0,0,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,-1,1,1,1,0,1,1,1,1,1,-1,-1,1,1,0,0,1,1,0,1,1,-1,1,1,1,0,1,0,0,1,1,1,1,1,1,1,1,0,1,1,-1,-1,1,1,0,0,1,1,0,-1,1,1,1,0,1,1,1,0,1,1,1,1,1,1,1,1,1,1,1,1,1,-1,1,1,1,0,1,1,0,-1,1,-1,1,0,1,0,1,0,0,-1,1,1,1,0,1,1,1,0,1,1,1,-1,1,1,1,0,1,1,0,-1,-1,1,1,0,0,1,1,0,1,-1,1,1,1,0,1,1,1,1,1,-1,1,-1,1,0,1,0,1,1,0,-1,-1,-1,1,0,0,0,1,0,0,-1,-1,1,1,0,0,1,1,0,1,-1,1,-1,1,0,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,-1,1,1,1,0,1,1,1,1,1,-1,-1,1,1,0,0,1,1,1,0,-1,-1,1,1,0,0,1,1,1,0,1,-1,1,1,1,0,1,1,0,0,1,1,1,1,1,1,1,1,0,1,1,-1,-1,1,1,0,0,1,0,1,-1,-1,-1,1,0,0,0,1,1,1,-1,1,-1,1,0,1,0,1,1,0,1,1,-1,1,1,1,0,1,0,0,1,-1,-1,1,1,0,0,1,0,1,-1,1,-1,1,0,1,0,1,1,0]);async function i(e){let t=await navigator.gpu.requestAdapter(),r=await t.requestDevice(),i=e.getContext("webgpu"),a=navigator.gpu.getPreferredCanvasFormat();i.configure({device:r,format:a,alphaMode:"premultiplied"});let u=r.createBuffer({size:o.byteLength,usage:GPUBufferUsage.VERTEX,mappedAtCreation:!0});new Float32Array(u.getMappedRange()).set(o),u.unmap();let s=r.createRenderPipeline({layout:"auto",vertex:{module:r.createShaderModule({code:"struct Uniforms {\n modelViewProjectionMatrix : mat4x4,\n}\n@binding(0) @group(0) var uniforms : Uniforms;\n\nstruct VertexOutput {\n @builtin(position) Position : vec4,\n @location(0) fragUV : vec2,\n @location(1) fragPosition: vec4,\n}\n\n@vertex\nfn main(\n @location(0) position : vec4,\n @location(1) uv : vec2\n) -> VertexOutput {\n var output : VertexOutput;\n output.Position = uniforms.modelViewProjectionMatrix * position;\n output.fragUV = uv;\n output.fragPosition = 0.5 * (position + vec4(1.0, 1.0, 1.0, 1.0));\n return output;\n}\n"}),entryPoint:"main",buffers:[{arrayStride:40,attributes:[{shaderLocation:0,offset:0,format:"float32x4"},{shaderLocation:1,offset:32,format:"float32x2"}]}]},fragment:{module:r.createShaderModule({code:"@fragment\nfn main(\n @location(0) fragUV: vec2,\n @location(1) fragPosition: vec4\n) -> @location(0) vec4 {\n return fragPosition;\n}\n"}),entryPoint:"main",targets:[{format:a}]},primitive:{topology:"triangle-list",cullMode:"back"},depthStencil:{depthWriteEnabled:!0,depthCompare:"less",format:"depth24plus"}}),f=r.createTexture({size:[e.width,e.height],format:"depth24plus",usage:GPUTextureUsage.RENDER_ATTACHMENT}),c=r.createBuffer({size:64,usage:GPUBufferUsage.UNIFORM|GPUBufferUsage.COPY_DST}),l=r.createBindGroup({layout:s.getBindGroupLayout(0),entries:[{binding:0,resource:{buffer:c}}]}),p={colorAttachments:[{view:void 0,clearValue:{r:.5,g:.5,b:.5,a:1},loadOp:"clear",storeOp:"store"}],depthStencilAttachment:{view:f.createView(),depthClearValue:1,depthLoadOp:"clear",depthStoreOp:"store"}},d=e.width/e.height,g=n._E.perspective(2*Math.PI/5,d,1,100),m=n._E.create();requestAnimationFrame(function e(){let t=function(){let e=n._E.identity();n._E.translate(e,n.R3.fromValues(0,0,-4),e);let t=Date.now()/1e3;return n._E.rotate(e,n.R3.fromValues(Math.sin(t),Math.cos(t),0),1,e),n._E.multiply(g,e,m),m}();r.queue.writeBuffer(c,0,t.buffer,t.byteOffset,t.byteLength),p.colorAttachments[0].view=i.getCurrentTexture().createView();let o=r.createCommandEncoder(),a=o.beginRenderPass(p);a.setPipeline(s),a.setBindGroup(0,l),a.setVertexBuffer(0,u),a.draw(36),a.end(),r.queue.submit([o.finish()]),requestAnimationFrame(e)})}self.addEventListener("message",e=>{if("init"===e.data.type)try{i(e.data.offscreenCanvas)}catch(t){self.postMessage({type:"log",message:"Error while initializing WebGPU in worker process: ".concat(t.message)})}})}},s={};function f(e){var t=s[e];if(void 0!==t)return t.exports;var r=s[e]={exports:{}},n=!0;try{u[e](r,r.exports,f),n=!1}finally{n&&delete s[e]}return r.exports}f.m=u,f.x=function(){var e=f.O(void 0,[746],function(){return f(808)});return f.O(e)},e=[],f.O=function(t,r,n,o){if(r){o=o||0;for(var i=e.length;i>0&&e[i-1][2]>o;i--)e[i]=e[i-1];e[i]=[r,n,o];return}for(var a=1/0,i=0;i=o&&Object.keys(f.O).every(function(e){return f.O[e](r[s])})?r.splice(s--,1):(u=!1,o,\n}\n@binding(0) @group(0) var uniforms : Uniforms;\n\nstruct VertexOutput {\n @builtin(position) Position : vec4,\n @location(0) fragUV : vec2,\n @location(1) fragPosition: vec4,\n}\n\n@vertex\nfn main(\n @location(0) position : vec4,\n @location(1) uv : vec2\n) -> VertexOutput {\n var output : VertexOutput;\n output.Position = uniforms.modelViewProjectionMatrix * position;\n output.fragUV = uv;\n output.fragPosition = 0.5 * (position + vec4(1.0, 1.0, 1.0, 1.0));\n return output;\n}\n"}),entryPoint:"main",buffers:[{arrayStride:40,attributes:[{shaderLocation:0,offset:0,format:"float32x4"},{shaderLocation:1,offset:32,format:"float32x2"}]}]},fragment:{module:r.createShaderModule({code:"@fragment\nfn main(\n @location(0) fragUV: vec2,\n @location(1) fragPosition: vec4\n) -> @location(0) vec4 {\n return fragPosition;\n}\n"}),entryPoint:"main",targets:[{format:a}]},primitive:{topology:"triangle-list",cullMode:"back"},depthStencil:{depthWriteEnabled:!0,depthCompare:"less",format:"depth24plus"}}),f=r.createTexture({size:[e.width,e.height],format:"depth24plus",usage:GPUTextureUsage.RENDER_ATTACHMENT}),c=r.createBuffer({size:64,usage:GPUBufferUsage.UNIFORM|GPUBufferUsage.COPY_DST}),l=r.createBindGroup({layout:s.getBindGroupLayout(0),entries:[{binding:0,resource:{buffer:c}}]}),p={colorAttachments:[{view:void 0,clearValue:{r:.5,g:.5,b:.5,a:1},loadOp:"clear",storeOp:"store"}],depthStencilAttachment:{view:f.createView(),depthClearValue:1,depthLoadOp:"clear",depthStoreOp:"store"}},d=e.width/e.height,g=n._E.perspective(2*Math.PI/5,d,1,100),m=n._E.create();requestAnimationFrame(function e(){let t=function(){let e=n._E.identity();n._E.translate(e,n.R3.fromValues(0,0,-4),e);let t=Date.now()/1e3;return n._E.rotate(e,n.R3.fromValues(Math.sin(t),Math.cos(t),0),1,e),n._E.multiply(g,e,m),m}();r.queue.writeBuffer(c,0,t.buffer,t.byteOffset,t.byteLength),p.colorAttachments[0].view=i.getCurrentTexture().createView();let o=r.createCommandEncoder(),a=o.beginRenderPass(p);a.setPipeline(s),a.setBindGroup(0,l),a.setVertexBuffer(0,u),a.draw(36),a.end(),r.queue.submit([o.finish()]),requestAnimationFrame(e)})}self.addEventListener("message",e=>{if("init"===e.data.type)try{i(e.data.offscreenCanvas)}catch(t){self.postMessage({type:"log",message:"Error while initializing WebGPU in worker process: ".concat(t.message)})}})}},s={};function f(e){var t=s[e];if(void 0!==t)return t.exports;var r=s[e]={exports:{}},n=!0;try{u[e](r,r.exports,f),n=!1}finally{n&&delete s[e]}return r.exports}f.m=u,f.x=function(){var e=f.O(void 0,[746],function(){return f(808)});return f.O(e)},e=[],f.O=function(t,r,n,o){if(r){o=o||0;for(var i=e.length;i>0&&e[i-1][2]>o;i--)e[i]=e[i-1];e[i]=[r,n,o];return}for(var a=1/0,i=0;i=o&&Object.keys(f.O).every(function(e){return f.O[e](r[s])})?r.splice(s--,1):(u=!1,onew Float32Array(12)],[Float64Array,()=>new Float64Array(12)],[Array,()=>Array(12).fill(0)]]);o.get(Float32Array);let i=Float32Array;function c(t,n,e){let r=new i(3);return void 0!==t&&(r[0]=t,void 0!==n&&(r[1]=n,void 0!==e&&(r[2]=e))),r}function l(t,n,e){return(e=e||new i(3))[0]=t[0]-n[0],e[1]=t[1]-n[1],e[2]=t[2]-n[2],e}function f(t,n,e){return(e=e||new i(3))[0]=t[0]*n,e[1]=t[1]*n,e[2]=t[2]*n,e}function h(t,n){return(n=n||new i(3))[0]=1/t[0],n[1]=1/t[1],n[2]=1/t[2],n}function s(t,n,e){e=e||new i(3);let r=t[2]*n[0]-t[0]*n[2],a=t[0]*n[1]-t[1]*n[0];return e[0]=t[1]*n[2]-t[2]*n[1],e[1]=r,e[2]=a,e}function M(t,n){return t[0]*n[0]+t[1]*n[1]+t[2]*n[2]}function w(t){let n=t[0],e=t[1],r=t[2];return Math.sqrt(n*n+e*e+r*r)}function d(t){let n=t[0],e=t[1],r=t[2];return n*n+e*e+r*r}function m(t,n){let e=t[0]-n[0],r=t[1]-n[1],a=t[2]-n[2];return Math.sqrt(e*e+r*r+a*a)}function v(t,n){let e=t[0]-n[0],r=t[1]-n[1],a=t[2]-n[2];return e*e+r*r+a*a}function p(t,n){n=n||new i(3);let e=t[0],r=t[1],a=t[2],u=Math.sqrt(e*e+r*r+a*a);return u>1e-5?(n[0]=e/u,n[1]=r/u,n[2]=a/u):(n[0]=0,n[1]=0,n[2]=0),n}function b(t,n){return(n=n||new i(3))[0]=t[0],n[1]=t[1],n[2]=t[2],n}function q(t,n,e){return(e=e||new i(3))[0]=t[0]*n[0],e[1]=t[1]*n[1],e[2]=t[2]*n[2],e}function y(t,n,e){return(e=e||new i(3))[0]=t[0]/n[0],e[1]=t[1]/n[1],e[2]=t[2]/n[2],e}var x=Object.freeze({__proto__:null,create:c,setDefaultType:function(t){let n=i;return i=t,n},fromValues:c,set:function(t,n,e,r){return(r=r||new i(3))[0]=t,r[1]=n,r[2]=e,r},ceil:function(t,n){return(n=n||new i(3))[0]=Math.ceil(t[0]),n[1]=Math.ceil(t[1]),n[2]=Math.ceil(t[2]),n},floor:function(t,n){return(n=n||new i(3))[0]=Math.floor(t[0]),n[1]=Math.floor(t[1]),n[2]=Math.floor(t[2]),n},round:function(t,n){return(n=n||new i(3))[0]=Math.round(t[0]),n[1]=Math.round(t[1]),n[2]=Math.round(t[2]),n},clamp:function(t,n=0,e=1,r){return(r=r||new i(3))[0]=Math.min(e,Math.max(n,t[0])),r[1]=Math.min(e,Math.max(n,t[1])),r[2]=Math.min(e,Math.max(n,t[2])),r},add:function(t,n,e){return(e=e||new i(3))[0]=t[0]+n[0],e[1]=t[1]+n[1],e[2]=t[2]+n[2],e},addScaled:function(t,n,e,r){return(r=r||new i(3))[0]=t[0]+n[0]*e,r[1]=t[1]+n[1]*e,r[2]=t[2]+n[2]*e,r},angle:function(t,n){let e=t[0],r=t[1],a=t[2],u=t[0],o=t[1],i=t[2],c=Math.sqrt(e*e+r*r+a*a)*Math.sqrt(u*u+o*o+i*i),l=c&&M(t,n)/c;return Math.acos(l)},subtract:l,sub:l,equalsApproximately:function(t,n){return 1e-6>Math.abs(t[0]-n[0])&&1e-6>Math.abs(t[1]-n[1])&&1e-6>Math.abs(t[2]-n[2])},equals:function(t,n){return t[0]===n[0]&&t[1]===n[1]&&t[2]===n[2]},lerp:function(t,n,e,r){return(r=r||new i(3))[0]=t[0]+e*(n[0]-t[0]),r[1]=t[1]+e*(n[1]-t[1]),r[2]=t[2]+e*(n[2]-t[2]),r},lerpV:function(t,n,e,r){return(r=r||new i(3))[0]=t[0]+e[0]*(n[0]-t[0]),r[1]=t[1]+e[1]*(n[1]-t[1]),r[2]=t[2]+e[2]*(n[2]-t[2]),r},max:function(t,n,e){return(e=e||new i(3))[0]=Math.max(t[0],n[0]),e[1]=Math.max(t[1],n[1]),e[2]=Math.max(t[2],n[2]),e},min:function(t,n,e){return(e=e||new i(3))[0]=Math.min(t[0],n[0]),e[1]=Math.min(t[1],n[1]),e[2]=Math.min(t[2],n[2]),e},mulScalar:f,scale:f,divScalar:function(t,n,e){return(e=e||new i(3))[0]=t[0]/n,e[1]=t[1]/n,e[2]=t[2]/n,e},inverse:h,invert:h,cross:s,dot:M,length:w,len:w,lengthSq:d,lenSq:d,distance:m,dist:m,distanceSq:v,distSq:v,normalize:p,negate:function(t,n){return(n=n||new i(3))[0]=-t[0],n[1]=-t[1],n[2]=-t[2],n},copy:b,clone:b,multiply:q,mul:q,divide:y,div:y,random:function(t=1,n){n=n||new i(3);let e=2*Math.random()*Math.PI,r=2*Math.random()-1,a=Math.sqrt(1-r*r)*t;return n[0]=Math.cos(e)*a,n[1]=Math.sin(e)*a,n[2]=r*t,n},zero:function(t){return(t=t||new i(3))[0]=0,t[1]=0,t[2]=0,t},transformMat4:function(t,n,e){e=e||new i(3);let r=t[0],a=t[1],u=t[2],o=n[3]*r+n[7]*a+n[11]*u+n[15]||1;return e[0]=(n[0]*r+n[4]*a+n[8]*u+n[12])/o,e[1]=(n[1]*r+n[5]*a+n[9]*u+n[13])/o,e[2]=(n[2]*r+n[6]*a+n[10]*u+n[14])/o,e},transformMat4Upper3x3:function(t,n,e){e=e||new i(3);let r=t[0],a=t[1],u=t[2];return e[0]=r*n[0]+a*n[4]+u*n[8],e[1]=r*n[1]+a*n[5]+u*n[9],e[2]=r*n[2]+a*n[6]+u*n[10],e},transformMat3:function(t,n,e){e=e||new i(3);let r=t[0],a=t[1],u=t[2];return e[0]=r*n[0]+a*n[4]+u*n[8],e[1]=r*n[1]+a*n[5]+u*n[9],e[2]=r*n[2]+a*n[6]+u*n[10],e},transformQuat:function(t,n,e){e=e||new i(3);let r=n[0],a=n[1],u=n[2],o=2*n[3],c=t[0],l=t[1],f=t[2],h=a*f-u*l,s=u*c-r*f,M=r*l-a*c;return e[0]=c+h*o+(a*M-u*s)*2,e[1]=l+s*o+(u*h-r*M)*2,e[2]=f+M*o+(r*s-a*h)*2,e},getTranslation:function(t,n){return(n=n||new i(3))[0]=t[12],n[1]=t[13],n[2]=t[14],n},getAxis:function(t,n,e){e=e||new i(3);let r=4*n;return e[0]=t[r+0],e[1]=t[r+1],e[2]=t[r+2],e},getScaling:function(t,n){n=n||new i(3);let e=t[0],r=t[1],a=t[2],u=t[4],o=t[5],c=t[6],l=t[8],f=t[9],h=t[10];return n[0]=Math.sqrt(e*e+r*r+a*a),n[1]=Math.sqrt(u*u+o*o+c*c),n[2]=Math.sqrt(l*l+f*f+h*h),n}});let A=Float32Array;function g(t,n){return(n=n||new A(16))[0]=t[0],n[1]=t[1],n[2]=t[2],n[3]=t[3],n[4]=t[4],n[5]=t[5],n[6]=t[6],n[7]=t[7],n[8]=t[8],n[9]=t[9],n[10]=t[10],n[11]=t[11],n[12]=t[12],n[13]=t[13],n[14]=t[14],n[15]=t[15],n}function S(t){return(t=t||new A(16))[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t}function _(t,n){n=n||new A(16);let e=t[0],r=t[1],a=t[2],u=t[3],o=t[4],i=t[5],c=t[6],l=t[7],f=t[8],h=t[9],s=t[10],M=t[11],w=t[12],d=t[13],m=t[14],v=t[15],p=s*v,b=m*M,q=c*v,y=m*l,x=c*M,g=s*l,S=a*v,_=m*u,F=a*M,z=s*u,T=a*l,k=c*u,V=f*d,j=w*h,D=o*d,E=w*i,O=o*h,R=f*i,C=e*d,I=w*r,N=e*h,P=f*r,Q=e*i,X=o*r,Y=p*i+y*h+x*d-(b*i+q*h+g*d),Z=b*r+S*h+z*d-(p*r+_*h+F*d),U=q*r+_*i+T*d-(y*r+S*i+k*d),B=g*r+F*i+k*h-(x*r+z*i+T*h),G=1/(e*Y+o*Z+f*U+w*B);return n[0]=G*Y,n[1]=G*Z,n[2]=G*U,n[3]=G*B,n[4]=G*(b*o+q*f+g*w-(p*o+y*f+x*w)),n[5]=G*(p*e+_*f+F*w-(b*e+S*f+z*w)),n[6]=G*(y*e+S*o+k*w-(q*e+_*o+T*w)),n[7]=G*(x*e+z*o+T*f-(g*e+F*o+k*f)),n[8]=G*(V*l+E*M+O*v-(j*l+D*M+R*v)),n[9]=G*(j*u+C*M+P*v-(V*u+I*M+N*v)),n[10]=G*(D*u+I*l+Q*v-(E*u+C*l+X*v)),n[11]=G*(R*u+N*l+X*M-(O*u+P*l+Q*M)),n[12]=G*(D*s+R*m+j*c-(O*m+V*c+E*s)),n[13]=G*(N*m+V*a+I*s-(C*s+P*m+j*a)),n[14]=G*(C*c+X*m+E*a-(Q*m+D*a+I*c)),n[15]=G*(Q*s+O*a+P*c-(N*c+X*s+R*a)),n}function F(t,n,e){e=e||new A(16);let r=t[0],a=t[1],u=t[2],o=t[3],i=t[4],c=t[5],l=t[6],f=t[7],h=t[8],s=t[9],M=t[10],w=t[11],d=t[12],m=t[13],v=t[14],p=t[15],b=n[0],q=n[1],y=n[2],x=n[3],g=n[4],S=n[5],_=n[6],F=n[7],z=n[8],T=n[9],k=n[10],V=n[11],j=n[12],D=n[13],E=n[14],O=n[15];return e[0]=r*b+i*q+h*y+d*x,e[1]=a*b+c*q+s*y+m*x,e[2]=u*b+l*q+M*y+v*x,e[3]=o*b+f*q+w*y+p*x,e[4]=r*g+i*S+h*_+d*F,e[5]=a*g+c*S+s*_+m*F,e[6]=u*g+l*S+M*_+v*F,e[7]=o*g+f*S+w*_+p*F,e[8]=r*z+i*T+h*k+d*V,e[9]=a*z+c*T+s*k+m*V,e[10]=u*z+l*T+M*k+v*V,e[11]=o*z+f*T+w*k+p*V,e[12]=r*j+i*D+h*E+d*O,e[13]=a*j+c*D+s*E+m*O,e[14]=u*j+l*D+M*E+v*O,e[15]=o*j+f*D+w*E+p*O,e}function z(t,n,e){e=e||new A(16);let r=t[0],a=t[1],u=t[2],o=Math.sqrt(r*r+a*a+u*u);r/=o,a/=o,u/=o;let i=r*r,c=a*a,l=u*u,f=Math.cos(n),h=Math.sin(n),s=1-f;return e[0]=i+(1-i)*f,e[1]=r*a*s+u*h,e[2]=r*u*s-a*h,e[3]=0,e[4]=r*a*s-u*h,e[5]=c+(1-c)*f,e[6]=a*u*s+r*h,e[7]=0,e[8]=r*u*s+a*h,e[9]=a*u*s-r*h,e[10]=l+(1-l)*f,e[11]=0,e[12]=0,e[13]=0,e[14]=0,e[15]=1,e}function T(t,n,e,r){r=r||new A(16);let a=n[0],u=n[1],o=n[2],i=Math.sqrt(a*a+u*u+o*o);a/=i,u/=i,o/=i;let c=a*a,l=u*u,f=o*o,h=Math.cos(e),s=Math.sin(e),M=1-h,w=c+(1-c)*h,d=a*u*M+o*s,m=a*o*M-u*s,v=a*u*M-o*s,p=l+(1-l)*h,b=u*o*M+a*s,q=a*o*M+u*s,y=u*o*M-a*s,x=f+(1-f)*h,g=t[0],S=t[1],_=t[2],F=t[3],z=t[4],T=t[5],k=t[6],V=t[7],j=t[8],D=t[9],E=t[10],O=t[11];return r[0]=w*g+d*z+m*j,r[1]=w*S+d*T+m*D,r[2]=w*_+d*k+m*E,r[3]=w*F+d*V+m*O,r[4]=v*g+p*z+b*j,r[5]=v*S+p*T+b*D,r[6]=v*_+p*k+b*E,r[7]=v*F+p*V+b*O,r[8]=q*g+y*z+x*j,r[9]=q*S+y*T+x*D,r[10]=q*_+y*k+x*E,r[11]=q*F+y*V+x*O,t!==r&&(r[12]=t[12],r[13]=t[13],r[14]=t[14],r[15]=t[15]),r}var k=Object.freeze({__proto__:null,setDefaultType:function(t){let n=A;return A=t,n},create:function(t,n,e,r,a,u,o,i,c,l,f,h,s,M,w,d){let m=new A(16);return void 0!==t&&(m[0]=t,void 0!==n&&(m[1]=n,void 0!==e&&(m[2]=e,void 0!==r&&(m[3]=r,void 0!==a&&(m[4]=a,void 0!==u&&(m[5]=u,void 0!==o&&(m[6]=o,void 0!==i&&(m[7]=i,void 0!==c&&(m[8]=c,void 0!==l&&(m[9]=l,void 0!==f&&(m[10]=f,void 0!==h&&(m[11]=h,void 0!==s&&(m[12]=s,void 0!==M&&(m[13]=M,void 0!==w&&(m[14]=w,void 0!==d&&(m[15]=d)))))))))))))))),m},set:function(t,n,e,r,a,u,o,i,c,l,f,h,s,M,w,d,m){return(m=m||new A(16))[0]=t,m[1]=n,m[2]=e,m[3]=r,m[4]=a,m[5]=u,m[6]=o,m[7]=i,m[8]=c,m[9]=l,m[10]=f,m[11]=h,m[12]=s,m[13]=M,m[14]=w,m[15]=d,m},fromMat3:function(t,n){return(n=n||new A(16))[0]=t[0],n[1]=t[1],n[2]=t[2],n[3]=0,n[4]=t[4],n[5]=t[5],n[6]=t[6],n[7]=0,n[8]=t[8],n[9]=t[9],n[10]=t[10],n[11]=0,n[12]=0,n[13]=0,n[14]=0,n[15]=1,n},fromQuat:function(t,n){n=n||new A(16);let e=t[0],r=t[1],a=t[2],u=t[3],o=e+e,i=r+r,c=a+a,l=e*o,f=r*o,h=r*i,s=a*o,M=a*i,w=a*c,d=u*o,m=u*i,v=u*c;return n[0]=1-h-w,n[1]=f+v,n[2]=s-m,n[3]=0,n[4]=f-v,n[5]=1-l-w,n[6]=M+d,n[7]=0,n[8]=s+m,n[9]=M-d,n[10]=1-l-h,n[11]=0,n[12]=0,n[13]=0,n[14]=0,n[15]=1,n},negate:function(t,n){return(n=n||new A(16))[0]=-t[0],n[1]=-t[1],n[2]=-t[2],n[3]=-t[3],n[4]=-t[4],n[5]=-t[5],n[6]=-t[6],n[7]=-t[7],n[8]=-t[8],n[9]=-t[9],n[10]=-t[10],n[11]=-t[11],n[12]=-t[12],n[13]=-t[13],n[14]=-t[14],n[15]=-t[15],n},copy:g,clone:g,equalsApproximately:function(t,n){return 1e-6>Math.abs(t[0]-n[0])&&1e-6>Math.abs(t[1]-n[1])&&1e-6>Math.abs(t[2]-n[2])&&1e-6>Math.abs(t[3]-n[3])&&1e-6>Math.abs(t[4]-n[4])&&1e-6>Math.abs(t[5]-n[5])&&1e-6>Math.abs(t[6]-n[6])&&1e-6>Math.abs(t[7]-n[7])&&1e-6>Math.abs(t[8]-n[8])&&1e-6>Math.abs(t[9]-n[9])&&1e-6>Math.abs(t[10]-n[10])&&1e-6>Math.abs(t[11]-n[11])&&1e-6>Math.abs(t[12]-n[12])&&1e-6>Math.abs(t[13]-n[13])&&1e-6>Math.abs(t[14]-n[14])&&1e-6>Math.abs(t[15]-n[15])},equals:function(t,n){return t[0]===n[0]&&t[1]===n[1]&&t[2]===n[2]&&t[3]===n[3]&&t[4]===n[4]&&t[5]===n[5]&&t[6]===n[6]&&t[7]===n[7]&&t[8]===n[8]&&t[9]===n[9]&&t[10]===n[10]&&t[11]===n[11]&&t[12]===n[12]&&t[13]===n[13]&&t[14]===n[14]&&t[15]===n[15]},identity:S,transpose:function(t,n){if((n=n||new A(16))===t){let e;return e=t[1],t[1]=t[4],t[4]=e,e=t[2],t[2]=t[8],t[8]=e,e=t[3],t[3]=t[12],t[12]=e,e=t[6],t[6]=t[9],t[9]=e,e=t[7],t[7]=t[13],t[13]=e,e=t[11],t[11]=t[14],t[14]=e,n}let r=t[0],a=t[1],u=t[2],o=t[3],i=t[4],c=t[5],l=t[6],f=t[7],h=t[8],s=t[9],M=t[10],w=t[11],d=t[12],m=t[13],v=t[14],p=t[15];return n[0]=r,n[1]=i,n[2]=h,n[3]=d,n[4]=a,n[5]=c,n[6]=s,n[7]=m,n[8]=u,n[9]=l,n[10]=M,n[11]=v,n[12]=o,n[13]=f,n[14]=w,n[15]=p,n},inverse:_,determinant:function(t){let n=t[0],e=t[1],r=t[2],a=t[3],u=t[4],o=t[5],i=t[6],c=t[7],l=t[8],f=t[9],h=t[10],s=t[11],M=t[12],w=t[13],d=t[14],m=t[15],v=h*m,p=d*s,b=i*m,q=d*c,y=i*s,x=h*c,A=r*m,g=d*a,S=r*s,_=h*a,F=r*c,z=i*a;return n*(v*o+q*f+y*w-(p*o+b*f+x*w))+u*(p*e+A*f+_*w-(v*e+g*f+S*w))+l*(b*e+g*o+F*w-(q*e+A*o+z*w))+M*(x*e+S*o+z*f-(y*e+_*o+F*f))},invert:_,multiply:F,mul:F,setTranslation:function(t,n,e){return t!==(e=e||S())&&(e[0]=t[0],e[1]=t[1],e[2]=t[2],e[3]=t[3],e[4]=t[4],e[5]=t[5],e[6]=t[6],e[7]=t[7],e[8]=t[8],e[9]=t[9],e[10]=t[10],e[11]=t[11]),e[12]=n[0],e[13]=n[1],e[14]=n[2],e[15]=1,e},getTranslation:function(t,n){return(n=n||c())[0]=t[12],n[1]=t[13],n[2]=t[14],n},getAxis:function(t,n,e){e=e||c();let r=4*n;return e[0]=t[r+0],e[1]=t[r+1],e[2]=t[r+2],e},setAxis:function(t,n,e,r){r!==t&&(r=g(t,r));let a=4*e;return r[a+0]=n[0],r[a+1]=n[1],r[a+2]=n[2],r},getScaling:function(t,n){n=n||c();let e=t[0],r=t[1],a=t[2],u=t[4],o=t[5],i=t[6],l=t[8],f=t[9],h=t[10];return n[0]=Math.sqrt(e*e+r*r+a*a),n[1]=Math.sqrt(u*u+o*o+i*i),n[2]=Math.sqrt(l*l+f*f+h*h),n},perspective:function(t,n,e,r,a){a=a||new A(16);let u=Math.tan(.5*Math.PI-.5*t);if(a[0]=u/n,a[1]=0,a[2]=0,a[3]=0,a[4]=0,a[5]=u,a[6]=0,a[7]=0,a[8]=0,a[9]=0,a[11]=-1,a[12]=0,a[13]=0,a[15]=0,r===1/0)a[10]=-1,a[14]=-e;else{let o=1/(e-r);a[10]=r*o,a[14]=r*e*o}return a},ortho:function(t,n,e,r,a,u,o){return(o=o||new A(16))[0]=2/(n-t),o[1]=0,o[2]=0,o[3]=0,o[4]=0,o[5]=2/(r-e),o[6]=0,o[7]=0,o[8]=0,o[9]=0,o[10]=1/(a-u),o[11]=0,o[12]=(n+t)/(t-n),o[13]=(r+e)/(e-r),o[14]=a/(a-u),o[15]=1,o},frustum:function(t,n,e,r,a,u,o){o=o||new A(16);let i=n-t,c=r-e,l=a-u;return o[0]=2*a/i,o[1]=0,o[2]=0,o[3]=0,o[4]=0,o[5]=2*a/c,o[6]=0,o[7]=0,o[8]=(t+n)/i,o[9]=(r+e)/c,o[10]=u/l,o[11]=-1,o[12]=0,o[13]=0,o[14]=a*u/l,o[15]=0,o},aim:function(t,n,e,o){return o=o||new A(16),r=r||c(),a=a||c(),p(l(n,t,u=u||c()),u),p(s(e,u,r),r),p(s(u,r,a),a),o[0]=r[0],o[1]=r[1],o[2]=r[2],o[3]=0,o[4]=a[0],o[5]=a[1],o[6]=a[2],o[7]=0,o[8]=u[0],o[9]=u[1],o[10]=u[2],o[11]=0,o[12]=t[0],o[13]=t[1],o[14]=t[2],o[15]=1,o},cameraAim:function(t,n,e,o){return o=o||new A(16),r=r||c(),a=a||c(),p(l(t,n,u=u||c()),u),p(s(e,u,r),r),p(s(u,r,a),a),o[0]=r[0],o[1]=r[1],o[2]=r[2],o[3]=0,o[4]=a[0],o[5]=a[1],o[6]=a[2],o[7]=0,o[8]=u[0],o[9]=u[1],o[10]=u[2],o[11]=0,o[12]=t[0],o[13]=t[1],o[14]=t[2],o[15]=1,o},lookAt:function(t,n,e,o){return o=o||new A(16),r=r||c(),a=a||c(),p(l(t,n,u=u||c()),u),p(s(e,u,r),r),p(s(u,r,a),a),o[0]=r[0],o[1]=a[0],o[2]=u[0],o[3]=0,o[4]=r[1],o[5]=a[1],o[6]=u[1],o[7]=0,o[8]=r[2],o[9]=a[2],o[10]=u[2],o[11]=0,o[12]=-(r[0]*t[0]+r[1]*t[1]+r[2]*t[2]),o[13]=-(a[0]*t[0]+a[1]*t[1]+a[2]*t[2]),o[14]=-(u[0]*t[0]+u[1]*t[1]+u[2]*t[2]),o[15]=1,o},translation:function(t,n){return(n=n||new A(16))[0]=1,n[1]=0,n[2]=0,n[3]=0,n[4]=0,n[5]=1,n[6]=0,n[7]=0,n[8]=0,n[9]=0,n[10]=1,n[11]=0,n[12]=t[0],n[13]=t[1],n[14]=t[2],n[15]=1,n},translate:function(t,n,e){e=e||new A(16);let r=n[0],a=n[1],u=n[2],o=t[0],i=t[1],c=t[2],l=t[3],f=t[4],h=t[5],s=t[6],M=t[7],w=t[8],d=t[9],m=t[10],v=t[11],p=t[12],b=t[13],q=t[14],y=t[15];return t!==e&&(e[0]=o,e[1]=i,e[2]=c,e[3]=l,e[4]=f,e[5]=h,e[6]=s,e[7]=M,e[8]=w,e[9]=d,e[10]=m,e[11]=v),e[12]=o*r+f*a+w*u+p,e[13]=i*r+h*a+d*u+b,e[14]=c*r+s*a+m*u+q,e[15]=l*r+M*a+v*u+y,e},rotationX:function(t,n){n=n||new A(16);let e=Math.cos(t),r=Math.sin(t);return n[0]=1,n[1]=0,n[2]=0,n[3]=0,n[4]=0,n[5]=e,n[6]=r,n[7]=0,n[8]=0,n[9]=-r,n[10]=e,n[11]=0,n[12]=0,n[13]=0,n[14]=0,n[15]=1,n},rotateX:function(t,n,e){e=e||new A(16);let r=t[4],a=t[5],u=t[6],o=t[7],i=t[8],c=t[9],l=t[10],f=t[11],h=Math.cos(n),s=Math.sin(n);return e[4]=h*r+s*i,e[5]=h*a+s*c,e[6]=h*u+s*l,e[7]=h*o+s*f,e[8]=h*i-s*r,e[9]=h*c-s*a,e[10]=h*l-s*u,e[11]=h*f-s*o,t!==e&&(e[0]=t[0],e[1]=t[1],e[2]=t[2],e[3]=t[3],e[12]=t[12],e[13]=t[13],e[14]=t[14],e[15]=t[15]),e},rotationY:function(t,n){n=n||new A(16);let e=Math.cos(t),r=Math.sin(t);return n[0]=e,n[1]=0,n[2]=-r,n[3]=0,n[4]=0,n[5]=1,n[6]=0,n[7]=0,n[8]=r,n[9]=0,n[10]=e,n[11]=0,n[12]=0,n[13]=0,n[14]=0,n[15]=1,n},rotateY:function(t,n,e){e=e||new A(16);let r=t[0],a=t[1],u=t[2],o=t[3],i=t[8],c=t[9],l=t[10],f=t[11],h=Math.cos(n),s=Math.sin(n);return e[0]=h*r-s*i,e[1]=h*a-s*c,e[2]=h*u-s*l,e[3]=h*o-s*f,e[8]=h*i+s*r,e[9]=h*c+s*a,e[10]=h*l+s*u,e[11]=h*f+s*o,t!==e&&(e[4]=t[4],e[5]=t[5],e[6]=t[6],e[7]=t[7],e[12]=t[12],e[13]=t[13],e[14]=t[14],e[15]=t[15]),e},rotationZ:function(t,n){n=n||new A(16);let e=Math.cos(t),r=Math.sin(t);return n[0]=e,n[1]=r,n[2]=0,n[3]=0,n[4]=-r,n[5]=e,n[6]=0,n[7]=0,n[8]=0,n[9]=0,n[10]=1,n[11]=0,n[12]=0,n[13]=0,n[14]=0,n[15]=1,n},rotateZ:function(t,n,e){e=e||new A(16);let r=t[0],a=t[1],u=t[2],o=t[3],i=t[4],c=t[5],l=t[6],f=t[7],h=Math.cos(n),s=Math.sin(n);return e[0]=h*r+s*i,e[1]=h*a+s*c,e[2]=h*u+s*l,e[3]=h*o+s*f,e[4]=h*i-s*r,e[5]=h*c-s*a,e[6]=h*l-s*u,e[7]=h*f-s*o,t!==e&&(e[8]=t[8],e[9]=t[9],e[10]=t[10],e[11]=t[11],e[12]=t[12],e[13]=t[13],e[14]=t[14],e[15]=t[15]),e},axisRotation:z,rotation:z,axisRotate:T,rotate:T,scaling:function(t,n){return(n=n||new A(16))[0]=t[0],n[1]=0,n[2]=0,n[3]=0,n[4]=0,n[5]=t[1],n[6]=0,n[7]=0,n[8]=0,n[9]=0,n[10]=t[2],n[11]=0,n[12]=0,n[13]=0,n[14]=0,n[15]=1,n},scale:function(t,n,e){e=e||new A(16);let r=n[0],a=n[1],u=n[2];return e[0]=r*t[0],e[1]=r*t[1],e[2]=r*t[2],e[3]=r*t[3],e[4]=a*t[4],e[5]=a*t[5],e[6]=a*t[6],e[7]=a*t[7],e[8]=u*t[8],e[9]=u*t[9],e[10]=u*t[10],e[11]=u*t[11],t!==e&&(e[12]=t[12],e[13]=t[13],e[14]=t[14],e[15]=t[15]),e},uniformScaling:function(t,n){return(n=n||new A(16))[0]=t,n[1]=0,n[2]=0,n[3]=0,n[4]=0,n[5]=t,n[6]=0,n[7]=0,n[8]=0,n[9]=0,n[10]=t,n[11]=0,n[12]=0,n[13]=0,n[14]=0,n[15]=1,n},uniformScale:function(t,n,e){return(e=e||new A(16))[0]=n*t[0],e[1]=n*t[1],e[2]=n*t[2],e[3]=n*t[3],e[4]=n*t[4],e[5]=n*t[5],e[6]=n*t[6],e[7]=n*t[7],e[8]=n*t[8],e[9]=n*t[9],e[10]=n*t[10],e[11]=n*t[11],t!==e&&(e[12]=t[12],e[13]=t[13],e[14]=t[14],e[15]=t[15]),e}});Float32Array;let V=Float32Array;function j(t,n,e,r){let a=new V(4);return void 0!==t&&(a[0]=t,void 0!==n&&(a[1]=n,void 0!==e&&(a[2]=e,void 0!==r&&(a[3]=r)))),a}function D(t,n,e){return(e=e||new V(4))[0]=t[0]-n[0],e[1]=t[1]-n[1],e[2]=t[2]-n[2],e[3]=t[3]-n[3],e}function E(t,n,e){return(e=e||new V(4))[0]=t[0]*n,e[1]=t[1]*n,e[2]=t[2]*n,e[3]=t[3]*n,e}function O(t,n){return(n=n||new V(4))[0]=1/t[0],n[1]=1/t[1],n[2]=1/t[2],n[3]=1/t[3],n}function R(t){let n=t[0],e=t[1],r=t[2],a=t[3];return Math.sqrt(n*n+e*e+r*r+a*a)}function C(t){let n=t[0],e=t[1],r=t[2],a=t[3];return n*n+e*e+r*r+a*a}function I(t,n){let e=t[0]-n[0],r=t[1]-n[1],a=t[2]-n[2],u=t[3]-n[3];return Math.sqrt(e*e+r*r+a*a+u*u)}function N(t,n){let e=t[0]-n[0],r=t[1]-n[1],a=t[2]-n[2],u=t[3]-n[3];return e*e+r*r+a*a+u*u}function P(t,n){return(n=n||new V(4))[0]=t[0],n[1]=t[1],n[2]=t[2],n[3]=t[3],n}function Q(t,n,e){return(e=e||new V(4))[0]=t[0]*n[0],e[1]=t[1]*n[1],e[2]=t[2]*n[2],e[3]=t[3]*n[3],e}function X(t,n,e){return(e=e||new V(4))[0]=t[0]/n[0],e[1]=t[1]/n[1],e[2]=t[2]/n[2],e[3]=t[3]/n[3],e}var Y=Object.freeze({__proto__:null,create:j,setDefaultType:function(t){let n=V;return V=t,n},fromValues:j,set:function(t,n,e,r,a){return(a=a||new V(4))[0]=t,a[1]=n,a[2]=e,a[3]=r,a},ceil:function(t,n){return(n=n||new V(4))[0]=Math.ceil(t[0]),n[1]=Math.ceil(t[1]),n[2]=Math.ceil(t[2]),n[3]=Math.ceil(t[3]),n},floor:function(t,n){return(n=n||new V(4))[0]=Math.floor(t[0]),n[1]=Math.floor(t[1]),n[2]=Math.floor(t[2]),n[3]=Math.floor(t[3]),n},round:function(t,n){return(n=n||new V(4))[0]=Math.round(t[0]),n[1]=Math.round(t[1]),n[2]=Math.round(t[2]),n[3]=Math.round(t[3]),n},clamp:function(t,n=0,e=1,r){return(r=r||new V(4))[0]=Math.min(e,Math.max(n,t[0])),r[1]=Math.min(e,Math.max(n,t[1])),r[2]=Math.min(e,Math.max(n,t[2])),r[3]=Math.min(e,Math.max(n,t[3])),r},add:function(t,n,e){return(e=e||new V(4))[0]=t[0]+n[0],e[1]=t[1]+n[1],e[2]=t[2]+n[2],e[3]=t[3]+n[3],e},addScaled:function(t,n,e,r){return(r=r||new V(4))[0]=t[0]+n[0]*e,r[1]=t[1]+n[1]*e,r[2]=t[2]+n[2]*e,r[3]=t[3]+n[3]*e,r},subtract:D,sub:D,equalsApproximately:function(t,n){return 1e-6>Math.abs(t[0]-n[0])&&1e-6>Math.abs(t[1]-n[1])&&1e-6>Math.abs(t[2]-n[2])&&1e-6>Math.abs(t[3]-n[3])},equals:function(t,n){return t[0]===n[0]&&t[1]===n[1]&&t[2]===n[2]&&t[3]===n[3]},lerp:function(t,n,e,r){return(r=r||new V(4))[0]=t[0]+e*(n[0]-t[0]),r[1]=t[1]+e*(n[1]-t[1]),r[2]=t[2]+e*(n[2]-t[2]),r[3]=t[3]+e*(n[3]-t[3]),r},lerpV:function(t,n,e,r){return(r=r||new V(4))[0]=t[0]+e[0]*(n[0]-t[0]),r[1]=t[1]+e[1]*(n[1]-t[1]),r[2]=t[2]+e[2]*(n[2]-t[2]),r[3]=t[3]+e[3]*(n[3]-t[3]),r},max:function(t,n,e){return(e=e||new V(4))[0]=Math.max(t[0],n[0]),e[1]=Math.max(t[1],n[1]),e[2]=Math.max(t[2],n[2]),e[3]=Math.max(t[3],n[3]),e},min:function(t,n,e){return(e=e||new V(4))[0]=Math.min(t[0],n[0]),e[1]=Math.min(t[1],n[1]),e[2]=Math.min(t[2],n[2]),e[3]=Math.min(t[3],n[3]),e},mulScalar:E,scale:E,divScalar:function(t,n,e){return(e=e||new V(4))[0]=t[0]/n,e[1]=t[1]/n,e[2]=t[2]/n,e[3]=t[3]/n,e},inverse:O,invert:O,dot:function(t,n){return t[0]*n[0]+t[1]*n[1]+t[2]*n[2]+t[3]*n[3]},length:R,len:R,lengthSq:C,lenSq:C,distance:I,dist:I,distanceSq:N,distSq:N,normalize:function(t,n){n=n||new V(4);let e=t[0],r=t[1],a=t[2],u=t[3],o=Math.sqrt(e*e+r*r+a*a+u*u);return o>1e-5?(n[0]=e/o,n[1]=r/o,n[2]=a/o,n[3]=u/o):(n[0]=0,n[1]=0,n[2]=0,n[3]=0),n},negate:function(t,n){return(n=n||new V(4))[0]=-t[0],n[1]=-t[1],n[2]=-t[2],n[3]=-t[3],n},copy:P,clone:P,multiply:Q,mul:Q,divide:X,div:X,zero:function(t){return(t=t||new V(4))[0]=0,t[1]=0,t[2]=0,t[3]=0,t},transformMat4:function(t,n,e){e=e||new V(4);let r=t[0],a=t[1],u=t[2],o=t[3];return e[0]=n[0]*r+n[4]*a+n[8]*u+n[12]*o,e[1]=n[1]*r+n[5]*a+n[9]*u+n[13]*o,e[2]=n[2]*r+n[6]*a+n[10]*u+n[14]*o,e[3]=n[3]*r+n[7]*a+n[11]*u+n[15]*o,e}})}}]); \ No newline at end of file diff --git a/_next/static/chunks/b8074065.f34e40bc56b8268f.js b/_next/static/chunks/b8074065.f34e40bc56b8268f.js new file mode 100644 index 00000000..a2c47bcd --- /dev/null +++ b/_next/static/chunks/b8074065.f34e40bc56b8268f.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[746],{6416:function(n,t,e){let r,u,a;e.d(t,{K4:function(){return q},R3:function(){return I},_E:function(){return Z},vh:function(){return nr}});let o=Float32Array;function i(n=0,t=0){let e=new o(2);return void 0!==n&&(e[0]=n,void 0!==t&&(e[1]=t)),e}function c(n,t,e){return(e=e||new o(2))[0]=n[0]-t[0],e[1]=n[1]-t[1],e}function l(n,t,e){return(e=e||new o(2))[0]=n[0]*t,e[1]=n[1]*t,e}function f(n,t){return(t=t||new o(2))[0]=1/n[0],t[1]=1/n[1],t}function h(n,t){return n[0]*t[0]+n[1]*t[1]}function s(n){let t=n[0],e=n[1];return Math.sqrt(t*t+e*e)}function M(n){let t=n[0],e=n[1];return t*t+e*e}function w(n,t){let e=n[0]-t[0],r=n[1]-t[1];return Math.sqrt(e*e+r*r)}function d(n,t){let e=n[0]-t[0],r=n[1]-t[1];return e*e+r*r}function m(n,t){return(t=t||new o(2))[0]=n[0],t[1]=n[1],t}function v(n,t,e){return(e=e||new o(2))[0]=n[0]*t[0],e[1]=n[1]*t[1],e}function p(n,t,e){return(e=e||new o(2))[0]=n[0]/t[0],e[1]=n[1]/t[1],e}var q=Object.freeze({__proto__:null,create:i,setDefaultType:function(n){let t=o;return o=n,t},fromValues:i,set:function(n,t,e){return(e=e||new o(2))[0]=n,e[1]=t,e},ceil:function(n,t){return(t=t||new o(2))[0]=Math.ceil(n[0]),t[1]=Math.ceil(n[1]),t},floor:function(n,t){return(t=t||new o(2))[0]=Math.floor(n[0]),t[1]=Math.floor(n[1]),t},round:function(n,t){return(t=t||new o(2))[0]=Math.round(n[0]),t[1]=Math.round(n[1]),t},clamp:function(n,t=0,e=1,r){return(r=r||new o(2))[0]=Math.min(e,Math.max(t,n[0])),r[1]=Math.min(e,Math.max(t,n[1])),r},add:function(n,t,e){return(e=e||new o(2))[0]=n[0]+t[0],e[1]=n[1]+t[1],e},addScaled:function(n,t,e,r){return(r=r||new o(2))[0]=n[0]+t[0]*e,r[1]=n[1]+t[1]*e,r},angle:function(n,t){let e=n[0],r=n[1],u=n[0],a=n[1],o=Math.sqrt(e*e+r*r)*Math.sqrt(u*u+a*a),i=o&&h(n,t)/o;return Math.acos(i)},subtract:c,sub:c,equalsApproximately:function(n,t){return 1e-6>Math.abs(n[0]-t[0])&&1e-6>Math.abs(n[1]-t[1])},equals:function(n,t){return n[0]===t[0]&&n[1]===t[1]},lerp:function(n,t,e,r){return(r=r||new o(2))[0]=n[0]+e*(t[0]-n[0]),r[1]=n[1]+e*(t[1]-n[1]),r},lerpV:function(n,t,e,r){return(r=r||new o(2))[0]=n[0]+e[0]*(t[0]-n[0]),r[1]=n[1]+e[1]*(t[1]-n[1]),r},max:function(n,t,e){return(e=e||new o(2))[0]=Math.max(n[0],t[0]),e[1]=Math.max(n[1],t[1]),e},min:function(n,t,e){return(e=e||new o(2))[0]=Math.min(n[0],t[0]),e[1]=Math.min(n[1],t[1]),e},mulScalar:l,scale:l,divScalar:function(n,t,e){return(e=e||new o(2))[0]=n[0]/t,e[1]=n[1]/t,e},inverse:f,invert:f,cross:function(n,t,e){e=e||new o(3);let r=n[0]*t[1]-n[1]*t[0];return e[0]=0,e[1]=0,e[2]=r,e},dot:h,length:s,len:s,lengthSq:M,lenSq:M,distance:w,dist:w,distanceSq:d,distSq:d,normalize:function(n,t){t=t||new o(2);let e=n[0],r=n[1],u=Math.sqrt(e*e+r*r);return u>1e-5?(t[0]=e/u,t[1]=r/u):(t[0]=0,t[1]=0),t},negate:function(n,t){return(t=t||new o(2))[0]=-n[0],t[1]=-n[1],t},copy:m,clone:m,multiply:v,mul:v,divide:p,div:p,random:function(n=1,t){t=t||new o(2);let e=2*Math.random()*Math.PI;return t[0]=Math.cos(e)*n,t[1]=Math.sin(e)*n,t},zero:function(n){return(n=n||new o(2))[0]=0,n[1]=0,n},transformMat4:function(n,t,e){e=e||new o(2);let r=n[0],u=n[1];return e[0]=r*t[0]+u*t[4]+t[12],e[1]=r*t[1]+u*t[5]+t[13],e},transformMat3:function(n,t,e){e=e||new o(2);let r=n[0],u=n[1];return e[0]=t[0]*r+t[4]*u+t[8],e[1]=t[1]*r+t[5]*u+t[9],e}});Float32Array;let b=new Map([[Float32Array,()=>new Float32Array(12)],[Float64Array,()=>new Float64Array(12)],[Array,()=>Array(12).fill(0)]]);b.get(Float32Array);let x=Float32Array;function y(n,t,e){let r=new x(3);return void 0!==n&&(r[0]=n,void 0!==t&&(r[1]=t,void 0!==e&&(r[2]=e))),r}function S(n,t,e){return(e=e||new x(3))[0]=n[0]-t[0],e[1]=n[1]-t[1],e[2]=n[2]-t[2],e}function g(n,t,e){return(e=e||new x(3))[0]=n[0]*t,e[1]=n[1]*t,e[2]=n[2]*t,e}function A(n,t){return(t=t||new x(3))[0]=1/n[0],t[1]=1/n[1],t[2]=1/n[2],t}function _(n,t,e){e=e||new x(3);let r=n[2]*t[0]-n[0]*t[2],u=n[0]*t[1]-n[1]*t[0];return e[0]=n[1]*t[2]-n[2]*t[1],e[1]=r,e[2]=u,e}function F(n,t){return n[0]*t[0]+n[1]*t[1]+n[2]*t[2]}function z(n){let t=n[0],e=n[1],r=n[2];return Math.sqrt(t*t+e*e+r*r)}function T(n){let t=n[0],e=n[1],r=n[2];return t*t+e*e+r*r}function V(n,t){let e=n[0]-t[0],r=n[1]-t[1],u=n[2]-t[2];return Math.sqrt(e*e+r*r+u*u)}function k(n,t){let e=n[0]-t[0],r=n[1]-t[1],u=n[2]-t[2];return e*e+r*r+u*u}function j(n,t){t=t||new x(3);let e=n[0],r=n[1],u=n[2],a=Math.sqrt(e*e+r*r+u*u);return a>1e-5?(t[0]=e/a,t[1]=r/a,t[2]=u/a):(t[0]=0,t[1]=0,t[2]=0),t}function D(n,t){return(t=t||new x(3))[0]=n[0],t[1]=n[1],t[2]=n[2],t}function O(n,t,e){return(e=e||new x(3))[0]=n[0]*t[0],e[1]=n[1]*t[1],e[2]=n[2]*t[2],e}function E(n,t,e){return(e=e||new x(3))[0]=n[0]/t[0],e[1]=n[1]/t[1],e[2]=n[2]/t[2],e}var I=Object.freeze({__proto__:null,create:y,setDefaultType:function(n){let t=x;return x=n,t},fromValues:y,set:function(n,t,e,r){return(r=r||new x(3))[0]=n,r[1]=t,r[2]=e,r},ceil:function(n,t){return(t=t||new x(3))[0]=Math.ceil(n[0]),t[1]=Math.ceil(n[1]),t[2]=Math.ceil(n[2]),t},floor:function(n,t){return(t=t||new x(3))[0]=Math.floor(n[0]),t[1]=Math.floor(n[1]),t[2]=Math.floor(n[2]),t},round:function(n,t){return(t=t||new x(3))[0]=Math.round(n[0]),t[1]=Math.round(n[1]),t[2]=Math.round(n[2]),t},clamp:function(n,t=0,e=1,r){return(r=r||new x(3))[0]=Math.min(e,Math.max(t,n[0])),r[1]=Math.min(e,Math.max(t,n[1])),r[2]=Math.min(e,Math.max(t,n[2])),r},add:function(n,t,e){return(e=e||new x(3))[0]=n[0]+t[0],e[1]=n[1]+t[1],e[2]=n[2]+t[2],e},addScaled:function(n,t,e,r){return(r=r||new x(3))[0]=n[0]+t[0]*e,r[1]=n[1]+t[1]*e,r[2]=n[2]+t[2]*e,r},angle:function(n,t){let e=n[0],r=n[1],u=n[2],a=n[0],o=n[1],i=n[2],c=Math.sqrt(e*e+r*r+u*u)*Math.sqrt(a*a+o*o+i*i),l=c&&F(n,t)/c;return Math.acos(l)},subtract:S,sub:S,equalsApproximately:function(n,t){return 1e-6>Math.abs(n[0]-t[0])&&1e-6>Math.abs(n[1]-t[1])&&1e-6>Math.abs(n[2]-t[2])},equals:function(n,t){return n[0]===t[0]&&n[1]===t[1]&&n[2]===t[2]},lerp:function(n,t,e,r){return(r=r||new x(3))[0]=n[0]+e*(t[0]-n[0]),r[1]=n[1]+e*(t[1]-n[1]),r[2]=n[2]+e*(t[2]-n[2]),r},lerpV:function(n,t,e,r){return(r=r||new x(3))[0]=n[0]+e[0]*(t[0]-n[0]),r[1]=n[1]+e[1]*(t[1]-n[1]),r[2]=n[2]+e[2]*(t[2]-n[2]),r},max:function(n,t,e){return(e=e||new x(3))[0]=Math.max(n[0],t[0]),e[1]=Math.max(n[1],t[1]),e[2]=Math.max(n[2],t[2]),e},min:function(n,t,e){return(e=e||new x(3))[0]=Math.min(n[0],t[0]),e[1]=Math.min(n[1],t[1]),e[2]=Math.min(n[2],t[2]),e},mulScalar:g,scale:g,divScalar:function(n,t,e){return(e=e||new x(3))[0]=n[0]/t,e[1]=n[1]/t,e[2]=n[2]/t,e},inverse:A,invert:A,cross:_,dot:F,length:z,len:z,lengthSq:T,lenSq:T,distance:V,dist:V,distanceSq:k,distSq:k,normalize:j,negate:function(n,t){return(t=t||new x(3))[0]=-n[0],t[1]=-n[1],t[2]=-n[2],t},copy:D,clone:D,multiply:O,mul:O,divide:E,div:E,random:function(n=1,t){t=t||new x(3);let e=2*Math.random()*Math.PI,r=2*Math.random()-1,u=Math.sqrt(1-r*r)*n;return t[0]=Math.cos(e)*u,t[1]=Math.sin(e)*u,t[2]=r*n,t},zero:function(n){return(n=n||new x(3))[0]=0,n[1]=0,n[2]=0,n},transformMat4:function(n,t,e){e=e||new x(3);let r=n[0],u=n[1],a=n[2],o=t[3]*r+t[7]*u+t[11]*a+t[15]||1;return e[0]=(t[0]*r+t[4]*u+t[8]*a+t[12])/o,e[1]=(t[1]*r+t[5]*u+t[9]*a+t[13])/o,e[2]=(t[2]*r+t[6]*u+t[10]*a+t[14])/o,e},transformMat4Upper3x3:function(n,t,e){e=e||new x(3);let r=n[0],u=n[1],a=n[2];return e[0]=r*t[0]+u*t[4]+a*t[8],e[1]=r*t[1]+u*t[5]+a*t[9],e[2]=r*t[2]+u*t[6]+a*t[10],e},transformMat3:function(n,t,e){e=e||new x(3);let r=n[0],u=n[1],a=n[2];return e[0]=r*t[0]+u*t[4]+a*t[8],e[1]=r*t[1]+u*t[5]+a*t[9],e[2]=r*t[2]+u*t[6]+a*t[10],e},transformQuat:function(n,t,e){e=e||new x(3);let r=t[0],u=t[1],a=t[2],o=2*t[3],i=n[0],c=n[1],l=n[2],f=u*l-a*c,h=a*i-r*l,s=r*c-u*i;return e[0]=i+f*o+(u*s-a*h)*2,e[1]=c+h*o+(a*f-r*s)*2,e[2]=l+s*o+(r*h-u*f)*2,e},getTranslation:function(n,t){return(t=t||new x(3))[0]=n[12],t[1]=n[13],t[2]=n[14],t},getAxis:function(n,t,e){e=e||new x(3);let r=4*t;return e[0]=n[r+0],e[1]=n[r+1],e[2]=n[r+2],e},getScaling:function(n,t){t=t||new x(3);let e=n[0],r=n[1],u=n[2],a=n[4],o=n[5],i=n[6],c=n[8],l=n[9],f=n[10];return t[0]=Math.sqrt(e*e+r*r+u*u),t[1]=Math.sqrt(a*a+o*o+i*i),t[2]=Math.sqrt(c*c+l*l+f*f),t}});let P=Float32Array;function R(n,t){return(t=t||new P(16))[0]=n[0],t[1]=n[1],t[2]=n[2],t[3]=n[3],t[4]=n[4],t[5]=n[5],t[6]=n[6],t[7]=n[7],t[8]=n[8],t[9]=n[9],t[10]=n[10],t[11]=n[11],t[12]=n[12],t[13]=n[13],t[14]=n[14],t[15]=n[15],t}function C(n){return(n=n||new P(16))[0]=1,n[1]=0,n[2]=0,n[3]=0,n[4]=0,n[5]=1,n[6]=0,n[7]=0,n[8]=0,n[9]=0,n[10]=1,n[11]=0,n[12]=0,n[13]=0,n[14]=0,n[15]=1,n}function N(n,t){t=t||new P(16);let e=n[0],r=n[1],u=n[2],a=n[3],o=n[4],i=n[5],c=n[6],l=n[7],f=n[8],h=n[9],s=n[10],M=n[11],w=n[12],d=n[13],m=n[14],v=n[15],p=s*v,q=m*M,b=c*v,x=m*l,y=c*M,S=s*l,g=u*v,A=m*a,_=u*M,F=s*a,z=u*l,T=c*a,V=f*d,k=w*h,j=o*d,D=w*i,O=o*h,E=f*i,I=e*d,R=w*r,C=e*h,N=f*r,Q=e*i,X=o*r,Y=p*i+x*h+y*d-(q*i+b*h+S*d),Z=q*r+g*h+F*d-(p*r+A*h+_*d),K=b*r+A*i+z*d-(x*r+g*i+T*d),U=S*r+_*i+T*h-(y*r+F*i+z*h),B=1/(e*Y+o*Z+f*K+w*U);return t[0]=B*Y,t[1]=B*Z,t[2]=B*K,t[3]=B*U,t[4]=B*(q*o+b*f+S*w-(p*o+x*f+y*w)),t[5]=B*(p*e+A*f+_*w-(q*e+g*f+F*w)),t[6]=B*(x*e+g*o+T*w-(b*e+A*o+z*w)),t[7]=B*(y*e+F*o+z*f-(S*e+_*o+T*f)),t[8]=B*(V*l+D*M+O*v-(k*l+j*M+E*v)),t[9]=B*(k*a+I*M+N*v-(V*a+R*M+C*v)),t[10]=B*(j*a+R*l+Q*v-(D*a+I*l+X*v)),t[11]=B*(E*a+C*l+X*M-(O*a+N*l+Q*M)),t[12]=B*(j*s+E*m+k*c-(O*m+V*c+D*s)),t[13]=B*(C*m+V*u+R*s-(I*s+N*m+k*u)),t[14]=B*(I*c+X*m+D*u-(Q*m+j*u+R*c)),t[15]=B*(Q*s+O*u+N*c-(C*c+X*s+E*u)),t}function Q(n,t,e){e=e||new P(16);let r=n[0],u=n[1],a=n[2],o=n[3],i=n[4],c=n[5],l=n[6],f=n[7],h=n[8],s=n[9],M=n[10],w=n[11],d=n[12],m=n[13],v=n[14],p=n[15],q=t[0],b=t[1],x=t[2],y=t[3],S=t[4],g=t[5],A=t[6],_=t[7],F=t[8],z=t[9],T=t[10],V=t[11],k=t[12],j=t[13],D=t[14],O=t[15];return e[0]=r*q+i*b+h*x+d*y,e[1]=u*q+c*b+s*x+m*y,e[2]=a*q+l*b+M*x+v*y,e[3]=o*q+f*b+w*x+p*y,e[4]=r*S+i*g+h*A+d*_,e[5]=u*S+c*g+s*A+m*_,e[6]=a*S+l*g+M*A+v*_,e[7]=o*S+f*g+w*A+p*_,e[8]=r*F+i*z+h*T+d*V,e[9]=u*F+c*z+s*T+m*V,e[10]=a*F+l*z+M*T+v*V,e[11]=o*F+f*z+w*T+p*V,e[12]=r*k+i*j+h*D+d*O,e[13]=u*k+c*j+s*D+m*O,e[14]=a*k+l*j+M*D+v*O,e[15]=o*k+f*j+w*D+p*O,e}function X(n,t,e){e=e||new P(16);let r=n[0],u=n[1],a=n[2],o=Math.sqrt(r*r+u*u+a*a);r/=o,u/=o,a/=o;let i=r*r,c=u*u,l=a*a,f=Math.cos(t),h=Math.sin(t),s=1-f;return e[0]=i+(1-i)*f,e[1]=r*u*s+a*h,e[2]=r*a*s-u*h,e[3]=0,e[4]=r*u*s-a*h,e[5]=c+(1-c)*f,e[6]=u*a*s+r*h,e[7]=0,e[8]=r*a*s+u*h,e[9]=u*a*s-r*h,e[10]=l+(1-l)*f,e[11]=0,e[12]=0,e[13]=0,e[14]=0,e[15]=1,e}function Y(n,t,e,r){r=r||new P(16);let u=t[0],a=t[1],o=t[2],i=Math.sqrt(u*u+a*a+o*o);u/=i,a/=i,o/=i;let c=u*u,l=a*a,f=o*o,h=Math.cos(e),s=Math.sin(e),M=1-h,w=c+(1-c)*h,d=u*a*M+o*s,m=u*o*M-a*s,v=u*a*M-o*s,p=l+(1-l)*h,q=a*o*M+u*s,b=u*o*M+a*s,x=a*o*M-u*s,y=f+(1-f)*h,S=n[0],g=n[1],A=n[2],_=n[3],F=n[4],z=n[5],T=n[6],V=n[7],k=n[8],j=n[9],D=n[10],O=n[11];return r[0]=w*S+d*F+m*k,r[1]=w*g+d*z+m*j,r[2]=w*A+d*T+m*D,r[3]=w*_+d*V+m*O,r[4]=v*S+p*F+q*k,r[5]=v*g+p*z+q*j,r[6]=v*A+p*T+q*D,r[7]=v*_+p*V+q*O,r[8]=b*S+x*F+y*k,r[9]=b*g+x*z+y*j,r[10]=b*A+x*T+y*D,r[11]=b*_+x*V+y*O,n!==r&&(r[12]=n[12],r[13]=n[13],r[14]=n[14],r[15]=n[15]),r}var Z=Object.freeze({__proto__:null,setDefaultType:function(n){let t=P;return P=n,t},create:function(n,t,e,r,u,a,o,i,c,l,f,h,s,M,w,d){let m=new P(16);return void 0!==n&&(m[0]=n,void 0!==t&&(m[1]=t,void 0!==e&&(m[2]=e,void 0!==r&&(m[3]=r,void 0!==u&&(m[4]=u,void 0!==a&&(m[5]=a,void 0!==o&&(m[6]=o,void 0!==i&&(m[7]=i,void 0!==c&&(m[8]=c,void 0!==l&&(m[9]=l,void 0!==f&&(m[10]=f,void 0!==h&&(m[11]=h,void 0!==s&&(m[12]=s,void 0!==M&&(m[13]=M,void 0!==w&&(m[14]=w,void 0!==d&&(m[15]=d)))))))))))))))),m},set:function(n,t,e,r,u,a,o,i,c,l,f,h,s,M,w,d,m){return(m=m||new P(16))[0]=n,m[1]=t,m[2]=e,m[3]=r,m[4]=u,m[5]=a,m[6]=o,m[7]=i,m[8]=c,m[9]=l,m[10]=f,m[11]=h,m[12]=s,m[13]=M,m[14]=w,m[15]=d,m},fromMat3:function(n,t){return(t=t||new P(16))[0]=n[0],t[1]=n[1],t[2]=n[2],t[3]=0,t[4]=n[4],t[5]=n[5],t[6]=n[6],t[7]=0,t[8]=n[8],t[9]=n[9],t[10]=n[10],t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},fromQuat:function(n,t){t=t||new P(16);let e=n[0],r=n[1],u=n[2],a=n[3],o=e+e,i=r+r,c=u+u,l=e*o,f=r*o,h=r*i,s=u*o,M=u*i,w=u*c,d=a*o,m=a*i,v=a*c;return t[0]=1-h-w,t[1]=f+v,t[2]=s-m,t[3]=0,t[4]=f-v,t[5]=1-l-w,t[6]=M+d,t[7]=0,t[8]=s+m,t[9]=M-d,t[10]=1-l-h,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},negate:function(n,t){return(t=t||new P(16))[0]=-n[0],t[1]=-n[1],t[2]=-n[2],t[3]=-n[3],t[4]=-n[4],t[5]=-n[5],t[6]=-n[6],t[7]=-n[7],t[8]=-n[8],t[9]=-n[9],t[10]=-n[10],t[11]=-n[11],t[12]=-n[12],t[13]=-n[13],t[14]=-n[14],t[15]=-n[15],t},copy:R,clone:R,equalsApproximately:function(n,t){return 1e-6>Math.abs(n[0]-t[0])&&1e-6>Math.abs(n[1]-t[1])&&1e-6>Math.abs(n[2]-t[2])&&1e-6>Math.abs(n[3]-t[3])&&1e-6>Math.abs(n[4]-t[4])&&1e-6>Math.abs(n[5]-t[5])&&1e-6>Math.abs(n[6]-t[6])&&1e-6>Math.abs(n[7]-t[7])&&1e-6>Math.abs(n[8]-t[8])&&1e-6>Math.abs(n[9]-t[9])&&1e-6>Math.abs(n[10]-t[10])&&1e-6>Math.abs(n[11]-t[11])&&1e-6>Math.abs(n[12]-t[12])&&1e-6>Math.abs(n[13]-t[13])&&1e-6>Math.abs(n[14]-t[14])&&1e-6>Math.abs(n[15]-t[15])},equals:function(n,t){return n[0]===t[0]&&n[1]===t[1]&&n[2]===t[2]&&n[3]===t[3]&&n[4]===t[4]&&n[5]===t[5]&&n[6]===t[6]&&n[7]===t[7]&&n[8]===t[8]&&n[9]===t[9]&&n[10]===t[10]&&n[11]===t[11]&&n[12]===t[12]&&n[13]===t[13]&&n[14]===t[14]&&n[15]===t[15]},identity:C,transpose:function(n,t){if((t=t||new P(16))===n){let e;return e=n[1],n[1]=n[4],n[4]=e,e=n[2],n[2]=n[8],n[8]=e,e=n[3],n[3]=n[12],n[12]=e,e=n[6],n[6]=n[9],n[9]=e,e=n[7],n[7]=n[13],n[13]=e,e=n[11],n[11]=n[14],n[14]=e,t}let r=n[0],u=n[1],a=n[2],o=n[3],i=n[4],c=n[5],l=n[6],f=n[7],h=n[8],s=n[9],M=n[10],w=n[11],d=n[12],m=n[13],v=n[14],p=n[15];return t[0]=r,t[1]=i,t[2]=h,t[3]=d,t[4]=u,t[5]=c,t[6]=s,t[7]=m,t[8]=a,t[9]=l,t[10]=M,t[11]=v,t[12]=o,t[13]=f,t[14]=w,t[15]=p,t},inverse:N,determinant:function(n){let t=n[0],e=n[1],r=n[2],u=n[3],a=n[4],o=n[5],i=n[6],c=n[7],l=n[8],f=n[9],h=n[10],s=n[11],M=n[12],w=n[13],d=n[14],m=n[15],v=h*m,p=d*s,q=i*m,b=d*c,x=i*s,y=h*c,S=r*m,g=d*u,A=r*s,_=h*u,F=r*c,z=i*u;return t*(v*o+b*f+x*w-(p*o+q*f+y*w))+a*(p*e+S*f+_*w-(v*e+g*f+A*w))+l*(q*e+g*o+F*w-(b*e+S*o+z*w))+M*(y*e+A*o+z*f-(x*e+_*o+F*f))},invert:N,multiply:Q,mul:Q,setTranslation:function(n,t,e){return n!==(e=e||C())&&(e[0]=n[0],e[1]=n[1],e[2]=n[2],e[3]=n[3],e[4]=n[4],e[5]=n[5],e[6]=n[6],e[7]=n[7],e[8]=n[8],e[9]=n[9],e[10]=n[10],e[11]=n[11]),e[12]=t[0],e[13]=t[1],e[14]=t[2],e[15]=1,e},getTranslation:function(n,t){return(t=t||y())[0]=n[12],t[1]=n[13],t[2]=n[14],t},getAxis:function(n,t,e){e=e||y();let r=4*t;return e[0]=n[r+0],e[1]=n[r+1],e[2]=n[r+2],e},setAxis:function(n,t,e,r){r!==n&&(r=R(n,r));let u=4*e;return r[u+0]=t[0],r[u+1]=t[1],r[u+2]=t[2],r},getScaling:function(n,t){t=t||y();let e=n[0],r=n[1],u=n[2],a=n[4],o=n[5],i=n[6],c=n[8],l=n[9],f=n[10];return t[0]=Math.sqrt(e*e+r*r+u*u),t[1]=Math.sqrt(a*a+o*o+i*i),t[2]=Math.sqrt(c*c+l*l+f*f),t},perspective:function(n,t,e,r,u){u=u||new P(16);let a=Math.tan(.5*Math.PI-.5*n);if(u[0]=a/t,u[1]=0,u[2]=0,u[3]=0,u[4]=0,u[5]=a,u[6]=0,u[7]=0,u[8]=0,u[9]=0,u[11]=-1,u[12]=0,u[13]=0,u[15]=0,r===1/0)u[10]=-1,u[14]=-e;else{let o=1/(e-r);u[10]=r*o,u[14]=r*e*o}return u},ortho:function(n,t,e,r,u,a,o){return(o=o||new P(16))[0]=2/(t-n),o[1]=0,o[2]=0,o[3]=0,o[4]=0,o[5]=2/(r-e),o[6]=0,o[7]=0,o[8]=0,o[9]=0,o[10]=1/(u-a),o[11]=0,o[12]=(t+n)/(n-t),o[13]=(r+e)/(e-r),o[14]=u/(u-a),o[15]=1,o},frustum:function(n,t,e,r,u,a,o){o=o||new P(16);let i=t-n,c=r-e,l=u-a;return o[0]=2*u/i,o[1]=0,o[2]=0,o[3]=0,o[4]=0,o[5]=2*u/c,o[6]=0,o[7]=0,o[8]=(n+t)/i,o[9]=(r+e)/c,o[10]=a/l,o[11]=-1,o[12]=0,o[13]=0,o[14]=u*a/l,o[15]=0,o},aim:function(n,t,e,o){return o=o||new P(16),r=r||y(),u=u||y(),j(S(t,n,a=a||y()),a),j(_(e,a,r),r),j(_(a,r,u),u),o[0]=r[0],o[1]=r[1],o[2]=r[2],o[3]=0,o[4]=u[0],o[5]=u[1],o[6]=u[2],o[7]=0,o[8]=a[0],o[9]=a[1],o[10]=a[2],o[11]=0,o[12]=n[0],o[13]=n[1],o[14]=n[2],o[15]=1,o},cameraAim:function(n,t,e,o){return o=o||new P(16),r=r||y(),u=u||y(),j(S(n,t,a=a||y()),a),j(_(e,a,r),r),j(_(a,r,u),u),o[0]=r[0],o[1]=r[1],o[2]=r[2],o[3]=0,o[4]=u[0],o[5]=u[1],o[6]=u[2],o[7]=0,o[8]=a[0],o[9]=a[1],o[10]=a[2],o[11]=0,o[12]=n[0],o[13]=n[1],o[14]=n[2],o[15]=1,o},lookAt:function(n,t,e,o){return o=o||new P(16),r=r||y(),u=u||y(),j(S(n,t,a=a||y()),a),j(_(e,a,r),r),j(_(a,r,u),u),o[0]=r[0],o[1]=u[0],o[2]=a[0],o[3]=0,o[4]=r[1],o[5]=u[1],o[6]=a[1],o[7]=0,o[8]=r[2],o[9]=u[2],o[10]=a[2],o[11]=0,o[12]=-(r[0]*n[0]+r[1]*n[1]+r[2]*n[2]),o[13]=-(u[0]*n[0]+u[1]*n[1]+u[2]*n[2]),o[14]=-(a[0]*n[0]+a[1]*n[1]+a[2]*n[2]),o[15]=1,o},translation:function(n,t){return(t=t||new P(16))[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=n[0],t[13]=n[1],t[14]=n[2],t[15]=1,t},translate:function(n,t,e){e=e||new P(16);let r=t[0],u=t[1],a=t[2],o=n[0],i=n[1],c=n[2],l=n[3],f=n[4],h=n[5],s=n[6],M=n[7],w=n[8],d=n[9],m=n[10],v=n[11],p=n[12],q=n[13],b=n[14],x=n[15];return n!==e&&(e[0]=o,e[1]=i,e[2]=c,e[3]=l,e[4]=f,e[5]=h,e[6]=s,e[7]=M,e[8]=w,e[9]=d,e[10]=m,e[11]=v),e[12]=o*r+f*u+w*a+p,e[13]=i*r+h*u+d*a+q,e[14]=c*r+s*u+m*a+b,e[15]=l*r+M*u+v*a+x,e},rotationX:function(n,t){t=t||new P(16);let e=Math.cos(n),r=Math.sin(n);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=e,t[6]=r,t[7]=0,t[8]=0,t[9]=-r,t[10]=e,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},rotateX:function(n,t,e){e=e||new P(16);let r=n[4],u=n[5],a=n[6],o=n[7],i=n[8],c=n[9],l=n[10],f=n[11],h=Math.cos(t),s=Math.sin(t);return e[4]=h*r+s*i,e[5]=h*u+s*c,e[6]=h*a+s*l,e[7]=h*o+s*f,e[8]=h*i-s*r,e[9]=h*c-s*u,e[10]=h*l-s*a,e[11]=h*f-s*o,n!==e&&(e[0]=n[0],e[1]=n[1],e[2]=n[2],e[3]=n[3],e[12]=n[12],e[13]=n[13],e[14]=n[14],e[15]=n[15]),e},rotationY:function(n,t){t=t||new P(16);let e=Math.cos(n),r=Math.sin(n);return t[0]=e,t[1]=0,t[2]=-r,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=r,t[9]=0,t[10]=e,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},rotateY:function(n,t,e){e=e||new P(16);let r=n[0],u=n[1],a=n[2],o=n[3],i=n[8],c=n[9],l=n[10],f=n[11],h=Math.cos(t),s=Math.sin(t);return e[0]=h*r-s*i,e[1]=h*u-s*c,e[2]=h*a-s*l,e[3]=h*o-s*f,e[8]=h*i+s*r,e[9]=h*c+s*u,e[10]=h*l+s*a,e[11]=h*f+s*o,n!==e&&(e[4]=n[4],e[5]=n[5],e[6]=n[6],e[7]=n[7],e[12]=n[12],e[13]=n[13],e[14]=n[14],e[15]=n[15]),e},rotationZ:function(n,t){t=t||new P(16);let e=Math.cos(n),r=Math.sin(n);return t[0]=e,t[1]=r,t[2]=0,t[3]=0,t[4]=-r,t[5]=e,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},rotateZ:function(n,t,e){e=e||new P(16);let r=n[0],u=n[1],a=n[2],o=n[3],i=n[4],c=n[5],l=n[6],f=n[7],h=Math.cos(t),s=Math.sin(t);return e[0]=h*r+s*i,e[1]=h*u+s*c,e[2]=h*a+s*l,e[3]=h*o+s*f,e[4]=h*i-s*r,e[5]=h*c-s*u,e[6]=h*l-s*a,e[7]=h*f-s*o,n!==e&&(e[8]=n[8],e[9]=n[9],e[10]=n[10],e[11]=n[11],e[12]=n[12],e[13]=n[13],e[14]=n[14],e[15]=n[15]),e},axisRotation:X,rotation:X,axisRotate:Y,rotate:Y,scaling:function(n,t){return(t=t||new P(16))[0]=n[0],t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=n[1],t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=n[2],t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},scale:function(n,t,e){e=e||new P(16);let r=t[0],u=t[1],a=t[2];return e[0]=r*n[0],e[1]=r*n[1],e[2]=r*n[2],e[3]=r*n[3],e[4]=u*n[4],e[5]=u*n[5],e[6]=u*n[6],e[7]=u*n[7],e[8]=a*n[8],e[9]=a*n[9],e[10]=a*n[10],e[11]=a*n[11],n!==e&&(e[12]=n[12],e[13]=n[13],e[14]=n[14],e[15]=n[15]),e},uniformScaling:function(n,t){return(t=t||new P(16))[0]=n,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=n,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=n,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},uniformScale:function(n,t,e){return(e=e||new P(16))[0]=t*n[0],e[1]=t*n[1],e[2]=t*n[2],e[3]=t*n[3],e[4]=t*n[4],e[5]=t*n[5],e[6]=t*n[6],e[7]=t*n[7],e[8]=t*n[8],e[9]=t*n[9],e[10]=t*n[10],e[11]=t*n[11],n!==e&&(e[12]=n[12],e[13]=n[13],e[14]=n[14],e[15]=n[15]),e}});Float32Array;let K=Float32Array;function U(n,t,e,r){let u=new K(4);return void 0!==n&&(u[0]=n,void 0!==t&&(u[1]=t,void 0!==e&&(u[2]=e,void 0!==r&&(u[3]=r)))),u}function B(n,t,e){return(e=e||new K(4))[0]=n[0]-t[0],e[1]=n[1]-t[1],e[2]=n[2]-t[2],e[3]=n[3]-t[3],e}function G(n,t,e){return(e=e||new K(4))[0]=n[0]*t,e[1]=n[1]*t,e[2]=n[2]*t,e[3]=n[3]*t,e}function H(n,t){return(t=t||new K(4))[0]=1/n[0],t[1]=1/n[1],t[2]=1/n[2],t[3]=1/n[3],t}function J(n){let t=n[0],e=n[1],r=n[2],u=n[3];return Math.sqrt(t*t+e*e+r*r+u*u)}function L(n){let t=n[0],e=n[1],r=n[2],u=n[3];return t*t+e*e+r*r+u*u}function W(n,t){let e=n[0]-t[0],r=n[1]-t[1],u=n[2]-t[2],a=n[3]-t[3];return Math.sqrt(e*e+r*r+u*u+a*a)}function $(n,t){let e=n[0]-t[0],r=n[1]-t[1],u=n[2]-t[2],a=n[3]-t[3];return e*e+r*r+u*u+a*a}function nn(n,t){return(t=t||new K(4))[0]=n[0],t[1]=n[1],t[2]=n[2],t[3]=n[3],t}function nt(n,t,e){return(e=e||new K(4))[0]=n[0]*t[0],e[1]=n[1]*t[1],e[2]=n[2]*t[2],e[3]=n[3]*t[3],e}function ne(n,t,e){return(e=e||new K(4))[0]=n[0]/t[0],e[1]=n[1]/t[1],e[2]=n[2]/t[2],e[3]=n[3]/t[3],e}var nr=Object.freeze({__proto__:null,create:U,setDefaultType:function(n){let t=K;return K=n,t},fromValues:U,set:function(n,t,e,r,u){return(u=u||new K(4))[0]=n,u[1]=t,u[2]=e,u[3]=r,u},ceil:function(n,t){return(t=t||new K(4))[0]=Math.ceil(n[0]),t[1]=Math.ceil(n[1]),t[2]=Math.ceil(n[2]),t[3]=Math.ceil(n[3]),t},floor:function(n,t){return(t=t||new K(4))[0]=Math.floor(n[0]),t[1]=Math.floor(n[1]),t[2]=Math.floor(n[2]),t[3]=Math.floor(n[3]),t},round:function(n,t){return(t=t||new K(4))[0]=Math.round(n[0]),t[1]=Math.round(n[1]),t[2]=Math.round(n[2]),t[3]=Math.round(n[3]),t},clamp:function(n,t=0,e=1,r){return(r=r||new K(4))[0]=Math.min(e,Math.max(t,n[0])),r[1]=Math.min(e,Math.max(t,n[1])),r[2]=Math.min(e,Math.max(t,n[2])),r[3]=Math.min(e,Math.max(t,n[3])),r},add:function(n,t,e){return(e=e||new K(4))[0]=n[0]+t[0],e[1]=n[1]+t[1],e[2]=n[2]+t[2],e[3]=n[3]+t[3],e},addScaled:function(n,t,e,r){return(r=r||new K(4))[0]=n[0]+t[0]*e,r[1]=n[1]+t[1]*e,r[2]=n[2]+t[2]*e,r[3]=n[3]+t[3]*e,r},subtract:B,sub:B,equalsApproximately:function(n,t){return 1e-6>Math.abs(n[0]-t[0])&&1e-6>Math.abs(n[1]-t[1])&&1e-6>Math.abs(n[2]-t[2])&&1e-6>Math.abs(n[3]-t[3])},equals:function(n,t){return n[0]===t[0]&&n[1]===t[1]&&n[2]===t[2]&&n[3]===t[3]},lerp:function(n,t,e,r){return(r=r||new K(4))[0]=n[0]+e*(t[0]-n[0]),r[1]=n[1]+e*(t[1]-n[1]),r[2]=n[2]+e*(t[2]-n[2]),r[3]=n[3]+e*(t[3]-n[3]),r},lerpV:function(n,t,e,r){return(r=r||new K(4))[0]=n[0]+e[0]*(t[0]-n[0]),r[1]=n[1]+e[1]*(t[1]-n[1]),r[2]=n[2]+e[2]*(t[2]-n[2]),r[3]=n[3]+e[3]*(t[3]-n[3]),r},max:function(n,t,e){return(e=e||new K(4))[0]=Math.max(n[0],t[0]),e[1]=Math.max(n[1],t[1]),e[2]=Math.max(n[2],t[2]),e[3]=Math.max(n[3],t[3]),e},min:function(n,t,e){return(e=e||new K(4))[0]=Math.min(n[0],t[0]),e[1]=Math.min(n[1],t[1]),e[2]=Math.min(n[2],t[2]),e[3]=Math.min(n[3],t[3]),e},mulScalar:G,scale:G,divScalar:function(n,t,e){return(e=e||new K(4))[0]=n[0]/t,e[1]=n[1]/t,e[2]=n[2]/t,e[3]=n[3]/t,e},inverse:H,invert:H,dot:function(n,t){return n[0]*t[0]+n[1]*t[1]+n[2]*t[2]+n[3]*t[3]},length:J,len:J,lengthSq:L,lenSq:L,distance:W,dist:W,distanceSq:$,distSq:$,normalize:function(n,t){t=t||new K(4);let e=n[0],r=n[1],u=n[2],a=n[3],o=Math.sqrt(e*e+r*r+u*u+a*a);return o>1e-5?(t[0]=e/o,t[1]=r/o,t[2]=u/o,t[3]=a/o):(t[0]=0,t[1]=0,t[2]=0,t[3]=0),t},negate:function(n,t){return(t=t||new K(4))[0]=-n[0],t[1]=-n[1],t[2]=-n[2],t[3]=-n[3],t},copy:nn,clone:nn,multiply:nt,mul:nt,divide:ne,div:ne,zero:function(n){return(n=n||new K(4))[0]=0,n[1]=0,n[2]=0,n[3]=0,n},transformMat4:function(n,t,e){e=e||new K(4);let r=n[0],u=n[1],a=n[2],o=n[3];return e[0]=t[0]*r+t[4]*u+t[8]*a+t[12]*o,e[1]=t[1]*r+t[5]*u+t[9]*a+t[13]*o,e[2]=t[2]*r+t[6]*u+t[10]*a+t[14]*o,e[3]=t[3]*r+t[7]*u+t[11]*a+t[15]*o,e}})}}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/_app-5e49c72c639c4b91.js b/_next/static/chunks/pages/_app-67c697283af90eb7.js similarity index 52% rename from _next/static/chunks/pages/_app-5e49c72c639c4b91.js rename to _next/static/chunks/pages/_app-67c697283af90eb7.js index 78bcd9e4..26a77a71 100644 --- a/_next/static/chunks/pages/_app-5e49c72c639c4b91.js +++ b/_next/static/chunks/pages/_app-67c697283af90eb7.js @@ -1 +1 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[888],{3454:function(e,t,n){"use strict";var r,a;e.exports=(null==(r=n.g.process)?void 0:r.env)&&"object"==typeof(null==(a=n.g.process)?void 0:a.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,r){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 r=n(2648).Z,a=n(7273).Z,l=r(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,r){if(!e||!o.isLocalURL(t))return;Promise.resolve(e.prefetch(t,n,r)).catch(e=>{});let a=r&&void 0!==r.locale?r.locale:e&&e.locale;p[t+"%"+n+(a?"%"+a:"")]=!0}let b=l.default.forwardRef(function(e,t){let n,r;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=a(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&&(r=l.default.Children.only(n));let N=L?r&&"object"==typeof r&&r.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&&r.props&&"function"==typeof r.props.onClick&&r.props.onClick(e),e.defaultPrevented||function(e,t,n,r,a,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[a?"replace":"push"](n,r,{shallow:i,locale:u,scroll:s}):t[a?"replace":"push"](r||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&&r.props&&"function"==typeof r.props.onMouseEnter&&r.props.onMouseEnter(e),!(!G&&O)&&o.isLocalURL(E)&&h(M,E,R,{priority:!0})},onTouchStart(e){L||"function"!=typeof C||C(e),L&&r.props&&"function"==typeof r.props.onTouchStart&&r.props.onTouchStart(e),!(!G&&O)&&o.isLocalURL(E)&&h(M,E,R,{priority:!0})}};if(!L||v||"a"===r.type&&!("href"in r.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(r,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]=r.useState(!1),[f,p]=r.useState(null);r.useEffect(()=>{if(l){if(!u&&!d&&f&&f.tagName){let e=function(e,t,n){let{id:r,observer:a,elements:l}=function(e){let t;let n={root:e.root||null,margin:e.rootMargin||""},r=i.find(e=>e.root===n.root&&e.margin===n.margin);if(r&&(t=o.get(r)))return t;let a=new Map,l=new IntersectionObserver(e=>{e.forEach(e=>{let t=a.get(e.target),n=e.isIntersecting||e.intersectionRatio>0;t&&n&&t(n)})},e);return t={id:n,observer:l,elements:a},i.push(n),o.set(n,t),t}(n);return l.set(e,t),a.observe(e),function(){if(l.delete(e),a.unobserve(e),0===l.size){a.disconnect(),o.delete(r);let t=i.findIndex(e=>e.root===r.root&&e.margin===r.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 r=a.requestIdleCallback(()=>c(!0));return()=>a.cancelIdleCallback(r)}},[f,u,n,t,d]);let h=r.useCallback(()=>{c(!1)},[]);return[p,d,h]};var r=n(7294),a=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 r=(0,n(2648).Z)(n(7294));let a=r.default.createContext(null);t.AppRouterContext=a;let l=r.default.createContext(null);t.LayoutRouterContext=l;let o=r.default.createContext(null);t.GlobalLayoutRouterContext=o;let i=r.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,a=(null==t?void 0:t.suspense)?{}:{loading(e){let{error:t,isLoading:n,pastDelay:r}=e;return null}};if(e instanceof Promise?a.loader=()=>e:"function"==typeof e?a.loader=e:"object"==typeof e&&(a=r({},a,e)),(a=r({},a,t)).suspense&&(delete a.ssr,delete a.loading),a.loadableGenerated&&delete(a=r({},a,a.loadableGenerated)).loadableGenerated,"boolean"==typeof a.ssr&&!a.suspense){if(!a.ssr)return delete a.ssr,o(n,a);delete a.ssr}return n(a)},t.noSSR=o;var r=n(6495).Z,a=n(2648).Z,l=(a(n(7294)),a(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 r=(0,n(2648).Z)(n(7294));let a=r.default.createContext(null);t.LoadableContext=a},4588:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=n(6495).Z,a=(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=r({},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=a.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=a.default.useContext(l.LoadableContext);e&&Array.isArray(n.modules)&&n.modules.forEach(t=>{e(t)})}let h=n.suspense?function(e,t){return p(),a.default.createElement(n.lazy,r({},e,{ref:t}))}:function(e,t){p();let r=o(i.subscribe,i.getCurrentValue,i.getCurrentValue);return a.default.useImperativeHandle(t,()=>({retry:i.retry}),[]),a.default.useMemo(()=>{var t;return r.loading||r.error?a.default.createElement(n.loading,{isLoading:r.loading,pastDelay:r.pastDelay,timedOut:r.timedOut,error:r.error,retry:i.retry}):r.loaded?a.default.createElement((t=r.loaded)&&t.__esModule?t.default:t,e):null},[e,r])};return h.preload=()=>d(),h.displayName="LoadableComponent",a.default.forwardRef(h)}(d,e)}function p(e,t){let n=[];for(;e.length;){let r=e.pop();n.push(r(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 r=n(5893),a=n(9008),l=n.n(a),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,a=(0,s.useRouter)(),o=Object.keys(f.pages),[d,b]=(0,u.useState)(!1),m=a.asPath.match(/(\?wgsl=[01])#(\S+)/);if(m){let _=m[2];return a.replace("/samples/".concat(_)),(0,r.jsx)(r.Fragment,{})}return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(l(),{children:[(0,r.jsx)("title",{children:h}),(0,r.jsx)("meta",{name:"description",content:"The WebGPU Samples are a set of samples demonstrating the use of the WebGPU API."}),(0,r.jsx)("meta",{name:"viewport",content:"width=device-width, initial-scale=1, shrink-to-fit=no"})]}),(0,r.jsxs)("div",{className:c().wrapper,children:[(0,r.jsxs)("nav",{className:"".concat(c().panel," ").concat(c().container),"data-expanded":d,children:[(0,r.jsxs)("h1",{children:[(0,r.jsx)(i(),{href:"/",children:h}),(0,r.jsx)("div",{className:c().expand,onClick(){b(!d)}})]}),(0,r.jsxs)("div",{className:c().panelContents,children:[(0,r.jsx)("a",{href:"https://github.com/".concat("webgpu/webgpu-samples"),children:"Github"}),(0,r.jsx)("hr",{}),(0,r.jsx)("ul",{className:c().exampleList,children:o.map(e=>{let t="/samples/[slug]"===a.pathname&&a.query.slug===e?c().selected:void 0;return(0,r.jsx)("li",{className:t,onMouseOver(){f.pages[e].render.preload()},children:(0,r.jsx)(i(),{href:"/samples/".concat(e),onClick(){b(!1)},children:e})},e)})}),(0,r.jsx)("hr",{}),(0,r.jsx)("h3",{children:"Other Pages"}),(0,r.jsx)("ul",{className:c().exampleList,children:(0,r.jsx)("li",{children:(0,r.jsx)("a",{rel:"noreferrer",target:"_blank",href:"".concat(p.env.BASE_PATH||"","/workload-simulator.html"),children:"Workload Simulator ↗️"})})})]})]}),(0,r.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 r=n(5893),a=n(5152),l=n.n(a),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(112)]).then(n.bind(n,8112)),{loadableGenerated:{webpack:()=>[8112]}})};t.default=function(e){let{slug:t}=e,n=i[t];return(0,r.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,r,a=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(r){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(r){n=o}}();var s=[],u=!1,d=-1;function c(){u&&r&&(u=!1,r.length?s=r.concat(s):d=-1,s.length&&f())}function f(){if(!u){var e=i(c);u=!0;for(var t=s.length;t;){for(r=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(112)]).then(n.bind(n,8112)),{loadableGenerated:{webpack:()=>[8112]}}),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[f-1][2]>a;f--)e[f]=e[f-1];e[f]=[r,n,a];return}for(var o=1/0,f=0;f=a&&Object.keys(l.O).every(function(e){return l.O[e](r[u])})?r.splice(u--,1):(i=!1,a0&&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,fcanvas{width:100%;aspect-ratio:1;max-width:600px}nav.SampleLayout_sourceFileNav__ml48P ul{list-style-type:none;padding:0;margin:15px 0 0}nav.SampleLayout_sourceFileNav__ml48P li{display:inline-block;margin:0;padding:0;transition:.3s cubic-bezier(.175,.885,.32,1.275)}nav.SampleLayout_sourceFileNav__ml48P li a{display:block;margin:0;padding:10px;color:#fff;background-color:#403e3e}nav.SampleLayout_sourceFileNav__ml48P li a[data-active=true]{background-color:#282823}.SampleLayout_sourceFileContainer__3s84x{overflow:hidden;height:0}.SampleLayout_sourceFileContainer__3s84x[data-active=true]{height:auto}.SampleLayout_sourceFileContainer__3s84x .CodeMirror{margin-top:0}@keyframes animatedCanvasSize_animated-size__fXLtb{0%{width:10px;height:600px}50%{width:100%;height:600px}to{width:10px;height:600px}}.animatedCanvasSize_animatedCanvasSize__SMQPJ{animation-duration:3s;animation-iteration-count:infinite;animation-name:animatedCanvasSize_animated-size__fXLtb;animation-timing-function:ease} \ No newline at end of file diff --git a/_next/static/css/90729286db9f40c1.css b/_next/static/css/90729286db9f40c1.css deleted file mode 100644 index 6b71dfe1..00000000 --- a/_next/static/css/90729286db9f40c1.css +++ /dev/null @@ -1 +0,0 @@ -.SampleLayout_canvasContainer__zRR_l{text-align:center;position:relative;margin-top:10px}.SampleLayout_canvasContainer__zRR_l>canvas{width:100%;aspect-ratio:1;max-width:600px}nav.SampleLayout_sourceFileNav__ml48P ul{list-style-type:none;padding:0;margin:15px 0 0}nav.SampleLayout_sourceFileNav__ml48P li{display:inline-block;margin:0;padding:0}nav.SampleLayout_sourceFileNav__ml48P li a{display:block;margin:0;padding:10px;color:#fff;background-color:#403e3e}nav.SampleLayout_sourceFileNav__ml48P li a[data-active=true]{background-color:#282823}.SampleLayout_sourceFileContainer__3s84x{overflow:hidden;height:0}.SampleLayout_sourceFileContainer__3s84x[data-active=true]{height:auto}.SampleLayout_sourceFileContainer__3s84x .CodeMirror{margin-top:0}@keyframes animatedCanvasSize_animated-size__fXLtb{0%{width:10px;height:600px}50%{width:100%;height:600px}to{width:10px;height:600px}}.animatedCanvasSize_animatedCanvasSize__SMQPJ{animation-duration:3s;animation-iteration-count:infinite;animation-name:animatedCanvasSize_animated-size__fXLtb;animation-timing-function:ease} \ No newline at end of file diff --git a/_next/static/css/dd2e6def0b19e984.css b/_next/static/css/dd2e6def0b19e984.css deleted file mode 100644 index faf37831..00000000 --- a/_next/static/css/dd2e6def0b19e984.css +++ /dev/null @@ -1 +0,0 @@ -.SampleLayout_canvasContainer__zRR_l{text-align:center;position:relative;margin-top:10px}.SampleLayout_canvasContainer__zRR_l>canvas{width:100%;aspect-ratio:1;max-width:600px}nav.SampleLayout_sourceFileNav__ml48P ul{list-style-type:none;padding:0;margin:15px 0 0}nav.SampleLayout_sourceFileNav__ml48P li{display:inline-block;margin:0;padding:0}nav.SampleLayout_sourceFileNav__ml48P li a{display:block;margin:0;padding:10px;color:#fff;background-color:#403e3e}nav.SampleLayout_sourceFileNav__ml48P li a[data-active=true]{background-color:#282823}.SampleLayout_sourceFileContainer__3s84x{overflow:hidden;height:0}.SampleLayout_sourceFileContainer__3s84x[data-active=true]{height:auto}.SampleLayout_sourceFileContainer__3s84x .CodeMirror{margin-top:0} \ No newline at end of file diff --git a/_next/static/css/fc477fa8fce3a189.css b/_next/static/css/fc477fa8fce3a189.css new file mode 100644 index 00000000..d904bded --- /dev/null +++ b/_next/static/css/fc477fa8fce3a189.css @@ -0,0 +1 @@ +.SampleLayout_canvasContainer__zRR_l{text-align:center;position:relative;margin-top:10px}.SampleLayout_canvasContainer__zRR_l>canvas{width:100%;aspect-ratio:1;max-width:600px}nav.SampleLayout_sourceFileNav__ml48P ul{list-style-type:none;padding:0;margin:15px 0 0}nav.SampleLayout_sourceFileNav__ml48P li{display:inline-block;margin:0;padding:0;transition:.3s cubic-bezier(.175,.885,.32,1.275)}nav.SampleLayout_sourceFileNav__ml48P li a{display:block;margin:0;padding:10px;color:#fff;background-color:#403e3e}nav.SampleLayout_sourceFileNav__ml48P li a[data-active=true]{background-color:#282823}.SampleLayout_sourceFileContainer__3s84x{overflow:hidden;height:0}.SampleLayout_sourceFileContainer__3s84x[data-active=true]{height:auto}.SampleLayout_sourceFileContainer__3s84x .CodeMirror{margin-top:0} \ No newline at end of file diff --git a/_next/static/um7Vob07qBXC-7TtBPMuf/_buildManifest.js b/_next/static/kubTdYT8j6epjwt90LFc_/_buildManifest.js similarity index 100% rename from _next/static/um7Vob07qBXC-7TtBPMuf/_buildManifest.js rename to _next/static/kubTdYT8j6epjwt90LFc_/_buildManifest.js diff --git a/_next/static/um7Vob07qBXC-7TtBPMuf/_ssgManifest.js b/_next/static/kubTdYT8j6epjwt90LFc_/_ssgManifest.js similarity index 100% rename from _next/static/um7Vob07qBXC-7TtBPMuf/_ssgManifest.js rename to _next/static/kubTdYT8j6epjwt90LFc_/_ssgManifest.js diff --git a/img/brickwall_diffuse.png b/img/brickwall_diffuse.png new file mode 100644 index 00000000..35835088 Binary files /dev/null and b/img/brickwall_diffuse.png differ diff --git a/img/brickwall_height.png b/img/brickwall_height.png new file mode 100644 index 00000000..48ab26fa Binary files /dev/null and b/img/brickwall_height.png differ diff --git a/img/brickwall_normal.png b/img/brickwall_normal.png new file mode 100644 index 00000000..aa6643de Binary files /dev/null and b/img/brickwall_normal.png differ diff --git a/img/spiral_height.png b/img/spiral_height.png new file mode 100644 index 00000000..1f1680ff Binary files /dev/null and b/img/spiral_height.png differ diff --git a/img/spiral_normal.png b/img/spiral_normal.png new file mode 100644 index 00000000..5cba15cf Binary files /dev/null and b/img/spiral_normal.png differ diff --git a/img/toybox_height.png b/img/toybox_height.png new file mode 100644 index 00000000..9977210b Binary files /dev/null and b/img/toybox_height.png differ diff --git a/img/toybox_normal.png b/img/toybox_normal.png new file mode 100644 index 00000000..91bcb56a Binary files /dev/null and b/img/toybox_normal.png differ diff --git a/img/wood_diffuse.png b/img/wood_diffuse.png new file mode 100644 index 00000000..e28e2aee Binary files /dev/null and b/img/wood_diffuse.png differ diff --git a/index.html b/index.html index 4d5d8d91..cf28b868 100644 --- a/index.html +++ b/index.html @@ -1 +1 @@ -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 +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 09a1b77a..eff25221 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 5d2a4d3a..e3980043 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 826bd2e6..531e0452 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 94c848d6..478cb5ea 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 65c73f2b..362f6dd5 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 fafb60ea..e7c08b35 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 479d7185..3807a1c3 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 6169bafe..1ce31bea 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 d3878534..0a20255b 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 5e551bdc..cf9dc92e 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 3ba794e0..a679f41b 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 99c64eb4..4386fd3c 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 f655bee0..e62b62de 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 d12e97aa..3f3e11b7 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 new file mode 100644 index 00000000..27a531ea --- /dev/null +++ b/samples/normalMap.html @@ -0,0 +1,11 @@ +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 baf9451d..798929f1 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 b3e11eda..19bd216d 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 40c5b59f..17c64895 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 2e2b65f6..2771ed0b 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 aeae3cc8..7b19bef0 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 ca005b85..72f4d4ca 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 8bb36ba8..29714345 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 266dae15..11516d99 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 ef4c84d6..bd66e071 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 fa42f435..b3328ab7 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 e8582a51..3a7dcf17 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 ce76f766..c53010d2 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