From 538ebf733b28efedc2d4f07f26445e4cb73ba678 Mon Sep 17 00:00:00 2001 From: James Price Date: Thu, 16 Nov 2023 22:51:28 -0500 Subject: [PATCH 1/6] Fix .wgsl file extension in a-buffer sample (#326) --- src/sample/a-buffer/main.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/sample/a-buffer/main.ts b/src/sample/a-buffer/main.ts index 0f585c5b..33d52087 100644 --- 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, }, ], From ad611379e87be0d8c22e00c31196d34e5ff4f1d6 Mon Sep 17 00:00:00 2001 From: Brandon Jones Date: Tue, 21 Nov 2023 11:43:46 -0800 Subject: [PATCH 2/6] Improve timestamp stability --- src/sample/computeBoids/main.ts | 22 ++++++++++++++++------ 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/src/sample/computeBoids/main.ts b/src/sample/computeBoids/main.ts index b7671735..80af5500 100644 --- a/src/sample/computeBoids/main.ts +++ b/src/sample/computeBoids/main.ts @@ -261,6 +261,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,18 +312,26 @@ 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 @@ -330,6 +339,7 @@ avg render pass duration: ${avgRenderMicroseconds}µs spare readback buffers: ${spareResultBuffers.length}`; computePassDurationSum = 0; renderPassDurationSum = 0; + timerSamples = 0; } spareResultBuffers.push(resultBuffer); }); From 3098e74b61b4fb57e73954883be43d03546b8791 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Beaufort?= Date: Wed, 22 Nov 2023 10:11:44 +0100 Subject: [PATCH 3/6] Update perf display style --- src/sample/computeBoids/main.ts | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/sample/computeBoids/main.ts b/src/sample/computeBoids/main.ts index 80af5500..a95ab8ec 100644 --- 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); @@ -335,8 +336,8 @@ const init: SampleInit = async ({ canvas, pageState, gui }) => { ); 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; From c6a94aad8d31ec3530d62360d38f7bada4d6a597 Mon Sep 17 00:00:00 2001 From: Gregg Tavares Date: Wed, 22 Nov 2023 09:54:43 -0800 Subject: [PATCH 4/6] Make GUI appear on top of other elements I was surprised to learn that this didn't default to z-Index > 0. I think it works in most apps because it's expected not to call the GUI constructor until after your other elements have been created? (I didn't look too deeply) It's possible you might want to move elements, see https://github.com/webgpu/webgpu-samples/pull/330 But in any case, it seemed like a good default. --- src/components/SampleLayout.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/SampleLayout.tsx b/src/components/SampleLayout.tsx index f727ba63..f961ec90 100644 --- 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; }, []); From 2d193cb2764c736f435ce748630fae5f29f7518d Mon Sep 17 00:00:00 2001 From: tyfkda Date: Fri, 24 Nov 2023 04:44:36 +0900 Subject: [PATCH 5/6] Fix confusing code in deferredRendering (#327) * The initialization of `viewMatrix` incorrectly uses `mat4.inverse` with `mat4.lookAt`. * The `getCameraViewProjMatrix` function has a local variable of the same name, so it's not used. * `rotation` matrix is applied twice within the `getCameraViewProjMatrix` function. * Change `viewProjMatrix` to not reserve space in advance for the result matrix, similar to other matrices like `rotation` that don't do this. * Remove duplicated `eyePosition` definition. --- src/sample/deferredRendering/main.ts | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/src/sample/deferredRendering/main.ts b/src/sample/deferredRendering/main.ts index 072a3751..35a3d265 100644 --- 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() { From 78b9cc18a958dc0e8ff18494f1433b4509ba56d3 Mon Sep 17 00:00:00 2001 From: tyfkda Date: Tue, 28 Nov 2023 07:15:05 +0900 Subject: [PATCH 6/6] Normalize vector in fragment shader (#332) --- src/sample/deferredRendering/fragmentWriteGBuffers.wgsl | 2 +- src/sample/shadowMapping/fragment.wgsl | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/sample/deferredRendering/fragmentWriteGBuffers.wgsl b/src/sample/deferredRendering/fragmentWriteGBuffers.wgsl index 3cd2f652..f90d0554 100644 --- 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/shadowMapping/fragment.wgsl b/src/sample/shadowMapping/fragment.wgsl index e49e9185..6a45e347 100644 --- a/src/sample/shadowMapping/fragment.wgsl +++ b/src/sample/shadowMapping/fragment.wgsl @@ -37,7 +37,7 @@ fn main(input : FragmentInput) -> @location(0) vec4 { } 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);