Merge branch 'main' of https://github.com/cmhhelgeson/webgpu-samples

webgpu · Nov 30, 2023 · c4f73a1 · c4f73a1
2 parents ff38128 + 78b9cc1
commit c4f73a1
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 25 deletions.
diff --git a/src/components/SampleLayout.tsx b/src/components/SampleLayout.tsx
@@ -90,7 +90,11 @@ const SampleLayout: React.FunctionComponent<
     if (props.gui && process.browser) {
       // eslint-disable-next-line @typescript-eslint/no-var-requires
       const dat = require('dat.gui');
-      return new dat.GUI({ autoPlace: false });
+      const gui = new dat.GUI({ autoPlace: false });
+      // HACK: Make
+      gui.domElement.style.position = 'relative';
+      gui.domElement.style.zIndex = '1000';
+      return gui;
     }
     return undefined;
   }, []);

diff --git a/src/sample/a-buffer/main.ts b/src/sample/a-buffer/main.ts
@@ -676,15 +676,15 @@ const ABuffer: () => JSX.Element = () =>
         contents: __SOURCE__,
       },
       {
-        name: 'opaque.wsgl',
+        name: 'opaque.wgsl',
         contents: opaqueWGSL,
       },
       {
-        name: 'translucent.wsgl',
+        name: 'translucent.wgsl',
         contents: translucentWGSL,
       },
       {
-        name: 'composite.wsgl',
+        name: 'composite.wgsl',
         contents: compositeWGSL,
       },
     ],

diff --git a/src/sample/computeBoids/main.ts b/src/sample/computeBoids/main.ts
@@ -14,13 +14,14 @@ const init: SampleInit = async ({ canvas, pageState, gui }) => {
 
   const perfDisplayContainer = document.createElement('div');
   perfDisplayContainer.style.color = 'white';
-  perfDisplayContainer.style.background = 'black';
+  perfDisplayContainer.style.backdropFilter = 'blur(10px)';
   perfDisplayContainer.style.position = 'absolute';
-  perfDisplayContainer.style.top = '10px';
+  perfDisplayContainer.style.bottom = '10px';
   perfDisplayContainer.style.left = '10px';
   perfDisplayContainer.style.textAlign = 'left';
 
   const perfDisplay = document.createElement('pre');
+  perfDisplay.style.margin = '.5em';
   perfDisplayContainer.appendChild(perfDisplay);
   if (canvas.parentNode) {
     canvas.parentNode.appendChild(perfDisplayContainer);
@@ -261,6 +262,7 @@ const init: SampleInit = async ({ canvas, pageState, gui }) => {
   let t = 0;
   let computePassDurationSum = 0;
   let renderPassDurationSum = 0;
+  let timerSamples = 0;
   function frame() {
     // Sample is no longer the active page.
     if (!pageState.active) return;
@@ -311,25 +313,34 @@ const init: SampleInit = async ({ canvas, pageState, gui }) => {
     if (hasTimestampQuery) {
       resultBuffer.mapAsync(GPUMapMode.READ).then(() => {
         const times = new BigInt64Array(resultBuffer.getMappedRange());
-        computePassDurationSum += Number(times[1] - times[0]);
-        renderPassDurationSum += Number(times[3] - times[2]);
+        const computePassDuration = Number(times[1] - times[0]);
+        const renderPassDuration = Number(times[3] - times[2]);
+
+        // In some cases the timestamps may wrap around and produce a negative
+        // number as the GPU resets it's timings. These can safely be ignored.
+        if (computePassDuration > 0 && renderPassDuration > 0) {
+          computePassDurationSum += computePassDuration;
+          renderPassDurationSum += renderPassDuration;
+          timerSamples++;
+        }
         resultBuffer.unmap();
 
         // Periodically update the text for the timer stats
-        const kNumTimerSamples = 100;
-        if (t % kNumTimerSamples === 0) {
+        const kNumTimerSamplesPerUpdate = 100;
+        if (timerSamples >= kNumTimerSamplesPerUpdate) {
           const avgComputeMicroseconds = Math.round(
-            computePassDurationSum / kNumTimerSamples / 1000
+            computePassDurationSum / timerSamples / 1000
           );
           const avgRenderMicroseconds = Math.round(
-            renderPassDurationSum / kNumTimerSamples / 1000
+            renderPassDurationSum / timerSamples / 1000
           );
           perfDisplay.textContent = `\
 avg compute pass duration: ${avgComputeMicroseconds}µs
-avg render pass duration: ${avgRenderMicroseconds}µs
-spare readback buffers: ${spareResultBuffers.length}`;
+avg render pass duration:  ${avgRenderMicroseconds}µs
+spare readback buffers:    ${spareResultBuffers.length}`;
           computePassDurationSum = 0;
           renderPassDurationSum = 0;
+          timerSamples = 0;
         }
         spareResultBuffers.push(resultBuffer);
       });

diff --git a/src/sample/deferredRendering/fragmentWriteGBuffers.wgsl b/src/sample/deferredRendering/fragmentWriteGBuffers.wgsl
@@ -15,7 +15,7 @@ fn main(
   let c = 0.2 + 0.5 * ((uv.x + uv.y) - 2.0 * floor((uv.x + uv.y) / 2.0));
 
   var output : GBufferOutput;
-  output.normal = vec4(fragNormal, 1.0);
+  output.normal = vec4(normalize(fragNormal), 1.0);
   output.albedo = vec4(c, c, c, 1.0);
 
   return output;

diff --git a/src/sample/deferredRendering/main.ts b/src/sample/deferredRendering/main.ts
@@ -487,10 +487,6 @@ const init: SampleInit = async ({ canvas, pageState, gui }) => {
     2000.0
   );
 
-  const viewMatrix = mat4.inverse(mat4.lookAt(eyePosition, origin, upVector));
-
-  const viewProjMatrix = mat4.multiply(projectionMatrix, viewMatrix);
-
   // Move the model so it's centered.
   const modelMatrix = mat4.translation([0, -45, 0]);
 
@@ -515,17 +511,13 @@ const init: SampleInit = async ({ canvas, pageState, gui }) => {
 
   // Rotates the camera around the origin based on time.
   function getCameraViewProjMatrix() {
-    const eyePosition = vec3.fromValues(0, 50, -100);
-
     const rad = Math.PI * (Date.now() / 5000);
     const rotation = mat4.rotateY(mat4.translation(origin), rad);
-    vec3.transformMat4(eyePosition, rotation, eyePosition);
     const rotatedEyePosition = vec3.transformMat4(eyePosition, rotation);
 
     const viewMatrix = mat4.lookAt(rotatedEyePosition, origin, upVector);
 
-    mat4.multiply(projectionMatrix, viewMatrix, viewProjMatrix);
-    return viewProjMatrix as Float32Array;
+    return mat4.multiply(projectionMatrix, viewMatrix) as Float32Array;
   }
 
   function frame() {

diff --git a/src/sample/shadowMapping/fragment.wgsl b/src/sample/shadowMapping/fragment.wgsl
@@ -37,7 +37,7 @@ fn main(input : FragmentInput) -> @location(0) vec4<f32> {
   }
   visibility /= 9.0;
 
-  let lambertFactor = max(dot(normalize(scene.lightPos - input.fragPos), input.fragNorm), 0.0);
+  let lambertFactor = max(dot(normalize(scene.lightPos - input.fragPos), normalize(input.fragNorm)), 0.0);
   let lightingFactor = min(ambientFactor + visibility * lambertFactor, 1.0);
 
   return vec4(lightingFactor * albedo, 1.0);