diff --git a/public/img/brickwall_diffuse.png b/public/img/brickwall_diffuse.png new file mode 100644 index 00000000..35835088 Binary files /dev/null and b/public/img/brickwall_diffuse.png differ diff --git a/public/img/brickwall_height.png b/public/img/brickwall_height.png new file mode 100644 index 00000000..48ab26fa Binary files /dev/null and b/public/img/brickwall_height.png differ diff --git a/public/img/brickwall_normal.png b/public/img/brickwall_normal.png new file mode 100644 index 00000000..aa6643de Binary files /dev/null and b/public/img/brickwall_normal.png differ diff --git a/public/img/spiral_height.png b/public/img/spiral_height.png new file mode 100644 index 00000000..1f1680ff Binary files /dev/null and b/public/img/spiral_height.png differ diff --git a/public/img/spiral_normal.png b/public/img/spiral_normal.png new file mode 100644 index 00000000..5cba15cf Binary files /dev/null and b/public/img/spiral_normal.png differ diff --git a/public/img/toybox_height.png b/public/img/toybox_height.png new file mode 100644 index 00000000..9977210b Binary files /dev/null and b/public/img/toybox_height.png differ diff --git a/public/img/toybox_normal.png b/public/img/toybox_normal.png new file mode 100644 index 00000000..91bcb56a Binary files /dev/null and b/public/img/toybox_normal.png differ diff --git a/public/img/wood_diffuse.png b/public/img/wood_diffuse.png new file mode 100644 index 00000000..e28e2aee Binary files /dev/null and b/public/img/wood_diffuse.png differ diff --git a/src/sample/a-buffer/main.ts b/src/sample/a-buffer/main.ts index 90e16c36..0f585c5b 100644 --- a/src/sample/a-buffer/main.ts +++ b/src/sample/a-buffer/main.ts @@ -332,7 +332,7 @@ const init: SampleInit = async ({ canvas, pageState, gui }) => { }; const configure = () => { - let devicePixelRatio = window.devicePixelRatio || 1; + let devicePixelRatio = window.devicePixelRatio; // The default maximum storage buffer binding size is 128Mib. The amount // of memory we need to store transparent fragments depends on the size diff --git a/src/sample/animometer/main.ts b/src/sample/animometer/main.ts index b11d405c..f8772358 100644 --- a/src/sample/animometer/main.ts +++ b/src/sample/animometer/main.ts @@ -33,7 +33,7 @@ const init: SampleInit = async ({ canvas, pageState, gui }) => { const context = canvas.getContext('webgpu') as GPUCanvasContext; - const devicePixelRatio = window.devicePixelRatio || 1; + const devicePixelRatio = window.devicePixelRatio; canvas.width = canvas.clientWidth * devicePixelRatio; canvas.height = canvas.clientHeight * devicePixelRatio; const presentationFormat = navigator.gpu.getPreferredCanvasFormat(); @@ -283,7 +283,7 @@ const init: SampleInit = async ({ canvas, pageState, gui }) => { const renderPassDescriptor = { colorAttachments: [ { - view: undefined as any, // Assigned later + view: undefined as GPUTextureView, // Assigned later clearValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 }, loadOp: 'clear' as const, storeOp: 'store' as const, diff --git a/src/sample/bitonicSort/utils.ts b/src/sample/bitonicSort/utils.ts index fea2992f..1c2dc65c 100644 --- a/src/sample/bitonicSort/utils.ts +++ b/src/sample/bitonicSort/utils.ts @@ -38,11 +38,11 @@ export const createBindGroupDescriptor = ( ): BindGroupsObjectsAndLayout => { const layoutEntries: GPUBindGroupLayoutEntry[] = []; for (let i = 0; i < bindings.length; i++) { - const layoutEntry: any = {}; - layoutEntry.binding = bindings[i]; - layoutEntry.visibility = visibilities[i % visibilities.length]; - layoutEntry[resourceTypes[i]] = resourceLayouts[i]; - layoutEntries.push(layoutEntry); + layoutEntries.push({ + binding: bindings[i], + visibility: visibilities[i % visibilities.length], + [resourceTypes[i]]: resourceLayouts[i], + }); } const bindGroupLayout = device.createBindGroupLayout({ @@ -58,10 +58,10 @@ export const createBindGroupDescriptor = ( for (let i = 0; i < resources.length; i++) { const groupEntries: GPUBindGroupEntry[] = []; for (let j = 0; j < resources[0].length; j++) { - const groupEntry: any = {}; - groupEntry.binding = j; - groupEntry.resource = resources[i][j]; - groupEntries.push(groupEntry); + groupEntries.push({ + binding: j, + resource: resources[i][j], + }); } const newBindGroup = device.createBindGroup({ label: `${label}.bindGroup${i}`, @@ -112,7 +112,7 @@ export const SampleInitFactoryWebGPU = async ( const device = await adapter.requestDevice(); if (!pageState.active) return; const context = canvas.getContext('webgpu') as GPUCanvasContext; - const devicePixelRatio = window.devicePixelRatio || 1; + const devicePixelRatio = window.devicePixelRatio; canvas.width = canvas.clientWidth * devicePixelRatio; canvas.height = canvas.clientHeight * devicePixelRatio; const presentationFormat = navigator.gpu.getPreferredCanvasFormat(); diff --git a/src/sample/cameras/main.ts b/src/sample/cameras/main.ts index 83cae0de..e4c59c8f 100644 --- a/src/sample/cameras/main.ts +++ b/src/sample/cameras/main.ts @@ -44,7 +44,7 @@ const init: SampleInit = async ({ canvas, pageState, gui }) => { const device = await adapter.requestDevice(); const context = canvas.getContext('webgpu') as GPUCanvasContext; - const devicePixelRatio = window.devicePixelRatio || 1; + const devicePixelRatio = window.devicePixelRatio; canvas.width = canvas.clientWidth * devicePixelRatio; canvas.height = canvas.clientHeight * devicePixelRatio; const presentationFormat = navigator.gpu.getPreferredCanvasFormat(); diff --git a/src/sample/computeBoids/main.ts b/src/sample/computeBoids/main.ts index ae8db740..53c27fe6 100644 --- a/src/sample/computeBoids/main.ts +++ b/src/sample/computeBoids/main.ts @@ -10,7 +10,7 @@ const init: SampleInit = async ({ canvas, pageState, gui }) => { if (!pageState.active) return; const context = canvas.getContext('webgpu') as GPUCanvasContext; - const devicePixelRatio = window.devicePixelRatio || 1; + const devicePixelRatio = window.devicePixelRatio; canvas.width = canvas.clientWidth * devicePixelRatio; canvas.height = canvas.clientHeight * devicePixelRatio; const presentationFormat = navigator.gpu.getPreferredCanvasFormat(); @@ -89,7 +89,7 @@ const init: SampleInit = async ({ canvas, pageState, gui }) => { const renderPassDescriptor = { colorAttachments: [ { - view: undefined as any, // Assigned later + view: undefined as GPUTextureView, // Assigned later clearValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 }, loadOp: 'clear' as const, storeOp: 'store' as const, diff --git a/src/sample/cornell/main.ts b/src/sample/cornell/main.ts index 506951e9..40a9a995 100644 --- a/src/sample/cornell/main.ts +++ b/src/sample/cornell/main.ts @@ -39,7 +39,7 @@ const init: SampleInit = async ({ canvas, pageState, gui }) => { gui.add(params, 'renderer', ['rasterizer', 'raytracer']); gui.add(params, 'rotateCamera', true); - const devicePixelRatio = window.devicePixelRatio || 1; + const devicePixelRatio = window.devicePixelRatio; canvas.width = canvas.clientWidth * devicePixelRatio; canvas.height = canvas.clientHeight * devicePixelRatio; diff --git a/src/sample/cubemap/main.ts b/src/sample/cubemap/main.ts index 33dd2da1..7524fbea 100644 --- a/src/sample/cubemap/main.ts +++ b/src/sample/cubemap/main.ts @@ -19,7 +19,7 @@ const init: SampleInit = async ({ canvas, pageState }) => { if (!pageState.active) return; const context = canvas.getContext('webgpu') as GPUCanvasContext; - const devicePixelRatio = window.devicePixelRatio || 1; + const devicePixelRatio = window.devicePixelRatio; canvas.width = canvas.clientWidth * devicePixelRatio; canvas.height = canvas.clientHeight * devicePixelRatio; const presentationFormat = navigator.gpu.getPreferredCanvasFormat(); diff --git a/src/sample/deferredRendering/main.ts b/src/sample/deferredRendering/main.ts index 8e2382e2..072a3751 100644 --- a/src/sample/deferredRendering/main.ts +++ b/src/sample/deferredRendering/main.ts @@ -20,7 +20,7 @@ const init: SampleInit = async ({ canvas, pageState, gui }) => { if (!pageState.active) return; const context = canvas.getContext('webgpu') as GPUCanvasContext; - const devicePixelRatio = window.devicePixelRatio || 1; + const devicePixelRatio = window.devicePixelRatio; canvas.width = canvas.clientWidth * devicePixelRatio; canvas.height = canvas.clientHeight * devicePixelRatio; const aspect = canvas.width / canvas.height; diff --git a/src/sample/fractalCube/main.ts b/src/sample/fractalCube/main.ts index 32b2f7fb..3abc1149 100644 --- a/src/sample/fractalCube/main.ts +++ b/src/sample/fractalCube/main.ts @@ -19,7 +19,7 @@ const init: SampleInit = async ({ canvas, pageState }) => { if (!pageState.active) return; const context = canvas.getContext('webgpu') as GPUCanvasContext; - const devicePixelRatio = window.devicePixelRatio || 1; + const devicePixelRatio = window.devicePixelRatio; canvas.width = canvas.clientWidth * devicePixelRatio; canvas.height = canvas.clientHeight * devicePixelRatio; const presentationFormat = navigator.gpu.getPreferredCanvasFormat(); diff --git a/src/sample/gameOfLife/main.ts b/src/sample/gameOfLife/main.ts index 4d4d695a..f772b46f 100644 --- a/src/sample/gameOfLife/main.ts +++ b/src/sample/gameOfLife/main.ts @@ -8,7 +8,7 @@ const init: SampleInit = async ({ canvas, pageState, gui }) => { const device = await adapter.requestDevice(); if (!pageState.active) return; const context = canvas.getContext('webgpu') as GPUCanvasContext; - const devicePixelRatio = window.devicePixelRatio || 1; + const devicePixelRatio = window.devicePixelRatio; canvas.width = canvas.clientWidth * devicePixelRatio; canvas.height = canvas.clientHeight * devicePixelRatio; const presentationFormat = navigator.gpu.getPreferredCanvasFormat(); diff --git a/src/sample/helloTriangle/main.ts b/src/sample/helloTriangle/main.ts index 8f4d3a42..0330b4df 100644 --- a/src/sample/helloTriangle/main.ts +++ b/src/sample/helloTriangle/main.ts @@ -10,7 +10,7 @@ const init: SampleInit = async ({ canvas, pageState }) => { if (!pageState.active) return; const context = canvas.getContext('webgpu') as GPUCanvasContext; - const devicePixelRatio = window.devicePixelRatio || 1; + const devicePixelRatio = window.devicePixelRatio; canvas.width = canvas.clientWidth * devicePixelRatio; canvas.height = canvas.clientHeight * devicePixelRatio; const presentationFormat = navigator.gpu.getPreferredCanvasFormat(); diff --git a/src/sample/helloTriangleMSAA/main.ts b/src/sample/helloTriangleMSAA/main.ts index 6f217620..9b663118 100644 --- a/src/sample/helloTriangleMSAA/main.ts +++ b/src/sample/helloTriangleMSAA/main.ts @@ -10,7 +10,7 @@ const init: SampleInit = async ({ canvas, pageState }) => { if (!pageState.active) return; const context = canvas.getContext('webgpu') as GPUCanvasContext; - const devicePixelRatio = window.devicePixelRatio || 1; + const devicePixelRatio = window.devicePixelRatio; canvas.width = canvas.clientWidth * devicePixelRatio; canvas.height = canvas.clientHeight * devicePixelRatio; const presentationFormat = navigator.gpu.getPreferredCanvasFormat(); diff --git a/src/sample/imageBlur/main.ts b/src/sample/imageBlur/main.ts index 906c8f6d..2807f92f 100644 --- a/src/sample/imageBlur/main.ts +++ b/src/sample/imageBlur/main.ts @@ -14,7 +14,7 @@ const init: SampleInit = async ({ canvas, pageState, gui }) => { if (!pageState.active) return; const context = canvas.getContext('webgpu') as GPUCanvasContext; - const devicePixelRatio = window.devicePixelRatio || 1; + const devicePixelRatio = window.devicePixelRatio; canvas.width = canvas.clientWidth * devicePixelRatio; canvas.height = canvas.clientHeight * devicePixelRatio; const presentationFormat = navigator.gpu.getPreferredCanvasFormat(); diff --git a/src/sample/instancedCube/main.ts b/src/sample/instancedCube/main.ts index 8a1e9a5d..baec3e39 100644 --- a/src/sample/instancedCube/main.ts +++ b/src/sample/instancedCube/main.ts @@ -19,7 +19,7 @@ const init: SampleInit = async ({ canvas, pageState }) => { if (!pageState.active) return; const context = canvas.getContext('webgpu') as GPUCanvasContext; - const devicePixelRatio = window.devicePixelRatio || 1; + const devicePixelRatio = window.devicePixelRatio; canvas.width = canvas.clientWidth * devicePixelRatio; canvas.height = canvas.clientHeight * devicePixelRatio; const presentationFormat = navigator.gpu.getPreferredCanvasFormat(); diff --git a/src/sample/particles/main.ts b/src/sample/particles/main.ts index ef7b6c2d..76300b63 100644 --- a/src/sample/particles/main.ts +++ b/src/sample/particles/main.ts @@ -22,7 +22,7 @@ const init: SampleInit = async ({ canvas, pageState, gui }) => { if (!pageState.active) return; const context = canvas.getContext('webgpu') as GPUCanvasContext; - const devicePixelRatio = window.devicePixelRatio || 1; + const devicePixelRatio = window.devicePixelRatio; canvas.width = canvas.clientWidth * devicePixelRatio; canvas.height = canvas.clientHeight * devicePixelRatio; const presentationFormat = navigator.gpu.getPreferredCanvasFormat(); diff --git a/src/sample/renderBundles/main.ts b/src/sample/renderBundles/main.ts index 87b1bcf9..96d5c541 100644 --- a/src/sample/renderBundles/main.ts +++ b/src/sample/renderBundles/main.ts @@ -30,7 +30,7 @@ const init: SampleInit = async ({ canvas, pageState, gui, stats }) => { const context = canvas.getContext('webgpu') as GPUCanvasContext; - const devicePixelRatio = window.devicePixelRatio || 1; + const devicePixelRatio = window.devicePixelRatio; canvas.width = canvas.clientWidth * devicePixelRatio; canvas.height = canvas.clientHeight * devicePixelRatio; const presentationFormat = navigator.gpu.getPreferredCanvasFormat(); diff --git a/src/sample/resizeCanvas/main.ts b/src/sample/resizeCanvas/main.ts index 5a6b1ce5..ff09fa55 100644 --- a/src/sample/resizeCanvas/main.ts +++ b/src/sample/resizeCanvas/main.ts @@ -15,7 +15,7 @@ const init: SampleInit = async ({ canvas, pageState }) => { const presentationFormat = navigator.gpu.getPreferredCanvasFormat(); - const devicePixelRatio = window.devicePixelRatio || 1; + const devicePixelRatio = window.devicePixelRatio; canvas.width = canvas.clientWidth * devicePixelRatio; canvas.height = canvas.clientHeight * devicePixelRatio; diff --git a/src/sample/reversedZ/main.ts b/src/sample/reversedZ/main.ts index 9161c846..a5e4adbd 100644 --- a/src/sample/reversedZ/main.ts +++ b/src/sample/reversedZ/main.ts @@ -72,7 +72,7 @@ const init: SampleInit = async ({ canvas, pageState, gui }) => { const context = canvas.getContext('webgpu') as GPUCanvasContext; - const devicePixelRatio = window.devicePixelRatio || 1; + const devicePixelRatio = window.devicePixelRatio; canvas.width = canvas.clientWidth * devicePixelRatio; canvas.height = canvas.clientHeight * devicePixelRatio; const presentationFormat = navigator.gpu.getPreferredCanvasFormat(); diff --git a/src/sample/rotatingCube/main.ts b/src/sample/rotatingCube/main.ts index 349ffb50..fa92f556 100644 --- a/src/sample/rotatingCube/main.ts +++ b/src/sample/rotatingCube/main.ts @@ -19,7 +19,7 @@ const init: SampleInit = async ({ canvas, pageState }) => { if (!pageState.active) return; const context = canvas.getContext('webgpu') as GPUCanvasContext; - const devicePixelRatio = window.devicePixelRatio || 1; + const devicePixelRatio = window.devicePixelRatio; canvas.width = canvas.clientWidth * devicePixelRatio; canvas.height = canvas.clientHeight * devicePixelRatio; const presentationFormat = navigator.gpu.getPreferredCanvasFormat(); diff --git a/src/sample/shadowMapping/main.ts b/src/sample/shadowMapping/main.ts index 345a4b61..9322dff6 100644 --- a/src/sample/shadowMapping/main.ts +++ b/src/sample/shadowMapping/main.ts @@ -17,7 +17,7 @@ const init: SampleInit = async ({ canvas, pageState }) => { const context = canvas.getContext('webgpu') as GPUCanvasContext; - const devicePixelRatio = window.devicePixelRatio || 1; + const devicePixelRatio = window.devicePixelRatio; canvas.width = canvas.clientWidth * devicePixelRatio; canvas.height = canvas.clientHeight * devicePixelRatio; const aspect = canvas.width / canvas.height; diff --git a/src/sample/texturedCube/main.ts b/src/sample/texturedCube/main.ts index b3e1827d..22ea658a 100644 --- a/src/sample/texturedCube/main.ts +++ b/src/sample/texturedCube/main.ts @@ -19,7 +19,7 @@ const init: SampleInit = async ({ canvas, pageState }) => { if (!pageState.active) return; const context = canvas.getContext('webgpu') as GPUCanvasContext; - const devicePixelRatio = window.devicePixelRatio || 1; + const devicePixelRatio = window.devicePixelRatio; canvas.width = canvas.clientWidth * devicePixelRatio; canvas.height = canvas.clientHeight * devicePixelRatio; const presentationFormat = navigator.gpu.getPreferredCanvasFormat(); diff --git a/src/sample/twoCubes/main.ts b/src/sample/twoCubes/main.ts index 967748e6..62064a1f 100644 --- a/src/sample/twoCubes/main.ts +++ b/src/sample/twoCubes/main.ts @@ -19,7 +19,7 @@ const init: SampleInit = async ({ canvas, pageState }) => { if (!pageState.active) return; const context = canvas.getContext('webgpu') as GPUCanvasContext; - const devicePixelRatio = window.devicePixelRatio || 1; + const devicePixelRatio = window.devicePixelRatio; canvas.width = canvas.clientWidth * devicePixelRatio; canvas.height = canvas.clientHeight * devicePixelRatio; const presentationFormat = navigator.gpu.getPreferredCanvasFormat(); diff --git a/src/sample/videoUploading/main.ts b/src/sample/videoUploading/main.ts index ee3a1257..8c0f2784 100644 --- a/src/sample/videoUploading/main.ts +++ b/src/sample/videoUploading/main.ts @@ -21,7 +21,7 @@ const init: SampleInit = async ({ canvas, pageState, gui }) => { if (!pageState.active) return; const context = canvas.getContext('webgpu') as GPUCanvasContext; - const devicePixelRatio = window.devicePixelRatio || 1; + const devicePixelRatio = window.devicePixelRatio; canvas.width = canvas.clientWidth * devicePixelRatio; canvas.height = canvas.clientHeight * devicePixelRatio; const presentationFormat = navigator.gpu.getPreferredCanvasFormat(); diff --git a/src/sample/videoUploadingWebCodecs/main.ts b/src/sample/videoUploadingWebCodecs/main.ts index d25f0224..c2098fea 100644 --- a/src/sample/videoUploadingWebCodecs/main.ts +++ b/src/sample/videoUploadingWebCodecs/main.ts @@ -21,7 +21,7 @@ const init: SampleInit = async ({ canvas, pageState, gui }) => { if (!pageState.active) return; const context = canvas.getContext('webgpu') as GPUCanvasContext; - const devicePixelRatio = window.devicePixelRatio || 1; + const devicePixelRatio = window.devicePixelRatio; canvas.width = canvas.clientWidth * devicePixelRatio; canvas.height = canvas.clientHeight * devicePixelRatio; const presentationFormat = navigator.gpu.getPreferredCanvasFormat(); diff --git a/src/sample/worker/main.ts b/src/sample/worker/main.ts index b2e63123..4a2cc95f 100644 --- a/src/sample/worker/main.ts +++ b/src/sample/worker/main.ts @@ -32,7 +32,7 @@ const init: SampleInit = async ({ canvas, pageState }) => { // Anything drawn to the OffscreenCanvas that call returns will automatically be displayed on // the source canvas on the page. const offscreenCanvas = canvas.transferControlToOffscreen(); - const devicePixelRatio = window.devicePixelRatio || 1; + const devicePixelRatio = window.devicePixelRatio; offscreenCanvas.width = canvas.clientWidth * devicePixelRatio; offscreenCanvas.height = canvas.clientHeight * devicePixelRatio;