feat: common.attachAutoResizer

apps/typegpu-docs/src/examples/algorithms/bitonic-sort/index.ts

@@ -1,12 +1,11 @@
-import tgpu, { d, std } from 'typegpu';
+import tgpu, { common, d, std } from 'typegpu';
 import {
   type BitonicSorter,
   type BitonicSorterOptions,
   createBitonicSorter,
   decomposeWorkgroups,
 } from '@typegpu/sort';
 import { randf } from '@typegpu/noise';
-import { fullScreenTriangle } from 'typegpu/common';
 import { defineControls } from '../../common/defineControls.ts';
 
 const maxBufferSize = await navigator.gpu.requestAdapter().then((adapter) => {
@@ -32,8 +31,6 @@ const querySet = hasTimestampQuery ? root.createQuerySet('timestamp', 2) : null;
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
 const context = root.configureContext({ canvas });
 
-const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
-
 const maxSide = Math.floor(Math.sqrt(maxBufferSize / 4));
 const minLog = 2; // log_2(4)
 const maxLog = Math.floor(Math.log2(maxSide));
@@ -75,17 +72,11 @@ const state = {
 const WORKGROUP_SIZE = 256;
 
 const renderLayout = tgpu.bindGroupLayout({
-  data: {
-    storage: d.arrayOf(d.u32),
-    access: 'readonly',
-  },
+  data: { storage: d.arrayOf(d.u32), access: 'readonly' },
 });
 
 const initLayout = tgpu.bindGroupLayout({
-  data: {
-    storage: d.arrayOf(d.u32),
-    access: 'mutable',
-  },
+  data: { storage: d.arrayOf(d.u32), access: 'mutable' },
 });
 
 const initSeed = root.createUniform(d.f32, 0);
@@ -135,9 +126,8 @@ const initKernel = tgpu.computeFn({
 });
 
 const renderPipeline = root.createRenderPipeline({
-  vertex: fullScreenTriangle,
+  vertex: common.fullScreenTriangle,
   fragment: fragmentFn,
-  targets: { format: presentationFormat },
 });
 
 const initPipeline = root.createComputePipeline({ compute: initKernel });
@@ -246,6 +236,14 @@ async function sort() {
   hideOverlay();
 }
 
+const detachAutoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    render();
+  },
+});
+
 // #region Example controls & Cleanup
 
 const sortOrderKeys = Object.keys(sortOrders) as SortOrderKey[];
@@ -275,6 +273,7 @@ export function onCleanup() {
   for (const s of Object.values(sorters)) {
     s.destroy();
   }
+  detachAutoResizer();
   root.destroy();
 }
 

apps/typegpu-docs/src/examples/algorithms/genetic-racing/index.ts

@@ -532,6 +532,11 @@ applyGridSize(...GRID_SIZES[gridSizeKey]);
 applyTrack(generateGridTrack(trackSeed, ...GRID_SIZES[gridSizeKey]));
 startSimulation();
 
