Merge branch 'main' into feat/std-math-trigo

Author: lursz

apps/typegpu-docs/src/components/ExampleView.tsx

@@ -98,7 +98,7 @@ export function ExampleView({ example }: Props) {
       <div className='flex h-full flex-col gap-4 md:grid md:grid-cols-[1fr_18.75rem]'>
         <div
           className={cs(
-            'grid flex-1 gap-4',
+            'grid flex-1 gap-4 overflow-auto',
             codeEditorShowing ? 'md:grid-rows-[2fr_3fr]' : '',
           )}
         >
@@ -109,13 +109,13 @@ export function ExampleView({ example }: Props) {
                   scrollbarGutter: 'stable both-edges',
                 }}
                 className={cs(
-                  'relative box-border flex h-full flex-col flex-wrap items-center justify-evenly md:flex-row md:gap-4',
+                  'relative box-border flex h-full flex-col flex-wrap items-center justify-evenly gap-4 overflow-auto md:flex-row',
                   codeEditorShowing
                     ? 'md:max-h-[calc(40vh-1.25rem)] md:overflow-auto'
                     : '',
                 )}
               >
-                <div ref={exampleHtmlRef} className='contents h-full w-full' />
+                <div ref={exampleHtmlRef} className='contents' />
               </div>
             )
             : <GPUUnsupportedPanel />}

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

@@ -295,7 +295,7 @@ function render() {
   device.queue.submit([encoder.finish()]);
 }
 
-render();
+setTimeout(() => render(), 100);
 
 // #region Example controls & Cleanup
 

apps/typegpu-docs/src/content/examples/rendering/3d-fish/index.ts

@@ -326,7 +326,7 @@ export const controls = {
   },
 };
 
-// Variables for mouse interaction.
+// Variables for interaction
 
 let isLeftPressed = false;
 let previousMouseX = 0;
@@ -406,6 +406,8 @@ canvas.addEventListener('contextmenu', (event) => {
   event.preventDefault();
 });
 
+// Mouse controls
+
 canvas.addEventListener('mousedown', async (event) => {
   previousMouseX = event.clientX;
   previousMouseY = event.clientY;
@@ -454,6 +456,37 @@ window.addEventListener('mousemove', (event) => {
   }
 });
 
+// Touch controls
+
+canvas.addEventListener('touchstart', async (event) => {
+  if (event.touches.length === 1) {
+    previousMouseX = event.touches[0].clientX;
+    previousMouseY = event.touches[0].clientY;
+    updateMouseRay(event.touches[0].clientX, event.touches[0].clientY);
+    controlsPopup.style.opacity = '0';
+  }
+});
+
+window.addEventListener('touchmove', (event) => {
+  if (event.touches.length === 1) {
+    const dx = event.touches[0].clientX - previousMouseX;
+    const dy = event.touches[0].clientY - previousMouseY;
+    previousMouseX = event.touches[0].clientX;
+    previousMouseY = event.touches[0].clientY;
+
+    updateCameraTarget(dx, dy);
+    updateMouseRay(event.touches[0].clientX, event.touches[0].clientY);
+  }
+});
+
+window.addEventListener('touchend', () => {
+  mouseRayBuffer.writePartial({
+    activated: 0,
+  });
+});
+
+// observer and cleanup
+
 const resizeObserver = new ResizeObserver(() => {
   camera.projection = m.mat4.perspective(
     Math.PI / 4,

apps/typegpu-docs/src/content/examples/rendering/function-visualizer/index.ts

@@ -438,22 +438,19 @@ function queuePropertiesBufferUpdate() {
 }
 
 // Canvas controls
-
 let lastPos: number[] | null = null;
 
-canvas.onmousedown = (event) => {
-  lastPos = [event.offsetX, event.offsetY];
-};
+// Mouse interaction
 
-canvas.onmouseup = (_) => {
-  lastPos = null;
-};
+canvas.addEventListener('mousedown', (event) => {
+  lastPos = [event.clientX, event.clientY];
+});
 
-canvas.onmousemove = (event) => {
+window.addEventListener('mousemove', (event) => {
   if (lastPos === null) {
     return;
   }
-  const currentPos = [event.offsetX, event.offsetY];
+  const currentPos = [event.clientX, event.clientY];
   const translation = [
     (-(currentPos[0] - lastPos[0]) / canvas.width) *
     2.0 *
@@ -470,9 +467,13 @@ canvas.onmousemove = (event) => {
   );
 
   lastPos = currentPos;
-};
+});
 
-canvas.onwheel = (event) => {
+window.addEventListener('mouseup', (_) => {
+  lastPos = null;
+});
+
+canvas.addEventListener('wheel', (event) => {
   event.preventDefault();
 
   const delta = Math.abs(event.deltaY) / 1000.0 + 1;
@@ -483,9 +484,42 @@ canvas.onwheel = (event) => {
     [scale, scale, 1],
     properties.transformation,
   );
-};
+});
+
+// Mouse interaction
+
+canvas.addEventListener('touchstart', (event) => {
+  if (event.touches.length === 1) {
+    lastPos = [event.touches[0].clientX, event.touches[0].clientY];
+  }
+});
+
+window.addEventListener('touchmove', (event) => {
+  if (lastPos === null || event.touches.length !== 1) {
+    return;
+  }
+  const currentPos = [event.touches[0].clientX, event.touches[0].clientY];
+  const s = 2.0 * window.devicePixelRatio;
+  const translation = [
+    ((currentPos[0] - lastPos[0]) / canvas.width) * -s,
+    ((currentPos[1] - lastPos[1]) / canvas.height) * s,
+    0.0,
+  ];
+  mat4.translate(
+    properties.transformation,
+    translation,
+    properties.transformation,
+  );
+
+  lastPos = currentPos;
+});
+
+window.addEventListener('touchend', () => {
+  lastPos = null;
+});
+
+// Resize observer and cleanup
 
-// recreate the multisampled texture on canvas resize
 const resizeObserver = new ResizeObserver(() => {
   msTexture.destroy();
   msTexture = device.createTexture({

apps/typegpu-docs/src/content/examples/simple/triangle/index.ts

@@ -63,6 +63,8 @@ setTimeout(() => {
       storeOp: 'store',
     })
     .draw(3);
+}, 100);
 
+export function onCleanup() {
   root.destroy();
-}, 100);
+}