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; }, []); 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, }, ], diff --git a/src/sample/computeBoids/main.ts b/src/sample/computeBoids/main.ts index b7671735..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); @@ -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 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/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() { 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);