+const detachAutoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+});
+
 // #region Example controls & Cleanup
 
 export const controls = defineControls({
@@ -605,6 +610,7 @@ export const controls = defineControls({
 
 export function onCleanup() {
   cancelAnimationFrame(rafHandle);
+  detachAutoResizer();
   root.destroy();
 }
 

apps/typegpu-docs/src/examples/algorithms/jump-flood-distance/index.ts

@@ -342,8 +342,6 @@ function recreateResources() {
   sourceIdx = 0;
 }
 
-clearCanvas();
-
 function getTouchPosition(rect: DOMRect, touches: TouchList) {
   if (touches.length === 2) {
     return {
@@ -357,17 +355,16 @@ function getTouchPosition(rect: DOMRect, touches: TouchList) {
   };
 }
 
-// #region Example controls & Cleanup
-
-let resizeTimeout: ReturnType<typeof setTimeout>;
-const resizeObserver = new ResizeObserver(() => {
-  clearTimeout(resizeTimeout);
-  resizeTimeout = setTimeout(() => {
+const detachAutoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
     recreateResources();
     clearCanvas();
-  }, 100);
+  },
 });
-resizeObserver.observe(canvas);
+
+// #region Example controls & Cleanup
 
 const onMouseDown = (e: MouseEvent) => {
   if (e.button !== 0 && e.button !== 2) {
@@ -475,8 +472,7 @@ export const controls = defineControls({
 });
 
 export function onCleanup() {
-  clearTimeout(resizeTimeout);
-  resizeObserver.disconnect();
+  detachAutoResizer();
   root.destroy();
 }
 

apps/typegpu-docs/src/examples/algorithms/jump-flood-voronoi/index.ts

@@ -239,19 +239,16 @@ function reset() {
   void runFloodAnimated(currentRunId);
 }
 
-reset();
-
-// #region Example controls & Cleanup
-
-let resizeTimeout: ReturnType<typeof setTimeout>;
-const resizeObserver = new ResizeObserver(() => {
-  clearTimeout(resizeTimeout);
-  resizeTimeout = setTimeout(() => {
+const detachAutoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
     recreateResources();
     reset();
-  }, 100);
+  },
 });
-resizeObserver.observe(canvas);
+
+// #region Example controls & Cleanup
 
 export const controls = defineControls({
   'Run Algorithm': {
@@ -295,8 +292,7 @@ export const controls = defineControls({
 });
 
 export function onCleanup() {
-  clearTimeout(resizeTimeout);
-  resizeObserver.disconnect();
+  detachAutoResizer();
   root.destroy();
 }
 

apps/typegpu-docs/src/examples/geometry/circles/index.ts

@@ -1,5 +1,5 @@
 import { circle, circleVertexCount } from '@typegpu/geometry';
-import tgpu, { d, std as s } from 'typegpu';
+import tgpu, { common, d, std as s } from 'typegpu';
 
 const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
 const canvas = document.querySelector('canvas');
@@ -128,29 +128,34 @@ const pipeline = root.createRenderPipeline({
   multisample: { count: multisample ? 4 : 1 },
 });
 
-setTimeout(() => {
-  pipeline
-    .with(uniformsBindGroup)
-    .withColorAttachment({
-      ...(multisample
-        ? {
-            view: msaaTextureView,
-            resolveTarget: context,
-          }
-        : { view: context }),
-      clearValue: [0, 0, 0, 0],
-      loadOp: 'clear',
-      storeOp: 'store',
-    })
-    .withPerformanceCallback((a, b) => {
-      console.log((Number(b - a) * 1e-6).toFixed(3), 'ms');
-    })
-    .draw(circleVertexCount(4), circleCount);
-}, 100);
+const detachAutoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    pipeline
+      .with(uniformsBindGroup)
+      .withColorAttachment({
+        ...(multisample
+          ? {
+              view: msaaTextureView,
+              resolveTarget: context,
+            }
+          : { view: context }),
+        clearValue: [0, 0, 0, 0],
+        loadOp: 'clear',
+        storeOp: 'store',
+      })
+      .withPerformanceCallback((a, b) => {
+        console.log((Number(b - a) * 1e-6).toFixed(3), 'ms');
+      })
+      .draw(circleVertexCount(4), circleCount);
+  },
+});
 
 // #region Example controls & Cleanup
 
 export function onCleanup() {
+  detachAutoResizer();
   root.destroy();
 }
 

apps/typegpu-docs/src/examples/geometry/lines-combinations/index.ts

@@ -9,7 +9,7 @@ import {
   lineSegmentWireframeIndices,
   startCapSlot,
 } from '@typegpu/geometry';
-import tgpu, { type ColorAttachment } from 'typegpu';
+import tgpu, { common, type ColorAttachment } from 'typegpu';
 import {
   arrayOf,
   builtin,
@@ -406,6 +406,8 @@ const runAnimationFrame = (timeMs: number) => {
 };
 runAnimationFrame(0);
 
+const detachAutoResizer = common.attachAutoResizer({ root, canvas });
+
 const fillOptions = {
   none: 0,
   solid: 1,
@@ -502,6 +504,7 @@ export const controls = defineControls({
 });
 
 export function onCleanup() {
+  detachAutoResizer();
   root.destroy();
   cancelAnimationFrame(frameId);
 }

apps/typegpu-docs/src/examples/image-processing/ascii-filter/index.ts

@@ -241,6 +241,11 @@ if (isIOS) {
 
 videoFrameCallbackId = video.requestVideoFrameCallback(processVideoFrame);
 
+const detachAutoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+});
+
 export const controls = defineControls({
   'use extended characters': {
     initial: false,
@@ -279,5 +284,6 @@ export function onCleanup() {
     }
   }
 
+  detachAutoResizer();
   root.destroy();
 }

apps/typegpu-docs/src/examples/image-processing/background-segmentation/index.ts

@@ -295,6 +295,11 @@ async function processVideoFrame(_: number, metadata: VideoFrameCallbackMetadata
 }
 videoFrameCallbackId = video.requestVideoFrameCallback(processVideoFrame);
 
+const detachAutoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+});
+
 // #region Example controls & Cleanup
 
 export const controls = defineControls({
@@ -355,6 +360,7 @@ export function onCleanup() {
     adapter.requestDevice = oldRequestDevice;
   }
 
+  detachAutoResizer();
   root.destroy();
 }
 

apps/typegpu-docs/src/examples/image-processing/blur/index.ts

@@ -171,7 +171,13 @@ function render() {
 
   renderPipeline.withColorAttachment({ view: context }).draw(3);
 }
-render();
+const detachAutoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    render();
+  },
+});
 
 // #region Example controls & Cleanup
 
@@ -200,6 +206,7 @@ export const controls = defineControls({
 });
 
 export function onCleanup() {
+  detachAutoResizer();
   root.destroy();
 }
 

apps/typegpu-docs/src/examples/image-processing/camera-thresholding/index.ts

@@ -133,6 +133,11 @@ function processVideoFrame(_: number, metadata: VideoFrameCallbackMetadata) {
 }
 videoFrameCallbackId = video.requestVideoFrameCallback(processVideoFrame);
 
+const detachAutoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+});
+
 // #region Example controls & Cleanup
 
 export const controls = defineControls({
@@ -160,6 +165,7 @@ export function onCleanup() {
       track.stop();
     }
   }
+  detachAutoResizer();
   root.destroy();
 }
 

apps/typegpu-docs/src/examples/image-processing/chroma-keying/index.ts

@@ -125,6 +125,11 @@ function processVideoFrame(_: number, metadata: VideoFrameCallbackMetadata) {
 
 videoFrameCallbackId = video.requestVideoFrameCallback(processVideoFrame);
 
+const detachAutoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+});
+
 // #region Example controls & Cleanup
 
 export const controls = defineControls({
@@ -152,6 +157,7 @@ export function onCleanup() {
       track.stop();
     }
   }
+  detachAutoResizer();
   root.destroy();
 }
 

apps/typegpu-docs/src/examples/image-processing/image-tuning/index.ts

@@ -343,10 +343,17 @@ export const controls = defineControls({
   },
 });
 
+const detachAutoResizer = common.attachAutoResizer({
+  root,
+  canvas,
+  onResize() {
+    render();
+  },
+});
+
 export function onCleanup() {
+  detachAutoResizer();
   root.destroy();
 }
 
 // #endregion
-
-render();